diff --git a/polaris.shopify.com/content/components/deprecated/frame.mdx b/polaris.shopify.com/content/components/deprecated/frame.mdx
index 33492db12db..d5b34afe3a3 100644
--- a/polaris.shopify.com/content/components/deprecated/frame.mdx
+++ b/polaris.shopify.com/content/components/deprecated/frame.mdx
@@ -31,7 +31,7 @@ status: Deprecated
-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/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/deprecated/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
+The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
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 7887ac21eea..f2271088766 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
@@ -50,7 +50,7 @@ The contextual save bar component should:
- Become visible when a form on the page has unsaved changes
- Be used to save or discard in-progress changes
- Provide brief and helpful context on the nature of in-progress changes
-- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/deprecated/modal) for each section where changes can be made and saved.
+- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/internal-only/modal) for each section where changes can be made and saved.
---
diff --git a/polaris.shopify.com/content/components/internal-only/frame.mdx b/polaris.shopify.com/content/components/internal-only/frame.mdx
index 8f1f3738ceb..d728089bfdd 100644
--- a/polaris.shopify.com/content/components/internal-only/frame.mdx
+++ b/polaris.shopify.com/content/components/internal-only/frame.mdx
@@ -32,14 +32,10 @@ internalOnly: true
-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/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/deprecated/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
+The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/internal-only/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/internal-only/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
-
- This component is no longer supported.
-
-
@@ -49,9 +45,9 @@ The frame component, while not visible in the user interface itself, provides th
For the best experience when creating an application frame, use the following components:
- [Top bar](https://polaris.shopify.com/components/top-bar)
-- [Navigation](https://polaris.shopify.com/components/deprecated/navigation)
+- [Navigation](https://polaris.shopify.com/components/internal-only/navigation)
- [Contextual save bar](https://polaris.shopify.com/components/contextual-save-bar)
-- [Toast](https://polaris.shopify.com/components/deprecated/toast)
+- [Toast](https://polaris.shopify.com/components/internal-only/toast)
- [Loading](https://polaris.shopify.com/components/loading)
---
@@ -59,7 +55,7 @@ For the best experience when creating an application frame, use the following co
## Related components
- To display the navigation component on small screens, to provide search and a user menu, or to style the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component.
-- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/deprecated/navigation) component.
+- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component.
- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
diff --git a/polaris.shopify.com/content/components/internal-only/loading.mdx b/polaris.shopify.com/content/components/internal-only/loading.mdx
index 7aee71b957f..b55d5b18632 100644
--- a/polaris.shopify.com/content/components/internal-only/loading.mdx
+++ b/polaris.shopify.com/content/components/internal-only/loading.mdx
@@ -24,12 +24,6 @@ The loading component is used to indicate to merchants that a page is loading or
-
- 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/internal-only/modal.mdx
index 4efd25e92ea..bd87f1ce69e 100644
--- a/polaris.shopify.com/content/components/internal-only/modal.mdx
+++ b/polaris.shopify.com/content/components/internal-only/modal.mdx
@@ -69,11 +69,6 @@ Modals are overlays that require merchants to take an action before they can con
-
- This component is no longer supported. Please use the [App Bridge Modal
- API](https://shopify.dev/docs/api/app-bridge-library/reference/modal) instead.
-
-
@@ -211,13 +206,13 @@ Tertiary actions should:
#### Do
-
+
Use a plain button for a tertiary action if needed
#### Don’t
-
+
Use a tertiary action for a destructive action
@@ -271,7 +266,7 @@ Body content should be:
- Modals use ARIA `role=”dialog”` to convey to screen reader users that they work like native dialog windows.
- If you set the `title` prop to give the modal component a heading, then the `title` is used to label the dialog element with `aria-labelledby`. This helps to convey the purpose of the modal to screen reader users when it displays.
- After a modal is closed, in order to return focus to the button that launched it, pass the button to the modal as an `activator`.
-- To ensure that [Toast](https://polaris.shopify.com/components/deprecated/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/deprecated/frame) component.
+- To ensure that [Toast](https://polaris.shopify.com/components/internal-only/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component.
### Keyboard support
diff --git a/polaris.shopify.com/content/components/internal-only/navigation.mdx b/polaris.shopify.com/content/components/internal-only/navigation.mdx
index 0d638ee5e7b..97e7e07a6c2 100644
--- a/polaris.shopify.com/content/components/internal-only/navigation.mdx
+++ b/polaris.shopify.com/content/components/internal-only/navigation.mdx
@@ -60,13 +60,6 @@ The navigation component is used to display the primary navigation in the sideba
-
- 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.
-
-
@@ -247,7 +240,7 @@ Action allows a complementary icon-only action to render next to the section tit
- To provide the structure for the navigation component, including the left sidebar and the top bar use the [frame](https://polaris.shopify.com/components/frame) component.
- To display the navigation component on small screens, to provide search and a user menu, or to theme the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component.
- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
- To alternate among related views within the same context, use the [tabs](https://polaris.shopify.com/components/tabs) component.
- To embed a single action or link within a larger span of text, use the [link](https://polaris.shopify.com/components/link) component.
diff --git a/polaris.shopify.com/content/components/internal-only/toast.mdx b/polaris.shopify.com/content/components/internal-only/toast.mdx
index add638c06bc..dff0cd2f866 100644
--- a/polaris.shopify.com/content/components/internal-only/toast.mdx
+++ b/polaris.shopify.com/content/components/internal-only/toast.mdx
@@ -43,11 +43,6 @@ The toast component is a non-disruptive message that appears at the bottom of th
-
- This component is no longer supported. Please use the [App Bridge Toast
- API](https://shopify.dev/docs/api/app-bridge-library/reference/toast) instead.
-
-
@@ -160,7 +155,7 @@ Avoid using toast for critical information that merchants need to act on immedia
- Can’t be easily accessed with the keyboard
- Might appear outside the proximity of the merchant’s current focus
-To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/deprecated/frame) component.
+To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component.
### Toast with action
diff --git a/polaris.shopify.com/content/components/internal-only/top-bar.mdx b/polaris.shopify.com/content/components/internal-only/top-bar.mdx
index ccb252ae384..1564a0eb1bb 100644
--- a/polaris.shopify.com/content/components/internal-only/top-bar.mdx
+++ b/polaris.shopify.com/content/components/internal-only/top-bar.mdx
@@ -33,10 +33,6 @@ The top bar is a header component that allows merchants to search, access menus,
-
- This component is no longer supported.
-
-
@@ -52,7 +48,7 @@ The top bar component must be passed to the [frame](https://polaris.shopify.com/
The top bar component should:
- Not provide global navigation for an application
- - Use the [navigation component](https://polaris.shopify.com/components/deprecated/navigation) instead
+ - Use the [navigation component](https://polaris.shopify.com/components/internal-only/navigation) instead
- Include search to help merchants find resources and navigate an application
- Include a user menu component to indicate the logged-in merchant and provide them with global actions
- Provide a color through the [app provider](https://polaris.shopify.com/components/app-provider) component to style the background
@@ -153,7 +149,7 @@ A text field component that is tailor-made for a search use-case.
## Related components
- To provide the structure for the top bar component, as well as the primary navigation use the [frame](https://polaris.shopify.com/components/frame) component.
-- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/deprecated/navigation) component.
+- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component.
- To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
- To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
diff --git a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx b/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx
index 3ff6839f28a..b3ae871d32b 100644
--- a/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx
+++ b/polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx
@@ -40,5 +40,5 @@ The Fullscreen bar component should:
## Related components
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component.
- To indicate to merchants that a page is loading or an upload is processing, use the [loading](https://polaris.shopify.com/components/loading) component.
diff --git a/polaris.shopify.com/content/content/voice-and-tone.mdx b/polaris.shopify.com/content/content/voice-and-tone.mdx
index a20113f3491..632f00dbbea 100644
--- a/polaris.shopify.com/content/content/voice-and-tone.mdx
+++ b/polaris.shopify.com/content/content/voice-and-tone.mdx
@@ -205,7 +205,7 @@ While we don’t need to celebrate the accomplishment, we should recognize that
#### Do
-If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [toast](/components/deprecated/toast). Consider ways to confirm completion without words or messaging.
+If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast). Consider ways to confirm completion without words or messaging.
_Product saved_
diff --git a/polaris.shopify.com/content/design/interaction-states.mdx b/polaris.shopify.com/content/design/interaction-states.mdx
index b48f80cd2f4..28ddb0f319e 100644
--- a/polaris.shopify.com/content/design/interaction-states.mdx
+++ b/polaris.shopify.com/content/design/interaction-states.mdx
@@ -80,6 +80,6 @@ Provide merchants with cues as to what the interface will do if they interact wi
**Use feedback indicators** like the [progress bar](https://polaris.shopify.com/components/progress-bar) component or the [spinner](https://polaris.shopify.com/components/spinner) component to let them know that the interface received their request. If appropriate, you can also provide added information about what or how long it will take to complete.
-**For non-disruptive feedback** on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+**For non-disruptive feedback** on the outcome of an action, use the [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component.
**For an unsuccessful completion** that requires the merchant to take action, provide information about what prevented the action from completing successfully and what the merchant can do to fix the problem. For example, use the validation error state of the [text field](https://polaris.shopify.com/components/selection-and-input/text-field) component.
diff --git a/polaris.shopify.com/src/components/Frame/Frame.module.scss b/polaris.shopify.com/src/components/Frame/Frame.module.scss
index 69c9e0f683d..3768e7c8b5f 100644
--- a/polaris.shopify.com/src/components/Frame/Frame.module.scss
+++ b/polaris.shopify.com/src/components/Frame/Frame.module.scss
@@ -73,8 +73,16 @@ $breakpointNav: $breakpointTablet;
flex-direction: column;
> li {
- > ul > li + li {
- padding-top: 1rem;
+ > ul > li > ul > li:last-child {
+ margin-bottom: 1rem;
+ }
+
+ > ul > li + li:has(ul) {
+ margin-top: 1rem;
+ }
+
+ > ul:not(:has(ul)) {
+ margin-bottom: 1rem;
}
.NavItem {
diff --git a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx
index 8566c284899..53ac11062d6 100644
--- a/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx
+++ b/polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx
@@ -11,10 +11,7 @@ function StatusBanner({status, children}: Props) {
return (
status && (
-
- {uppercaseFirst(status)}
- {status === 'Internal' ? ' only' : null}
-
+ {uppercaseFirst(status)}
{children}
)