Merge 86c636d into bd882e1

Workday · Sep 16, 2024 · 4d4afb4 · 4d4afb4
2 parents bd882e1 + 86c636d
commit 4d4afb4
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 11 deletions.
diff --git a/cypress/component/Modal.spec.tsx b/cypress/component/Modal.spec.tsx
@@ -102,7 +102,7 @@ describe('Modal', () => {
         });
 
         it('should trap focus inside the modal element', () => {
-          cy.tab().should('contain', 'Acknowledge').tab().should('contain', 'Cancel').tab();
+          cy.tab().should('contain', 'Cancel').tab().should('contain', 'Acknowledge').tab();
           cy.findByRole('dialog', {name: 'MIT License'})
             .findByRole('button', {name: 'Close'})
             .should('have.focus');
@@ -520,11 +520,11 @@ context(`given the [Components/Popups/Modal, Custom focus] story is rendered`, (
 
       it('should trap focus inside the modal element', () => {
         cy.focused()
-          .tab()
-          .should('contain', 'Acknowledge')
           .tab()
           .should('contain', 'Cancel')
           .tab()
+          .should('contain', 'Acknowledge')
+          .tab()
           .should('have.attr', 'aria-label', 'Close')
           .tab();
         cy.findByLabelText('Initials').should('have.focus');

diff --git a/modules/react/modal/stories/Modal.mdx b/modules/react/modal/stories/Modal.mdx
@@ -1,4 +1,5 @@
 import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {Source, Canvas, Stories} from '@storybook/blocks'
 
 import {Basic} from './examples/Basic';
 import {WithoutCloseIcon} from './examples/WithoutCloseIcon';
@@ -19,6 +20,10 @@ interaction with the rest of the page. A Modal will render the rest of the page
 Modal is dismissed. A Modal should be used when the user needs to presented with important
 information that must be interacted with before continuing interaction with the rest of the page.
 
+>**Note: We recommend the main call-to-action button (i.e. "Acknowledge", "Submit", "Accept", etc.) be positioned after a non-call-to-action button (i.e. "Cancel", "Close", etc.)**
+
+>**This allows a user to view all of their options when making a decision on which button to click for a Modal.**
+
 ## Installation
 
 ```sh

diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx
@@ -27,10 +27,10 @@ export const Basic = () => {
             </Box>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx
@@ -82,10 +82,10 @@ export const BodyOverflow = () => {
             </p>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx
@@ -40,10 +40,10 @@ export const CustomFocus = () => {
             </FormField>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx
@@ -82,10 +82,10 @@ export const FullOverflow = () => {
             </p>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.OverflowOverlay>

diff --git a/modules/react/modal/stories/examples/IframeTest.tsx b/modules/react/modal/stories/examples/IframeTest.tsx
@@ -14,8 +14,8 @@ export const IframeTest = () => {
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
             <Flex gap="s">
-              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
               <Modal.CloseButton>Cancel</Modal.CloseButton>
+              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
             </Flex>
             <iframe srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button>iframe button 2</button></body></html>" />
           </Modal.Body>

diff --git a/modules/react/modal/stories/examples/ModalWithPopup.tsx b/modules/react/modal/stories/examples/ModalWithPopup.tsx
@@ -42,6 +42,7 @@ export const ModalWithPopup = () => {
                     <Popup.Body>
                       <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
                       <Flex gap="s">
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -51,7 +52,6 @@ export const ModalWithPopup = () => {
                         >
                           Yes, Really Delete
                         </Popup.CloseButton>
-                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                       </Flex>
                     </Popup.Body>
                   </Popup.Card>

diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx
@@ -51,10 +51,10 @@ export const ReturnFocus = () => {
             </Box>
           </Modal.Body>
           <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

diff --git a/modules/react/modal/stories/examples/StackedModals.tsx b/modules/react/modal/stories/examples/StackedModals.tsx
@@ -31,6 +31,7 @@ export const StackedModals = () => {
                         Are you <em>really</em> sure you want to delete the item?
                       </p>
                       <Flex gap="s">
+                        <Modal.CloseButton>Cancel</Modal.CloseButton>
                         <Modal.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -40,7 +41,6 @@ export const StackedModals = () => {
                         >
                           Yes, Really Delete
                         </Modal.CloseButton>
-                        <Modal.CloseButton>Cancel</Modal.CloseButton>
                       </Flex>
                     </Modal.Body>
                   </Modal.Card>