Add ProgressIndicator component

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -38,6 +38,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
 export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
 export {Pressable} from './components/Pressable/Pressable';
 export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
 export {ResourceItem} from './components/ResourceItem/ResourceItem';
 export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
 export {ResourceList} from './components/ResourceList/ResourceList';

packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts

@@ -0,0 +1,9 @@
+import {ProgressIndicator as BaseProgressIndicator} from '@shopify/ui-extensions/admin';
+import type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const ProgressIndicator = createRemoteReactComponent<
+  'ProgressIndicator',
+  ProgressIndicatorProps
+>(BaseProgressIndicator);
+export type {ProgressIndicatorProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.example.tsx

@@ -0,0 +1,12 @@
+import {
+  reactExtension,
+  ProgressIndicator,
+} from '@shopify/ui-extensions-react/admin';
+
+reactExtension('Playground', () => <App />);
+
+function App() {
+  return (
+    <ProgressIndicator size="small-200" />
+  );
+}

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -42,6 +42,8 @@ export {PasswordField} from './components/PasswordField/PasswordField';
 export type {PasswordFieldProps} from './components/PasswordField/PasswordField';
 export {Pressable} from './components/Pressable/Pressable';
 export type {PressableProps} from './components/Pressable/Pressable';
+export {ProgressIndicator} from './components/ProgressIndicator/ProgressIndicator';
+export type {ProgressIndicatorProps} from './components/ProgressIndicator/ProgressIndicator';
 export {ResourceItem} from './components/ResourceItem/ResourceItem';
 export type {ResourceItemProps} from './components/ResourceItem/ResourceItem';
 export {ResourceList} from './components/ResourceList/ResourceList';

packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts

@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'ProgressIndicator',
+  description:
+    'Use this component to notify merchants that their action is being processed or loaded.',
+  requires: '',
+  thumbnail: 'progressindicator-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'ProgressIndicatorProps',
+      description: '',
+      type: 'ProgressIndicatorProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Media',
+  defaultExample: {
+    image: 'progressindicator-default.png',
+    codeblock: {
+      title: 'Simple spinner example',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/ProgressIndicator/examples/basic-progressindicator.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-progressindicator.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [
+    {
+      type: 'component',
+      name: 'Button',
+      url: '/docs/api/admin-extensions/components/actions/button',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.ts

@@ -0,0 +1,32 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {GlobalProps, SizeScale, AccessibilityLabelProps} from '../shared';
+
+export interface ProgressIndicatorProps
+  extends GlobalProps,
+    AccessibilityLabelProps {
+  /**
+   * The size of the component.
+   */
+  size: SizeScale;
+
+  /**
+   * Set the color of the progress indicator.
+   *
+   * - `inherit` will take the color value from its parent,
+   * giving the progress indicator a monochrome appearance.
+   *
+   * @defaultValue 'inherit'
+   */
+  tone?: 'inherit' | 'default';
+
+  /**
+   * Style of the progress indicator
+   * @default 'spinner'
+   */
+  variant?: 'spinner';
+}
+
+export const ProgressIndicator = createRemoteComponent<
+  'ProgressIndicator',
+  ProgressIndicatorProps
+>('ProgressIndicator');

packages/ui-extensions/src/surfaces/admin/components/ProgressIndicator/examples/basic-ProgressIndicator.ts

@@ -0,0 +1,18 @@
+import {
+  extension,
+  ProgressIndicator,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'Playground',
+  (root) => {
+    const progressIndicator = root.createComponent(
+      ProgressIndicator,
+      {
+        size: 'small-200',
+      },
+    );
+
+    root.appendChild(progressIndicator);
+  },
+);

packages/ui-extensions/src/surfaces/admin/components/shared/index.ts

@@ -122,6 +122,15 @@ export interface MinMaxLengthProps {
   minLength?: number;
 }
 
+export interface AccessibilityLabelProps {
+  /**
+   * A label that describes the purpose or contents of the element. When set, it will be announced
+   * to users using assistive technologies and will provide them with more context. When set, any
+   * children or `label` supplied will not be announced to screen readers.
+   */
+  accessibilityLabel?: string;
+}
+
 export interface AccessibilityRoleProps {
   /**
    * Sets the semantic meaning of the component’s content. When set,
@@ -636,6 +645,15 @@ export type SpaceScale =
   | '28'
   | '32';
 
+export type SizeScale =
+  | 'small-300'
+  | 'small-200'
+  | 'small-100'
+  | 'base'
+  | 'large-100'
+  | 'large-200'
+  | 'large-300';
+
 export interface AnchorProps {
   /**
    * The URL to link to.