From 3713646e1b97d16da465b18a2df65c22045195b8 Mon Sep 17 00:00:00 2001 From: Mark Appleby Date: Wed, 6 Aug 2025 14:51:07 -0400 Subject: [PATCH 1/2] [PageActions] [FullscreenBar] Deprecate (#13965) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? 1. [PageActions](https://polaris-react.shopify.com/components/actions/page-actions) are a legacy UX solution. Page actions should instead be presented via the [contextual save bar](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar) (in the case of Save) OR via the [Polaris Page](https://polaris-react.shopify.com/components/layout-and-structure/page) action props (i.e. `primaryAction`, `secondaryActions`, `actionGroups`). 2. [FullscreenBar](https://polaris-react.shopify.com/components/navigation/fullscreen-bar) is a legacy UX solution. Instead [max variant modals](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal) should be used in combination with the [SaveBar](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar) and [TitleBar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar). The [App Design Guidelines](https://shopify.dev/docs/apps/design/app-structure) explicitly state not to use FullscreenBar. 01-40-tyci1-sxt9y Built for Shopify requirement [4.1.6](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-modals-appropriately), lists using FullscreenBar as a failure example. 01-43-t7px5-mzkqr ### WHAT is this pull request doing? This PR moves both the `PageActions` and `FullscreenBar` components to the Deprecated section in the nav. It also displays a "Deprecated" banner on both of the component pages. 01-59-c5awl-pclmj 01-58-qmsur-50290 ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .../fullscreen-bar.mdx | 13 ++++++++++-- .../{actions => deprecated}/page-actions.mdx | 10 +++++++-- polaris.shopify.com/next-env.d.ts | 2 +- polaris.shopify.com/next.config.js | 20 +++++++++--------- .../fullscreen-bar.png | Bin .../{actions => deprecated}/page-actions.png | Bin 6 files changed, 30 insertions(+), 15 deletions(-) rename polaris.shopify.com/content/components/{navigation => deprecated}/fullscreen-bar.mdx (71%) rename polaris.shopify.com/content/components/{actions => deprecated}/page-actions.mdx (90%) rename polaris.shopify.com/public/images/components/{navigation => deprecated}/fullscreen-bar.png (100%) rename polaris.shopify.com/public/images/components/{actions => deprecated}/page-actions.png (100%) diff --git a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx b/polaris.shopify.com/content/components/deprecated/fullscreen-bar.mdx similarity index 71% rename from polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx rename to polaris.shopify.com/content/components/deprecated/fullscreen-bar.mdx index 63be92d9ef2..22cff07f5f2 100644 --- a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx +++ b/polaris.shopify.com/content/components/deprecated/fullscreen-bar.mdx @@ -1,6 +1,6 @@ --- title: Fullscreen bar -category: Navigation +category: Deprecated keywords: - topbar - top bar @@ -14,7 +14,8 @@ examples: - fileName: fullscreen-bar-no-children.tsx title: No children description: Use this default to show ONLY the Back button. -previewImg: /images/components/navigation/fullscreen-bar.png +status: Deprecated +previewImg: /images/components/deprecated/fullscreen-bar.png --- # {frontmatter.title} @@ -25,6 +26,14 @@ The Fullscreen bar is a header component that should be presented at the top of + + This component is no longer supported. Please use the [App Bridge Modal + API](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal?example=modals-with-different-options-opening-a-max-size-modal) + in combination with the [App Bridge Title Bar + API](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar) + instead. + + diff --git a/polaris.shopify.com/content/components/actions/page-actions.mdx b/polaris.shopify.com/content/components/deprecated/page-actions.mdx similarity index 90% rename from polaris.shopify.com/content/components/actions/page-actions.mdx rename to polaris.shopify.com/content/components/deprecated/page-actions.mdx index 970c7600332..0840ed2b5b9 100644 --- a/polaris.shopify.com/content/components/actions/page-actions.mdx +++ b/polaris.shopify.com/content/components/deprecated/page-actions.mdx @@ -1,7 +1,7 @@ --- title: Page actions shortDescription: Allows merchants to take key actions at the bottom of specific pages in the interface. -category: Actions +category: Deprecated keywords: - PageActions - bottom of page actions @@ -25,7 +25,8 @@ examples: - fileName: page-actions-with-custom-secondary-action.tsx title: With custom secondary action description: Use to create a custom secondary action. -previewImg: /images/components/actions/page-actions.png +status: Deprecated +previewImg: /images/components/deprecated/page-actions.png --- # {frontmatter.title} @@ -36,6 +37,11 @@ Page actions let merchants take key actions at the bottom of specific pages in t + + This component is no longer supported. Please use the [App Bridge Save Bar + API](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar) instead. + + diff --git a/polaris.shopify.com/next-env.d.ts b/polaris.shopify.com/next-env.d.ts index a4a7b3f5cfa..52e831b4342 100644 --- a/polaris.shopify.com/next-env.d.ts +++ b/polaris.shopify.com/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index 1554ab7cae2..1c5f34c2c9a 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -237,11 +237,6 @@ const actions = [ destination: '/components/actions/button', permanent: true, }, - { - source: '/components/page-actions', - destination: '/components/actions/page-actions', - permanent: true, - }, ]; const deprecated = [ @@ -260,6 +255,11 @@ const deprecated = [ destination: '/components/deprecated/display-text', permanent: true, }, + { + source: '/components/fullscreen-bar', + destination: '/components/deprecated/fullscreen-bar', + permanent: true, + }, { source: '/components/heading', destination: '/components/deprecated/heading', @@ -285,6 +285,11 @@ const deprecated = [ destination: '/components/deprecated/legacy-tabs', permanent: true, }, + { + source: '/components/page-actions', + destination: '/components/deprecated/page-actions', + permanent: true, + }, { source: '/components/selection-and-input/setting-toggle', destination: '/components/deprecated/setting-toggle', @@ -585,11 +590,6 @@ const navigation = [ destination: '/components/navigation/footer-help', permanent: true, }, - { - source: '/components/fullscreen-bar', - destination: '/components/navigation/fullscreen-bar', - permanent: true, - }, { source: '/components/link', destination: '/components/navigation/link', diff --git a/polaris.shopify.com/public/images/components/navigation/fullscreen-bar.png b/polaris.shopify.com/public/images/components/deprecated/fullscreen-bar.png similarity index 100% rename from polaris.shopify.com/public/images/components/navigation/fullscreen-bar.png rename to polaris.shopify.com/public/images/components/deprecated/fullscreen-bar.png diff --git a/polaris.shopify.com/public/images/components/actions/page-actions.png b/polaris.shopify.com/public/images/components/deprecated/page-actions.png similarity index 100% rename from polaris.shopify.com/public/images/components/actions/page-actions.png rename to polaris.shopify.com/public/images/components/deprecated/page-actions.png From 23ef26f4746310269527a3736ad35a80388c19f1 Mon Sep 17 00:00:00 2001 From: SMAKSS Date: Sat, 9 Aug 2025 22:52:56 +0100 Subject: [PATCH 2/2] Fix editPageLinkPath to include leading slash for correct URL generation --- .changeset/spicy-states-switch.md | 5 +++++ .../pages/components/[group]/[component]/index.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/spicy-states-switch.md diff --git a/.changeset/spicy-states-switch.md b/.changeset/spicy-states-switch.md new file mode 100644 index 00000000000..f8f9875316f --- /dev/null +++ b/.changeset/spicy-states-switch.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Fix `editPageLinkPath` to include leading slash for correct URL generation diff --git a/polaris.shopify.com/pages/components/[group]/[component]/index.tsx b/polaris.shopify.com/pages/components/[group]/[component]/index.tsx index 2ccd07c5fc6..5ca18cf05cb 100644 --- a/polaris.shopify.com/pages/components/[group]/[component]/index.tsx +++ b/polaris.shopify.com/pages/components/[group]/[component]/index.tsx @@ -91,7 +91,7 @@ export const getStaticProps: GetStaticProps< const relativeMdPath = `content/components/${groupSlug}/${componentSlug}.mdx`; const mdFilePath = path.resolve(process.cwd(), relativeMdPath); - const editPageLinkPath = `polaris.shopify.com/${relativeMdPath}`; + const editPageLinkPath = `/polaris.shopify.com/${relativeMdPath}`; if (fs.existsSync(mdFilePath)) { const [mdx, data] = await serializeMdx(mdFilePath, {load});