Merge pull request #2879 from Shopify/2025-10-rc--admin-components-copy

sam-b-rose · web-flow · commit 9ff0ddfa8d67 · 2025-05-20T10:51:05.000-04:00
Update component descriptions for Admin components
diff --git a/packages/ui-extensions/src/docs/shared/components/Badge.ts b/packages/ui-extensions/src/docs/shared/components/Badge.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Badge',
   description:
-    "Use `s-badge` to inform merchants of the status of an object or of an action that's been taken.",
+    'Inform users about the status of an object or indicate that an action has been completed.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Checkbox.ts b/packages/ui-extensions/src/docs/shared/components/Checkbox.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Checkbox',
   description:
-    'Use `s-checkbox` when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',
+    'Give users a clear way to make selections, such as agreeing to terms or choosing multiple items from a list.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts b/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'ChoiceList',
   description:
-    'Use `s-choice-list` to present multiple options to merchants. Choice lists can present options with either radio buttons for single selection or checkboxes for multiple selection.',
+    'Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Clickable.ts b/packages/ui-extensions/src/docs/shared/components/Clickable.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Clickable',
   description:
-    'The `s-clickable` component is an escape hatch for when `s-button` and `s-link` are not sufficient to create an interactive element.',
+    'A generic interactive container component that provides a flexible alternative for custom interactive elements not achievable with existing components like Button or Link. Use it to apply specific styling such as backgrounds, padding, or borders.',
   category: 'Polaris web components',
   subCategory: 'Actions',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/DatePicker.ts b/packages/ui-extensions/src/docs/shared/components/DatePicker.ts
@@ -2,8 +2,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'DatePicker',
-  description:
-    'Use a date picker to allow merchants to select a date or a date range.',
+  description: 'Allow users to select a specific date or date range.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Divider.ts b/packages/ui-extensions/src/docs/shared/components/Divider.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Divider',
   description:
-    'Use `s-divider` to create a clear visual separation between different elements in your user interface.',
+    'Create clear visual separation between elements in your user interface.',
   category: 'Polaris web components',
   subCategory: 'Structure',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/EmailField.ts b/packages/ui-extensions/src/docs/shared/components/EmailField.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'EmailField',
   description:
-    'Use `s-email-field` to allow merchants to input email addresses. This component provides built-in email validation and appropriate keyboard settings.',
+    'Let users enter email addresses with built-in validation and optimized keyboard settings.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/MoneyField.ts b/packages/ui-extensions/src/docs/shared/components/MoneyField.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'MoneyField',
   description:
-    'Use `s-money-field` when you need to collect monetary values from merchants. It provides appropriate formatting and validation for currency amounts.',
+    'Collect monetary values from users with built-in currency formatting and validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/NumberField.ts b/packages/ui-extensions/src/docs/shared/components/NumberField.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'NumberField',
   description:
-    'Use `s-number-field` when you need to collect numerical input from merchants. It provides appropriate keyboard settings and validation for numerical values.',
+    'Collect numerical values from users with optimized keyboard settings and built-in validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/PasswordField.ts b/packages/ui-extensions/src/docs/shared/components/PasswordField.ts
@@ -2,8 +2,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'PasswordField',
-  description:
-    'Use `s-password-field` when you need to collect sensitive information from merchants.',
+  description: 'Securely collect sensitive information from users.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/SearchField.ts b/packages/ui-extensions/src/docs/shared/components/SearchField.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'SearchField',
   description:
-    'Use a search field to allow merchants to search for a specific item or search term. Search fields provide a single-line input area for collecting string values from users.',
+    'Let users enter search terms or find specific items using a single-line input field.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Section.ts b/packages/ui-extensions/src/docs/shared/components/Section.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Section',
   description:
-    'Use `s-section` to organize your page content. Sections have defined styling, and will display differently depending on how deeply they are nested in the page.',
+    'Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.',
   category: 'Polaris web components',
   subCategory: 'Structure',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Select.ts b/packages/ui-extensions/src/docs/shared/components/Select.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Select',
   description:
-    '`s-select` lets merchants choose one option from an options menu. Consider `s-select` when you have 4 or more options, to avoid cluttering the interface.',
+    'Allow users to pick one option from a menu. Ideal when presenting four or more choices to keep interfaces uncluttered.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Switch.ts b/packages/ui-extensions/src/docs/shared/components/Switch.ts
@@ -2,8 +2,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Switch',
-  description:
-    'Use `s-switch` when you want to provide users with a clear selection option, such as toggling options on/off.',
+  description: 'Give users a clear way to toggle options on or off.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/Table.ts b/packages/ui-extensions/src/docs/shared/components/Table.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Table',
   description:
-    'Use `s-table` to organize and display data in a tabular format. Tables help merchants view, analyze, and compare data. By default the `s-table` renders as a list on mobile devices and a table on desktop devices.',
+    'Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.',
   category: 'Polaris web components',
   subCategory: 'Structure',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/TextArea.ts b/packages/ui-extensions/src/docs/shared/components/TextArea.ts
@@ -3,7 +3,7 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'TextArea',
   description:
-    'Use `s-text-area` when you need to collect longer text content from merchants. Text areas allow for multiple lines of text and automatically expand to fit the content.',
+    'Collect longer text content from users with a multi-line input that expands automatically.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
diff --git a/packages/ui-extensions/src/docs/shared/components/URLField.ts b/packages/ui-extensions/src/docs/shared/components/URLField.ts
@@ -2,7 +2,8 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'URLField',
-  description: 'Use a URLField when you need to collect URLs from merchants.',
+  description:
+    'Collect URLs from users with built-in formatting and validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
   related: [],
