Merge pull request #3557 from Shopify/add-more-examples-to-admin-page

Add breadcrumbs and secondary actions examples to Page component

Author: davebcn87

packages/ui-extensions/src/surfaces/admin/components/Page/Page.ab.doc.ts

@@ -106,6 +106,47 @@ const data: AdminReferenceEntityTemplateSchema = {
               ],
             },
           },
+          {
+            description:
+              'Shows a page with breadcrumb navigation and a descriptive heading, helping users understand their location in the navigation hierarchy.',
+            codeblock: {
+              title: 'Page with breadcrumbs and title',
+              tabs: [
+                {
+                  code: './examples/page-with-breadcrumbs-and-title.html',
+                  language: 'html',
+                  layout: 'none',
+                },
+                {
+                  code: './examples/page-with-breadcrumbs-and-title.jsx',
+                  language: 'preview-jsx',
+                  layout: 'none',
+                },
+              ],
+            },
+          },
+          {
+            description:
+              'Demonstrates a page with a primary action button and secondary action buttons, showing how to provide main and related actions alongside the page heading.',
+            codeblock: {
+              title: 'Page with primary and secondary actions',
+              tabs: [
+                {
+                  code: './examples/page-with-secondary-actions.html',
+                  language: 'html',
+                  layout: 'none',
+                },
+                {
+                  code: './examples/page-with-secondary-actions.jsx',
+                  language: 'preview-jsx',
+                  layout: 'none',
+                  customStyles: {
+                    minHeight: '400px',
+                  },
+                },
+              ],
+            },
+          },
         ],
       },
     ],

packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-breadcrumbs-and-title.html

@@ -0,0 +1,7 @@
+<s-page heading="Edit Product" inline-size="base">
+  <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
+  <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
+  <s-section>
+    <s-text>Update your product information and settings.</s-text>
+  </s-section>
+</s-page>

packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-breadcrumbs-and-title.jsx

@@ -0,0 +1,7 @@
+<s-page heading="Edit Product" inlineSize="base">
+  <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
+  <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
+  <s-section>
+    <s-text>Update your product information and settings.</s-text>
+  </s-section>
+</s-page>

packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-secondary-actions.html

@@ -0,0 +1,8 @@
+<s-page heading="Products" inline-size="base">
+  <s-button slot="secondary-actions">Preview</s-button>
+  <s-button slot="secondary-actions">Duplicate</s-button>
+  <s-button slot="primary-action" variant="primary">Save</s-button>
+  <s-section>
+    <s-text>Manage your products and organize your catalog.</s-text>
+  </s-section>
+</s-page>

packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-secondary-actions.jsx

@@ -0,0 +1,8 @@
+<s-page heading="Products" inlineSize="base">
+  <s-button slot="secondary-actions">Preview</s-button>
+  <s-button slot="secondary-actions">Duplicate</s-button>
+  <s-button slot="primary-action" variant="primary">Save</s-button>
+  <s-section>
+    <s-text>Manage your products and organize your catalog.</s-text>
+  </s-section>
+</s-page>