[SkeletonPage] Deprecate breadcrumbs, add backAction, update layout (Shopify#8650)

SkeletonPage breadcrumbs were out of date. This updates the visual
design, deprecates the breadcrumbs prop, adds a backAction prop to match
with the Page component.

Before | After
---|---
![image](https://screenshot.click/13-57-yni8y-kl0k3.png) |
![image](https://screenshot.click/13-58-3vszj-1q8dc.png)

Author: kyledurand

.changeset/curly-parrots-sit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecated breadcrumbs prop on SkeletonPage, added backAction prop with story

polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx

@@ -200,3 +200,53 @@ export function WithFullWidth() {
     </SkeletonPage>
   );
 }
+
+export function WithBackAction() {
+  return (
+    <SkeletonPage primaryAction backAction>
+      <Layout>
+        <Layout.Section>
+          <LegacyCard sectioned>
+            <SkeletonBodyText />
+          </LegacyCard>
+          <LegacyCard sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </LegacyCard>
+          <LegacyCard sectioned>
+            <TextContainer>
+              <SkeletonDisplayText size="small" />
+              <SkeletonBodyText />
+            </TextContainer>
+          </LegacyCard>
+        </Layout.Section>
+        <Layout.Section secondary>
+          <LegacyCard>
+            <LegacyCard.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </LegacyCard.Section>
+            <LegacyCard.Section>
+              <SkeletonBodyText lines={1} />
+            </LegacyCard.Section>
+          </LegacyCard>
+          <LegacyCard subdued>
+            <LegacyCard.Section>
+              <TextContainer>
+                <SkeletonDisplayText size="small" />
+                <SkeletonBodyText lines={2} />
+              </TextContainer>
+            </LegacyCard.Section>
+            <LegacyCard.Section>
+              <SkeletonBodyText lines={2} />
+            </LegacyCard.Section>
+          </LegacyCard>
+        </Layout.Section>
+      </Layout>
+    </SkeletonPage>
+  );
+}

polaris-react/src/components/SkeletonPage/SkeletonPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import {useI18n} from '../../utilities/i18n';
-import {SkeletonBodyText} from '../SkeletonBodyText';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {AlphaStack} from '../AlphaStack';
@@ -17,8 +16,10 @@ export interface SkeletonPageProps {
   narrowWidth?: boolean;
   /** Shows a skeleton over the primary action */
   primaryAction?: boolean;
-  /** Shows a skeleton over the breadcrumb */
+  /** @deprecated Use backAction instead */
   breadcrumbs?: boolean;
+  /** Shows a skeleton over the backAction */
+  backAction?: boolean;
   /** The child elements to render in the skeleton page. */
   children?: React.ReactNode;
 }
@@ -29,6 +30,7 @@ export function SkeletonPage({
   narrowWidth,
   primaryAction,
   title = '',
+  backAction,
   breadcrumbs,
 }: SkeletonPageProps) {
   const i18n = useI18n();
@@ -56,11 +58,16 @@ export function SkeletonPage({
     />
   ) : null;
 
-  const breadcrumbMarkup = breadcrumbs ? (
-    <Box maxWidth="60px" paddingBlockStart="4" paddingBlockEnd="4">
-      <SkeletonBodyText lines={1} />
-    </Box>
-  ) : null;
+  const breadcrumbMarkup =
+    breadcrumbs || backAction ? (
+      <Box
+        borderRadius="1"
+        background="surface-neutral"
+        minHeight="2.25rem"
+        minWidth="2.25rem"
+        maxWidth="2.25rem"
+      />
+    ) : null;
 
   return (
     <AlphaStack gap="4" align="center">
@@ -87,11 +94,13 @@ export function SkeletonPage({
             paddingInlineEnd={{xs: '4', sm: '0'}}
             width="100%"
           >
-            {breadcrumbMarkup}
             <Inline gap="4" align="space-between" blockAlign="center">
-              <Box paddingBlockStart="1" paddingBlockEnd="1">
-                {titleContent}
-              </Box>
+              <Inline gap="4">
+                {breadcrumbMarkup}
+                <Box paddingBlockStart="1" paddingBlockEnd="1">
+                  {titleContent}
+                </Box>
+              </Inline>
               {primaryActionMarkup}
             </Inline>
           </Box>

polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx

@@ -67,7 +67,12 @@ describe('<SkeletonPage />', () => {
 
   it('renders breadcrumbs', () => {
     const skeletonPage = mountWithApp(<SkeletonPage breadcrumbs />);
-    expect(skeletonPage).toContainReactComponent(SkeletonBodyText);
+    expect(skeletonPage).toContainReactComponent(Box, {
+      background: 'surface-neutral',
+      minWidth: '2.25rem',
+      minHeight: '2.25rem',
+      maxWidth: '2.25rem',
+    });
   });
 
   describe('primaryAction', () => {