Add aspectRatio comment to empty state examples

Author: mpshopify

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"

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"

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

@@ -1,41 +1,3 @@
-<s-button commandFor="action-list">Action List</s-button>
-
-<s-popover id="action-list">
-  <s-stack direction="block">
-    <s-stack paddingInline="small-100" paddingBlockStart="small-100"><s-heading>Shopify</s-heading></s-stack>
-    <s-stack paddingInline="small-300" paddingBlockEnd="small-500" paddingBlockStart="small-400" gap="small-500">
-      <s-clickable borderRadius="base"><s-stack direction="inline" paddingBlock="small-300"paddingInline="small-300"gap="small-300"><s-icon type="discount"></s-icon><s-text>Apply discount</s-text></s-stack></s-clickable>
-      <s-clickable borderRadius="base"><s-stack direction="inline" paddingBlock="small-300"paddingInline="small-300"gap="small-300"><s-icon type="email"></s-icon><s-text>Email segment</s-text></s-stack></s-clickable>
-      <s-clickable borderRadius="base"><s-stack direction="inline" paddingBlock="small-300"paddingInline="small-300"gap="small-300"><s-icon type="store-managed"></s-icon><s-text>Issue store credit</s-text></s-stack></s-clickable>
-      <s-clickable borderRadius="base"><s-stack direction="inline" paddingBlock="small-300"paddingInline="small-300"gap="small-300"><s-icon type="automation"></s-icon><s-text>Start automation</s-text></s-stack></s-clickable>
-    </s-stack>
-
-    <s-divider></s-divider>
-    
-    <s-stack paddingBlockStart="none" gap="small-300">
-    <s-stack paddingInline="small-100" paddingBlockStart="small"><s-heading>Apps</s-heading></s-stack>
-
-      <s-stack paddingInline="small-300" gap="small-300">
-      <s-clickable paddingBlock="small-300" paddingInline="small-300" borderRadius="base">
-        <s-stack direction="inline" alignItems="center" gap="small-300">
-          <s-avatar size="small-200" src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"></s-avatar>
-            <s-stack>
-              <s-text>Shopify Flow</s-text>
-              <s-text color="subdued">Create an automation</s-text>
-            </s-stack>
-        </s-stack>
-      </s-clickable>
-      <s-clickable paddingBlock="small-300" paddingInline="small-300" borderRadius="base">
-        <s-stack direction="inline" alignItems="center" gap="small-300">
-          <s-avatar size="small-200" src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"></s-avatar>
-            <s-stack>
-              <s-text>Shopify Planet</s-text>
-              <s-text color="subdued">Add carbon-neutral shipping</s-text>
-            </s-stack>
-        </s-stack>
-      </s-clickable>
-      </s-stack>
-      <s-stack paddingInline="small-100" paddingBlockEnd="small-100"><s-link href="">View all</s-link></s-stack>
-    </s-stack>
-  </s-stack>
-</s-popover>
+<s-stack alignItems="center">
+  <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>
+</s-stack>

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"