[Modal] Add destructive primary action example

Shopify · Oct 25, 2023 · c11413c · c11413c
1 parent a5dfae0
commit c11413c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx
@@ -126,6 +126,43 @@ export function WithPrimaryAction() {
   );
 }
 
+export function WithDestructivePrimaryAction() {
+  const [active, setActive] = useState(true);
+
+  const toggleModal = useCallback(() => setActive((active) => !active), []);
+
+  const activator = <Button onClick={toggleModal}>Open</Button>;
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Discard all unsaved changes"
+          primaryAction={{
+            destructive: true,
+            content: 'Discard changes',
+            onAction: toggleModal,
+          }}
+          secondaryActions={[
+            {
+              content: 'Continue editing',
+              onAction: toggleModal,
+            },
+          ]}
+        >
+          <Modal.Section>
+            If you discard changes, you’ll delete any edits you made since you
+            last saved.
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}
+
 export function WithPrimaryAndSecondaryActions() {
   const currentPage = 'current_page';
   const allCustomers = 'all_customers';

diff --git a/polaris.shopify.com/content/components/overlays/modal.md b/polaris.shopify.com/content/components/overlays/modal.md
@@ -32,6 +32,9 @@ examples:
   - fileName: modal-with-primary-action.tsx
     title: With primary action
     description: Use to let merchants take a key action.
+  - fileName: modal-with-destructive-primary-action.tsx
+    title: With destructive primary action
+    description: Use to let merchants take a key action that cannot be undone.
   - fileName: modal-with-primary-and-secondary-actions.tsx
     title: With primary and secondary actions
     description: Use to let merchants take key actions at the bottom of the modal.

diff --git a/polaris.shopify.com/pages/examples/modal-with-destructive-primary-action.tsx b/polaris.shopify.com/pages/examples/modal-with-destructive-primary-action.tsx
@@ -0,0 +1,42 @@
+import {Button, Modal, Frame} from '@shopify/polaris';
+import {useState, useCallback} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ModalWithDestructivePrimaryActionExample() {
+  const [active, setActive] = useState(true);
+
+  const toggleModal = useCallback(() => setActive((active) => !active), []);
+
+  const activator = <Button onClick={toggleModal}>Open</Button>;
+
+  return (
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Discard all unsaved changes"
+          primaryAction={{
+            destructive: true,
+            content: 'Discard changes',
+            onAction: toggleModal,
+          }}
+          secondaryActions={[
+            {
+              content: 'Continue editing',
+              onAction: toggleModal,
+            },
+          ]}
+        >
+          <Modal.Section>
+            If you discard changes, you’ll delete any edits you made since you
+            last saved.
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
+  );
+}
+
+export default withPolarisExample(ModalWithDestructivePrimaryActionExample);