Skip to content

Navigation design update #5161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 11, 2022
Merged

Navigation design update #5161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f47bf7d
Update Navigation spacing and stories to match main
sam-b-rose Feb 11, 2022
6aa02bf
Remove shouldResizeIcon from Navigation stories
sam-b-rose Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Navigation/Navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ $secondary-item-font-size: 15px;
@include breakpoint-after(nav-min-window-corrected()) {
font-size: $item-font-size-small;
line-height: 1;
padding-left: calc(nav(icon-size) + var(--p-space-5));
padding-left: var(--p-space-10);
}
}

Expand Down Expand Up @@ -356,7 +356,7 @@ $secondary-item-font-size: 15px;
display: flex;
align-items: center;
min-height: nav(desktop-nav-height);
padding-left: cacl(var(--p-space-5) + var(--p-space-05));
padding-left: calc(var(--p-space-5) + var(--p-space-05));

.Text {
font-size: var(--p-font-size-2);
Expand Down
179 changes: 147 additions & 32 deletions src/components/Navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,18 +177,18 @@ Use to present a navigation menu in the [frame](https://polaris.shopify.com/comp
{
url: '/',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
badge: '15',
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
},
]}
/>
Expand All @@ -208,25 +208,104 @@ Use to present a secondary action, related to a section and to title the section
{
url: '/path/to/place',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
badge: '15',
subNavigationItems: [
{
url: '/admin/orders/collections',
disabled: false,
selected: false,
label: 'Collections',
},
{
url: '/admin/orders/inventory',
disabled: false,
label: 'Inventory',
},
],
},
{
url: '/path/to/place',
label: 'Marketing',
icon: MarketingMinor,
badge: '15',
subNavigationItems: [
{
url: '/admin/analytics/collections',
disabled: false,
selected: false,
label: 'Reports',
},
{
url: '/admin/analytics/inventory',
disabled: false,
label: 'Live view',
},
],
},
{
url: '/admin/products',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
selected: true,
subNavigationItems: [
{
url: '/admin/products',
url: '/?path=/story/all-components-navigation--navigation-with-multiple-secondary-navigations',
disabled: false,
selected: false,
label: 'Collections',
},
{
url: '/admin/products/inventory',
disabled: false,
selected: true,
label: 'All products',
label: 'Inventory',
},
],
},
]}
/>
</Navigation>
</Frame>
```

### Navigation with an active root item with secondary navigation items

Use to present a secondary action, related to a section and to title the section.

```jsx
<Frame>
<Navigation location="/">
<Navigation.Section
duplicateRootItem
items={[
{
url: '/path/to/place',
label: 'Home',
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMinor,
badge: '15',
},
{
url: '/admin/products',
label: 'Products',
icon: ProductsMinor,
selected: true,
subNavigationItems: [
{
url: '/admin/products/collections',
disabled: false,
selected: false,
label: 'Collections',
},
{
url: '/admin/products/inventory',
Expand All @@ -253,17 +332,17 @@ Use to present a secondary action, related to a section and to title the section
{
url: '/path/to/place',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
},
]}
/>
Expand All @@ -273,7 +352,7 @@ Use to present a secondary action, related to a section and to title the section
{
url: '/path/to/place',
label: 'Online Store',
icon: OnlineStoreMajor,
icon: OnlineStoreMinor,
},
]}
action={{
Expand All @@ -298,12 +377,12 @@ Use to add a different action for an item than the main action, like to view or
{
url: '/path/to/place',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
secondaryAction: {
url: '/admin/orders/add',
accessibilityLabel: 'Add an order',
Expand All @@ -313,7 +392,7 @@ Use to add a different action for an item than the main action, like to view or
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
},
]}
/>
Expand All @@ -333,17 +412,17 @@ Use to show a limited number of items in a section with an option to expand the
{
url: '/path/to/place',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
},
]}
rollup={{
Expand All @@ -369,17 +448,17 @@ Use to add a horizontal line below the section.
{
url: '/path/to/place',
label: 'Home',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMajor,
icon: OrdersMinor,
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMajor,
icon: ProductsMinor,
},
]}
/>
Expand All @@ -388,7 +467,7 @@ Use to add a horizontal line below the section.
{
url: '/path/to/place',
label: 'Online Store',
icon: OnlineStoreMajor,
icon: OnlineStoreMinor,
},
]}
separator
Expand All @@ -409,12 +488,12 @@ This example showcases the many elements that can compose a navigation, especial
{
url: '/path/to/place',
label: 'Inactive item',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Item with indicator',
icon: HomeMajor,
icon: HomeMinor,
subNavigationItems: [
{
url: '/path/to/place/index',
Expand All @@ -427,25 +506,25 @@ This example showcases the many elements that can compose a navigation, especial
{
url: '/path/to/place',
label: 'External link item',
icon: HomeMajor,
icon: HomeMinor,
external: true,
},
{
url: '/path/to/place',
label: 'New item',
new: true,
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Badged item',
badge: 'Old',
icon: HomeMajor,
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Active with secondary action',
icon: OrdersMajor,
icon: OrdersMinor,
selected: true,
secondaryAction: {
url: '/admin/orders/add',
Expand All @@ -456,7 +535,7 @@ This example showcases the many elements that can compose a navigation, especial
{
url: '/admin/products',
label: 'Active item with sub navigation',
icon: ProductsMajor,
icon: ProductsMinor,
selected: true,
subNavigationItems: [
{
Expand All @@ -480,13 +559,13 @@ This example showcases the many elements that can compose a navigation, especial
{
url: '/path/to/place',
label: 'Disabled item',
icon: CustomersMajor,
icon: CustomersMinor,
disabled: true,
},
{
url: '/path/to/place',
label: 'Overflow item',
icon: MarketingMajor,
icon: MarketingMinor,
},
]}
rollup={{
Expand All @@ -502,7 +581,7 @@ This example showcases the many elements that can compose a navigation, especial
{
url: '/path/to/place',
label: 'Icon as svg',
icon: OnlineStoreMajor,
icon: OnlineStoreMinor,
},
{
url: '/path/to/place',
Expand Down Expand Up @@ -546,6 +625,37 @@ This example shows how to add an aria-labelledby to add a hidden label to the `n
<VisuallyHidden>
<p id="label-id">Hidden label</p>
</VisuallyHidden>
<Navigation.Section
items={[
{
url: '/path/to/place',
label: 'Home',
icon: HomeMinor,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMinor,
badge: '15',
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMinor,
},
]}
/>
</Navigation>
</Frame>
```

### Navigation using Major icons

This example shows how to use the shouldResizeIcon prop when using Major icons

```jsx
<Frame>
<Navigation location="/">
<Navigation.Section
items={[
{
Expand All @@ -564,6 +674,11 @@ This example shows how to add an aria-labelledby to add a hidden label to the `n
label: 'Products',
icon: ProductsMajor,
},
{
url: '/path/to/place',
label: 'Customers',
icon: CustomersMajor,
},
]}
/>
</Navigation>
Expand Down
Loading