Skip to content

Commit 3713646

Browse files
[PageActions] [FullscreenBar] Deprecate (#13965)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Open it as a draft if it’s a work in progress --> ### 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. <img width="840" height="324" alt="01-40-tyci1-sxt9y" src="https://github.com/user-attachments/assets/66ad93f8-9c08-44bc-8eba-03888ff834f6" /> 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. <img width="910" height="824" alt="01-43-t7px5-mzkqr" src="https://github.com/user-attachments/assets/503c87b1-910b-4003-a821-4b67b20a597d" /> <!-- Context about the problem that’s being addressed. --> ### 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. <img width="1305" height="875" alt="01-59-c5awl-pclmj" src="https://github.com/user-attachments/assets/c5edc48b-aa77-4e33-ba95-a30c286308d0" /> <img width="1307" height="823" alt="01-58-qmsur-50290" src="https://github.com/user-attachments/assets/539050a1-89f3-4269-bd87-b8292e480bca" /> ### 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
1 parent 34ade0c commit 3713646

File tree

6 files changed

+30
-15
lines changed

6 files changed

+30
-15
lines changed

polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx renamed to polaris.shopify.com/content/components/deprecated/fullscreen-bar.mdx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Fullscreen bar
3-
category: Navigation
3+
category: Deprecated
44
keywords:
55
- topbar
66
- top bar
@@ -14,7 +14,8 @@ examples:
1414
- fileName: fullscreen-bar-no-children.tsx
1515
title: No children
1616
description: Use this default to show ONLY the Back button.
17-
previewImg: /images/components/navigation/fullscreen-bar.png
17+
status: Deprecated
18+
previewImg: /images/components/deprecated/fullscreen-bar.png
1819
---
1920

2021
# {frontmatter.title}
@@ -25,6 +26,14 @@ The Fullscreen bar is a header component that should be presented at the top of
2526

2627
</Lede>
2728

29+
<StatusBanner status={frontmatter.status}>
30+
This component is no longer supported. Please use the [App Bridge Modal
31+
API](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal?example=modals-with-different-options-opening-a-max-size-modal)
32+
in combination with the [App Bridge Title Bar
33+
API](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar)
34+
instead.
35+
</StatusBanner>
36+
2837
<Examples />
2938

3039
<Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/actions/page-actions.mdx renamed to polaris.shopify.com/content/components/deprecated/page-actions.mdx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Page actions
33
shortDescription: Allows merchants to take key actions at the bottom of specific pages in the interface.
4-
category: Actions
4+
category: Deprecated
55
keywords:
66
- PageActions
77
- bottom of page actions
@@ -25,7 +25,8 @@ examples:
2525
- fileName: page-actions-with-custom-secondary-action.tsx
2626
title: With custom secondary action
2727
description: Use to create a custom secondary action.
28-
previewImg: /images/components/actions/page-actions.png
28+
status: Deprecated
29+
previewImg: /images/components/deprecated/page-actions.png
2930
---
3031

3132
# {frontmatter.title}
@@ -36,6 +37,11 @@ Page actions let merchants take key actions at the bottom of specific pages in t
3637

3738
</Lede>
3839

40+
<StatusBanner status={frontmatter.status}>
41+
This component is no longer supported. Please use the [App Bridge Save Bar
42+
API](https://shopify.dev/docs/api/app-bridge-library/apis/save-bar) instead.
43+
</StatusBanner>
44+
3945
<Examples />
4046

4147
<Props componentName={frontmatter.title} />

polaris.shopify.com/next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
5+
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

polaris.shopify.com/next.config.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -237,11 +237,6 @@ const actions = [
237237
destination: '/components/actions/button',
238238
permanent: true,
239239
},
240-
{
241-
source: '/components/page-actions',
242-
destination: '/components/actions/page-actions',
243-
permanent: true,
244-
},
245240
];
246241

247242
const deprecated = [
@@ -260,6 +255,11 @@ const deprecated = [
260255
destination: '/components/deprecated/display-text',
261256
permanent: true,
262257
},
258+
{
259+
source: '/components/fullscreen-bar',
260+
destination: '/components/deprecated/fullscreen-bar',
261+
permanent: true,
262+
},
263263
{
264264
source: '/components/heading',
265265
destination: '/components/deprecated/heading',
@@ -285,6 +285,11 @@ const deprecated = [
285285
destination: '/components/deprecated/legacy-tabs',
286286
permanent: true,
287287
},
288+
{
289+
source: '/components/page-actions',
290+
destination: '/components/deprecated/page-actions',
291+
permanent: true,
292+
},
288293
{
289294
source: '/components/selection-and-input/setting-toggle',
290295
destination: '/components/deprecated/setting-toggle',
@@ -585,11 +590,6 @@ const navigation = [
585590
destination: '/components/navigation/footer-help',
586591
permanent: true,
587592
},
588-
{
589-
source: '/components/fullscreen-bar',
590-
destination: '/components/navigation/fullscreen-bar',
591-
permanent: true,
592-
},
593593
{
594594
source: '/components/link',
595595
destination: '/components/navigation/link',

polaris.shopify.com/public/images/components/navigation/fullscreen-bar.png renamed to polaris.shopify.com/public/images/components/deprecated/fullscreen-bar.png

File renamed without changes.

polaris.shopify.com/public/images/components/actions/page-actions.png renamed to polaris.shopify.com/public/images/components/deprecated/page-actions.png

File renamed without changes.

0 commit comments

Comments
 (0)