Merge pull request #3523 from Shopify/footerHelp-resourceList

mpshopify · web-flow · commit 1dfc629913f9 · 2025-10-29T09:20:21.000-04:00
Add patterns for Footer Help and Resource List. Change aria-labels for accessibilityLabel on button and clickable where applicable. Fix typo to Setup guide. Added comment to guide LLM to match image's aspect ratio to actual width and height.
diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/footerHelp.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/footerHelp.png
diff --git a/packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/resourceList.png b/packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/resourceList.png
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/emptyState.ab.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/patterns/emptyState.ab.doc.ts
@@ -26,6 +26,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: 'examples/emptyState.html',
           language: 'preview',
         },
+        {
+          title: 'jsx',
+          code: 'examples/emptyState.jsx',
+          language: 'preview-jsx',
+        },
       ],
     },
   },
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/appCard.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/appCard.html
@@ -4,7 +4,6 @@
   borderRadius="base"
   padding="base"
   inlineSize="100%"
-  accessibilityLabel="Download Shopify Planet"
 >
   <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
       <s-thumbnail
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/appCard.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/appCard.jsx
@@ -4,7 +4,6 @@
   borderRadius="base"
   padding="base"
   inlineSize="100%"
-  accessibilityLabel="Download Shopify Planet"
 >
   <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
     <s-thumbnail
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.html
@@ -1,6 +1,7 @@
 <s-section accessibilityLabel="Empty state section">
   <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
     <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <!-- aspectRatio should match the actual image dimensions (width/height) -->
       <s-image
         aspectRatio="1/0.5"
         src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.jsx
@@ -1,6 +1,7 @@
 <s-section accessibilityLabel="Empty state section">
   <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
     <s-box maxInlineSize="200px" maxBlockSize="200px">
+      {/* aspectRatio should match the actual image dimensions (width/height) */}
       <s-image
         aspectRatio="1/0.5"
         src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.html
@@ -0,0 +1,3 @@
+<s-stack alignItems="center">
+  <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>
+</s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.jsx
@@ -0,0 +1,3 @@
+<s-stack alignItems="center">
+  <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>
+</s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/index.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/index.html
@@ -21,6 +21,7 @@
       <s-section accessibilityLabel="Empty state section">
         <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
           <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <!-- aspectRatio should match the actual image dimensions (width/height) -->
             <s-image
               maxInlineSize="200px"
               maxBlockSize="200px"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/index.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/index.jsx
@@ -15,6 +15,7 @@
       <s-section accessibilityLabel="Empty state section">
         <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
           <s-box maxInlineSize="200px" maxBlockSize="200px">
+            {/* aspectRatio should match the actual image dimensions (width/height) */}
             <s-image
               aspectRatio="1/0.5"
               src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
@@ -32,12 +33,12 @@
             <s-button-group>
               <s-button
                 slot="secondary-actions"
-                aria-label="Learn more about creating puzzles"
+                accessibilityLabel="Learn more about creating puzzles"
               >
                 {" "}
                 Learn more{" "}
               </s-button>
-              <s-button slot="primary-action" aria-label="Add a new puzzle">
+              <s-button slot="primary-action" accessibilityLabel="Add a new puzzle">
                 {" "}
                 Create puzzle{" "}
               </s-button>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/mediaCard.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/mediaCard.html
@@ -1,5 +1,5 @@
 <s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
-  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+  <s-clickable href="">
     <s-image
       aspectRatio="1/1"
       objectFit="cover"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/mediaCard.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/mediaCard.jsx
@@ -4,7 +4,7 @@
   overflow="hidden"
   maxInlineSize="216px"
 >
-  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+  <s-clickable href="">
     <s-image
       aspectRatio="1/1"
       objectFit="cover"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.html
@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.jsx
@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/footerHelp.ab.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/patterns/footerHelp.ab.doc.ts
@@ -0,0 +1,53 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Footer help',
+  isOneColumnLayout: false,
+  overviewPreviewDescription:
+    'Footer help is used to refer merchants to more information related to the product or feature they’re using.',
+
+  description: `Footer help is used to refer merchants to more information related to the product or feature they’re using.
+
+  | Used to | Examples |
+  | --- | --- |
+  | Refer merchants to related help docs |  Learn more about [shipping zones]|
+  | Offer support as a secondary option  | [Contact us] about email marketing |
+
+  ---
+  
+
+  
+`,
+  isVisualComponent: true,
+  category: 'Patterns',
+  subCategory: 'Compositions',
+  thumbnail: '/assets/templated-apis-screenshots/admin/patterns/footerHelp.png',
+  defaultExample: {
+    codeblock: {
+      title: 'Footer help',
+      tabs: [
+        {
+          title: 'Preview',
+          code: 'examples/footerHelp.html',
+          language: 'preview',
+        },
+        {
+          title: 'jsx',
+          code: 'examples/footerHelp.jsx',
+          language: 'preview-jsx',
+        },
+      ],
+    },
+  },
+
+  related: [
+    {
+      name: 'Built for Shopify',
+      subtitle: 'Requirements',
+      url: '/docs/apps/launch/built-for-shopify/requirements',
+      type: 'component',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/resourceList.ab.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/patterns/resourceList.ab.doc.ts
@@ -0,0 +1,56 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Resource list',
+  isOneColumnLayout: false,
+  overviewPreviewDescription:
+    'A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.',
+
+  description: `A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.
+.
+
+  | Used to | Examples |
+  | --- | --- |
+  | Display collections of similar resources |  Campaigns, subscribers, social posts, templates|
+  | Help merchants find and select items  | Search subscribers by email; Filter campaigns by status |
+  | Perform bulk actions on selected items  | Tag subscribers; Archive campaigns; Publish selected posts |
+
+  ---
+  
+
+  
+`,
+  isVisualComponent: true,
+  category: 'Patterns',
+  subCategory: 'Compositions',
+  thumbnail:
+    '/assets/templated-apis-screenshots/admin/patterns/resourceList.png',
+  defaultExample: {
+    codeblock: {
+      title: 'Resource list',
+      tabs: [
+        {
+          title: 'Preview',
+          code: 'examples/resourceList.html',
+          language: 'preview',
+        },
+        {
+          title: 'jsx',
+          code: 'examples/resourceList.jsx',
+          language: 'preview-jsx',
+        },
+      ],
+    },
+  },
+
+  related: [
+    {
+      name: 'Built for Shopify',
+      subtitle: 'Requirements',
+      url: '/docs/apps/launch/built-for-shopify/requirements',
+      type: 'component',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/setupGuide.ab.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/patterns/setupGuide.ab.doc.ts
@@ -5,7 +5,7 @@ const data: ReferenceEntityTemplateSchema = {
   isOneColumnLayout: false,
   overviewPreviewDescription:
     'Guide merchants through onboarding and setup with interactive checklists and progress tracking.',
-  description: `SetupGuide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks. Progress is tracked visually, helping merchants complete all required steps and understand what remains.
+  description: `Setup guide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks. Progress is tracked visually, helping merchants complete all required steps and understand what remains.
   | Used to | Examples |
   | --- | --- |
   | Onboard merchants | Initial app setup |

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`borderRadius="base"`
`5`	`5`	`padding="base"`
`6`	`6`	`inlineSize="100%"`
`7`		`- accessibilityLabel="Download Shopify Planet"`
`8`	`7`	`>`
`9`	`8`	`<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">`
`10`	`9`	`<s-thumbnail`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<s-stack alignItems="center">`
	`2`	`+ <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>`
	`3`	`+</s-stack>`