From 63413863a4c0c6b9bb77ab03664e5266aaf174ae Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 2 Jan 2024 13:55:40 +1100 Subject: [PATCH 01/12] Seperate components into internal-only category --- .../content/components/deprecated/index.mdx | 3 +-- .../{utilities => internal-only}/frame.mdx | 8 +++++++- .../content/components/internal-only/index.mdx | 16 ++++++++++++++++ .../loading.mdx | 10 +++++++++- .../{overlays => internal-only}/modal.mdx | 9 ++++++++- .../{navigation => internal-only}/navigation.mdx | 10 +++++++++- .../toast.mdx | 9 ++++++++- .../{navigation => internal-only}/top-bar.mdx | 8 +++++++- .../StatusBadge/StatusBadge.module.scss | 3 ++- .../StatusBanner/StatusBanner.module.scss | 3 ++- .../src/components/StatusBanner/StatusBanner.tsx | 5 ++++- polaris.shopify.com/src/types.ts | 3 ++- 12 files changed, 75 insertions(+), 12 deletions(-) rename polaris.shopify.com/content/components/{utilities => internal-only}/frame.mdx (91%) create mode 100644 polaris.shopify.com/content/components/internal-only/index.mdx rename polaris.shopify.com/content/components/{feedback-indicators => internal-only}/loading.mdx (85%) rename polaris.shopify.com/content/components/{overlays => internal-only}/modal.mdx (96%) rename polaris.shopify.com/content/components/{navigation => internal-only}/navigation.mdx (98%) rename polaris.shopify.com/content/components/{feedback-indicators => internal-only}/toast.mdx (94%) rename polaris.shopify.com/content/components/{navigation => internal-only}/top-bar.mdx (97%) 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/utilities/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx similarity index 91% rename from polaris.shopify.com/content/components/utilities/frame.mdx rename to polaris.shopify.com/content/components/internal-only/frame.mdx index 9e73ae14c00..b16c1fd4fda 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 @@ -24,6 +24,7 @@ examples: 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 +status: Internal --- # {frontmatter.title} @@ -34,6 +35,11 @@ The frame component, while not visible in the user interface itself, provides th + + If you are building a Shopify Application you should not use this component. + Internal only components will be removed in future major versions of Polaris. + + 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..cbefd3b2534 --- /dev/null +++ b/polaris.shopify.com/content/components/internal-only/index.mdx @@ -0,0 +1,16 @@ +--- +title: Internal Only +shortDescription: Internal only components will be removed in future major versions of Polaris. These components **SHOULD NOT** be used by Application Developers and are documented only for Shopify's internal development teams. +expanded: true +order: 12 +--- + +# {frontmatter.title} + + + +Internal only components will be removed in future major versions of Polaris. These components **SHOULD NOT** be used by [Application Developers](https://shopify.dev/docs/apps) and are documented only for Shopify's internal development teams. + + + + diff --git a/polaris.shopify.com/content/components/feedback-indicators/loading.mdx b/polaris.shopify.com/content/components/internal-only/loading.mdx similarity index 85% rename from polaris.shopify.com/content/components/feedback-indicators/loading.mdx rename to polaris.shopify.com/content/components/internal-only/loading.mdx index 409514fe1b0..2cc59ba1721 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 @@ -12,6 +12,7 @@ examples: title: Default description: Use to indicate that the page is loading. previewImg: /images/components/feedback-indicators/loading.png +status: Internal --- # {frontmatter.title} @@ -22,6 +23,13 @@ The loading component is used to indicate to merchants that a page is loading or + + If you are building a Shopify Application you should use the [App Bridge + Loading + API](https://shopify.dev/docs/api/app-bridge-library/reference/loading). + Internal only components will be removed in future major versions of Polaris. + + diff --git a/polaris.shopify.com/content/components/overlays/modal.mdx b/polaris.shopify.com/content/components/internal-only/modal.mdx similarity index 96% rename from polaris.shopify.com/content/components/overlays/modal.mdx rename to polaris.shopify.com/content/components/internal-only/modal.mdx index bde6c79a2fe..b441a369372 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 @@ -57,6 +57,7 @@ examples: 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 +status: Internal --- # {frontmatter.title} @@ -67,6 +68,12 @@ Modals are overlays that require merchants to take an action before they can con + + If you are building a Shopify Application you should use the [App Bridge Modal + API](https://shopify.dev/docs/api/app-bridge-library/reference/modal). + Internal only components will be removed in future major versions of Polaris. + + diff --git a/polaris.shopify.com/content/components/navigation/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx similarity index 98% rename from polaris.shopify.com/content/components/navigation/navigation.mdx rename to polaris.shopify.com/content/components/internal-only/navigation.mdx index 459baa82bad..229173941f8 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 @@ -48,6 +48,7 @@ examples: title: Using Major icons description: This example shows how to use the shouldResizeIcon prop when using Major icons previewImg: /images/components/navigation/navigation.png +status: Internal --- # {frontmatter.title} @@ -58,6 +59,13 @@ The navigation component is used to display the primary navigation in the sideba + + If you are building a Shopify Application you should use the [App Bridge + Navigation Menu + API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu). + Internal only components will be removed in future major versions of Polaris. + + diff --git a/polaris.shopify.com/content/components/feedback-indicators/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx similarity index 94% rename from polaris.shopify.com/content/components/feedback-indicators/toast.mdx rename to polaris.shopify.com/content/components/internal-only/toast.mdx index 2c9af183836..6d83d36a488 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 @@ -31,6 +31,7 @@ examples: 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 +status: Internal --- # {frontmatter.title} @@ -41,6 +42,12 @@ The toast component is a non-disruptive message that appears at the bottom of th + + If you are building a Shopify Application you should use the [App Bridge Toast + API](https://shopify.dev/docs/api/app-bridge-library/reference/toast). + Internal only components will be removed in future major versions of Polaris. + + 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 97% 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..f9eefd7e7cb 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 @@ -21,6 +21,7 @@ examples: 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 +status: Internal --- # {frontmatter.title} @@ -31,6 +32,11 @@ The top bar is a header component that allows merchants to search, access menus, + + If you are building a Shopify Application you should not use this component. + Internal only components will be removed in future major versions of Polaris. + + diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss index 4d2ec90d825..c76339c1c8e 100644 --- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss +++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss @@ -13,7 +13,8 @@ &[data-value='warning'], &[data-value='deprecated'], - &[data-value='legacy'] { + &[data-value='legacy'], + &[data-value='internal'] { background: var(--surface-warning); } diff --git a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss index 21d0a14a5de..63fa9f77700 100644 --- a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss +++ b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss @@ -11,7 +11,8 @@ &[data-value='warning'], &[data-value='deprecated'], - &[data-value='legacy'] { + &[data-value='legacy'], + &[data-value='internal'] { background: var(--surface-warning); } diff --git a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx index 53ac11062d6..8566c284899 100644 --- a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx +++ b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx @@ -11,7 +11,10 @@ function StatusBanner({status, children}: Props) { return ( status && (
-

{uppercaseFirst(status)}

+

+ {uppercaseFirst(status)} + {status === 'Internal' ? ' only' : null} +

{children}
) diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts index 011cba028c0..189950e5f6f 100644 --- a/polaris.shopify.com/src/types.ts +++ b/polaris.shopify.com/src/types.ts @@ -188,7 +188,8 @@ export type StatusName = | 'Beta' | 'Information' | 'Legacy' - | 'Warning'; + | 'Warning' + | 'Internal'; export type Status = StatusName; From 7bd2616a20f22f280accc2e31f480255a4c2c48a Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 3 Jan 2024 09:06:00 +1100 Subject: [PATCH 02/12] Move the components to deprecated --- .../{internal-only => deprecated}/frame.mdx | 7 +++---- .../{internal-only => deprecated}/loading.mdx | 11 +++++------ .../{internal-only => deprecated}/modal.mdx | 9 ++++----- .../{internal-only => deprecated}/navigation.mdx | 12 ++++++------ .../{internal-only => deprecated}/toast.mdx | 9 ++++----- .../{internal-only => deprecated}/top-bar.mdx | 7 +++---- .../content/components/internal-only/index.mdx | 16 ---------------- .../StatusBadge/StatusBadge.module.scss | 3 +-- .../StatusBanner/StatusBanner.module.scss | 3 +-- 9 files changed, 27 insertions(+), 50 deletions(-) rename polaris.shopify.com/content/components/{internal-only => deprecated}/frame.mdx (93%) rename polaris.shopify.com/content/components/{internal-only => deprecated}/loading.mdx (90%) rename polaris.shopify.com/content/components/{internal-only => deprecated}/modal.mdx (97%) rename polaris.shopify.com/content/components/{internal-only => deprecated}/navigation.mdx (98%) rename polaris.shopify.com/content/components/{internal-only => deprecated}/toast.mdx (96%) rename polaris.shopify.com/content/components/{internal-only => deprecated}/top-bar.mdx (97%) delete mode 100644 polaris.shopify.com/content/components/internal-only/index.mdx diff --git a/polaris.shopify.com/content/components/internal-only/frame.mdx b/polaris.shopify.com/content/components/deprecated/frame.mdx similarity index 93% rename from polaris.shopify.com/content/components/internal-only/frame.mdx rename to polaris.shopify.com/content/components/deprecated/frame.mdx index b16c1fd4fda..29de2040b35 100644 --- a/polaris.shopify.com/content/components/internal-only/frame.mdx +++ b/polaris.shopify.com/content/components/deprecated/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: Internal only +category: Deprecated keywords: - navigation - nav @@ -24,7 +24,7 @@ examples: 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 -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -36,8 +36,7 @@ The frame component, while not visible in the user interface itself, provides th - If you are building a Shopify Application you should not use this component. - Internal only components will be removed in future major versions of Polaris. + This component is no longer supported. diff --git a/polaris.shopify.com/content/components/internal-only/loading.mdx b/polaris.shopify.com/content/components/deprecated/loading.mdx similarity index 90% rename from polaris.shopify.com/content/components/internal-only/loading.mdx rename to polaris.shopify.com/content/components/deprecated/loading.mdx index 2cc59ba1721..361d793db3b 100644 --- a/polaris.shopify.com/content/components/internal-only/loading.mdx +++ b/polaris.shopify.com/content/components/deprecated/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: Internal only +category: Deprecated keywords: - spinner - loader @@ -12,7 +12,7 @@ examples: title: Default description: Use to indicate that the page is loading. previewImg: /images/components/feedback-indicators/loading.png -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -24,10 +24,9 @@ The loading component is used to indicate to merchants that a page is loading or - If you are building a Shopify Application you should use the [App Bridge - Loading - API](https://shopify.dev/docs/api/app-bridge-library/reference/loading). - Internal only components will be removed in future major versions of Polaris. + 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/internal-only/modal.mdx b/polaris.shopify.com/content/components/deprecated/modal.mdx similarity index 97% rename from polaris.shopify.com/content/components/internal-only/modal.mdx rename to polaris.shopify.com/content/components/deprecated/modal.mdx index b441a369372..59e7fca0d0c 100644 --- a/polaris.shopify.com/content/components/internal-only/modal.mdx +++ b/polaris.shopify.com/content/components/deprecated/modal.mdx @@ -1,7 +1,7 @@ --- title: Modal shortDescription: Used to interrupt merchants with urgent information, details, or actions. -category: Internal only +category: Deprecated keywords: - modal - src @@ -57,7 +57,7 @@ examples: 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 -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -69,9 +69,8 @@ Modals are overlays that require merchants to take an action before they can con - If you are building a Shopify Application you should use the [App Bridge Modal - API](https://shopify.dev/docs/api/app-bridge-library/reference/modal). - Internal only components will be removed in future major versions of Polaris. + 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/internal-only/navigation.mdx b/polaris.shopify.com/content/components/deprecated/navigation.mdx similarity index 98% rename from polaris.shopify.com/content/components/internal-only/navigation.mdx rename to polaris.shopify.com/content/components/deprecated/navigation.mdx index 229173941f8..90936fbb16d 100644 --- a/polaris.shopify.com/content/components/internal-only/navigation.mdx +++ b/polaris.shopify.com/content/components/deprecated/navigation.mdx @@ -1,6 +1,6 @@ --- title: Navigation -category: Internal only +category: Deprecated keywords: - navigation - nav @@ -48,7 +48,7 @@ examples: title: Using Major icons description: This example shows how to use the shouldResizeIcon prop when using Major icons previewImg: /images/components/navigation/navigation.png -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -60,10 +60,10 @@ The navigation component is used to display the primary navigation in the sideba - If you are building a Shopify Application you should use the [App Bridge - Navigation Menu - API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu). - Internal only components will be removed in future major versions of Polaris. + 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/internal-only/toast.mdx b/polaris.shopify.com/content/components/deprecated/toast.mdx similarity index 96% rename from polaris.shopify.com/content/components/internal-only/toast.mdx rename to polaris.shopify.com/content/components/deprecated/toast.mdx index 6d83d36a488..3c581382731 100644 --- a/polaris.shopify.com/content/components/internal-only/toast.mdx +++ b/polaris.shopify.com/content/components/deprecated/toast.mdx @@ -1,7 +1,7 @@ --- title: Toast shortDescription: A non-disruptive message that provides quick feedback on the outcome of an action. -category: Internal only +category: Deprecated keywords: - toast - flash message @@ -31,7 +31,7 @@ examples: 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 -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -43,9 +43,8 @@ The toast component is a non-disruptive message that appears at the bottom of th - If you are building a Shopify Application you should use the [App Bridge Toast - API](https://shopify.dev/docs/api/app-bridge-library/reference/toast). - Internal only components will be removed in future major versions of Polaris. + 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/internal-only/top-bar.mdx b/polaris.shopify.com/content/components/deprecated/top-bar.mdx similarity index 97% rename from polaris.shopify.com/content/components/internal-only/top-bar.mdx rename to polaris.shopify.com/content/components/deprecated/top-bar.mdx index f9eefd7e7cb..b986bc58315 100644 --- a/polaris.shopify.com/content/components/internal-only/top-bar.mdx +++ b/polaris.shopify.com/content/components/deprecated/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: Internal only +category: Deprecated keywords: - global chrome - global features @@ -21,7 +21,7 @@ examples: 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 -status: Internal +status: Deprecated --- # {frontmatter.title} @@ -33,8 +33,7 @@ The top bar is a header component that allows merchants to search, access menus, - If you are building a Shopify Application you should not use this component. - Internal only components will be removed in future major versions of Polaris. + This component is no longer supported. diff --git a/polaris.shopify.com/content/components/internal-only/index.mdx b/polaris.shopify.com/content/components/internal-only/index.mdx deleted file mode 100644 index cbefd3b2534..00000000000 --- a/polaris.shopify.com/content/components/internal-only/index.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Internal Only -shortDescription: Internal only components will be removed in future major versions of Polaris. These components **SHOULD NOT** be used by Application Developers and are documented only for Shopify's internal development teams. -expanded: true -order: 12 ---- - -# {frontmatter.title} - - - -Internal only components will be removed in future major versions of Polaris. These components **SHOULD NOT** be used by [Application Developers](https://shopify.dev/docs/apps) and are documented only for Shopify's internal development teams. - - - - diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss index c76339c1c8e..4d2ec90d825 100644 --- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss +++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss @@ -13,8 +13,7 @@ &[data-value='warning'], &[data-value='deprecated'], - &[data-value='legacy'], - &[data-value='internal'] { + &[data-value='legacy'] { background: var(--surface-warning); } diff --git a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss index 63fa9f77700..21d0a14a5de 100644 --- a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss +++ b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.module.scss @@ -11,8 +11,7 @@ &[data-value='warning'], &[data-value='deprecated'], - &[data-value='legacy'], - &[data-value='internal'] { + &[data-value='legacy'] { background: var(--surface-warning); } From 05a67f231e30f2935aed2a37b30f3d52dd484f8e Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 4 Jan 2024 12:56:11 +1100 Subject: [PATCH 03/12] Internal only with auth --- .../deprecated/contextual-save-bar.mdx | 40 ++++++++++ .../content/components/deprecated/frame.mdx | 40 ++++++++++ .../content/components/deprecated/index.mdx | 3 +- .../content/components/deprecated/loading.mdx | 30 ++++++++ .../content/components/deprecated/modal.mdx | 74 +++++++++++++++++++ .../components/deprecated/navigation.mdx | 67 +++++++++++++++++ .../content/components/deprecated/toast.mdx | 48 ++++++++++++ .../content/components/deprecated/top-bar.mdx | 37 ++++++++++ .../contextual-save-bar.mdx | 3 +- .../{utilities => internal-only}/frame.mdx | 3 +- .../components/internal-only/index.mdx | 17 +++++ .../loading.mdx | 3 +- .../{overlays => internal-only}/modal.mdx | 3 +- .../navigation.mdx | 3 +- .../toast.mdx | 3 +- .../{navigation => internal-only}/top-bar.mdx | 3 +- polaris.shopify.com/scripts/gen-cache-json.ts | 2 + .../src/components/Frame/Frame.module.scss | 2 +- .../src/components/Frame/Frame.tsx | 6 ++ .../StatusBadge/StatusBadge.module.scss | 3 +- polaris.shopify.com/src/types.ts | 2 + 21 files changed, 381 insertions(+), 11 deletions(-) create mode 100644 polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/frame.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/loading.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/modal.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/navigation.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/toast.mdx create mode 100644 polaris.shopify.com/content/components/deprecated/top-bar.mdx rename polaris.shopify.com/content/components/{selection-and-input => internal-only}/contextual-save-bar.mdx (98%) rename polaris.shopify.com/content/components/{utilities => internal-only}/frame.mdx (98%) create mode 100644 polaris.shopify.com/content/components/internal-only/index.mdx rename polaris.shopify.com/content/components/{feedback-indicators => internal-only}/loading.mdx (97%) rename polaris.shopify.com/content/components/{overlays => internal-only}/modal.mdx (99%) rename polaris.shopify.com/content/components/{navigation => internal-only}/navigation.mdx (99%) rename polaris.shopify.com/content/components/{feedback-indicators => internal-only}/toast.mdx (99%) rename polaris.shopify.com/content/components/{navigation => internal-only}/top-bar.mdx (99%) 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..32532f4c1df --- /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/selection-and-input/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..e3447974199 --- /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/utilities/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 [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. + + + + + 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..f4a9d53f664 --- /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/feedback-indicators/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..d94e90e0e7c --- /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/overlays/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..839116d2572 --- /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/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/navigation/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/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/toast.mdx b/polaris.shopify.com/content/components/deprecated/toast.mdx new file mode 100644 index 00000000000..bac7cae97e9 --- /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/feedback-indicators/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..47ca2a90cc5 --- /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/navigation/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/selection-and-input/contextual-save-bar.mdx b/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx similarity index 98% 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..548ae06785b 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 @@ -21,6 +21,7 @@ examples: 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 +hideFromNav: true --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/utilities/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx similarity index 98% rename from polaris.shopify.com/content/components/utilities/frame.mdx rename to polaris.shopify.com/content/components/internal-only/frame.mdx index 9e73ae14c00..98c3c32b83e 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 @@ -24,6 +24,7 @@ examples: 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 +hideFromNav: true --- # {frontmatter.title} 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..f08a8a1f001 --- /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 +navLockIcon: 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 97% rename from polaris.shopify.com/content/components/feedback-indicators/loading.mdx rename to polaris.shopify.com/content/components/internal-only/loading.mdx index 409514fe1b0..41976bb845e 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 @@ -12,6 +12,7 @@ examples: title: Default description: Use to indicate that the page is loading. previewImg: /images/components/feedback-indicators/loading.png +hideFromNav: true --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/overlays/modal.mdx b/polaris.shopify.com/content/components/internal-only/modal.mdx similarity index 99% rename from polaris.shopify.com/content/components/overlays/modal.mdx rename to polaris.shopify.com/content/components/internal-only/modal.mdx index bde6c79a2fe..5aceae05aab 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 @@ -57,6 +57,7 @@ examples: 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 +hideFromNav: true --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/navigation/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx similarity index 99% rename from polaris.shopify.com/content/components/navigation/navigation.mdx rename to polaris.shopify.com/content/components/internal-only/navigation.mdx index 459baa82bad..988f55ee0ba 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 @@ -48,6 +48,7 @@ examples: title: Using Major icons description: This example shows how to use the shouldResizeIcon prop when using Major icons previewImg: /images/components/navigation/navigation.png +hideFromNav: true --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/feedback-indicators/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx similarity index 99% rename from polaris.shopify.com/content/components/feedback-indicators/toast.mdx rename to polaris.shopify.com/content/components/internal-only/toast.mdx index 2c9af183836..471010fef05 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 @@ -31,6 +31,7 @@ examples: 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 +hideFromNav: true --- # {frontmatter.title} 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 99% 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..9a246e2113d 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 @@ -21,6 +21,7 @@ examples: 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 +hideFromNav: true --- # {frontmatter.title} diff --git a/polaris.shopify.com/scripts/gen-cache-json.ts b/polaris.shopify.com/scripts/gen-cache-json.ts index 739594eabd2..a34ecb13d0c 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, + navLockIcon, } = md.frontMatter; const {slug} = md; @@ -57,6 +58,7 @@ const genNavJson = async (markdownFiles) => { componentDescriptions, relatedResources, hideFromNav: hideFromNav || false, + navLockIcon: navLockIcon || false, }); }); diff --git a/polaris.shopify.com/src/components/Frame/Frame.module.scss b/polaris.shopify.com/src/components/Frame/Frame.module.scss index cc5bc632e01..4ae72d099a6 100644 --- a/polaris.shopify.com/src/components/Frame/Frame.module.scss +++ b/polaris.shopify.com/src/components/Frame/Frame.module.scss @@ -141,7 +141,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..9b9666fa526 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 { @@ -253,6 +255,10 @@ function NavItem({ > {child.title} + {child.navLockIcon ? ( + + ) : null} + {child.status && } diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss index 4d2ec90d825..ce7a6a0daee 100644 --- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss +++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss @@ -1,11 +1,12 @@ .StatusBadge { font-size: var(--font-size-100); - letter-spacing: 0; font-weight: var(--font-weight-400); border-radius: var(--border-radius-round); padding: 0.05rem 0.25rem; color: var(--text); white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; &[data-value='alpha'] { background: var(--surface-attention); diff --git a/polaris.shopify.com/src/types.ts b/polaris.shopify.com/src/types.ts index 011cba028c0..1a53e658569 100644 --- a/polaris.shopify.com/src/types.ts +++ b/polaris.shopify.com/src/types.ts @@ -72,6 +72,7 @@ export type FrontMatter = { keywords?: (string | number)[]; status?: Status; hideFromNav?: boolean; + navLockIcon?: boolean; hideChildren?: true; featured?: boolean; previewImg?: string; @@ -246,6 +247,7 @@ export interface NavItem { }; expanded?: boolean; hideFromNav?: boolean; + navLockIcon?: boolean; featured?: boolean; } From 634a8ff5030e6c759d9382759649e7f137245148 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 4 Jan 2024 13:01:09 +1100 Subject: [PATCH 04/12] Fix merge conflict --- .../content/components/internal-only/frame.mdx | 8 -------- .../content/components/internal-only/loading.mdx | 8 -------- .../content/components/internal-only/modal.mdx | 8 -------- .../content/components/internal-only/navigation.mdx | 8 -------- .../content/components/internal-only/toast.mdx | 8 -------- .../content/components/internal-only/top-bar.mdx | 8 -------- 6 files changed, 48 deletions(-) diff --git a/polaris.shopify.com/content/components/internal-only/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx index 302ee7d12a7..733f69e48b1 100644 --- a/polaris.shopify.com/content/components/internal-only/frame.mdx +++ b/polaris.shopify.com/content/components/internal-only/frame.mdx @@ -1,11 +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. -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/frame.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/frame.mdx keywords: - navigation - nav @@ -28,11 +24,7 @@ examples: 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 -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/frame.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/frame.mdx --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/internal-only/loading.mdx b/polaris.shopify.com/content/components/internal-only/loading.mdx index 8fdb458bb86..889db8b3197 100644 --- a/polaris.shopify.com/content/components/internal-only/loading.mdx +++ b/polaris.shopify.com/content/components/internal-only/loading.mdx @@ -1,11 +1,7 @@ --- title: Loading shortDescription: Used to indicate to merchants that a page is loading or an upload is processing. -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/loading.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/loading.mdx keywords: - spinner - loader @@ -16,11 +12,7 @@ examples: title: Default description: Use to indicate that the page is loading. previewImg: /images/components/feedback-indicators/loading.png -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/loading.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/loading.mdx --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/internal-only/modal.mdx b/polaris.shopify.com/content/components/internal-only/modal.mdx index 055c4591ed5..1ff49344609 100644 --- a/polaris.shopify.com/content/components/internal-only/modal.mdx +++ b/polaris.shopify.com/content/components/internal-only/modal.mdx @@ -1,11 +1,7 @@ --- title: Modal shortDescription: Used to interrupt merchants with urgent information, details, or actions. -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/modal.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/modal.mdx keywords: - modal - src @@ -61,11 +57,7 @@ examples: 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 -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/modal.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/modal.mdx --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/internal-only/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx index 3c78c059a3f..e0cfdf6a76e 100644 --- a/polaris.shopify.com/content/components/internal-only/navigation.mdx +++ b/polaris.shopify.com/content/components/internal-only/navigation.mdx @@ -1,10 +1,6 @@ --- title: Navigation -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/navigation.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/navigation.mdx keywords: - navigation - nav @@ -52,11 +48,7 @@ examples: title: Using Major icons description: This example shows how to use the shouldResizeIcon prop when using Major icons previewImg: /images/components/navigation/navigation.png -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/navigation.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/navigation.mdx --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/internal-only/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx index caef562afc7..3285429180d 100644 --- a/polaris.shopify.com/content/components/internal-only/toast.mdx +++ b/polaris.shopify.com/content/components/internal-only/toast.mdx @@ -1,11 +1,7 @@ --- title: Toast shortDescription: A non-disruptive message that provides quick feedback on the outcome of an action. -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/toast.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/toast.mdx keywords: - toast - flash message @@ -35,11 +31,7 @@ examples: 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 -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/toast.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/toast.mdx --- # {frontmatter.title} diff --git a/polaris.shopify.com/content/components/internal-only/top-bar.mdx b/polaris.shopify.com/content/components/internal-only/top-bar.mdx index 05d26f3924e..2ba9c0fa0a6 100644 --- a/polaris.shopify.com/content/components/internal-only/top-bar.mdx +++ b/polaris.shopify.com/content/components/internal-only/top-bar.mdx @@ -1,11 +1,7 @@ --- title: Top bar shortDescription: Appears at the top of the page and is used to brand and navigate major applications areas. -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/top-bar.mdx -category: Deprecated -======== category: Internal only ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/top-bar.mdx keywords: - global chrome - global features @@ -25,11 +21,7 @@ examples: 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 -<<<<<<<< HEAD:polaris.shopify.com/content/components/deprecated/top-bar.mdx -status: Deprecated -======== hideFromNav: true ->>>>>>>> internal-only-with-auth:polaris.shopify.com/content/components/internal-only/top-bar.mdx --- # {frontmatter.title} From e6c25c671f3f8f80d4fe153da2dd50f61e49d9e6 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 4 Jan 2024 14:56:41 +1100 Subject: [PATCH 05/12] Fix search and components landing page --- .../components/deprecated/contextual-save-bar.mdx | 2 +- .../content/components/deprecated/frame.mdx | 2 +- .../content/components/deprecated/loading.mdx | 2 +- .../content/components/deprecated/modal.mdx | 2 +- .../content/components/deprecated/navigation.mdx | 2 +- .../content/components/deprecated/toast.mdx | 2 +- .../content/components/deprecated/top-bar.mdx | 2 +- polaris.shopify.com/content/components/index.mdx | 11 +++++++---- .../internal-only/contextual-save-bar.mdx | 2 +- .../content/components/internal-only/frame.mdx | 2 +- .../content/components/internal-only/index.mdx | 2 +- .../content/components/internal-only/loading.mdx | 2 +- .../content/components/internal-only/modal.mdx | 2 +- .../content/components/internal-only/navigation.mdx | 2 +- .../content/components/internal-only/toast.mdx | 2 +- .../content/components/internal-only/top-bar.mdx | 2 +- .../contextual-save-bar.png | Bin .../components/{utilities => deprecated}/frame.png | Bin .../{feedback-indicators => deprecated}/loading.png | Bin .../components/{overlays => deprecated}/modal.png | Bin .../{navigation => deprecated}/navigation.png | Bin .../{feedback-indicators => deprecated}/toast.png | Bin .../{navigation => deprecated}/top-bar.png | Bin polaris.shopify.com/scripts/gen-cache-json.ts | 4 +++- .../src/components/RichCardGrid/RichCardGrid.tsx | 6 ++++++ 25 files changed, 31 insertions(+), 20 deletions(-) rename polaris.shopify.com/public/images/components/{selection-and-input => deprecated}/contextual-save-bar.png (100%) rename polaris.shopify.com/public/images/components/{utilities => deprecated}/frame.png (100%) rename polaris.shopify.com/public/images/components/{feedback-indicators => deprecated}/loading.png (100%) rename polaris.shopify.com/public/images/components/{overlays => deprecated}/modal.png (100%) rename polaris.shopify.com/public/images/components/{navigation => deprecated}/navigation.png (100%) rename polaris.shopify.com/public/images/components/{feedback-indicators => deprecated}/toast.png (100%) rename polaris.shopify.com/public/images/components/{navigation => deprecated}/top-bar.png (100%) diff --git a/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx b/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx index 32532f4c1df..fe8700de8e4 100644 --- a/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx +++ b/polaris.shopify.com/content/components/deprecated/contextual-save-bar.mdx @@ -20,7 +20,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/frame.mdx b/polaris.shopify.com/content/components/deprecated/frame.mdx index e3447974199..1cf56ab2953 100644 --- a/polaris.shopify.com/content/components/deprecated/frame.mdx +++ b/polaris.shopify.com/content/components/deprecated/frame.mdx @@ -23,7 +23,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/loading.mdx b/polaris.shopify.com/content/components/deprecated/loading.mdx index f4a9d53f664..f4a6968ee53 100644 --- a/polaris.shopify.com/content/components/deprecated/loading.mdx +++ b/polaris.shopify.com/content/components/deprecated/loading.mdx @@ -11,7 +11,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/modal.mdx b/polaris.shopify.com/content/components/deprecated/modal.mdx index d94e90e0e7c..9aaa13c807f 100644 --- a/polaris.shopify.com/content/components/deprecated/modal.mdx +++ b/polaris.shopify.com/content/components/deprecated/modal.mdx @@ -56,7 +56,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/navigation.mdx b/polaris.shopify.com/content/components/deprecated/navigation.mdx index 839116d2572..65b27dbb7c2 100644 --- a/polaris.shopify.com/content/components/deprecated/navigation.mdx +++ b/polaris.shopify.com/content/components/deprecated/navigation.mdx @@ -47,7 +47,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/toast.mdx b/polaris.shopify.com/content/components/deprecated/toast.mdx index bac7cae97e9..ad0269aa526 100644 --- a/polaris.shopify.com/content/components/deprecated/toast.mdx +++ b/polaris.shopify.com/content/components/deprecated/toast.mdx @@ -30,7 +30,7 @@ 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 status: Deprecated --- diff --git a/polaris.shopify.com/content/components/deprecated/top-bar.mdx b/polaris.shopify.com/content/components/deprecated/top-bar.mdx index 47ca2a90cc5..2e7d93dbda4 100644 --- a/polaris.shopify.com/content/components/deprecated/top-bar.mdx +++ b/polaris.shopify.com/content/components/deprecated/top-bar.mdx @@ -20,7 +20,7 @@ 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 status: Deprecated --- 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/internal-only/contextual-save-bar.mdx b/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx index 548ae06785b..cecbe9b1e63 100644 --- a/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx +++ b/polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx @@ -20,7 +20,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx index 733f69e48b1..165f1c1fb78 100644 --- a/polaris.shopify.com/content/components/internal-only/frame.mdx +++ b/polaris.shopify.com/content/components/internal-only/frame.mdx @@ -23,7 +23,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/index.mdx b/polaris.shopify.com/content/components/internal-only/index.mdx index f08a8a1f001..b49b39647d3 100644 --- a/polaris.shopify.com/content/components/internal-only/index.mdx +++ b/polaris.shopify.com/content/components/internal-only/index.mdx @@ -14,4 +14,4 @@ navLockIcon: true - + diff --git a/polaris.shopify.com/content/components/internal-only/loading.mdx b/polaris.shopify.com/content/components/internal-only/loading.mdx index 889db8b3197..726996935c1 100644 --- a/polaris.shopify.com/content/components/internal-only/loading.mdx +++ b/polaris.shopify.com/content/components/internal-only/loading.mdx @@ -11,7 +11,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/modal.mdx b/polaris.shopify.com/content/components/internal-only/modal.mdx index 1ff49344609..a408d8f9887 100644 --- a/polaris.shopify.com/content/components/internal-only/modal.mdx +++ b/polaris.shopify.com/content/components/internal-only/modal.mdx @@ -56,7 +56,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx index e0cfdf6a76e..cbba0290c00 100644 --- a/polaris.shopify.com/content/components/internal-only/navigation.mdx +++ b/polaris.shopify.com/content/components/internal-only/navigation.mdx @@ -47,7 +47,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx index 3285429180d..cb888d9933e 100644 --- a/polaris.shopify.com/content/components/internal-only/toast.mdx +++ b/polaris.shopify.com/content/components/internal-only/toast.mdx @@ -30,7 +30,7 @@ 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 --- diff --git a/polaris.shopify.com/content/components/internal-only/top-bar.mdx b/polaris.shopify.com/content/components/internal-only/top-bar.mdx index 2ba9c0fa0a6..bfd04fac274 100644 --- a/polaris.shopify.com/content/components/internal-only/top-bar.mdx +++ b/polaris.shopify.com/content/components/internal-only/top-bar.mdx @@ -20,7 +20,7 @@ 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 --- 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 a34ecb13d0c..ace558e5ce9 100644 --- a/polaris.shopify.com/scripts/gen-cache-json.ts +++ b/polaris.shopify.com/scripts/gen-cache-json.ts @@ -121,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/RichCardGrid/RichCardGrid.tsx b/polaris.shopify.com/src/components/RichCardGrid/RichCardGrid.tsx index da6b5ff32e5..f993ac29521 100644 --- a/polaris.shopify.com/src/components/RichCardGrid/RichCardGrid.tsx +++ b/polaris.shopify.com/src/components/RichCardGrid/RichCardGrid.tsx @@ -14,19 +14,25 @@ export interface RichCardGridProps { status?: Status; icon?: string; featured?: boolean; + hideFromNav?: boolean; } function RichCardGrid({ cards, category, + includeHiddenItems = false, }: { cards: RichCardGridProps[]; category?: FoundationsCategory; + includeHiddenItems?: boolean; }) { return ( {cards .filter(({draft}) => !draft) + .filter((card) => + includeHiddenItems === true ? true : !card.hideFromNav, + ) .map( ( { From 671f7c0ca928e3fb7eb0cef88fb2a0a96975908e Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 4 Jan 2024 18:13:26 +1100 Subject: [PATCH 06/12] Force router.reload when clicking on internal page --- .../src/components/Frame/Frame.tsx | 45 ++++++++++++------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/polaris.shopify.com/src/components/Frame/Frame.tsx b/polaris.shopify.com/src/components/Frame/Frame.tsx index 9b9666fa526..0f36aaa5787 100644 --- a/polaris.shopify.com/src/components/Frame/Frame.tsx +++ b/polaris.shopify.com/src/components/Frame/Frame.tsx @@ -243,24 +243,35 @@ function NavItem({ isCurrent && styles.isCurrent, )} > - { - if (level === 0 && i === 0) { - handleShiftTabOnFirstLink(evt); - } - }} - > - {child.title} - - {child.navLockIcon ? ( + {child.navLockIcon ? ( + { + if (level === 0 && i === 0) { + handleShiftTabOnFirstLink(evt); + } + }} + > + {child.title} - ) : null} - - {child.status && } - + + ) : ( + { + if (level === 0 && i === 0) { + handleShiftTabOnFirstLink(evt); + } + }} + > + {child.title} + {child.status && } + + )} {isExpandable && !child.expanded && (