Merge pull request #3483 from Shopify/doc-refinement-and-fixes

sam-b-rose · web-flow · commit 11693839f74f · 2025-10-08T16:59:49.000-04:00
Refactor text components for improved formatting and accessibility
diff --git a/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs b/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs
@@ -195,6 +195,7 @@ const templates = {
     wrapperAttributes: 'padding="base"',
   }),
   fullWidth: createTemplate({
+    layoutStyles: 'display: grid; place-items: center;',
     wrapperElement: 's-box',
     wrapperAttributes: 'padding="base", inlineSize="100%"',
   }),
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts
@@ -140,6 +140,9 @@ const data: AdminReferenceEntityTemplateSchema = {
                 {
                   code: './examples/with-interest-relationship.jsx',
                   language: 'preview-jsx',
+                  customStyles: {
+                    minHeight: '200px',
+                  },
                 },
               ],
             },
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/with-interest-relationship.html b/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/with-interest-relationship.html
@@ -1 +1,4 @@
-<s-icon type="delete" tone="critical" interestFor="delete-button-1"></s-icon>
+<s-tooltip id="info-tooltip">
+  SKU must be unique across all products and cannot be changed after creation
+</s-tooltip>
+<s-icon type="info" tone="info" interestFor="info-tooltip" />
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/with-interest-relationship.jsx b/packages/ui-extensions/src/surfaces/admin/components/Icon/examples/with-interest-relationship.jsx
@@ -1 +1,6 @@
-<s-icon type="delete" tone="critical" interestFor="delete-button-1" />
+<>
+  <s-tooltip id="info-tooltip">
+    SKU must be unique across all products and cannot be changed after creation
+  </s-tooltip>
+  <s-icon type="info" tone="info" interestFor="info-tooltip" />
+</>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/rtl-support.html b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/rtl-support.html
@@ -1 +1,3 @@
-<s-paragraph dir="rtl">محتوى النص باللغة العربية</s-paragraph>
+<s-paragraph dir="rtl">
+  محتوى النص باللغة العربية
+</s-paragraph>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/rtl-support.jsx b/packages/ui-extensions/src/surfaces/admin/components/Paragraph/examples/rtl-support.jsx
@@ -1 +1,3 @@
-<s-paragraph dir="rtl">محتوى النص باللغة العربية</s-paragraph>
+<s-paragraph dir="rtl">
+  محتوى النص باللغة العربية
+</s-paragraph>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/examples/section-with-accessibility-label.html b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/section-with-accessibility-label.html
@@ -3,9 +3,11 @@
   accessibilityLabel="Order payment breakdown and totals"
 >
   <s-stack gap="base">
-    <s-text>Subtotal: $42.99</s-text>
-    <s-text>Tax: $5.59</s-text>
-    <s-text>Shipping: $1.41</s-text>
-    <s-text><strong>Total: $49.99</strong></s-text>
+    <s-paragraph>Subtotal: $42.99</s-paragraph>
+    <s-paragraph>Tax: $5.59</s-paragraph>
+    <s-paragraph>Shipping: $1.41</s-paragraph>
+    <s-paragraph>
+      <s-text type="strong">Total: $49.99</s-text>
+    </s-paragraph>
   </s-stack>
 </s-section>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Section/examples/section-with-accessibility-label.jsx b/packages/ui-extensions/src/surfaces/admin/components/Section/examples/section-with-accessibility-label.jsx
@@ -3,11 +3,11 @@
   accessibilityLabel="Order payment breakdown and totals"
 >
   <s-stack>
-    <s-text>Subtotal: $42.99</s-text>
-    <s-text>Tax: $5.59</s-text>
-    <s-text>Shipping: $1.41</s-text>
-    <s-text>
-      <strong>Total: $49.99</strong>
-    </s-text>
+    <s-paragraph>Subtotal: $42.99</s-paragraph>
+    <s-paragraph>Tax: $5.59</s-paragraph>
+    <s-paragraph>Shipping: $1.41</s-paragraph>
+    <s-paragraph>
+      <s-text type="strong">Total: $49.99</s-text>  
+    </s-paragraph>
   </s-stack>
 </s-section>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts
@@ -127,11 +127,13 @@ const data: AdminReferenceEntityTemplateSchema = {
                 {
                   code: './examples/custom-alignment.html',
                   language: 'html',
+                  layout: 'fullWidth',
                 },
 
                 {
                   code: './examples/custom-alignment.jsx',
                   language: 'preview-jsx',
+                  layout: 'fullWidth',
                 },
               ],
             },
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/accessibility-hidden-text.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/accessibility-hidden-text.html
@@ -1 +1,3 @@
-<s-text accessibility-visibility="exclusive">Product prices include tax</s-text>
+<s-text accessibilityVisibility="exclusive">
+  Product prices include tax
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/accessibility-hidden-text.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/accessibility-hidden-text.jsx
@@ -1,3 +1,3 @@
-<s-text accessibility-visibility="exclusive">
+<s-text accessibilityVisibility="exclusive">
   Product prices include tax
 </s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-usage.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-usage.html
@@ -1 +1,3 @@
-<s-text>Manage your products and inventory from one dashboard.</s-text>
+<s-text>
+  Manage your products and inventory from one dashboard.
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-usage.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/basic-usage.jsx
@@ -1 +1,3 @@
-<s-text>Manage your products and inventory from one dashboard.</s-text>
+<s-text>
+  Manage your products and inventory from one dashboard.
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/default.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/default.html
@@ -1,2 +1,4 @@
-<s-text type="strong">Name:</s-text>
-<s-text>Jane Doe</s-text>
+<s-paragraph>
+  <s-text type="strong">Name: </s-text>
+  <s-text>Jane Doe</s-text>
+</s-paragraph>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/default.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/default.jsx
@@ -1,4 +1,4 @@
-<s-stack>
+<s-paragraph>
   <s-text type="strong">Name:</s-text>
   <s-text>Jane Doe</s-text>
-</s-stack>
+</s-paragraph>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/interest-for-association.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/interest-for-association.html
@@ -3,4 +3,4 @@
 </s-tooltip>
 <s-text color="subdued" interestFor="sku-tooltip">
   What is a product SKU?
-</s-text>
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/right-to-left-text.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/right-to-left-text.html
@@ -1 +1,3 @@
-<s-text dir="rtl">محتوى النص باللغة العربية</s-text>
+<s-text dir="rtl">
+  محتوى النص باللغة العربية
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/right-to-left-text.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/right-to-left-text.jsx
@@ -1 +1,3 @@
-<s-text dir="rtl">محتوى النص باللغة العربية</s-text>
+<s-text dir="rtl">
+  محتوى النص باللغة العربية
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/semantic-address.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/semantic-address.html
@@ -1 +1,3 @@
-<s-text type="address">123 Commerce Street, Toronto, ON M5V 2H1</s-text>
+<s-text type="address">
+  123 Commerce Street, Toronto, ON M5V 2H1
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/semantic-address.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/semantic-address.jsx
@@ -1 +1,3 @@
-<s-text type="address">123 Commerce Street, Toronto, ON M5V 2H1</s-text>
+<s-text type="address">
+  123 Commerce Street, Toronto, ON M5V 2H1
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/status-tones.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/status-tones.html
@@ -2,4 +2,4 @@
   <s-text tone="success">Order fulfilled</s-text>
   <s-text tone="critical">Payment failed</s-text>
   <s-text tone="warning">Low inventory</s-text>
-</s-stack>
+</s-stack>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/strong-text.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/strong-text.html
@@ -1 +1,3 @@
-<s-text type="strong">Free shipping on orders over $50</s-text>
+<s-text type="strong">
+  Free shipping on orders over $50
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/strong-text.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/strong-text.jsx
@@ -1 +1,3 @@
-<s-text type="strong">Free shipping on orders over $50</s-text>
+<s-text type="strong">
+  Free shipping on orders over $50
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/subdued-color.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/subdued-color.html
@@ -1 +1,3 @@
-<s-text color="subdued">Last updated 2 hours ago</s-text>
+<s-text color="subdued">
+  Last updated 2 hours ago
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/subdued-color.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/subdued-color.jsx
@@ -1 +1,3 @@
-<s-text color="subdued">Last updated 2 hours ago</s-text>
+<s-text color="subdued">
+  Last updated 2 hours ago
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/tabular-numbers.html b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/tabular-numbers.html
@@ -1 +1,3 @@
-<s-text fontVariantNumeric="tabular-nums">$1,234.56</s-text>
+<s-text fontVariantNumeric="tabular-nums">
+  $1,234.56
+</s-text>
diff --git a/packages/ui-extensions/src/surfaces/admin/components/Text/examples/tabular-numbers.jsx b/packages/ui-extensions/src/surfaces/admin/components/Text/examples/tabular-numbers.jsx
@@ -1 +1,3 @@
-<s-text fontVariantNumeric="tabular-nums">$1,234.56</s-text>
+<s-text fontVariantNumeric="tabular-nums">
+  $1,234.56
+</s-text>

Original file line number	Diff line number	Diff line change
`@@ -127,11 +127,13 @@ const data: AdminReferenceEntityTemplateSchema = {`
`127`	`127`	`{`
`128`	`128`	`code: './examples/custom-alignment.html',`
`129`	`129`	`language: 'html',`
	`130`	`+ layout: 'fullWidth',`
`130`	`131`	`},`
`131`	`132`
`132`	`133`	`{`
`133`	`134`	`code: './examples/custom-alignment.jsx',`
`134`	`135`	`language: 'preview-jsx',`
	`136`	`+ layout: 'fullWidth',`
`135`	`137`	`},`
`136`	`138`	`],`
`137`	`139`	`},`