refactor(Modal): focus secondary button by default when Modal has typ…

…e `danger` (#12006) * docs(Modal): add example of selectorPrimaryFocus, Danger Modal * refactor(Modal): select secondary button by default when danger Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Aug 25, 2022 · aba960f · aba960f
1 parent 40be69e
commit aba960f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -191,7 +191,9 @@ const Modal = React.forwardRef(function Modal(
     const initialFocus = (focusContainerElement) => {
       const containerElement = focusContainerElement || innerModal.current;
       const primaryFocusElement = containerElement
-        ? containerElement.querySelector(selectorPrimaryFocus)
+        ? containerElement.querySelector(
+            danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus
+          )
         : null;
 
       if (primaryFocusElement) {
@@ -211,7 +213,7 @@ const Modal = React.forwardRef(function Modal(
     if (open) {
       focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus]);
+  }, [open, selectorPrimaryFocus, danger, prefix]);
 
   const modalBody = (
     <div

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -144,6 +144,19 @@ export const Default = () => {
   );
 };
 
+export const DangerModal = () => {
+  return (
+    <Modal
+      open
+      danger
+      modalHeading="Are you sure you want to delete this custom domain?"
+      modalLabel="Account resources"
+      primaryButtonText="Delete"
+      secondaryButtonText="Cancel"
+    />
+  );
+};
+
 export const Playground = () => {
   const { size, numberOfButtons, hasScrollingContent, ...modalProps } =
     props.modal();