Merge pull request #3520 from Shopify/more-validation-examples-issues

Fix validation examples and issues across admin components and patterns

Author: davebcn87

packages/ui-extensions/docs/surfaces/admin/build-docs.mjs

@@ -356,7 +356,9 @@ const transformJson = async (filePath, isExtensions) => {
     );
 
     const filteredDocs = shopifyDevDocsDocsParsed.filter(
-      (entry) => entry.category !== 'Polaris web components',
+      (entry) =>
+        entry.category !== 'Polaris web components' &&
+        entry.category !== 'Patterns', // Don't include old patterns
     );
 
     // Combine arrays with shopify dev docs first, followed by new data

packages/ui-extensions/docs/surfaces/admin/staticPages/examples/form-default-value.jsx

@@ -1,45 +1,36 @@
-import { render } from 'preact';
-import { useState } from 'preact/hooks';
-
-export default async () => {
-  render(<Extension />, document.body);
-}
-
 const defaultValues = {
   text: 'default value',
   number: 50,
 };
 
-function Extension() {
-  const [textValue, setTextValue] = useState('');
-  const [numberValue, setNumberValue] = useState('');
+const [textValue, setTextValue] = useState('');
+const [numberValue, setNumberValue] = useState('');
 
-  return (
-    <s-admin-block title="My Block Extension">
-      <s-form
-        onSubmit={(event) => {
-          event.waitUntil(fetch('app:save/data'));
-          console.log('submit', {textValue, numberValue});
-        }}
-        onReset={() => console.log('automatically reset values')}
-      >
-        <s-stack direction="block" gap="base">
-          <s-text-field
-            label="Default Value"
-            name="my-text"
-            defaultValue={defaultValues.text}
-            value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
-          />
-          <s-number-field
-            label="Percentage field"
-            name="my-number"
-            defaultValue={defaultValues.number}
-            value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
-          />
-        </s-stack>
-      </s-form>
-    </s-admin-block>
-  );
-}
+return (
+  <s-admin-block title="My Block Extension">
+    <s-form
+      onSubmit={(event) => {
+        event.waitUntil(fetch('app:save/data'));
+        console.log('submit', {textValue, numberValue});
+      }}
+      onReset={() => console.log('automatically reset values')}
+    >
+      <s-stack direction="block" gap="base">
+        <s-text-field
+          label="Default Value"
+          name="my-text"
+          defaultValue={defaultValues.text}
+          value={textValue}
+          onChange={(e) => setTextValue(e.target.value)}
+        />
+        <s-number-field
+          label="Percentage field"
+          name="my-number"
+          defaultValue={defaultValues.number}
+          value={numberValue}
+          onChange={(e) => setNumberValue(e.target.value)}
+        />
+      </s-stack>
+    </s-form>
+  </s-admin-block>
+);

packages/ui-extensions/docs/surfaces/customer-account/staticPages/using-polaris-web-components.doc.ts

@@ -312,12 +312,12 @@ Use methods when you need to trigger actions that can’t be achieved through pr
         tabs: [
           {
             code: './examples/form-default-value.jsx',
-            language: 'tsx',
+            language: 'preview-jsx',
             title: 'Using `defaultValue`',
           },
           {
             code: './examples/form-implicit-default.jsx',
-            language: 'tsx',
+            language: 'preview-jsx',
             title: 'Using implicit default',
           },
         ],

packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/indeterminate-state.jsx

@@ -1,21 +1,21 @@
 const [selectedItems, setSelectedItems] = useState([]);
 const items = ['Item 1', 'Item 2', 'Item 3'];
 
-const toggleItem = (value, checked) => setSelectedItems(prev => checked ? [...prev, value] : prev.filter(item => item !== value));
+const toggleItem = (value, checked) => setSelectedItems(checked ? [...selectedItems, value] : selectedItems.filter(item => item !== value));
 const toggleAll = (checked) => setSelectedItems(checked ? items : []);
 const isSelected = (item) => selectedItems.includes(item);
 
 return (
   <s-stack gap="small">
-    <s-checkbox 
-      label="Select all items" 
-      indeterminate={selectedItems.length > 0 && selectedItems.length < items.length}
+    <s-checkbox
+      label="Select all items"
+      indeterminate={selectedItems.length !== 0 && selectedItems.length !== items.length}
       checked={selectedItems.length === items.length}
-      onChange={e => toggleAll(e.target.checked)} 
+      onChange={e => toggleAll(e.currentTarget.checked)}
     />
     <s-divider />
     {items.map(i => (
-      <s-checkbox key={i} label={i} checked={isSelected(i)} onChange={e => toggleItem(i, e.target.checked)} />
+      <s-checkbox key={i} label={i} checked={isSelected(i)} onChange={e => toggleItem(i, e.currentTarget.checked)} />
     ))}
   </s-stack>
 );

packages/ui-extensions/src/surfaces/admin/components/Checkbox/examples/validation-example.jsx

@@ -11,8 +11,8 @@ return (
         checked={checked}
         error={error}
         onChange={(e) => {
-          setChecked(e.target.checked);
-          setError(e.target.checked ? '' : errorMessage);
+          setChecked(e.currentTarget.checked);
+          setError(e.currentTarget.checked ? '' : errorMessage);
         }}
       />
     </s-stack>

packages/ui-extensions/src/surfaces/admin/components/ColorField/examples/validation-example.jsx

@@ -11,9 +11,9 @@ return (
         value={color}
         error={error}
         required
-        onChange={(e) => {
-          setColor(e.target.value);
-          setError(/^#([0-9A-F]{3}){1,2}$/i.test(e.target.value) ? '' : 'Please enter a valid color format');
+        onInput={(e) => {
+          setColor(e.currentTarget.value);
+          setError(/^#([0-9A-F]{3}){1,2}$/i.test(e.currentTarget.value) ? '' : 'Please enter a valid color format');
         }}
       />
     </s-stack>

packages/ui-extensions/src/surfaces/admin/components/DateField/examples/validation-example.jsx

@@ -11,8 +11,8 @@ return (
         error={error}
         required
         onChange={(e) => {
-          setDate(e.target.value);
-          setError(e.target.value ? '' : 'Event date is required');
+          setDate(e.currentTarget.value);
+          setError(e.currentTarget.value ? '' : 'Event date is required');
         }}
       />
     </s-stack>

packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.jsx

@@ -26,8 +26,8 @@ return (
       view="2025-01"
       value={value}
       onChange={(event) => {
-        console.log('Date range changed:', event.target.value);
-        setValue(event.target.value);
+        console.log('Date range changed:', event.currentTarget.value);
+        setValue(event.currentTarget.value);
       }}
     />
     <s-text>Selected range: {value}</s-text>

packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/form-integration.jsx

@@ -14,13 +14,13 @@ return (
       label="Order number"
       placeholder="Search orders..."
       value={orderNumber}
-      onChange={(event) => setOrderNumber(event.target.value)}
+      onChange={(event) => setOrderNumber(event.currentTarget.value)}
     />
     <s-date-picker
       type="range"
       name="order-date-range"
       value={dateRange}
-      onChange={(event) => setDateRange(event.target.value)}
+      onChange={(event) => setDateRange(event.currentTarget.value)}
       view="2024-01"
     />
     <s-button onClick={handleApplyFilters}>Apply filters</s-button>

packages/ui-extensions/src/surfaces/admin/components/DropZone/examples/default.jsx

@@ -3,7 +3,7 @@
   accessibilityLabel="Upload image of type jpg, png, or gif"
   accept=".jpg,.png,.gif"
   multiple
-  onInput="console.log('onInput', event.currentTarget?.value)"
-  onChange="console.log('onChange', event.currentTarget?.value)"
-  onDropRejected="console.log('onDropRejected', event.currentTarget?.value)"
+  onInput={(event) => console.log('onInput', event.currentTarget?.value)}
+  onChange={(event) => console.log('onChange', event.currentTarget?.value)}
+  onDropRejected={(event) => console.log('onDropRejected', event.currentTarget?.value)}
  />