@shopify/ui-extensions 2025.10.0-rc.2 → 2025.10.0-rc.4

package/src/surfaces/admin/components/Checkbox/shared.ts

@@ -1,46 +0,0 @@
-const shared = {
-  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.',
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/checkbox.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Checkbox',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'Switch',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/switch',
-    },
-    {
-      type: 'component',
-      name: 'Select',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/select',
-    },
-    {
-      type: 'component',
-      name: 'ChoiceList',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/choice-list',
-    },
-  ],
-  defaultExample: {
-    image: 'checkbox-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/ChoiceList/shared.ts

@@ -1,42 +0,0 @@
-const shared = {
-  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.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/choicelist.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'ChoiceList',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'Select',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/select',
-    },
-    {
-      type: 'component',
-      name: 'Checkbox',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/checkbox',
-    },
-  ],
-  defaultExample: {
-    image: 'choicelist-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Clickable/shared.ts

@@ -1,48 +0,0 @@
-const shared = {
-  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.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/clickable.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Clickable',
-    },
-    {
-      title: 'Events',
-      description:
-        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
-      type: 'ClickableEvents',
-    },
-  ],
-  subCategory: 'Actions',
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: '/docs/api/admin-extensions/polaris-web-components/actions/button',
-    },
-    {
-      type: 'component',
-      name: 'Link',
-      url: '/docs/api/admin-extensions/polaris-web-components/actions/link',
-    },
-  ],
-  defaultExample: {
-    image: 'clickable-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/DatePicker/shared.ts

@@ -1,36 +0,0 @@
-const shared = {
-  name: 'DatePicker',
-  description:
-    'Use a date picker to allow merchants to select a date or a date range.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/datepicker.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'DatePicker',
-      description: '',
-      type: 'DatePicker',
-    },
-    {
-      title: 'Events',
-      description:
-        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
-      type: 'DatePickerEvents',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [],
-  defaultExample: {
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Divider/shared.ts

@@ -1,50 +0,0 @@
-const shared = {
-  name: 'Divider',
-  description:
-    'Use `s-divider` to create a clear visual separation between different elements in your user interface.',
-  subSections: [
-    {
-      title: 'Useful for',
-      type: 'Generic' as const,
-      anchorLink: 'useful-for',
-      sectionContent: `- Separating elements inside sections.
-- Visually grouping related content in forms and lists.`,
-    },
-  ],
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/divider.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Divider',
-    },
-  ],
-  subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Section',
-      url: '/docs/api/admin-extensions/polaris-web-components/structure/section',
-    },
-    {
-      type: 'component',
-      name: 'Stack',
-      url: '/docs/api/admin-extensions/polaris-web-components/structure/stack',
-    },
-  ],
-  defaultExample: {
-    image: 'divider-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/EmailField/shared.ts

@@ -1,42 +0,0 @@
-const shared = {
-  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.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/emailfield.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'EmailField',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/textfield',
-    },
-    {
-      type: 'component',
-      name: 'TextArea',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/textarea',
-    },
-  ],
-  defaultExample: {
-    image: 'emailfield-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Grid/shared.ts

@@ -1,58 +0,0 @@
-const shared = {
-  name: 'Grid',
-  description:
-    'Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).',
-  subSections: [
-    {
-      title: 'Useful for',
-      type: 'Generic' as const,
-      anchorLink: 'useful-for',
-      sectionContent: `- Organizing content into a grid-like layout with columns and rows with consistent alignment and spacing.
-- Creating responsive layouts with consistent spacing.`,
-    },
-    {
-      title: 'Considerations',
-      type: 'Generic' as const,
-      anchorLink: 'considerations',
-      sectionContent: `- Grid doesn't include any padding by default. If you need padding around your grid, use \`base\` to apply the default padding.
-- Grid will allow children to overflow unless template rows/columns are properly set.
-- Grid will always wrap children to a new line. If you need to control the wrapping behavior, use \`s-stack\` or \`s-box\`.`,
-    },
-  ],
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/grid.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Grid',
-    },
-  ],
-  subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Box',
-      url: '/docs/api/admin-extensions/polaris-web-components/structure/box',
-    },
-    {
-      type: 'component',
-      name: 'Stack',
-      url: '/docs/api/admin-extensions/polaris-web-components/structure/stack',
-    },
-  ],
-  defaultExample: {
-    image: 'grid-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Heading/shared.ts

@@ -1,62 +0,0 @@
-const shared = {
-  name: 'Heading',
-  description:
-    "Use `s-heading` to create hierarchical titles similar to HTML's `h1-h6` elements.",
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/heading.png',
-  isVisualComponent: true,
-  subSections: [
-    {
-      title: 'Useful for',
-      type: 'Generic' as const,
-      anchorLink: 'useful-for',
-      sectionContent: `- Creating titles and subtitles for your content that are consistent across your app.
-- Helping users with visual impairments navigate through content effectively using assistive technologies like screen readers.`,
-    },
-    {
-      title: 'Considerations',
-      type: 'Generic' as const,
-      anchorLink: 'considerations',
-      sectionContent: `- The level of the heading is automatically determined by how deeply it's nested inside other components, starting from h2.
-- Default to using the \`heading\` property in components that support it (e.g. Section and Banner). The \`s-heading\` component should only be used if you need to implement a custom layout for your heading in the UI.`,
-    },
-    {
-      title: 'Best practices',
-      type: 'Generic' as const,
-      anchorLink: 'best-practices',
-      sectionContent: `- Use short headings to make your content scannable.
-- Use plain and clear terms.
-- Don't use jargon or technical language.
-- Don't use different terms to describe the same thing.
-- Don't duplicate content.`,
-    },
-  ],
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Heading',
-    },
-  ],
-  subCategory: 'Titles and text',
-  related: [
-    {
-      type: 'component',
-      name: 'Text',
-      url: '/docs/api/admin-extensions/polaris-web-components/titles-and-text/text',
-    },
-  ],
-  defaultExample: {
-    image: 'heading-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Icon/shared.ts

@@ -1,37 +0,0 @@
-const shared = {
-  name: 'Icon',
-  description:
-    'Use `s-icon` to render an icon from a predefined list. Choose the one that suits your needs.',
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/icon.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Icon',
-    },
-  ],
-  subCategory: 'Media',
-  related: [
-    {
-      type: 'component',
-      name: 'Image',
-      url: '/docs/api/admin-extensions/polaris-web-components/media/image',
-    },
-  ],
-  defaultExample: {
-    image: 'icon-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-          layout: 'inline',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Image/shared.ts

@@ -1,57 +0,0 @@
-const shared = {
-  name: 'Image',
-  description: 'Use `s-image` to display images in your app.',
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/image.png',
-  isVisualComponent: true,
-  subSections: [
-    {
-      title: 'Useful for',
-      type: 'Generic' as const,
-      anchorLink: 'useful-for',
-      sectionContent: `- Adding illustrations and photos.`,
-    },
-    {
-      title: 'Best practices',
-      type: 'Generic' as const,
-      anchorLink: 'best-practices',
-      sectionContent: `- Use high-resolution images to ensure a professional and high-quality experience.
-- Use optimized images so your app loads as fast as possible.
-- Use images intentionally, these should add clarity and lead users to the next step.`,
-    },
-  ],
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Image',
-    },
-    {
-      title: 'Events',
-      description:
-        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
-      type: 'ImageEvents',
-    },
-  ],
-  subCategory: 'Media',
-  related: [
-    {
-      type: 'component',
-      name: 'Icon',
-      url: '/docs/api/admin-extensions/polaris-web-components/media/icon',
-    },
-  ],
-  defaultExample: {
-    image: 'image-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/Link/shared.ts

@@ -1,42 +0,0 @@
-const shared = {
-  name: 'Link',
-  description:
-    '`s-link` is an interactive component that directs users to a specified URL. It even supports custom protocols.\n\n To link to a Shopify admin page, use `href="shopify://admin/orders"`. To link to an app page, use `href="app://orders"`.',
-  thumbnail: '/assets/templated-apis-screenshots/admin/components/link.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'Link',
-    },
-    {
-      title: 'Events',
-      description:
-        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
-      type: 'LinkEvents',
-    },
-  ],
-  subCategory: 'Actions',
-  related: [
-    {
-      type: 'component',
-      name: 'Button',
-      url: '/docs/api/admin-extensions/polaris-web-components/actions/button',
-    },
-  ],
-  defaultExample: {
-    image: 'link-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/MoneyField/shared.ts

@@ -1,42 +0,0 @@
-const shared = {
-  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.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/moneyfield.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'MoneyField',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'NumberField',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/numberfield',
-    },
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/textfield',
-    },
-  ],
-  defaultExample: {
-    image: 'moneyfield-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/NumberField/shared.ts

@@ -1,42 +0,0 @@
-const shared = {
-  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.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/numberfield.png',
-  isVisualComponent: true,
-  definitions: [
-    {
-      title: 'Properties',
-      description: '',
-      type: 'NumberField',
-    },
-  ],
-  subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/textfield',
-    },
-    {
-      type: 'component',
-      name: 'MoneyField',
-      url: '/docs/api/admin-extensions/polaris-web-components/forms/moneyfield',
-    },
-  ],
-  defaultExample: {
-    image: 'numberfield-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;

package/src/surfaces/admin/components/OrderedList/shared.ts

@@ -1,35 +0,0 @@
-const shared = {
-  name: 'OrderedList',
-  description:
-    '`s-ordered-list` displays a set of related text-only content beginning with a number.',
-  thumbnail:
-    '/assets/templated-apis-screenshots/admin/components/ordered-list.png',
-  isVisualComponent: true,
-  subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'UnorderedList',
-      url: '/docs/api/admin-extensions/polaris-web-components/structure/unordered-list',
-    },
-    {
-      type: 'component',
-      name: 'Text',
-      url: '/docs/api/admin-extensions/polaris-web-components/titles-and-text/text',
-    },
-  ],
-  defaultExample: {
-    image: 'ordered-list-default.png',
-    codeblock: {
-      title: 'Code',
-      tabs: [
-        {
-          code: './examples/default.html',
-          language: 'preview',
-        },
-      ],
-    },
-  },
-};
-
-export default shared;