Skip to content

Created examples code for truncation and added prop definition #8107

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 3 commits into from
Jan 23, 2023
Merged

Created examples code for truncation and added prop definition #8107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11527c2
Created examples code for truncation and added prop definition
Rmnlly Jan 19, 2023
d364729
created example for multiple secondary actions and prop updates
Rmnlly Jan 19, 2023
4401dc6
created changeset
Rmnlly Jan 19, 2023
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
5 changes: 5 additions & 0 deletions .changeset/famous-seas-brush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': patch
---

Adding examples for truncateText and multiple secondary actions and updating props on the documentation site
45 changes: 27 additions & 18 deletions polaris.shopify.com/content/components/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -36,6 +39,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 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.
Expand Down Expand Up @@ -135,24 +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 |
| 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

Expand Down
70 changes: 70 additions & 0 deletions polaris.shopify.com/pages/examples/navigation-with-multiple-secondary-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import {Frame, Navigation} from '@shopify/polaris';
import {
HomeMinor,
CirclePlusOutlineMinor,
ProductsMinor,
CircleMinusOutlineMinor,
OrdersMinor,
} from '@shopify/polaris-icons';
import React from 'react';
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';

function NavigationExample() {
return (
<Frame>
<Navigation location="/">
<Navigation.Section
items={[
{
url: '/path/to/place',
label: 'Home',
icon: HomeMinor,
selected: false,
},
{
url: '/path/to/place',
label: 'Orders',
icon: OrdersMinor,
badge: '2',
secondaryActions: [
{
url: '/admin/products/add',
accessibilityLabel: 'Add a product',
icon: CirclePlusOutlineMinor,
tooltip: {
content: 'Create new order',
},
},
],
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMinor,
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',
},
},
],
},
]}
/>
</Navigation>
</Frame>
);
}

export default withPolarisExample(NavigationExample);
70 changes: 70 additions & 0 deletions polaris.shopify.com/pages/examples/navigation-with-truncation-for-various-states.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
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 (
<Frame>
<Navigation location="/">
<Navigation.Section
items={[
{
url: '/path/to/place',
label: 'One Stop Ramen Order Application Premium',
truncateText: true,
icon: MarketingMinor,
selected: false,
},
{
url: '/path/to/place',
label: 'Products',
icon: ProductsMinor,
},
{
url: '/path/to/place',
label: 'Lengthy non-truncated label with secondary action',
icon: OrdersMinor,
selected: false,
secondaryAction: {
url: '/admin/orders/add',
accessibilityLabel: 'Add an order',
icon: CirclePlusOutlineMinor,
tooltip: {
content: 'Add a garlic ramen to your order',
},
},
},
{
url: '/admin/products',
label: 'Truncated secondary navigation item on truncated label',
icon: ProductsMinor,
selected: true,
truncateText: true,
subNavigationItems: [
{
url: '/admin/products/collections',
disabled: false,
label: 'Something longer than inventory so it can be truncated',
},
{
url: '/admin/products/inventory',
disabled: false,
label: 'Inventoy',
},
],
},
]}
/>
</Navigation>
</Frame>
);
}

export default withPolarisExample(NavigationExample);
1 change: 0 additions & 1 deletion polaris.shopify.com/pages/examples/navigation-with-various-states-and-secondary-elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ function NavigationExample() {
{
url: '/admin/products',
disabled: false,
selected: true,
label: 'Selected sub item',
},
{
Expand Down