Add documentation and example for Admin Modal component

Author: sam-b-rose

.changeset/small-roses-double.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Add documentation for Admin Modal

packages/ui-extensions/docs/surfaces/admin/screenshots/components/modal.png

@@ -5,7 +5,7 @@ const data: SharedReferenceEntityTemplateSchema = {
   description:
     'Use modal to display content in a overlay. This component is useful for creating a distraction-free experience, such as a confirmation dialog or a settings panel.',
   category: 'Polaris web components',
-  subCategory: 'Overlay',
+  subCategory: 'Overlays',
   related: [],
 };
 

packages/ui-extensions/src/docs/shared/components/Modal.ts

@@ -0,0 +1,42 @@
+import {AdminReferenceEntityTemplateSchema} from '../../docs-types';
+import sharedContent from '../../../../docs/shared/components/Modal';
+
+const data: AdminReferenceEntityTemplateSchema = {
+  ...sharedContent,
+  thumbnail: '/assets/templated-apis-screenshots/admin/components/modal.png',
+  isVisualComponent: true,
+  definitions: [
+    {
+      title: 'Properties',
+      description: '',
+      type: 'Modal',
+    },
+    {
+      title: 'Events',
+      description:
+        'Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).',
+      type: 'ModalEvents',
+    },
+    {
+      title: 'Slots',
+      description: '',
+      type: 'ModalSlots',
+    },
+  ],
+  defaultExample: {
+    codeblock: {
+      title: 'Code',
+      tabs: [
+        {
+          code: './examples/default.html',
+          language: 'preview',
+          customStyles: {
+            minHeight: '300px',
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default data;

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

@@ -0,0 +1,23 @@
+<s-button commandFor="modal">
+  Open
+</s-button>
+
+<s-modal id="modal" heading="Details">
+  <s-paragraph>
+    Displaying more details here.
+  </s-paragraph>
+
+  <s-button
+    slot="secondary-actions"
+    commandFor="modal"
+    command="--hide">
+    Close
+  </s-button>
+  <s-button
+    slot="primary-action"
+    variant="primary"
+    commandFor="modal"
+    command="--hide">
+    Save
+  </s-button>
+</s-modal>