diff --git a/polaris-react/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx b/polaris-react/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx index d2eb83563b9..70eabd37881 100644 --- a/polaris-react/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx +++ b/polaris-react/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx @@ -91,7 +91,7 @@ describe('', () => { expect(() => { mount(); }).toThrow( - 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/frame for implementation instructions.', + 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.', ); }); }); diff --git a/polaris-react/src/utilities/frame/hooks.ts b/polaris-react/src/utilities/frame/hooks.ts index 6b5d61db9cb..a95bbd857c7 100644 --- a/polaris-react/src/utilities/frame/hooks.ts +++ b/polaris-react/src/utilities/frame/hooks.ts @@ -7,7 +7,7 @@ export function useFrame() { if (!frame) { throw new Error( - 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/frame for implementation instructions.', + 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.', ); } diff --git a/polaris-react/src/utilities/frame/tests/hooks.test.tsx b/polaris-react/src/utilities/frame/tests/hooks.test.tsx index b24b6e5975a..47b8f091713 100644 --- a/polaris-react/src/utilities/frame/tests/hooks.test.tsx +++ b/polaris-react/src/utilities/frame/tests/hooks.test.tsx @@ -27,7 +27,7 @@ describe('useFrame', () => { it('throws an error if context is not set', () => { const fn = () => mount(); expect(fn).toThrow( - 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/frame for implementation instructions.', + 'No Frame context was provided. Your component must be wrapped in a component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.', ); }); }); diff --git a/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx b/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx new file mode 100644 index 00000000000..fe8700de8e4 --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx @@ -0,0 +1,40 @@ +--- +title: Contextual save bar +shortDescription: Informs merchants of their options once they have made changes to a form on the page or while creating a new object. +category: Deprecated +keywords: + - form + - forms + - action + - actions + - save + - cancel + - logo +examples: + - fileName: contextual-save-bar-default.tsx + title: Default + description: Use the save action to provide an opportunity to save changes. Use the discard action to allow merchants the option to discard their changes. Use the message to provide helpful context on the nature of those changes. + - fileName: contextual-save-bar-with-flush-contents.tsx + title: With flush contents + description: Use the alignContentFlush flag when you want to omit the logo from the contextual save bar and repurpose that space to extend the message contents fully to the left side of the container. + - fileName: contextual-save-bar-with-full-width.tsx + title: With full width + description: Use the fullWidth flag when you want to remove the default max-width set on the contextual save bar. +previewImg: /images/components/deprecated/contextual-save-bar.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work. + + + + + This component is no longer supported. Please use the [App Bridge Contextual + Save Bar + API](https://shopify.dev/docs/api/app-bridge-library/reference/contextual-save-bar) + instead. + diff --git a/polaris.shopify.com/content/components/deprecated/frame.mdx b/polaris.shopify.com/content/components/deprecated/frame.mdx new file mode 100644 index 00000000000..37603872f64 --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/frame.mdx @@ -0,0 +1,40 @@ +--- +title: Frame +shortDescription: Creates the structure of the Shopify admin. All of the main sections of the admin are nested in the frame. +category: Deprecated +keywords: + - navigation + - nav + - links + - primary navigation + - main navigation + - global + - frame + - sidebar + - side bar + - loading + - top bar + - menu + - toast +examples: + - fileName: frame-in-an-application.tsx + title: In an application + description: Use to present the frame structure and all of its elements. + - fileName: frame-with-an-offset.tsx + title: With an offset + description: Use to present the frame structure and all of its elements with an offset provided to the theme. +previewImg: /images/components/deprecated/frame.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [App Bridge Navigation Menu API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu), [top bar](https://polaris.shopify.com/components/deprecated/top-bar), [App Bridge Toast API](https://shopify.dev/docs/api/app-bridge-library/reference/toast), and [App Bridge Contextual Save Bar API](https://shopify.dev/docs/api/app-bridge-library/reference/contextual-save-bar) components. + + + + + This component is no longer supported. + diff --git a/polaris.shopify.com/content/components/deprecated/index.mdx b/polaris.shopify.com/content/components/deprecated/index.mdx index 9bd25d80f5c..45b540b4225 100644 --- a/polaris.shopify.com/content/components/deprecated/index.mdx +++ b/polaris.shopify.com/content/components/deprecated/index.mdx @@ -2,8 +2,7 @@ title: Deprecated shortDescription: Deprecated components will be removed in future major versions of Polaris. They should be avoided and will show warnings. expanded: true -order: 12 -previewImg: /images/components/deprecated.png +order: 13 --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/deprecated/loading.mdx b/polaris.shopify.com/content/components/deprecated/loading.mdx new file mode 100644 index 00000000000..f4a6968ee53 --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/loading.mdx @@ -0,0 +1,30 @@ +--- +title: Loading +shortDescription: Used to indicate to merchants that a page is loading or an upload is processing. +category: Deprecated +keywords: + - spinner + - loader + - loading + - loading bar +examples: + - fileName: loading-default.tsx + title: Default + description: Use to indicate that the page is loading. +previewImg: /images/components/deprecated/loading.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The loading component is used to indicate to merchants that a page is loading or an upload is processing. + + + + + This component is no longer supported. Please use the [App Bridge Loading + API](https://shopify.dev/docs/api/app-bridge-library/reference/loading) + instead. + diff --git a/polaris.shopify.com/content/components/deprecated/modal.mdx b/polaris.shopify.com/content/components/deprecated/modal.mdx new file mode 100644 index 00000000000..9aaa13c807f --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/modal.mdx @@ -0,0 +1,74 @@ +--- +title: Modal +shortDescription: Used to interrupt merchants with urgent information, details, or actions. +category: Deprecated +keywords: + - modal + - src + - open + - title + - width + - height + - primary action + - secondary action + - tertiary action + - destructive action + - footer + - instant + - sectioned + - large + - small + - limit height + - loading + - outer wrapper + - iframe + - overlay + - dialog + - alert +examples: + - fileName: modal-default.tsx + title: Default + description: Use as the default option for a modal. + - fileName: modal-with-primary-action.tsx + title: With primary action + description: Use to let merchants take a key action. + - fileName: modal-with-destructive-primary-action.tsx + title: With destructive primary action + description: Use to let merchants take a key action that cannot be undone. + - fileName: modal-with-primary-and-secondary-actions.tsx + title: With primary and secondary actions + description: Use to let merchants take key actions at the bottom of the modal. + - fileName: modal-large.tsx + title: Large + description: Use when you need to increase the width of your modal. + - fileName: modal-small.tsx + title: Small + description: Use when you need to decrease the width of your modal. + - fileName: modal-without-a-title.tsx + title: Without a title + description: A title is required for accessibility, but you may hide it. + - fileName: modal-with-scroll-listener.tsx + title: With scroll listener + description: Use to implement infinite scroll of modal content. + - fileName: modal-with-activator-ref.tsx + title: With activator ref + description: Provide an activator ref when it’s more convenient than providing an element. This ensures proper focus management when closing the modal. See the [accessibility features of a modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for more information regarding focus. + - fileName: modal-without-an-activator-prop.tsx + title: Without an activator prop + description: Use an external activator when technical limitations prevent you from passing the activator as an element or a ref. Make sure to focus the activator on close when choosing this approach. See the [accessibility features of a modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for more information regarding focus. +previewImg: /images/components/deprecated/modal.png +status: Deprecated +--- + +# {frontmatter.title} + + + +Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly. + + + + + This component is no longer supported. Please use the [App Bridge Modal + API](https://shopify.dev/docs/api/app-bridge-library/reference/modal) instead. + diff --git a/polaris.shopify.com/content/components/deprecated/navigation.mdx b/polaris.shopify.com/content/components/deprecated/navigation.mdx new file mode 100644 index 00000000000..bb6ec3c6c9e --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/navigation.mdx @@ -0,0 +1,67 @@ +--- +title: Navigation +category: Deprecated +keywords: + - navigation + - nav + - links + - primary navigation + - main navigation + - frame + - sidebar + - side bar +examples: + - fileName: navigation-default.tsx + title: Default + description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/deprecated/frame). + - fileName: navigation-with-multiple-secondary-navigations.tsx + title: With multiple secondary navigations + description: Use to present a secondary action, related to a section and to title the section. + - fileName: navigation-with-an-active-root-item-with-secondary-navigation-items.tsx + title: With an active root item with secondary navigation items + description: Use to present a secondary action, related to a section and to title the section. + - fileName: navigation-with-a-secondary-action-for-a-section-and-a-section-title.tsx + title: With a secondary action for a section and a section title + description: Use to present a secondary action, related to a section and to title the section. + - 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. + - fileName: navigation-with-section-separator.tsx + title: With section separator + description: Use to add a horizontal line below the section. + - 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. + - fileName: navigation-using-major-icons.tsx + title: Using Major icons + description: This example shows how to use the shouldResizeIcon prop when using Major icons +previewImg: /images/components/deprecated/navigation.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/deprecated/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application. + + + + + This component is no longer supported. Please use the [App Bridge Navigation + Menu + API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu) + instead. + diff --git a/polaris.shopify.com/content/components/deprecated/sheet.mdx b/polaris.shopify.com/content/components/deprecated/sheet.mdx index c9d5f879fc2..d832ab99f62 100644 --- a/polaris.shopify.com/content/components/deprecated/sheet.mdx +++ b/polaris.shopify.com/content/components/deprecated/sheet.mdx @@ -78,5 +78,5 @@ The sheet component is best used in cases where the merchant needs to see elemen ## Related components -- To offer an action before merchants can go to the next step in the flow, use the [modal component](https://polaris.shopify.com/components/overlays/modal) +- To offer an action before merchants can go to the next step in the flow, use the [modal component](https://polaris.shopify.com/components/deprecated/modal) - To present a small amount of content or a menu of actions in a non-blocking overlay, use the [popover component](https://polaris.shopify.com/components/overlays/popover) diff --git a/polaris.shopify.com/content/components/deprecated/toast.mdx b/polaris.shopify.com/content/components/deprecated/toast.mdx new file mode 100644 index 00000000000..ad0269aa526 --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/toast.mdx @@ -0,0 +1,48 @@ +--- +title: Toast +shortDescription: A non-disruptive message that provides quick feedback on the outcome of an action. +category: Deprecated +keywords: + - toast + - flash message + - snackbar + - notification bar + - temporary feedback + - timed feedback + - message + - overlay + - popup + - iframe + - duration +examples: + - fileName: toast-default.tsx + title: Default + description: Use to convey general confirmation or actions that aren’t critical. For example, you might show a toast message to inform the merchant that their recent action was successful. + - fileName: toast-multiple-messages.tsx + title: Multiple messages + description: Use multiple toast messages to inform the merchant about distinct actions. + - fileName: toast-with-custom-duration.tsx + title: With custom duration + description: Use to shorten or lengthen the default duration of 5000 milliseconds. + - fileName: toast-with-action.tsx + title: With action + description: Use when a merchant has the ability to act on the message. For example, to undo a change or retry an action. + - fileName: toast-error.tsx + title: Error + description: Although error toast is still available and used in the system, we discourage its use. Reserve it for errors not caused by merchants, like a connection issue. Error toast should convey what went wrong in plain language and should not go over 3 words. For all other error message types, follow the [error message guidelines](https://polaris.shopify.com/patterns/error-messages). +previewImg: /images/components/deprecated/toast.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. + + + + + This component is no longer supported. Please use the [App Bridge Toast + API](https://shopify.dev/docs/api/app-bridge-library/reference/toast) instead. + diff --git a/polaris.shopify.com/content/components/deprecated/top-bar.mdx b/polaris.shopify.com/content/components/deprecated/top-bar.mdx new file mode 100644 index 00000000000..2e7d93dbda4 --- /dev/null +++ b/polaris.shopify.com/content/components/deprecated/top-bar.mdx @@ -0,0 +1,37 @@ +--- +title: Top bar +shortDescription: Appears at the top of the page and is used to brand and navigate major applications areas. +category: Deprecated +keywords: + - global chrome + - global features + - topbar + - top bar + - header + - nav bar + - bar + - navbar + - brand + - search + - user + - menu + - logo +examples: + - fileName: top-bar-default.tsx + title: Default + description: Use to provide structure for the top of an application. Style the top bar component using the app provider component with a theme. Providing just the `background` key for the top bar component theme will result in intelligent defaults being set for complementary colors with contrasting text. +previewImg: /images/components/deprecated/top-bar.png +status: Deprecated +--- + +# {frontmatter.title} + + + +The top bar is a header component that allows merchants to search, access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces like Shopify or Shopify Plus. Third-party apps that use the top bar can customize the color to match their brand using the [app provider](https://polaris.shopify.com/components/app-provider) component and are required to use their own logo. + + + + + This component is no longer supported. + diff --git a/polaris.shopify.com/content/components/index.mdx b/polaris.shopify.com/content/components/index.mdx index a2773b0afea..f15c01b5f0e 100644 --- a/polaris.shopify.com/content/components/index.mdx +++ b/polaris.shopify.com/content/components/index.mdx @@ -13,11 +13,14 @@ Components are the reusable building blocks for creating Shopify admin experienc -{posts.map(group => +{posts.map(group => -

{group.title}

+group.children.filter(a => !a.hideFromNav).length !== 0 ? ( - +

{group.title}

+ +) : null + +)} -)} diff --git a/polaris.shopify.com/content/components/selection-and-input/contextual-save-bar.mdx b/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx similarity index 90% rename from polaris.shopify.com/content/components/selection-and-input/contextual-save-bar.mdx rename to polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx index 9a8e6620a87..129eacb0803 100644 --- a/polaris.shopify.com/content/components/selection-and-input/contextual-save-bar.mdx +++ b/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx @@ -1,7 +1,7 @@ --- title: Contextual save bar shortDescription: Informs merchants of their options once they have made changes to a form on the page or while creating a new object. -category: Selection and input +category: Internal only keywords: - form - forms @@ -20,7 +20,9 @@ examples: - fileName: contextual-save-bar-with-full-width.tsx title: With full width description: Use the fullWidth flag when you want to remove the default max-width set on the contextual save bar. -previewImg: /images/components/selection-and-input/contextual-save-bar.png +previewImg: /images/components/deprecated/contextual-save-bar.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} @@ -37,7 +39,7 @@ The contextual save bar tells merchants their options once they have made change ## Required components -The contextual save bar component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component. +The contextual save bar component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component. --- @@ -48,7 +50,7 @@ The contextual save bar component should: - Become visible when a form on the page has unsaved changes - Be used to save or discard in-progress changes - Provide brief and helpful context on the nature of in-progress changes -- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/overlays/modal) for each section where changes can be made and saved. +- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/internal-only/modal) for each section where changes can be made and saved. --- @@ -95,6 +97,6 @@ Actions in the contextual save bar component should consist of a strong verb tha ## Related components -- To wrap your entire application, [use the frame component](https://polaris.shopify.com/components/frame) +- To wrap your entire application, [use the frame component](https://polaris.shopify.com/components/internal-only/frame) - To build the outer wrapper of a page, including page title and associated actions, [use the page component](https://polaris.shopify.com/components/layout-and-structure/page) - To wrap form elements and handle the submission of a form, [use the form component](https://polaris.shopify.com/components/form) diff --git a/polaris.shopify.com/content/components/utilities/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx similarity index 57% rename from polaris.shopify.com/content/components/utilities/frame.mdx rename to polaris.shopify.com/content/components/internal-only/frame.mdx index 9e73ae14c00..8b0f8dfb110 100644 --- a/polaris.shopify.com/content/components/utilities/frame.mdx +++ b/polaris.shopify.com/content/components/internal-only/frame.mdx @@ -1,7 +1,7 @@ --- title: Frame shortDescription: Creates the structure of the Shopify admin. All of the main sections of the admin are nested in the frame. -category: Utilities +category: Internal only keywords: - navigation - nav @@ -23,14 +23,16 @@ examples: - fileName: frame-with-an-offset.tsx title: With an offset description: Use to present the frame structure and all of its elements with an offset provided to the theme. -previewImg: /images/components/utilities/frame.png +previewImg: /images/components/deprecated/frame.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} -The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/navigation/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/feedback-indicators/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components. +The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/internal-only/navigation), [top bar](https://polaris.shopify.com/components/internal-only/top-bar), [toast](https://polaris.shopify.com/components/internal-only/toast), and [contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) components. @@ -42,18 +44,18 @@ The frame component, while not visible in the user interface itself, provides th For the best experience when creating an application frame, use the following components: -- [Top bar](https://polaris.shopify.com/components/top-bar) -- [Navigation](https://polaris.shopify.com/components/navigation/navigation) -- [Contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) -- [Toast](https://polaris.shopify.com/components/feedback-indicators/toast) -- [Loading](https://polaris.shopify.com/components/loading) +- [Top bar](https://polaris.shopify.com/components/internal-only/top-bar) +- [Navigation](https://polaris.shopify.com/components/internal-only/navigation) +- [Contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) +- [Toast](https://polaris.shopify.com/components/internal-only/toast) +- [Loading](https://polaris.shopify.com/components/internal-only/loading) --- ## Related components -- To display the navigation component on small screens, to provide search and a user menu, or to style the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component. -- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/navigation/navigation) component. -- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component. -- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/feedback-indicators/toast) component. -- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component. +- To display the navigation component on small screens, to provide search and a user menu, or to style the [frame](https://polaris.shopify.com/components/internal-only/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/internal-only/top-bar) component. +- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component. +- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) component. +- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component. +- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/internal-only/loading) component. diff --git a/polaris.shopify.com/content/components/internal-only/index.mdx b/polaris.shopify.com/content/components/internal-only/index.mdx new file mode 100644 index 00000000000..cd4b6caf5b4 --- /dev/null +++ b/polaris.shopify.com/content/components/internal-only/index.mdx @@ -0,0 +1,17 @@ +--- +title: Internal (shopifolk only) +shortDescription: Internal only components are for Shopify's internal development teams. External Application developers will access these components through App Bridge APIs. +expanded: true +order: 12 +internalOnly: true +--- + +# {frontmatter.title} + + + +{frontmatter.shortDescription} + + + + diff --git a/polaris.shopify.com/content/components/feedback-indicators/loading.mdx b/polaris.shopify.com/content/components/internal-only/loading.mdx similarity index 91% rename from polaris.shopify.com/content/components/feedback-indicators/loading.mdx rename to polaris.shopify.com/content/components/internal-only/loading.mdx index 409514fe1b0..c4ba04757bb 100644 --- a/polaris.shopify.com/content/components/feedback-indicators/loading.mdx +++ b/polaris.shopify.com/content/components/internal-only/loading.mdx @@ -1,7 +1,7 @@ --- title: Loading shortDescription: Used to indicate to merchants that a page is loading or an upload is processing. -category: Feedback indicators +category: Internal only keywords: - spinner - loader @@ -11,7 +11,9 @@ examples: - fileName: loading-default.tsx title: Default description: Use to indicate that the page is loading. -previewImg: /images/components/feedback-indicators/loading.png +previewImg: /images/components/deprecated/loading.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} @@ -28,7 +30,7 @@ The loading component is used to indicate to merchants that a page is loading or ## Required components -The loading component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component. +The loading component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component. --- diff --git a/polaris.shopify.com/content/components/overlays/modal.mdx b/polaris.shopify.com/content/components/internal-only/modal.mdx similarity index 94% rename from polaris.shopify.com/content/components/overlays/modal.mdx rename to polaris.shopify.com/content/components/internal-only/modal.mdx index bde6c79a2fe..bd87f1ce69e 100644 --- a/polaris.shopify.com/content/components/overlays/modal.mdx +++ b/polaris.shopify.com/content/components/internal-only/modal.mdx @@ -1,7 +1,7 @@ --- title: Modal shortDescription: Used to interrupt merchants with urgent information, details, or actions. -category: Overlays +category: Internal only keywords: - modal - src @@ -56,7 +56,9 @@ examples: - fileName: modal-without-an-activator-prop.tsx title: Without an activator prop description: Use an external activator when technical limitations prevent you from passing the activator as an element or a ref. Make sure to focus the activator on close when choosing this approach. See the [accessibility features of a modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) for more information regarding focus. -previewImg: /images/components/overlays/modal.png +previewImg: /images/components/deprecated/modal.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} @@ -204,13 +206,13 @@ Tertiary actions should: #### Do -![Screenshot of modal with a plain button as a tertiary action](/images/components/overlays/modal/do-use-plain-button-for-tertiary-action@2x.png) +![Screenshot of modal with a plain button as a tertiary action](/images/components/internal-only/modal/do-use-plain-button-for-tertiary-action@2x.png) Use a plain button for a tertiary action if needed #### Don’t -![Screenshot of modal with a destructive button as a tertiary action](/images/components/overlays/modal/dont-use-destructive-tertiary-action@2x.png) +![Screenshot of modal with a destructive button as a tertiary action](/images/components/internal-only/modal/dont-use-destructive-tertiary-action@2x.png) Use a tertiary action for a destructive action @@ -264,7 +266,7 @@ Body content should be: - Modals use ARIA `role=”dialog”` to convey to screen reader users that they work like native dialog windows. - If you set the `title` prop to give the modal component a heading, then the `title` is used to label the dialog element with `aria-labelledby`. This helps to convey the purpose of the modal to screen reader users when it displays. - After a modal is closed, in order to return focus to the button that launched it, pass the button to the modal as an `activator`. -- To ensure that [Toast](https://polaris.shopify.com/components/feedback-indicators/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/utilities/frame) component. +- To ensure that [Toast](https://polaris.shopify.com/components/internal-only/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component. ### Keyboard support diff --git a/polaris.shopify.com/content/components/navigation/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx similarity index 94% rename from polaris.shopify.com/content/components/navigation/navigation.mdx rename to polaris.shopify.com/content/components/internal-only/navigation.mdx index 459baa82bad..45939d01761 100644 --- a/polaris.shopify.com/content/components/navigation/navigation.mdx +++ b/polaris.shopify.com/content/components/internal-only/navigation.mdx @@ -1,6 +1,6 @@ --- title: Navigation -category: Navigation +category: Internal only keywords: - navigation - nav @@ -13,7 +13,7 @@ keywords: examples: - fileName: navigation-default.tsx title: Default - description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/frame). + description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/internal-only/frame). - fileName: navigation-with-multiple-secondary-navigations.tsx title: With multiple secondary navigations description: Use to present a secondary action, related to a section and to title the section. @@ -47,14 +47,16 @@ examples: - fileName: navigation-using-major-icons.tsx title: Using Major icons description: This example shows how to use the shouldResizeIcon prop when using Major icons -previewImg: /images/components/navigation/navigation.png +previewImg: /images/components/deprecated/navigation.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} -The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application. +The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/internal-only/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application. @@ -64,7 +66,7 @@ The navigation component is used to display the primary navigation in the sideba ## Required components -The navigation component must be passed to the [frame](https://polaris.shopify.com/components/frame) component. The mobile version of the navigation component appears in the [top bar](https://polaris.shopify.com/components/top-bar) component. +The navigation component must be passed to the [frame](https://polaris.shopify.com/components/internal-only/frame) component. The mobile version of the navigation component appears in the [top bar](https://polaris.shopify.com/components/internal-only/top-bar) component. --- @@ -235,10 +237,10 @@ Action allows a complementary icon-only action to render next to the section tit ## Related components -- To provide the structure for the navigation component, including the left sidebar and the top bar use the [frame](https://polaris.shopify.com/components/frame) component. -- To display the navigation component on small screens, to provide search and a user menu, or to theme the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component. -- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component. -- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/feedback-indicators/toast) component. -- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component. +- To provide the structure for the navigation component, including the left sidebar and the top bar use the [frame](https://polaris.shopify.com/components/internal-only/frame) component. +- To display the navigation component on small screens, to provide search and a user menu, or to theme the [frame](https://polaris.shopify.com/components/internal-only/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/internal-only/top-bar) component. +- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) component. +- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component. +- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/internal-only/loading) component. - To alternate among related views within the same context, use the [tabs](https://polaris.shopify.com/components/tabs) component. - To embed a single action or link within a larger span of text, use the [link](https://polaris.shopify.com/components/link) component. diff --git a/polaris.shopify.com/content/components/feedback-indicators/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx similarity index 95% rename from polaris.shopify.com/content/components/feedback-indicators/toast.mdx rename to polaris.shopify.com/content/components/internal-only/toast.mdx index 2c9af183836..9861783c60a 100644 --- a/polaris.shopify.com/content/components/feedback-indicators/toast.mdx +++ b/polaris.shopify.com/content/components/internal-only/toast.mdx @@ -1,7 +1,7 @@ --- title: Toast shortDescription: A non-disruptive message that provides quick feedback on the outcome of an action. -category: Feedback indicators +category: Internal only keywords: - toast - flash message @@ -30,7 +30,9 @@ examples: - fileName: toast-error.tsx title: Error description: Although error toast is still available and used in the system, we discourage its use. Reserve it for errors not caused by merchants, like a connection issue. Error toast should convey what went wrong in plain language and should not go over 3 words. For all other error message types, follow the [error message guidelines](https://polaris.shopify.com/patterns/error-messages). -previewImg: /images/components/feedback-indicators/toast.png +previewImg: /images/components/deprecated/toast.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} @@ -47,7 +49,7 @@ The toast component is a non-disruptive message that appears at the bottom of th ## Required components -The toast component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component. +The toast component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component. --- @@ -153,7 +155,7 @@ Avoid using toast for critical information that merchants need to act on immedia - Can’t be easily accessed with the keyboard - Might appear outside the proximity of the merchant’s current focus -To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/utilities/frame) component. +To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component. ### Toast with action diff --git a/polaris.shopify.com/content/components/navigation/top-bar.mdx b/polaris.shopify.com/content/components/internal-only/top-bar.mdx similarity index 94% rename from polaris.shopify.com/content/components/navigation/top-bar.mdx rename to polaris.shopify.com/content/components/internal-only/top-bar.mdx index 1d7228ede6a..4e22e353dfd 100644 --- a/polaris.shopify.com/content/components/navigation/top-bar.mdx +++ b/polaris.shopify.com/content/components/internal-only/top-bar.mdx @@ -1,7 +1,7 @@ --- title: Top bar shortDescription: Appears at the top of the page and is used to brand and navigate major applications areas. -category: Navigation +category: Internal only keywords: - global chrome - global features @@ -20,7 +20,9 @@ examples: - fileName: top-bar-default.tsx title: Default description: Use to provide structure for the top of an application. Style the top bar component using the app provider component with a theme. Providing just the `background` key for the top bar component theme will result in intelligent defaults being set for complementary colors with contrasting text. -previewImg: /images/components/navigation/top-bar.png +previewImg: /images/components/deprecated/top-bar.png +hideFromNav: true +internalOnly: true --- # {frontmatter.title} @@ -37,7 +39,7 @@ The top bar is a header component that allows merchants to search, access menus, ## Required components -The top bar component must be passed to the [frame](https://polaris.shopify.com/components/frame) component. +The top bar component must be passed to the [frame](https://polaris.shopify.com/components/internal-only/frame) component. --- @@ -46,7 +48,7 @@ The top bar component must be passed to the [frame](https://polaris.shopify.com/ The top bar component should: - Not provide global navigation for an application - - Use the [navigation component](https://polaris.shopify.com/components/navigation/navigation) instead + - Use the [navigation component](https://polaris.shopify.com/components/internal-only/navigation) instead - Include search to help merchants find resources and navigate an application - Include a user menu component to indicate the logged-in merchant and provide them with global actions - Provide a color through the [app provider](https://polaris.shopify.com/components/app-provider) component to style the background @@ -146,8 +148,8 @@ A text field component that is tailor-made for a search use-case. ## Related components -- To provide the structure for the top bar component, as well as the primary navigation use the [frame](https://polaris.shopify.com/components/frame) component. -- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/navigation/navigation) component. -- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component. -- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/feedback-indicators/toast) component. -- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component. +- To provide the structure for the top bar component, as well as the primary navigation use the [frame](https://polaris.shopify.com/components/internal-only/frame) component. +- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component. +- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) component. +- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component. +- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/internal-only/loading) component. diff --git a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx b/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx index 3aab43197a9..63be92d9ef2 100644 --- a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx +++ b/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx @@ -40,5 +40,5 @@ The Fullscreen bar component should: ## Related components -- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/feedback-indicators/toast) component. -- To indicate to merchants that a page is loading or an upload is processing, use the [loading](https://polaris.shopify.com/components/loading) component. +- To provide quick, at-a-glance feedback on the outcome of an action, use the [App Bridge Toast API](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component. +- To indicate to merchants that a page is loading or an upload is processing, use the [App Bridge Loading API](https://shopify.dev/docs/api/app-bridge-library/reference/loading) component. diff --git a/polaris.shopify.com/content/components/selection-and-input/index-filters.mdx b/polaris.shopify.com/content/components/selection-and-input/index-filters.mdx index dc5eb444d6e..41c918bd21d 100644 --- a/polaris.shopify.com/content/components/selection-and-input/index-filters.mdx +++ b/polaris.shopify.com/content/components/selection-and-input/index-filters.mdx @@ -77,7 +77,7 @@ The filters component relies on the accessibility features of several other comp - [Popover](/components/overlays/popover) - [ChoiceList](/components/selection-and-input/choice-list) -- [Modal](/components/overlays/modal) +- [Modal](/components/deprecated/modal) - [Tabs](/components/navigation/tabs) - [Tooltip](/components/overlays/tooltip) diff --git a/polaris.shopify.com/content/content/voice-and-tone.mdx b/polaris.shopify.com/content/content/voice-and-tone.mdx index de5992e2050..632f00dbbea 100644 --- a/polaris.shopify.com/content/content/voice-and-tone.mdx +++ b/polaris.shopify.com/content/content/voice-and-tone.mdx @@ -205,7 +205,7 @@ While we don’t need to celebrate the accomplishment, we should recognize that #### Do -If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [toast](/components/feedback-indicators/toast). Consider ways to confirm completion without words or messaging. +If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast). Consider ways to confirm completion without words or messaging. _Product saved_ diff --git a/polaris.shopify.com/content/design/interaction-states.mdx b/polaris.shopify.com/content/design/interaction-states.mdx index 77a41a4a5cc..28ddb0f319e 100644 --- a/polaris.shopify.com/content/design/interaction-states.mdx +++ b/polaris.shopify.com/content/design/interaction-states.mdx @@ -80,6 +80,6 @@ Provide merchants with cues as to what the interface will do if they interact wi **Use feedback indicators** like the [progress bar](https://polaris.shopify.com/components/progress-bar) component or the [spinner](https://polaris.shopify.com/components/spinner) component to let them know that the interface received their request. If appropriate, you can also provide added information about what or how long it will take to complete. -**For non-disruptive feedback** on the outcome of an action, use the [toast](https://polaris.shopify.com/components/feedback-indicators/toast) component. +**For non-disruptive feedback** on the outcome of an action, use the [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component. **For an unsuccessful completion** that requires the merchant to take action, provide information about what prevented the action from completing successfully and what the merchant can do to fix the problem. For example, use the validation error state of the [text field](https://polaris.shopify.com/components/selection-and-input/text-field) component. diff --git a/polaris.shopify.com/content/patterns-legacy/new-badge.mdx b/polaris.shopify.com/content/patterns-legacy/new-badge.mdx index fae741da2d7..2dfd4248ad6 100644 --- a/polaris.shopify.com/content/patterns-legacy/new-badge.mdx +++ b/polaris.shopify.com/content/patterns-legacy/new-badge.mdx @@ -36,7 +36,7 @@ Consider how the admin would look if it was cluttered with New badges or feature ### When not to use the New badge -- Should never be used in the primary [navigation](/components/navigation/navigation) menu of the Shopify admin +- Should never be used in the primary [navigation](/components/deprecated/navigation) menu of the Shopify admin ## How long to use the New badge diff --git a/polaris.shopify.com/content/patterns-legacy/pickers.mdx b/polaris.shopify.com/content/patterns-legacy/pickers.mdx index 47cc4f05e4a..f70f72116e8 100644 --- a/polaris.shopify.com/content/patterns-legacy/pickers.mdx +++ b/polaris.shopify.com/content/patterns-legacy/pickers.mdx @@ -58,7 +58,7 @@ Pinning the most relevant options to the top of the picker helps merchants work The primary building block of resource picking experiences is the searchable listbox pattern. Searchable listboxes are composed of the [listbox](/components/lists/listbox) and [text field](/components/selection-and-input/text-field) components and can be displayed differently depending on what merchant problem you’re solving. -The components are used directly inside of a container on the page if picking is part of the primary action merchants need to take, such as completing a form. The components may instead be hidden or revealed with an overlay, such as a [popover](/components/overlays/popover) or [modal](/components/overlays/modal), to progressively disclose the list when merchants take an action on the page. Use progressive disclosure if the purpose of the picker is secondary to the action merchants are taking on the page, such as navigation or list filtering. We'll look at customer segment and location picking patterns for examples of context specific implementation. +The components are used directly inside of a container on the page if picking is part of the primary action merchants need to take, such as completing a form. The components may instead be hidden or revealed with an overlay, such as a [popover](/components/overlays/popover) or [modal](/components/deprecated/modal), to progressively disclose the list when merchants take an action on the page. Use progressive disclosure if the purpose of the picker is secondary to the action merchants are taking on the page, such as navigation or list filtering. We'll look at customer segment and location picking patterns for examples of context specific implementation. ### Locations diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index 14a6a43a7e9..86505045646 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -297,7 +297,12 @@ const feedbackIndicators = [ }, { source: '/components/loading', - destination: '/components/feedback-indicators/loading', + destination: '/components/deprecated/loading', + permanent: true, + }, + { + source: '/components/feedback-indicators/loading', + destination: '/components/deprecated/loading', permanent: true, }, { @@ -337,7 +342,12 @@ const feedbackIndicators = [ }, { source: '/components/toast', - destination: '/components/feedback-indicators/toast', + destination: '/components/deprecated/toast', + permanent: true, + }, + { + source: '/components/feedback-indicators/toast', + destination: '/components/deprecated/toast', permanent: true, }, ]; @@ -544,7 +554,12 @@ const navigation = [ }, { source: '/components/navigation', - destination: '/components/navigation/navigation', + destination: '/components/deprecated/navigation', + permanent: true, + }, + { + source: '/components/navigation/navigation', + destination: '/components/deprecated/navigation', permanent: true, }, { @@ -559,7 +574,12 @@ const navigation = [ }, { source: '/components/top-bar', - destination: '/components/navigation/top-bar', + destination: '/components/deprecated/top-bar', + permanent: true, + }, + { + source: '/components/navigation/top-bar', + destination: '/components/deprecated/top-bar', permanent: true, }, ]; @@ -567,7 +587,12 @@ const navigation = [ const overlays = [ { source: '/components/modal', - destination: '/components/overlays/modal', + destination: '/components/deprecated/modal', + permanent: true, + }, + { + source: '/components/overlays/modal', + destination: '/components/deprecated/modal', permanent: true, }, { @@ -615,7 +640,12 @@ const selectionAndInput = [ }, { source: '/components/contextual-save-bar', - destination: '/components/selection-and-input/contextual-save-bar', + destination: '/components/deprecated/contextual-save-bar', + permanent: true, + }, + { + source: '/components/selection-and-input/contextual-save-bar', + destination: '/components/deprecated/contextual-save-bar', permanent: true, }, { @@ -877,7 +907,12 @@ const utilities = [ }, { source: '/components/frame', - destination: '/components/utilities/frame', + destination: '/components/deprecated/frame', + permanent: true, + }, + { + source: '/components/utilities/frame', + destination: '/components/deprecated/frame', permanent: true, }, { diff --git a/polaris.shopify.com/public/images/components/selection-and-input/contextual-save-bar.png b/polaris.shopify.com/public/images/components/deprecated/contextual-save-bar.png similarity index 100% rename from polaris.shopify.com/public/images/components/selection-and-input/contextual-save-bar.png rename to polaris.shopify.com/public/images/components/deprecated/contextual-save-bar.png diff --git a/polaris.shopify.com/public/images/components/utilities/frame.png b/polaris.shopify.com/public/images/components/deprecated/frame.png similarity index 100% rename from polaris.shopify.com/public/images/components/utilities/frame.png rename to polaris.shopify.com/public/images/components/deprecated/frame.png diff --git a/polaris.shopify.com/public/images/components/feedback-indicators/loading.png b/polaris.shopify.com/public/images/components/deprecated/loading.png similarity index 100% rename from polaris.shopify.com/public/images/components/feedback-indicators/loading.png rename to polaris.shopify.com/public/images/components/deprecated/loading.png diff --git a/polaris.shopify.com/public/images/components/overlays/modal.png b/polaris.shopify.com/public/images/components/deprecated/modal.png similarity index 100% rename from polaris.shopify.com/public/images/components/overlays/modal.png rename to polaris.shopify.com/public/images/components/deprecated/modal.png diff --git a/polaris.shopify.com/public/images/components/navigation/navigation.png b/polaris.shopify.com/public/images/components/deprecated/navigation.png similarity index 100% rename from polaris.shopify.com/public/images/components/navigation/navigation.png rename to polaris.shopify.com/public/images/components/deprecated/navigation.png diff --git a/polaris.shopify.com/public/images/components/feedback-indicators/toast.png b/polaris.shopify.com/public/images/components/deprecated/toast.png similarity index 100% rename from polaris.shopify.com/public/images/components/feedback-indicators/toast.png rename to polaris.shopify.com/public/images/components/deprecated/toast.png diff --git a/polaris.shopify.com/public/images/components/navigation/top-bar.png b/polaris.shopify.com/public/images/components/deprecated/top-bar.png similarity index 100% rename from polaris.shopify.com/public/images/components/navigation/top-bar.png rename to polaris.shopify.com/public/images/components/deprecated/top-bar.png diff --git a/polaris.shopify.com/scripts/gen-cache-json.ts b/polaris.shopify.com/scripts/gen-cache-json.ts index 739594eabd2..009f6849f60 100644 --- a/polaris.shopify.com/scripts/gen-cache-json.ts +++ b/polaris.shopify.com/scripts/gen-cache-json.ts @@ -36,6 +36,7 @@ const genNavJson = async (markdownFiles) => { componentDescriptions, relatedResources, hideFromNav, + internalOnly, } = md.frontMatter; const {slug} = md; @@ -57,6 +58,7 @@ const genNavJson = async (markdownFiles) => { componentDescriptions, relatedResources, hideFromNav: hideFromNav || false, + internalOnly: internalOnly || false, }); }); @@ -119,7 +121,9 @@ const genCacheJson = async () => { const markdownFiles = ( await Promise.all(mdFiles.map((filePath) => getMdContent(filePath))) - ).sort((a, b) => a.slug.localeCompare(b.slug)); + ) + .filter((slug) => !slug.frontMatter.hideFromNav) + .sort((a, b) => a.slug.localeCompare(b.slug)); await genSiteJson(markdownFiles); await genNavJson(markdownFiles); diff --git a/polaris.shopify.com/src/components/Frame/Frame.module.scss b/polaris.shopify.com/src/components/Frame/Frame.module.scss index cc5bc632e01..3768e7c8b5f 100644 --- a/polaris.shopify.com/src/components/Frame/Frame.module.scss +++ b/polaris.shopify.com/src/components/Frame/Frame.module.scss @@ -73,6 +73,18 @@ $breakpointNav: $breakpointTablet; flex-direction: column; > li { + > ul > li > ul > li:last-child { + margin-bottom: 1rem; + } + + > ul > li + li:has(ul) { + margin-top: 1rem; + } + + > ul:not(:has(ul)) { + margin-bottom: 1rem; + } + .NavItem { font-size: var(--font-size-400); letter-spacing: var(--letter-spacing-100); @@ -82,10 +94,6 @@ $breakpointNav: $breakpointTablet; padding-top: 0.125rem; } - + ul > li:last-child { - padding-bottom: 1rem; - } - > a { padding: 0.033rem 0; color: var(--text-strong); @@ -141,7 +149,7 @@ $breakpointNav: $breakpointTablet; > a { color: var(--text); - white-space: normal; + white-space: nowrap; } &.isCurrent > a { diff --git a/polaris.shopify.com/src/components/Frame/Frame.tsx b/polaris.shopify.com/src/components/Frame/Frame.tsx index 96298a265ad..41ac3d69987 100644 --- a/polaris.shopify.com/src/components/Frame/Frame.tsx +++ b/polaris.shopify.com/src/components/Frame/Frame.tsx @@ -12,6 +12,8 @@ import styles from './Frame.module.scss'; import {className} from '../../utils/various'; import {useRouter} from 'next/router'; import StatusBadge from '../StatusBadge'; +import Icon from '../Icon'; +import {LockMajor} from '@shopify/polaris-icons'; const NAV_ID = 'nav'; interface Props { @@ -241,20 +243,35 @@ function NavItem({ isCurrent && styles.isCurrent, )} > - { - if (level === 0 && i === 0) { - handleShiftTabOnFirstLink(evt); - } - }} - > - {child.title} - - {child.status && } - + {child.internalOnly ? ( + { + if (level === 0 && i === 0) { + handleShiftTabOnFirstLink(evt); + } + }} + > + {child.title} + + + ) : ( + { + if (level === 0 && i === 0) { + handleShiftTabOnFirstLink(evt); + } + }} + > + {child.title} + {child.status && } + + )} {isExpandable && !child.expanded && (