Merge pull request #3518 from Shopify/examples-issues-after-validation

davebcn87 · web-flow · commit d7e4fdb102af · 2025-10-21T14:56:06.000+02:00
Fix all Polaris example validation issues (#2247)
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/validation-example.jsx
@@ -4,7 +4,7 @@ const [error, setError] = useState(errorMessage);
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Name" />
       <s-checkbox
         label="I agree to the terms"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/ChoiceList/examples/validation-example.jsx
@@ -2,7 +2,7 @@ const [error, setError] = useState('Please select at least one option');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-choice-list
         label="Product visibility"
         name="visibility"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/ColorField/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/ColorField/examples/validation-example.jsx
@@ -3,7 +3,7 @@ const [error, setError] = useState('Please enter a valid color format');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Theme name" />
       <s-color-field
         label="Brand color"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/DateField/examples/validation-example.jsx
@@ -3,7 +3,7 @@ const [error, setError] = useState('Event date is required');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Event name" />
       <s-date-field
         label="Event date"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html
@@ -13,7 +13,7 @@
     view="2025-01"
     onchange="console.log('Date range changed:', event.target.value)"
   ></s-date-picker>
-  <s-text size="sm" id="selected-range">
+  <s-text id="selected-range">
     Selected range: 2025-01-01--2025-01-31
   </s-text>
 </s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.jsx b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.jsx
@@ -30,6 +30,6 @@ return (
         setValue(event.target.value);
       }}
     />
-    <s-text size="sm">Selected range: {value}</s-text>
+    <s-text>Selected range: {value}</s-text>
   </s-stack>
 )
diff --git a/packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/EmailField/examples/validation-example.jsx
@@ -3,7 +3,7 @@ const [error, setError] = useState('Please enter a valid email address');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Name" />
       <s-email-field
         label="Contact email"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Modal/examples/form-modal.html b/packages/ui-extensions/src/surfaces/admin/components/Modal/examples/form-modal.html
@@ -11,12 +11,11 @@
         value="Sarah Johnson"
       ></s-text-field>
 
-      <s-text-field
+      <s-email-field
         label="Email address"
         name="email"
-        type="email"
         value="sarah@example.com"
-      ></s-text-field>
+      ></s-email-field>
 
       <s-text-field
         label="Phone number"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Modal/examples/form-modal.jsx b/packages/ui-extensions/src/surfaces/admin/components/Modal/examples/form-modal.jsx
@@ -11,10 +11,9 @@
         value="Sarah Johnson"
        />
 
-      <s-text-field
+      <s-email-field
         label="Email address"
         name="email"
-        type="email"
         value="sarah@example.com"
        />
 
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-usage.html b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-usage.html
@@ -3,5 +3,4 @@
   value="19.99"
   min="0"
   max="1000"
-  step="0.01"
 ></s-money-field>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/basic-usage.jsx
@@ -3,5 +3,4 @@
   value="19.99"
   min={0}
   max={1000}
-  step="0.01"
  />
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.html b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.html
@@ -4,7 +4,6 @@
     value="0.00"
     min="0.01"
     max="99999.99"
-    step="0.01"
     details="Customers will see this price"
   ></s-money-field>
 
@@ -13,7 +12,6 @@
     value=""
     min="0"
     max="99999.99"
-    step="0.01"
     details="Show customers the original price when on sale"
   ></s-money-field>
 
@@ -22,7 +20,6 @@
     value=""
     min="0"
     max="99999.99"
-    step="0.01"
     details="Customers won't see this"
   ></s-money-field>
 </s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.jsx b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/currency-formatting-with-form-integration.jsx
@@ -4,7 +4,6 @@
     value="0.00"
     min="0.01"
     max="99999.99"
-    step="0.01"
     details="Customers will see this price"
    />
 
@@ -13,7 +12,6 @@
     value=""
     min={0}
     max="99999.99"
-    step="0.01"
     details="Show customers the original price when on sale"
    />
 
@@ -22,7 +20,6 @@
     value=""
     min={0}
     max="99999.99"
-    step="0.01"
     details="Customers won't see this"
    />
 </s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/validation-example.jsx b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/validation-example.jsx
@@ -3,14 +3,13 @@ const [error, setError] = useState('Value must be no more than $100');
 
 return (
   <s-section>
-    <s-stack gap="base" inlineAlign="start">
+    <s-stack gap="base" justifyContent="start">
       <s-text-field label="Product name" />
       <s-money-field
         label="Discount amount"
         value={amount}
         min={0}
         max={100}
-        step="0.5"
         details="Enter discount amount between $0 and $100"
         error={error}
         onInput={(e) => {
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.html b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.html
@@ -3,6 +3,5 @@
   value="5.00"
   min="0"
   max="100"
-  step="0.5"
   details="Enter discount amount between $0 and $100"
 ></s-money-field>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.jsx b/packages/ui-extensions/src/surfaces/admin/components/MoneyField/examples/with-validation-limits.jsx
@@ -3,6 +3,5 @@
   value="5.00"
   min={0}
   max={100}
-  step="0.5"
   details="Enter discount amount between $0 and $100"
 />
diff --git a/packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/multiple-examples.jsx b/packages/ui-extensions/src/surfaces/admin/components/NumberField/examples/multiple-examples.jsx
@@ -14,7 +14,7 @@
     suffix="%"
     min={0}
     max={100}
-    step="0.1"
+    step={0.1}
     inputMode="decimal"
    />
 
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx b/packages/ui-extensions/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx
@@ -1,4 +1,4 @@
-<s-page heading="Store analytics" inline-size="large">
+<s-page heading="Store analytics" inlineSize="large">
   <s-section>
     <s-stack gap="base">
       <s-text>Monitor your store performance across all channels.</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-heading.jsx b/packages/ui-extensions/src/surfaces/admin/components/Page/examples/page-with-heading.jsx
@@ -1,4 +1,4 @@
-<s-page heading="Product catalog" inline-size="base">
+<s-page heading="Product catalog" inlineSize="base">
   <s-section>
     <s-text>Manage your product catalog and inventory.</s-text>
   </s-section>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx b/packages/ui-extensions/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx
@@ -1,4 +1,4 @@
-<s-page heading="Store settings" inline-size="small">
+<s-page heading="Store settings" inlineSize="small">
   <s-section>
     <s-stack gap="base">
       <s-text>Configure your basic store preferences.</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/in-form-layout.html b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/in-form-layout.html
@@ -1,11 +1,10 @@
 <s-stack gap="base">
-  <s-text-field
+  <s-email-field
     label="Email"
     name="email"
-    type="email"
     autocomplete="username"
     required
-  ></s-text-field>
+  ></s-email-field>
   <s-password-field
     label="Password"
     name="password"
diff --git a/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/in-form-layout.jsx b/packages/ui-extensions/src/surfaces/admin/components/PasswordField/examples/in-form-layout.jsx
@@ -1,8 +1,7 @@
 <s-stack gap="base">
-  <s-text-field
+  <s-email-field
     label="Email"
     name="email"
-    type="email"
     autocomplete="username"
     required
    />
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/notifications.html b/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/notifications.html
@@ -5,7 +5,7 @@
 <s-popover id="notifications-popover">
   <s-box padding="base">
     <s-stack gap="small-200">
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>New order received</s-heading>
         <s-paragraph color="subdued">
           Order #1234 was placed 5 minutes ago
@@ -14,7 +14,7 @@
 
       <s-divider />
 
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Low inventory alert</s-heading>
         <s-paragraph color="subdued">
           3 products are running low on stock
@@ -23,7 +23,7 @@
 
       <s-divider />
 
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Payment processed</s-heading>
         <s-paragraph color="subdued">
           $250.00 payment confirmed for order #1230
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/notifications.jsx b/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/notifications.jsx
@@ -6,21 +6,21 @@
   <s-popover id="notifications-popover">
     <s-box padding="base">
       <s-stack gap="small-200">
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>New order received</s-heading>
           <s-paragraph color="subdued">Order #1234 was placed 5 minutes ago</s-paragraph>
         </s-stack>
 
         <s-divider />
 
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Low inventory alert</s-heading>
           <s-paragraph color="subdued">3 products are running low on stock</s-paragraph>
         </s-stack>
 
         <s-divider />
 
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Payment processed</s-heading>
           <s-paragraph color="subdued">$250.00 payment confirmed for order #1230</s-paragraph>
         </s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/table-display-options.html b/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/table-display-options.html
@@ -5,9 +5,9 @@
 <s-popover id="table-settings-popover">
   <s-box padding="base">
     <s-stack gap="small-200">
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Choose columns to display</s-heading>
-        <s-choice-list>
+        <s-choice-list label="Select columns to display">
           <s-choice value="sku" selected>Sku</s-choice>
           <s-choice value="inventory" selected>Inventory</s-choice>
           <s-choice value="price" selected>Price</s-choice>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/table-display-options.jsx b/packages/ui-extensions/src/surfaces/admin/components/Popover/examples/table-display-options.jsx
@@ -10,9 +10,9 @@
   <s-popover id="table-settings-popover">
     <s-box padding="base">
       <s-stack gap="small-200">
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Choose columns to display</s-heading>
-          <s-choice-list>
+          <s-choice-list label="Select columns to display">
             <s-choice value="sku" selected>
               Sku
             </s-choice>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/with-accessory.html b/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/with-accessory.html
@@ -1,6 +1,4 @@
+<s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
 <s-text-field label="Discount code">
-  <div slot="accessory">
-    <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
-    <s-icon interestFor="info-tooltip" type="info"></s-icon>
-  </div>
+  <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
 </s-text-field>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/with-accessory.jsx b/packages/ui-extensions/src/surfaces/admin/components/TextField/examples/with-accessory.jsx
@@ -1,6 +1,6 @@
-<s-text-field label="Discount code">
-  <div slot="accessory">
-    <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
-    <s-icon interestFor="info-tooltip" type="info" />
-  </div>
-</s-text-field>
+<>
+  <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
+  <s-text-field label="Discount code">
+    <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
+  </s-text-field>
+</>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/indexTable.html b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/indexTable.html
@@ -2,12 +2,15 @@
   <s-table>
     <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
       <s-text-field
+        label="Search puzzles"
+        labelAccessibilityVisibility="exclusive"
         icon="search"
         placeholder="Searching all puzzles"
       ></s-text-field>
       <s-button
         icon="sort"
         variant="secondary"
+        accessibilityLabel="Sort"
         interestFor="sort-tooltip"
         commandFor="sort-actions"
       ></s-button>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/indexTable.jsx b/packages/ui-extensions/src/surfaces/admin/components/patterns/examples/indexTable.jsx
@@ -2,12 +2,15 @@
   <s-table>
     <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
       <s-text-field
+        label="Search puzzles"
+        labelAccessibilityVisibility="exclusive"
         icon="search"
         placeholder="Searching all puzzles"
        />
       <s-button
         icon="sort"
         variant="secondary"
+        accessibilityLabel="Sort"
         interestFor="sort-tooltip"
         commandFor="sort-actions"
        />
diff --git a/packages/ui-extensions/src/surfaces/admin/components/using-polaris-web-components/examples/html-forms.html b/packages/ui-extensions/src/surfaces/admin/components/using-polaris-web-components/examples/html-forms.html
@@ -1,6 +1,6 @@
 <form onSubmit="{handleSubmit}">
   <s-stack gap="base">
-    <s-text-field name="email" label="Email" type="email" required />
+    <s-email-field name="email" label="Email" required />
     <s-password-field name="password" label="Password" required />
     <s-button type="submit" variant="primary">Sign in</s-button>
   </s-stack>

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,6 @@ return (`
`30`	`30`	`setValue(event.target.value);`
`31`	`31`	`}}`
`32`	`32`	`/>`
`33`		`- <s-text size="sm">Selected range: {value}</s-text>`
	`33`	`+ <s-text>Selected range: {value}</s-text>`
`34`	`34`	`</s-stack>`
`35`	`35`	`)`