fix for PR comments

Author: mpshopify

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',
+        },
       ],
     },
   },

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"

packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.html

@@ -4,7 +4,7 @@
       <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 placement="bottom-start" id="tagged-with">
+        <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>
@@ -14,7 +14,7 @@
       <s-button variant="secondary">Save</s-button>
     </s-grid>
 
-    <s-stack paddingInline="base">
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
       <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
     </s-stack>
 
@@ -27,7 +27,7 @@
     </s-grid>
 
     <s-stack>
-      <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+      <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>
@@ -40,7 +40,7 @@
           <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-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>

packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.jsx

@@ -4,7 +4,7 @@
       <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 placement="bottom-start" id="tagged-with">
+        <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>
@@ -14,7 +14,7 @@
       <s-button variant="secondary">Save</s-button>
     </s-grid>
 
-    <s-stack paddingInline="base">
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
       <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
     </s-stack>
 
@@ -27,7 +27,7 @@
     </s-grid>
 
     <s-stack>
-      <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+      <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>
@@ -40,7 +40,7 @@
           <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-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>

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

@@ -31,6 +31,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: 'examples/footerHelp.html',
           language: 'preview',
         },
+        {
+          title: 'jsx',
+          code: 'examples/footerHelp.jsx',
+          language: 'preview-jsx',
+        },
       ],
     },
   },

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

@@ -34,6 +34,11 @@ const data: ReferenceEntityTemplateSchema = {
           code: 'examples/resourceList.html',
           language: 'preview',
         },
+        {
+          title: 'jsx',
+          code: 'examples/resourceList.jsx',
+          language: 'preview-jsx',
+        },
       ],
     },
   },