From 11527c29358274f55b49c4b184ea5f716179eb7d Mon Sep 17 00:00:00 2001 From: Raman Lally Date: Thu, 19 Jan 2023 19:31:55 +0000 Subject: [PATCH 1/3] Created examples code for truncation and added prop definition --- .../content/components/navigation.md | 4 + ...ion-with-truncation-for-various-states.tsx | 109 ++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx diff --git a/polaris.shopify.com/content/components/navigation.md b/polaris.shopify.com/content/components/navigation.md index d5c9e12edc0..d90a409cc38 100644 --- a/polaris.shopify.com/content/components/navigation.md +++ b/polaris.shopify.com/content/components/navigation.md @@ -36,6 +36,9 @@ examples: - fileName: navigation-with-various-states-and-secondary-elements.tsx title: With various states and secondary elements description: This example showcases the many elements that can compose a navigation, especially useful for testing purposes. + - fileName: navigation-with-truncation-for-various-states.tsx + title: With truncation active for various states + description: This example showcases how elements are displayed with the truncateTest prop as true for various states. - fileName: navigation-with-aria-labelledby.tsx title: With aria-labelledby description: This example shows how to add an aria-labelledby to add a hidden label to the `nav` element. @@ -153,6 +156,7 @@ The content of the navigation component consists of navigation items. Each item | subNavigationItems | [SubNavigationItem[]](#sub-navigation-item) | A collection of navigation items rendered as nested secondary navigation items | | secondaryAction | [SecondaryAction](#secondary-action) | Renders an icon-only action as a supplementary action next to a navigation item | | onClick() | function | A callback function to handle clicking on a navigation item | +| truncateText | boolean | A boolean property to allow text that exceeds the width of the navigation item to be truncated with ellipsis | ### SubNavigationItem diff --git a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx new file mode 100644 index 00000000000..8fb5b2d009d --- /dev/null +++ b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx @@ -0,0 +1,109 @@ +import {Frame, Navigation} from '@shopify/polaris'; +import { + HomeMinor, + OrdersMinor, + CirclePlusOutlineMinor, + ProductsMinor, + MarketingMinor, +} from '@shopify/polaris-icons'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function NavigationExample() { + return ( + + + + + + ); +} + +export default withPolarisExample(NavigationExample); From d364729db2035cdd59623fd92a9a060cdd3a98d0 Mon Sep 17 00:00:00 2001 From: Raman Lally Date: Thu, 19 Jan 2023 20:39:48 +0000 Subject: [PATCH 2/3] created example for multiple secondary actions and prop updates --- .../content/components/navigation.md | 45 +++--- ...gation-with-multiple-secondary-actions.tsx | 153 ++++++++++++++++++ ...ion-with-truncation-for-various-states.tsx | 6 +- ...-various-states-and-secondary-elements.tsx | 1 - 4 files changed, 181 insertions(+), 24 deletions(-) create mode 100644 polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx diff --git a/polaris.shopify.com/content/components/navigation.md b/polaris.shopify.com/content/components/navigation.md index d90a409cc38..2cd125d8f0e 100644 --- a/polaris.shopify.com/content/components/navigation.md +++ b/polaris.shopify.com/content/components/navigation.md @@ -27,6 +27,9 @@ examples: - fileName: navigation-with-a-secondary-action-for-an-item.tsx title: With a secondary action for an item description: Use to add a different action for an item than the main action, like to view or add something. + - fileName: navigation-with-multiple-secondary-actions.tsx + title: With multiple secondary actions + description: Used to add one or two secondary actions to the navigation item. - fileName: navigation-with-section-rollup.tsx title: With section rollup description: Use to show a limited number of items in a section with an option to expand the remaining items. @@ -38,7 +41,7 @@ examples: description: This example showcases the many elements that can compose a navigation, especially useful for testing purposes. - fileName: navigation-with-truncation-for-various-states.tsx title: With truncation active for various states - description: This example showcases how elements are displayed with the truncateTest prop as true for various states. + description: This example showcases how elements are displayed with the truncateText prop as true for various states. - fileName: navigation-with-aria-labelledby.tsx title: With aria-labelledby description: This example shows how to add an aria-labelledby to add a hidden label to the `nav` element. @@ -138,25 +141,27 @@ The content of the navigation component consists of navigation items. Each item #### Item properties -| Prop | Type | Description | -| ------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| url | string | A location for the navigation item to navigate to when clicked | -| matches | boolean | A boolean property indicating whether the navigation item should respond to a closely matching location property | -| exactMatch | boolean | A boolean property indicating whether the navigation item should respond to an exactly matching location property | -| matchPaths | string[] | A string property providing a collection of additional paths for the navigation item to respond to | -| excludePaths | string[] | A string property providing an explicit collection of paths the navigation item should not respond to | -| icon | IconProps['source'] | An icon to be displayed next to the navigation. Please prefer minor icons here. If a major icon has to be used, set the `shouldResizeIcon` prop to true | -| badge | string \| null | A string property allowing content to be displayed in a badge next to the navigation item | -| label | string | A string property allowing content to be displayed as link text in the navigation item | -| disabled | boolean | A boolean property indicating whether the navigation item is disabled | -| new | boolean | Indicate whether the navigation item is new by adding an indicator dot to the parent and badge to the item (overwritten by the badge prop) | -| accessibilityLabel | string | A visually hidden label for screen readers to understand the content of a navigation item | -| selected | boolean | A boolean property indicating whether the navigation item is the currently-selected item | -| shouldResizeIcon | boolean | Will allow for major icons to be displayed at the same size as minor icons | -| subNavigationItems | [SubNavigationItem[]](#sub-navigation-item) | A collection of navigation items rendered as nested secondary navigation items | -| secondaryAction | [SecondaryAction](#secondary-action) | Renders an icon-only action as a supplementary action next to a navigation item | -| onClick() | function | A callback function to handle clicking on a navigation item | -| truncateText | boolean | A boolean property to allow text that exceeds the width of the navigation item to be truncated with ellipsis | +| Prop | Type | Description | +| --------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| url | string | A location for the navigation item to navigate to when clicked | +| matches | boolean | A boolean property indicating whether the navigation item should respond to a closely matching location property | +| exactMatch | boolean | A boolean property indicating whether the navigation item should respond to an exactly matching location property | +| matchPaths | string[] | A string property providing a collection of additional paths for the navigation item to respond to | +| excludePaths | string[] | A string property providing an explicit collection of paths the navigation item should not respond to | +| icon | IconProps['source'] | An icon to be displayed next to the navigation. Please prefer minor icons here. If a major icon has to be used, set the `shouldResizeIcon` prop to true | +| badge | string \| null | A string property allowing content to be displayed in a badge next to the navigation item | +| label | string | A string property allowing content to be displayed as link text in the navigation item | +| disabled | boolean | A boolean property indicating whether the navigation item is disabled | +| new | boolean | Indicate whether the navigation item is new by adding an indicator dot to the parent and badge to the item (overwritten by the badge prop) | +| accessibilityLabel | string | A visually hidden label for screen readers to understand the content of a navigation item | +| selected | boolean | A boolean property indicating whether the navigation item is the currently-selected item | +| shouldResizeIcon | boolean | Will allow for major icons to be displayed at the same size as minor icons | +| subNavigationItems | [SubNavigationItem[]](#sub-navigation-item) | A collection of navigation items rendered as nested secondary navigation items | +| secondaryAction | [SecondaryAction](#secondary-action) | Renders an icon-only action as a supplementary action next to a navigation item | +| secondaryActions | [SecondaryAction[]](#secondary-action) | Renders one or two icon-only actions as supplementary actions next to a navigation item | +| onClick() | function | A callback function to handle clicking on a navigation item | +| truncateText | boolean | A boolean property to allow text that exceeds the width of the navigation item to be truncated with ellipsis | +| displayActionsOnHover | boolean | A boolean to only display secondary actions when being the nabigation item is hovered (Only on desktop) | ### SubNavigationItem diff --git a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx b/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx new file mode 100644 index 00000000000..abcf45bbfc8 --- /dev/null +++ b/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx @@ -0,0 +1,153 @@ +import {Frame, Navigation} from '@shopify/polaris'; +import { + HomeMinor, + CirclePlusOutlineMinor, + ProductsMinor, + MarketingMinor, + CircleMinusOutlineMinor, + PlusMinor, + ViewMinor, + LogOutMinor +} from '@shopify/polaris-icons'; +import React from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function NavigationExample() { + return ( + + + {}, + tooltip: { + content: 'Remove a product', + }, + }, + ], + }, + { + url: '/path/to/place', + label: 'Long truncated single-line text label', + icon: PlusMinor, + truncateText: true, + secondaryActions: [ + { + url: '/admin/products/add', + accessibilityLabel: 'Add a product', + icon: CirclePlusOutlineMinor, + tooltip: { + content: 'Add a product', + }, + }, + { + accessibilityLabel: 'Remove a product', + icon: CircleMinusOutlineMinor, + onClick: () => { + console.log('woah you clicked it'); + }, + tooltip: { + content: 'Remove a product', + }, + }, + ], + }, + { + url: '/path/to/place', + label: 'Floating actions on multi-line text label', + icon: PlusMinor, + badge: '15', + selected: true, + displayActionsOnHover: true, + secondaryActions: [ + { + url: '/admin/products/add', + accessibilityLabel: 'Add a product', + icon: CirclePlusOutlineMinor, + tooltip: { + content: 'Add a product', + }, + }, + ], + }, + { + url: '/path/to/place', + label: 'Floating actions on truncated single-line text label', + icon: PlusMinor, + truncateText: true, + displayActionsOnHover: true, + secondaryActions: [ + { + url: '/admin/products/add', + accessibilityLabel: 'Add a product', + icon: CirclePlusOutlineMinor, + tooltip: { + content: 'Add a product', + }, + }, + { + url: '', + accessibilityLabel: 'Remove a product', + icon: CircleMinusOutlineMinor, + onClick: () => {}, + tooltip: { + content: 'Remove a product', + }, + }, + ], + }, + { + url: '/path/to/place', + label: 'One floating action on multi-line text label', + icon: MarketingMinor, + displayActionsOnHover: true, + secondaryActions: [ + { + url: '/admin/products/add', + accessibilityLabel: 'Add a product', + icon: CirclePlusOutlineMinor, + tooltip: { + content: 'Add a product', + }, + }, + ], + }, + ]} + /> + + + ); +} + +export default withPolarisExample(NavigationExample); diff --git a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx index 8fb5b2d009d..129ae6fc285 100644 --- a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx +++ b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx @@ -17,7 +17,7 @@ function NavigationExample() { items={[ { url: '/path/to/place', - label: 'Label long enough to ellipsize', + label: 'Label long enough to ellipsize most likely', truncateText: true, icon: OrdersMinor, selected: false, @@ -82,7 +82,7 @@ function NavigationExample() { }, { url: '/admin/products', - label: 'Truncated secondary navigation items', + label: 'Truncated secondary navigation item on truncated label', icon: ProductsMinor, selected: true, truncateText: true, @@ -90,7 +90,7 @@ function NavigationExample() { { url: '/admin/products/collections', disabled: false, - label: 'Something longer than Inventory', + label: 'Something longer than inventory so it can be truncated', }, { url: '/admin/products/inventory', diff --git a/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx b/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx index e3c16a1eeb5..94d913de983 100644 --- a/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx +++ b/polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx @@ -77,7 +77,6 @@ function NavigationExample() { { url: '/admin/products', disabled: false, - selected: true, label: 'Selected sub item', }, { From 4401dc60c640734042de3f3e369a8fcdb9aca6fe Mon Sep 17 00:00:00 2001 From: Raman Lally Date: Thu, 19 Jan 2023 20:41:57 +0000 Subject: [PATCH 3/3] created changeset --- .changeset/famous-seas-brush.md | 5 + ...gation-with-multiple-secondary-actions.tsx | 103 ++---------------- ...ion-with-truncation-for-various-states.tsx | 49 +-------- 3 files changed, 20 insertions(+), 137 deletions(-) create mode 100644 .changeset/famous-seas-brush.md diff --git a/.changeset/famous-seas-brush.md b/.changeset/famous-seas-brush.md new file mode 100644 index 00000000000..d0524927667 --- /dev/null +++ b/.changeset/famous-seas-brush.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Adding examples for truncateText and multiple secondary actions and updating props on the documentation site diff --git a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx b/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx index abcf45bbfc8..b5941883dd1 100644 --- a/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx +++ b/polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx @@ -3,11 +3,8 @@ import { HomeMinor, CirclePlusOutlineMinor, ProductsMinor, - MarketingMinor, CircleMinusOutlineMinor, - PlusMinor, - ViewMinor, - LogOutMinor + OrdersMinor, } from '@shopify/polaris-icons'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -20,93 +17,30 @@ function NavigationExample() { items={[ { url: '/path/to/place', - label: 'Products', - icon: ProductsMinor, - badge: '2', - secondaryActions: [ - { - url: '/admin/products/add', - accessibilityLabel: 'Add a product', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a product', - }, - }, - ], - }, - { - url: '/path/to/place', - label: 'Long multi-line label', - icon: PlusMinor, - secondaryActions: [ - { - url: '/admin/products/add', - accessibilityLabel: 'Add a product', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a product', - }, - }, - { - accessibilityLabel: 'Remove a product', - icon: CircleMinusOutlineMinor, - onClick: () => {}, - tooltip: { - content: 'Remove a product', - }, - }, - ], - }, - { - url: '/path/to/place', - label: 'Long truncated single-line text label', - icon: PlusMinor, - truncateText: true, - secondaryActions: [ - { - url: '/admin/products/add', - accessibilityLabel: 'Add a product', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a product', - }, - }, - { - accessibilityLabel: 'Remove a product', - icon: CircleMinusOutlineMinor, - onClick: () => { - console.log('woah you clicked it'); - }, - tooltip: { - content: 'Remove a product', - }, - }, - ], + label: 'Home', + icon: HomeMinor, + selected: false, }, { url: '/path/to/place', - label: 'Floating actions on multi-line text label', - icon: PlusMinor, - badge: '15', - selected: true, - displayActionsOnHover: true, + label: 'Orders', + icon: OrdersMinor, + badge: '2', secondaryActions: [ { url: '/admin/products/add', accessibilityLabel: 'Add a product', icon: CirclePlusOutlineMinor, tooltip: { - content: 'Add a product', + content: 'Create new order', }, }, ], }, { url: '/path/to/place', - label: 'Floating actions on truncated single-line text label', - icon: PlusMinor, - truncateText: true, - displayActionsOnHover: true, + label: 'Products', + icon: ProductsMinor, secondaryActions: [ { url: '/admin/products/add', @@ -117,7 +51,6 @@ function NavigationExample() { }, }, { - url: '', accessibilityLabel: 'Remove a product', icon: CircleMinusOutlineMinor, onClick: () => {}, @@ -127,22 +60,6 @@ function NavigationExample() { }, ], }, - { - url: '/path/to/place', - label: 'One floating action on multi-line text label', - icon: MarketingMinor, - displayActionsOnHover: true, - secondaryActions: [ - { - url: '/admin/products/add', - accessibilityLabel: 'Add a product', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a product', - }, - }, - ], - }, ]} /> diff --git a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx index 129ae6fc285..04ee4a39a74 100644 --- a/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx +++ b/polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx @@ -17,31 +17,15 @@ function NavigationExample() { items={[ { url: '/path/to/place', - label: 'Label long enough to ellipsize most likely', + label: 'One Stop Ramen Order Application Premium', truncateText: true, - icon: OrdersMinor, - selected: false, - }, - { - url: '/path/to/place', - label: 'Not truncated', - icon: OrdersMinor, + icon: MarketingMinor, selected: false, }, { url: '/path/to/place', - label: 'Lengthy label with secondary action', - icon: MarketingMinor, - selected: false, - truncateText: true, - secondaryAction: { - url: '/admin/orders/add', - accessibilityLabel: 'Add a ramen to your order', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a ramen to your order', - }, - }, + label: 'Products', + icon: ProductsMinor, }, { url: '/path/to/place', @@ -53,30 +37,7 @@ function NavigationExample() { accessibilityLabel: 'Add an order', icon: CirclePlusOutlineMinor, tooltip: { - content: 'Add a lengthy order', - }, - }, - }, - { - url: '/path/to/place', - label: 'Old lengthy label that is badged', - truncateText: true, - badge: 'Old', - icon: HomeMinor, - }, - { - url: '/path/to/place', - label: 'Badged with an action while being lengthy', - icon: OrdersMinor, - selected: false, - truncateText: true, - badge: 'Old', - secondaryAction: { - url: '/admin/orders/add', - accessibilityLabel: 'Add a hug if possible', - icon: CirclePlusOutlineMinor, - tooltip: { - content: 'Add a hug if possible', + content: 'Add a garlic ramen to your order', }, }, },