From f47bf7dda9fa09def405a7b02f905d3279dc4226 Mon Sep 17 00:00:00 2001 From: Sam Rose Date: Fri, 11 Feb 2022 11:25:07 -0700 Subject: [PATCH 1/2] Update Navigation spacing and stories to match main --- src/components/Navigation/Navigation.scss | 4 +- src/components/Navigation/README.md | 186 ++++++++++++++++++---- src/components/Navigation/_variables.scss | 20 +-- 3 files changed, 166 insertions(+), 44 deletions(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 57ec00c2bae..4d0a3f4cbf7 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -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); } } @@ -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); diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md index 70ae876c5bb..8aa2e70d258 100644 --- a/src/components/Navigation/README.md +++ b/src/components/Navigation/README.md @@ -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, }, ]} /> @@ -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 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 + + + @@ -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={{ @@ -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', @@ -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, }, ]} /> @@ -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={{ @@ -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, }, ]} /> @@ -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 @@ -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', @@ -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', @@ -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: [ { @@ -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={{ @@ -502,21 +581,24 @@ 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', label: 'Icon as img', + shouldResizeIcon: true, icon: '', }, { url: '/', label: 'Icon as img – Active', + shouldResizeIcon: true, icon: '', }, { url: '/path/to/place', label: 'Other secondary action', + shouldResizeIcon: true, icon: '', secondaryAction: { url: '/path/to/place/view', @@ -546,23 +628,63 @@ This example shows how to add an aria-labelledby to add a hidden label to the `n

Hidden label

 + + + +``` + +### Navigation using Major icons + +This example shows how to use the shouldResizeIcon prop when using Major icons + +```jsx + + diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 9581dddfca9..a78e8545602 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -63,7 +63,7 @@ $nav-animation-variables: ( @include breakpoint-after(nav-min-window-corrected()) { font-size: $item-font-size; - font-weight: var(--p-font-weight-semibold); + font-weight: var(--p-font-weight-medium); line-height: $item-line-height-small; padding-left: var(--p-space-3); } @@ -109,13 +109,13 @@ $nav-animation-variables: ( align-self: flex-start; width: nav(icon-size); height: nav(icon-size); - margin-top: nav(mobile-spacing); - margin-right: var(--p-space-4); - margin-bottom: nav(mobile-spacing); + margin-top: calc(var(--p-space-2) + var(--p-space-05)); + margin-right: var(--p-space-3); + margin-bottom: calc(var(--p-space-2) + var(--p-space-05)); @include breakpoint-after(nav-min-window-corrected()) { - margin-top: nav(desktop-spacing); + margin-top: var(--p-space-1); margin-right: var(--p-space-2); - margin-bottom: nav(desktop-spacing); + margin-bottom: var(--p-space-1); } .Item:hover &, @@ -164,14 +164,14 @@ $nav-animation-variables: ( @mixin nav-item-text-attributes { flex: 1 1 auto; - margin-top: nav(mobile-spacing); - margin-bottom: nav(mobile-spacing); + margin-top: calc(var(--p-space-2) + var(--p-space-05)); + margin-bottom: calc(var(--p-space-2) + var(--p-space-05)); line-height: $text-line-height; font-size: $item-font-size-small; @include breakpoint-after(nav-min-window-corrected()) { - margin-top: nav(desktop-spacing); - margin-bottom: nav(desktop-spacing); + margin-top: var(--p-space-1); + margin-bottom: var(--p-space-1); } @include breakpoint-before(nav-min-window-corrected()) { From 6aa02bf0b79a1d3d78a34cb33f0e7895f8f3dd31 Mon Sep 17 00:00:00 2001 From: Sam Rose Date: Fri, 11 Feb 2022 11:49:15 -0700 Subject: [PATCH 2/2] Remove shouldResizeIcon from Navigation stories --- src/components/Navigation/README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md index 8aa2e70d258..d0f69431171 100644 --- a/src/components/Navigation/README.md +++ b/src/components/Navigation/README.md @@ -586,19 +586,16 @@ This example showcases the many elements that can compose a navigation, especial { url: '/path/to/place', label: 'Icon as img', - shouldResizeIcon: true, icon: '', }, { url: '/', label: 'Icon as img – Active', - shouldResizeIcon: true, icon: '', }, { url: '/path/to/place', label: 'Other secondary action', - shouldResizeIcon: true, icon: '', secondaryAction: { url: '/path/to/place/view', @@ -665,26 +662,22 @@ This example shows how to use the shouldResizeIcon prop when using Major icons url: '/path/to/place', label: 'Home', icon: HomeMajor, - shouldResizeIcon: true, }, { url: '/path/to/place', label: 'Orders', icon: OrdersMajor, badge: '15', - shouldResizeIcon: true, }, { url: '/path/to/place', label: 'Products', icon: ProductsMajor, - shouldResizeIcon: true, }, { url: '/path/to/place', label: 'Customers', icon: CustomersMajor, - shouldResizeIcon: true, }, ]} />