From a81c9d57d78e6df09306274844b9b7244a5b49a0 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 11 Aug 2022 11:07:37 -0600 Subject: [PATCH 01/35] fix: Prevent focus ring from getting cut off in modals --- modules/react/modal/lib/Modal.tsx | 5 +++- modules/react/modal/lib/ModalBody.tsx | 12 +++++++++ modules/react/modal/lib/ModalCard.tsx | 10 ++++++- modules/react/modal/lib/ModalFooter.tsx | 26 +++++++++++++++++++ modules/react/modal/lib/ModalHeading.tsx | 10 ++++++- .../modal/stories/examples/BodyOverflow.tsx | 6 ++--- .../modal/stories/examples/FullOverflow.tsx | 4 +-- 7 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 modules/react/modal/lib/ModalBody.tsx create mode 100644 modules/react/modal/lib/ModalFooter.tsx diff --git a/modules/react/modal/lib/Modal.tsx b/modules/react/modal/lib/Modal.tsx index 06e947e107..df742dda52 100644 --- a/modules/react/modal/lib/Modal.tsx +++ b/modules/react/modal/lib/Modal.tsx @@ -7,12 +7,14 @@ import {ModalCard} from './ModalCard'; import {useModalModel} from './hooks'; import {ModalHeading} from './ModalHeading'; import {ModalOverflowOverlay} from './ModalOverflowOverlay'; +import {ModalBody} from './ModalBody'; +import {ModalFooter} from './ModalFooter'; export const Modal = createContainer()({ displayName: 'Modal', modelHook: useModalModel, subComponents: { - Body: Popup.Body, + Body: ModalBody, Card: ModalCard, CloseIcon: Popup.CloseIcon, Target: Popup.Target, @@ -20,6 +22,7 @@ export const Modal = createContainer()({ Overlay: ModalOverlay, OverflowOverlay: ModalOverflowOverlay, CloseButton: Popup.CloseButton, + Footer: ModalFooter, }, })>(elemProps => { return <>{elemProps.children}; diff --git a/modules/react/modal/lib/ModalBody.tsx b/modules/react/modal/lib/ModalBody.tsx new file mode 100644 index 0000000000..31ebe139be --- /dev/null +++ b/modules/react/modal/lib/ModalBody.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; +import {Card} from '@workday/canvas-kit-react/card'; +import {usePopupModel} from '@workday/canvas-kit-react/popup'; + +export const ModalBody = createSubcomponent('div')({ + displayName: 'Modal.Body', + modelHook: usePopupModel, +})>(elemProps => { + return ; +}); diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index 8889a7a732..f43bd97ccb 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -13,6 +13,14 @@ export const ModalCard = createSubcomponent('div')({ elemPropsHook: useModalCard, })((elemProps, Element) => { return ( - + ); }); diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx new file mode 100644 index 0000000000..9623211032 --- /dev/null +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +import { + createSubcomponent, + ExtractProps, + StyledType, + styled, +} from '@workday/canvas-kit-react/common'; + +import {HStack} from '@workday/canvas-kit-react/layout'; +import {useModalModel} from './hooks'; +import {space} from '@workday/canvas-kit-react/tokens'; + +export interface ModalFooterProps + extends Partial> {} + +const StyledModalFooter = styled(HStack)({ + padding: `${space.s} ${space.l} ${space.l} ${space.l}`, +}); + +export const ModalFooter = createSubcomponent('div')({ + displayName: 'Modal.Footer', + modelHook: useModalModel, +})(({...elemProps}) => { + return ; +}); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index c47ec578e8..0fea48e29a 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -12,5 +12,13 @@ export const ModalHeading = createSubcomponent('h2')({ modelHook: useModalModel, elemPropsHook: useModalHeading, })((elemProps, Element) => { - return ; + return ( + + ); }); diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 32246cdde6..d07f507e0a 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -17,7 +17,7 @@ export const BodyOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -43,12 +43,12 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete Cancel - + diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index 57a4993013..b4bd5e6f16 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -42,12 +42,12 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

- + Delete Cancel - + From e146979a0eb9099f303ec7e0557f0ba1d7fa83d5 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 11 Aug 2022 13:48:02 -0600 Subject: [PATCH 02/35] fix: Clean up storybook examples --- modules/react/modal/lib/ModalFooter.tsx | 8 +++--- modules/react/modal/lib/ModalHeading.tsx | 6 ++--- modules/react/modal/stories/Modal.stories.mdx | 7 +++++ .../react/modal/stories/examples/Basic.tsx | 26 +++++++++---------- .../modal/stories/examples/BodyOverflow.tsx | 20 +++++++------- .../modal/stories/examples/CustomFocus.tsx | 22 ++++++++-------- .../modal/stories/examples/FullOverflow.tsx | 16 ++++++------ .../stories/examples/WithoutCloseIcon.tsx | 20 +++++++------- 8 files changed, 64 insertions(+), 61 deletions(-) diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx index 9623211032..187d26e12a 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -14,13 +14,11 @@ import {space} from '@workday/canvas-kit-react/tokens'; export interface ModalFooterProps extends Partial> {} -const StyledModalFooter = styled(HStack)({ - padding: `${space.s} ${space.l} ${space.l} ${space.l}`, -}); - export const ModalFooter = createSubcomponent('div')({ displayName: 'Modal.Footer', modelHook: useModalModel, })(({...elemProps}) => { - return ; + return ( + + ); }); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index 0fea48e29a..1e285c423c 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -14,9 +14,9 @@ export const ModalHeading = createSubcomponent('h2')({ })((elemProps, Element) => { return ( diff --git a/modules/react/modal/stories/Modal.stories.mdx b/modules/react/modal/stories/Modal.stories.mdx index 4825f0fe9e..70ed5261cb 100644 --- a/modules/react/modal/stories/Modal.stories.mdx +++ b/modules/react/modal/stories/Modal.stories.mdx @@ -158,6 +158,13 @@ cannot use this component. The default element is an `h2` and can be changed via +### Modal.Footer + +The `Modal.Footer` is an `HStack` that allows you to add any buttons or elements that would go in a +footer of a Modal. + + + ### Modal.CloseIcon The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 5479e6af52..946cd702b3 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -1,32 +1,32 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {HStack, Box} from '@workday/canvas-kit-react/layout'; export const Basic = () => { - const handleDelete = () => { - console.log('Deleted item'); + const handleClose = () => { + console.log('Close modal'); }; return ( - Delete Item + Open Modal - Delete Item - - + Modal Heading + + Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Close + + Secondary Action + diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index d07f507e0a..272228b2d3 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -1,23 +1,21 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; -import {HStack, VStack, Stack, Box} from '@workday/canvas-kit-react/layout'; -import {space} from '@workday/canvas-kit-react/tokens'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; export const BodyOverflow = () => { - const handleDelete = () => { - console.log('Deleted item'); + const handleClose = () => { + console.log('Close modal'); }; return ( - Delete Item + Open Overflow Modal - Delete Item - + Modal Title +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -44,10 +42,10 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

 - - Delete + + Close - Cancel + Secondary Action diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index fbd2a588a8..85eee54576 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Modal, useModalModel} from '@workday/canvas-kit-react/modal'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; import FormField from '@workday/canvas-kit-react/form-field'; import TextInput from '@workday/canvas-kit-react/text-input'; import {HStack, Box} from '@workday/canvas-kit-react/layout'; @@ -12,31 +12,31 @@ export const CustomFocus = () => { initialFocusRef: ref, }); - const handleDelete = () => { - console.log('Deleted item'); + const handleClose = () => { + console.log('Close modal'); }; return ( - Delete Item + Open Custom Focus Modal Delete Item - + Enter name to confirm deletion setValue(e.currentTarget.value)} /> - - - Delete - - Cancel - + + + Close + + Secondary Action + diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index b4bd5e6f16..44f225e4ea 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -1,22 +1,22 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton, PrimaryButton} from '@workday/canvas-kit-react/button'; import {HStack} from '@workday/canvas-kit-react/layout'; export const FullOverflow = () => { - const handleDelete = () => { + const handleClose = () => { console.log('Deleted item'); }; return ( - Delete Item + Open Full Overflow Modal - Delete Item - + Modal Title +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -43,10 +43,10 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

 - - Delete + + Close - Cancel + Secondary Action diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 6dd2c244f1..30f876f3b0 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -9,7 +9,7 @@ import { useAssistiveHideSiblings, useDisableBodyScroll, } from '@workday/canvas-kit-react/popup'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {HStack, Box} from '@workday/canvas-kit-react/layout'; export const WithoutCloseIcon = () => { @@ -21,27 +21,27 @@ export const WithoutCloseIcon = () => { useFocusTrap(model); useAssistiveHideSiblings(model); useDisableBodyScroll(model); - const handleDelete = () => { + const handleClose = () => { console.log('Deleted item'); }; return ( - Delete Item + Open Modal Delete Item - + Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Close + + Secondary Action + From 7cd9e132fa9569c639a939f8e5b623e53e4e2e90 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 11 Aug 2022 13:57:19 -0600 Subject: [PATCH 03/35] fix: Remove unused imports --- modules/react/modal/lib/ModalFooter.tsx | 7 +------ modules/react/modal/stories/examples/Basic.tsx | 2 +- modules/react/modal/stories/examples/CustomFocus.tsx | 2 +- modules/react/modal/stories/examples/FullOverflow.tsx | 3 +-- modules/react/modal/stories/examples/WithoutCloseIcon.tsx | 2 +- 5 files changed, 5 insertions(+), 11 deletions(-) diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx index 187d26e12a..dbd7604c5f 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; -import { - createSubcomponent, - ExtractProps, - StyledType, - styled, -} from '@workday/canvas-kit-react/common'; +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; import {HStack} from '@workday/canvas-kit-react/layout'; import {useModalModel} from './hooks'; diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 946cd702b3..5412fc46bc 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; -import {HStack, Box} from '@workday/canvas-kit-react/layout'; +import {Box} from '@workday/canvas-kit-react/layout'; export const Basic = () => { const handleClose = () => { diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 85eee54576..396b383d25 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -3,7 +3,7 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import FormField from '@workday/canvas-kit-react/form-field'; import TextInput from '@workday/canvas-kit-react/text-input'; -import {HStack, Box} from '@workday/canvas-kit-react/layout'; +import {Box} from '@workday/canvas-kit-react/layout'; export const CustomFocus = () => { const ref = React.useRef(null); diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index 44f225e4ea..d1c787d6de 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -1,8 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton, PrimaryButton} from '@workday/canvas-kit-react/button'; -import {HStack} from '@workday/canvas-kit-react/layout'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; export const FullOverflow = () => { const handleClose = () => { diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 30f876f3b0..227e7952da 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -10,7 +10,7 @@ import { useDisableBodyScroll, } from '@workday/canvas-kit-react/popup'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; -import {HStack, Box} from '@workday/canvas-kit-react/layout'; +import {Box} from '@workday/canvas-kit-react/layout'; export const WithoutCloseIcon = () => { const model = usePopupModel(); From 2389c8a7ef4d003a7dc3da97efa23b370255c116 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 11 Aug 2022 15:43:43 -0600 Subject: [PATCH 04/35] fix: Need to fix cypress --- modules/react/modal/lib/ModalBody.tsx | 4 ++-- modules/react/modal/lib/ModalCard.tsx | 1 + modules/react/modal/lib/ModalHeading.tsx | 10 +--------- modules/react/modal/stories/examples/Basic.tsx | 4 ++-- modules/react/modal/stories/examples/BodyOverflow.tsx | 4 ++-- modules/react/modal/stories/examples/CustomFocus.tsx | 4 ++-- modules/react/modal/stories/examples/CustomTarget.tsx | 2 +- modules/react/modal/stories/examples/FullOverflow.tsx | 4 ++-- modules/react/modal/stories/examples/ReturnFocus.tsx | 2 +- .../react/modal/stories/examples/WithoutCloseIcon.tsx | 2 +- 10 files changed, 15 insertions(+), 22 deletions(-) diff --git a/modules/react/modal/lib/ModalBody.tsx b/modules/react/modal/lib/ModalBody.tsx index 31ebe139be..3a8d7d0be4 100644 --- a/modules/react/modal/lib/ModalBody.tsx +++ b/modules/react/modal/lib/ModalBody.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; import {Card} from '@workday/canvas-kit-react/card'; -import {usePopupModel} from '@workday/canvas-kit-react/popup'; +import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup'; export const ModalBody = createSubcomponent('div')({ displayName: 'Modal.Body', modelHook: usePopupModel, })>(elemProps => { - return ; + return ; }); diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index f43bd97ccb..3ca21034a2 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -20,6 +20,7 @@ export const ModalCard = createSubcomponent('div')({ margin="xl" depth={6} padding="zero" + paddingTop="l" {...elemProps} /> ); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index 1e285c423c..7b16b4423c 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -12,13 +12,5 @@ export const ModalHeading = createSubcomponent('h2')({ modelHook: useModalModel, elemPropsHook: useModalHeading, })((elemProps, Element) => { - return ( - - ); + return ; }); diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 5412fc46bc..edd541ca35 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -11,11 +11,11 @@ export const Basic = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item Are you sure you want to delete the item? diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 272228b2d3..4bb15e966a 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -10,11 +10,11 @@ export const BodyOverflow = () => { return ( - Open Overflow Modal + Open Modal - Modal Title + Modal Heading

Are you sure you want to delete the item?

Are you sure you want to delete the item?

diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 396b383d25..e04cb2b9d5 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -18,11 +18,11 @@ export const CustomFocus = () => { return ( - Open Custom Focus Modal + Open Modal - Delete Item + Modal Heading Enter name to confirm deletion diff --git a/modules/react/modal/stories/examples/CustomTarget.tsx b/modules/react/modal/stories/examples/CustomTarget.tsx index e52748f543..f544e66ca4 100644 --- a/modules/react/modal/stories/examples/CustomTarget.tsx +++ b/modules/react/modal/stories/examples/CustomTarget.tsx @@ -17,7 +17,7 @@ export const CustomTarget = () => { - Modal + Modal Heading Contents diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index d1c787d6de..322eb57ce3 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -10,11 +10,11 @@ export const FullOverflow = () => { return ( - Open Full Overflow Modal + Open Modal - Modal Title + Modal Heading

Are you sure you want to delete the item?

Are you sure you want to delete the item?

diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index bcbb17cc0e..f1117206b0 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -37,7 +37,7 @@ export const ReturnFocus = () => { - Delete Item + Modal Heading Are you sure you want to delete the item? diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 227e7952da..8dc76e3be5 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -30,7 +30,7 @@ export const WithoutCloseIcon = () => { Open Modal - Delete Item + Modal Heading Are you sure you want to delete the item? From 2e4a4ef25edf3eeafeb9fc9c5ccb58cd9d3791ff Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 11 Aug 2022 17:18:59 -0600 Subject: [PATCH 05/35] test: Update cypress test to match stories --- cypress/integration/Modal.spec.ts | 133 +++++++++++------- .../react/modal/stories/examples/Basic.tsx | 6 +- 2 files changed, 85 insertions(+), 54 deletions(-) diff --git a/cypress/integration/Modal.spec.ts b/cypress/integration/Modal.spec.ts index 4162855fa2..1fe079385d 100644 --- a/cypress/integration/Modal.spec.ts +++ b/cypress/integration/Modal.spec.ts @@ -17,36 +17,39 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).focus(); + cy.findByRole('button', {name: 'Open Modal'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); + cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).click(); + cy.findByRole('button', {name: 'Open Modal'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should place the portal as a child of the body element', () => { cy.get('body').then($body => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getOverlay) .parent() .should($el => { expect($el[0]).to.equal($body[0]); }); }); + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should hide non-modal content from assistive technology', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getOverlay) .siblings() .should($siblings => { @@ -54,70 +57,88 @@ describe('Modal', () => { expect($sibling).to.have.attr('aria-hidden', 'true'); }); }); + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should not have any axe errors', () => { cy.checkA11y(); + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should( + cy.findByRole('dialog', {name: 'Modal Heading'}).should( 'have.attr', 'aria-modal', 'true' ); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) - .should('contain', 'Delete Item'); + .should('contain', 'Modal Heading'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { + cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); expect(labelId).to.equal(titleId); }); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should transfer focus to the x icon element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .findByRole('button', {name: 'Close'}) .should('have.focus'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should trap focus inside the modal element', () => { cy.tab() - .should('contain', 'Delete') + .should('contain', 'Primary Action') .tab() - .should('contain', 'Cancel') + .should('contain', 'Secondary Action') .tab(); - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .findByRole('button', {name: 'Close'}) .should('have.focus'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); }); context('when clicking inside the modal', () => { beforeEach(() => { // click somewhere on the modal where there shouldn't be a close target - cy.findByRole('dialog', {name: 'Delete Item'}).click('top'); + cy.findByRole('dialog', {name: 'Modal Heading'}).click('top'); }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + // Close Modal + cy.findByRole('button', {name: 'Secondary Action'}).click(); }); }); @@ -131,7 +152,7 @@ describe('Modal', () => { }); it('should transfer focus back to the target button', () => { - cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); + cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); }); }); @@ -172,6 +193,8 @@ describe('Modal', () => { it('should open the modal', () => { cy.findByRole('dialog', {name: 'Open Modal'}).should('be.visible'); + // Close Modal + cy.findByRole('button', {name: 'Close'}).click(); }); context(`when the 'Cancel' button is focused`, () => { @@ -321,26 +344,26 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).focus(); + cy.findByRole('button', {name: 'Open Modal'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); + cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).click(); + cy.findByRole('button', {name: 'Open Modal'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); }); it('should place the portal as a child of the body element', () => { cy.get('body').then($body => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getOverlay) .parent() .should($el => { @@ -350,7 +373,7 @@ describe('Modal', () => { }); it('should hide non-modal content from assistive technology', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getOverlay) .siblings() .should($siblings => { @@ -365,32 +388,36 @@ describe('Modal', () => { }); it('should transfer focus to the header element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) .should('have.focus'); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should( + 'have.attr', + 'aria-modal', + 'true' + ); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) - .should('contain', 'Delete Item'); + .should('contain', 'Modal Heading'); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { + cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); @@ -399,21 +426,21 @@ describe('Modal', () => { }); it('should transfer focus to the header element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) .should('have.focus'); }); it('should trap focus inside the modal element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) .should('have.focus'); cy.tab() - .should('contain', 'Delete') + .should('contain', 'Close') .tab() - .should('contain', 'Cancel') + .should('contain', 'Secondary Action') .tab(); - cy.focused().should('have.text', 'Delete'); + cy.focused().should('have.text', 'Close'); }); }); @@ -425,7 +452,7 @@ describe('Modal', () => { }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); }); }); @@ -435,7 +462,7 @@ describe('Modal', () => { }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); }); }); }); @@ -448,44 +475,48 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).focus(); + cy.findByRole('button', {name: 'Open Modal'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); + cy.findByRole('button', {name: 'Modal Heading'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Delete Item'}).click(); + cy.findByRole('button', {name: 'Open Modal'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-modal', 'true'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should( + 'have.attr', + 'aria-modal', + 'true' + ); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Delete Item'}) + cy.findByRole('dialog', {name: 'Modal Heading'}) .pipe(h.modal.getTitle) - .should('contain', 'Delete Item'); + .should('contain', 'Modal Heading'); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { + cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); @@ -500,9 +531,9 @@ describe('Modal', () => { it('should trap focus inside the modal element', () => { cy.focused() .tab() - .should('contain', 'Delete') + .should('contain', 'Close') .tab() - .should('contain', 'Cancel') + .should('contain', 'Secondary Action') .tab() .should('have.attr', 'aria-label', 'Close') .tab(); diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index edd541ca35..bd5b70416d 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -11,11 +11,11 @@ export const Basic = () => { return ( - Delete Item + Open Modal - Delete Item + Modal Heading Are you sure you want to delete the item? @@ -23,7 +23,7 @@ export const Basic = () => { - Close + Primary Action Secondary Action From a73de46da32a13a0b835010da887e431844ed54e Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 12 Aug 2022 08:59:20 -0600 Subject: [PATCH 06/35] test: Update tests to match stories --- cypress/integration/Modal.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/integration/Modal.spec.ts b/cypress/integration/Modal.spec.ts index 1fe079385d..edc091dbdf 100644 --- a/cypress/integration/Modal.spec.ts +++ b/cypress/integration/Modal.spec.ts @@ -479,7 +479,7 @@ describe('Modal', () => { }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Modal Heading'}).should('have.focus'); + cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); }); }); @@ -655,7 +655,7 @@ describe('Modal', () => { }); it('should show the modal', () => { - cy.findByRole('dialog', {name: 'Modal'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); }); context('when the "Close" button is clicked', () => { From 8407f7511c7cca2cf95b16389734739ad836804d Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 12 Aug 2022 14:55:01 -0600 Subject: [PATCH 07/35] fix: Remove stack from popup card --- modules/react/modal/lib/ModalCard.tsx | 1 - modules/react/modal/lib/ModalHeading.tsx | 10 ++++++++- .../react/modal/stories/stories_testing.tsx | 22 +++++++++---------- modules/react/popup/lib/PopupCard.tsx | 9 ++++---- 4 files changed, 24 insertions(+), 18 deletions(-) diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index 3ca21034a2..f43bd97ccb 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -20,7 +20,6 @@ export const ModalCard = createSubcomponent('div')({ margin="xl" depth={6} padding="zero" - paddingTop="l" {...elemProps} /> ); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index 7b16b4423c..1e285c423c 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -12,5 +12,13 @@ export const ModalHeading = createSubcomponent('h2')({ modelHook: useModalModel, elemPropsHook: useModalHeading, })((elemProps, Element) => { - return ; + return ( + + ); }); diff --git a/modules/react/modal/stories/stories_testing.tsx b/modules/react/modal/stories/stories_testing.tsx index 5f67ce85be..8cacd10d77 100644 --- a/modules/react/modal/stories/stories_testing.tsx +++ b/modules/react/modal/stories/stories_testing.tsx @@ -101,17 +101,17 @@ export const WithRadioButtons = () => { Select Item - - setValue(String(value))} - > - - - - + {/* */} + setValue(String(value))} + > + + + + {/* */} diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index cd240c91a2..2820043955 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,12 +12,12 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout'; +import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; - -export interface PopupCardProps extends ExtractProps, Partial { +export type FlexAndBoxProps = ExtractProps & FlexStyleProps; +export interface PopupCardProps extends FlexAndBoxProps { children?: React.ReactNode; } @@ -64,7 +64,7 @@ export const PopupCard = createSubcomponent('div')({ }, [model.state.placement]); // As is a Stack that will render an element of `Element` - const As = useConstant(() => Stack.as(Element)); + const As = useConstant(() => Flex.as(Element)); return ( Date: Mon, 15 Aug 2022 09:23:33 -0600 Subject: [PATCH 08/35] fix: Revert story changes --- cypress/integration/Modal.spec.ts | 135 +++++++----------- .../react/modal/stories/examples/Basic.tsx | 12 +- .../modal/stories/examples/BodyOverflow.tsx | 12 +- .../modal/stories/examples/CustomFocus.tsx | 12 +- .../modal/stories/examples/CustomTarget.tsx | 2 +- .../modal/stories/examples/FullOverflow.tsx | 12 +- .../modal/stories/examples/ReturnFocus.tsx | 2 +- .../stories/examples/WithoutCloseIcon.tsx | 12 +- 8 files changed, 84 insertions(+), 115 deletions(-) diff --git a/cypress/integration/Modal.spec.ts b/cypress/integration/Modal.spec.ts index edc091dbdf..4162855fa2 100644 --- a/cypress/integration/Modal.spec.ts +++ b/cypress/integration/Modal.spec.ts @@ -17,39 +17,36 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).focus(); + cy.findByRole('button', {name: 'Delete Item'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); + cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).click(); + cy.findByRole('button', {name: 'Delete Item'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); it('should place the portal as a child of the body element', () => { cy.get('body').then($body => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getOverlay) .parent() .should($el => { expect($el[0]).to.equal($body[0]); }); }); - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should hide non-modal content from assistive technology', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getOverlay) .siblings() .should($siblings => { @@ -57,88 +54,70 @@ describe('Modal', () => { expect($sibling).to.have.attr('aria-hidden', 'true'); }); }); - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should not have any axe errors', () => { cy.checkA11y(); - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should( + cy.findByRole('dialog', {name: 'Delete Item'}).should( 'have.attr', 'aria-modal', 'true' ); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) - .should('contain', 'Modal Heading'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); + .should('contain', 'Delete Item'); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { + cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); expect(labelId).to.equal(titleId); }); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should transfer focus to the x icon element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .findByRole('button', {name: 'Close'}) .should('have.focus'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); it('should trap focus inside the modal element', () => { cy.tab() - .should('contain', 'Primary Action') + .should('contain', 'Delete') .tab() - .should('contain', 'Secondary Action') + .should('contain', 'Cancel') .tab(); - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .findByRole('button', {name: 'Close'}) .should('have.focus'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); }); }); context('when clicking inside the modal', () => { beforeEach(() => { // click somewhere on the modal where there shouldn't be a close target - cy.findByRole('dialog', {name: 'Modal Heading'}).click('top'); + cy.findByRole('dialog', {name: 'Delete Item'}).click('top'); }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); - // Close Modal - cy.findByRole('button', {name: 'Secondary Action'}).click(); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); }); @@ -152,7 +131,7 @@ describe('Modal', () => { }); it('should transfer focus back to the target button', () => { - cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); + cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); }); }); @@ -193,8 +172,6 @@ describe('Modal', () => { it('should open the modal', () => { cy.findByRole('dialog', {name: 'Open Modal'}).should('be.visible'); - // Close Modal - cy.findByRole('button', {name: 'Close'}).click(); }); context(`when the 'Cancel' button is focused`, () => { @@ -344,26 +321,26 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).focus(); + cy.findByRole('button', {name: 'Delete Item'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); + cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).click(); + cy.findByRole('button', {name: 'Delete Item'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); it('should place the portal as a child of the body element', () => { cy.get('body').then($body => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getOverlay) .parent() .should($el => { @@ -373,7 +350,7 @@ describe('Modal', () => { }); it('should hide non-modal content from assistive technology', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getOverlay) .siblings() .should($siblings => { @@ -388,36 +365,32 @@ describe('Modal', () => { }); it('should transfer focus to the header element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) .should('have.focus'); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should( - 'have.attr', - 'aria-modal', - 'true' - ); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-modal', 'true'); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) - .should('contain', 'Modal Heading'); + .should('contain', 'Delete Item'); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { + cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); @@ -426,21 +399,21 @@ describe('Modal', () => { }); it('should transfer focus to the header element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) .should('have.focus'); }); it('should trap focus inside the modal element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) .should('have.focus'); cy.tab() - .should('contain', 'Close') + .should('contain', 'Delete') .tab() - .should('contain', 'Secondary Action') + .should('contain', 'Cancel') .tab(); - cy.focused().should('have.text', 'Close'); + cy.focused().should('have.text', 'Delete'); }); }); @@ -452,7 +425,7 @@ describe('Modal', () => { }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); }); @@ -462,7 +435,7 @@ describe('Modal', () => { }); it('should not close the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); }); }); @@ -475,48 +448,44 @@ describe('Modal', () => { context('when button is focused', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).focus(); + cy.findByRole('button', {name: 'Delete Item'}).focus(); }); it('should be the focused item on the page', () => { - cy.findByRole('button', {name: 'Open Modal'}).should('have.focus'); + cy.findByRole('button', {name: 'Delete Item'}).should('have.focus'); }); }); context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Open Modal'}).click(); + cy.findByRole('button', {name: 'Delete Item'}).click(); }); it('should open the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('be.visible'); }); context('the modal', () => { it('should have a the role of dialog', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'role', 'dialog'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'role', 'dialog'); }); it('should have an aria-labelledby attribute', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('have.attr', 'aria-labelledby'); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-labelledby'); }); it('should have an aria-modal=true', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should( - 'have.attr', - 'aria-modal', - 'true' - ); + cy.findByRole('dialog', {name: 'Delete Item'}).should('have.attr', 'aria-modal', 'true'); }); it('should contain the title', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}) + cy.findByRole('dialog', {name: 'Delete Item'}) .pipe(h.modal.getTitle) - .should('contain', 'Modal Heading'); + .should('contain', 'Delete Item'); }); it('should be labelled by the title element', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should($modal => { + cy.findByRole('dialog', {name: 'Delete Item'}).should($modal => { const labelId = $modal.attr('aria-labelledby'); const titleId = h.modal.getTitle($modal).attr('id'); @@ -531,9 +500,9 @@ describe('Modal', () => { it('should trap focus inside the modal element', () => { cy.focused() .tab() - .should('contain', 'Close') + .should('contain', 'Delete') .tab() - .should('contain', 'Secondary Action') + .should('contain', 'Cancel') .tab() .should('have.attr', 'aria-label', 'Close') .tab(); @@ -655,7 +624,7 @@ describe('Modal', () => { }); it('should show the modal', () => { - cy.findByRole('dialog', {name: 'Modal Heading'}).should('be.visible'); + cy.findByRole('dialog', {name: 'Modal'}).should('be.visible'); }); context('when the "Close" button is clicked', () => { diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index bd5b70416d..d66e24cb82 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; import {Box} from '@workday/canvas-kit-react/layout'; export const Basic = () => { @@ -11,21 +11,21 @@ export const Basic = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item Are you sure you want to delete the item? - - Primary Action + + Delete - Secondary Action + Cancel diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 4bb15e966a..1e66cf21d3 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; export const BodyOverflow = () => { const handleClose = () => { @@ -10,11 +10,11 @@ export const BodyOverflow = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -42,10 +42,10 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

 - - Close + + Delete - Secondary Action + Cancel diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index e04cb2b9d5..0d6a2f94c8 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {Modal, useModalModel} from '@workday/canvas-kit-react/modal'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; import FormField from '@workday/canvas-kit-react/form-field'; import TextInput from '@workday/canvas-kit-react/text-input'; import {Box} from '@workday/canvas-kit-react/layout'; @@ -18,11 +18,11 @@ export const CustomFocus = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item Enter name to confirm deletion @@ -32,10 +32,10 @@ export const CustomFocus = () => { - - Close + + Delete - Secondary Action + Cancel diff --git a/modules/react/modal/stories/examples/CustomTarget.tsx b/modules/react/modal/stories/examples/CustomTarget.tsx index f544e66ca4..e52748f543 100644 --- a/modules/react/modal/stories/examples/CustomTarget.tsx +++ b/modules/react/modal/stories/examples/CustomTarget.tsx @@ -17,7 +17,7 @@ export const CustomTarget = () => { - Modal Heading + Modal Contents diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index 322eb57ce3..d9933a061d 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; export const FullOverflow = () => { const handleClose = () => { @@ -10,11 +10,11 @@ export const FullOverflow = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -42,10 +42,10 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

 - - Close + + Delete - Secondary Action + Cancel diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index f1117206b0..bcbb17cc0e 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -37,7 +37,7 @@ export const ReturnFocus = () => { - Modal Heading + Delete Item Are you sure you want to delete the item? diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 8dc76e3be5..047b745297 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -9,7 +9,7 @@ import { useAssistiveHideSiblings, useDisableBodyScroll, } from '@workday/canvas-kit-react/popup'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; import {Box} from '@workday/canvas-kit-react/layout'; export const WithoutCloseIcon = () => { @@ -27,20 +27,20 @@ export const WithoutCloseIcon = () => { return ( - Open Modal + Delete Item - Modal Heading + Delete Item Are you sure you want to delete the item? - - Close + + Delete - Secondary Action + Cancel From 5c44fb14ecb38961785392da95014f24652a3eff Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Mon, 15 Aug 2022 09:45:59 -0600 Subject: [PATCH 09/35] fix: Update padding --- modules/react/modal/lib/ModalFooter.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx index dbd7604c5f..b2dbc3442a 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -13,7 +13,5 @@ export const ModalFooter = createSubcomponent('div')({ displayName: 'Modal.Footer', modelHook: useModalModel, })(({...elemProps}) => { - return ( - - ); + return ; }); From 05744a3ca1007881fe1db1da550110404f613f1c Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Mon, 15 Aug 2022 09:46:30 -0600 Subject: [PATCH 10/35] fix: Add back in spacing --- modules/react/modal/lib/ModalFooter.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx index b2dbc3442a..b0a086c477 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -4,7 +4,6 @@ import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common import {HStack} from '@workday/canvas-kit-react/layout'; import {useModalModel} from './hooks'; -import {space} from '@workday/canvas-kit-react/tokens'; export interface ModalFooterProps extends Partial> {} @@ -13,5 +12,5 @@ export const ModalFooter = createSubcomponent('div')({ displayName: 'Modal.Footer', modelHook: useModalModel, })(({...elemProps}) => { - return ; + return ; }); From cce81dcb9ee4ba6b9b5c4838115ade9a7564810e Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 24 Aug 2022 09:01:02 -0600 Subject: [PATCH 11/35] fix: Clean up modal padding --- modules/react/modal/lib/ModalBody.tsx | 2 +- modules/react/modal/lib/ModalFooter.tsx | 2 +- modules/react/modal/lib/ModalHeading.tsx | 1 + modules/react/modal/stories/examples/Basic.tsx | 8 ++------ 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/modules/react/modal/lib/ModalBody.tsx b/modules/react/modal/lib/ModalBody.tsx index 3a8d7d0be4..944b16991d 100644 --- a/modules/react/modal/lib/ModalBody.tsx +++ b/modules/react/modal/lib/ModalBody.tsx @@ -8,5 +8,5 @@ export const ModalBody = createSubcomponent('div')({ displayName: 'Modal.Body', modelHook: usePopupModel, })>(elemProps => { - return ; + return ; }); diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/modal/lib/ModalFooter.tsx index b0a086c477..8d44f84dc4 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/modal/lib/ModalFooter.tsx @@ -12,5 +12,5 @@ export const ModalFooter = createSubcomponent('div')({ displayName: 'Modal.Footer', modelHook: useModalModel, })(({...elemProps}) => { - return ; + return ; }); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index 1e285c423c..40d1fc8b89 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -17,6 +17,7 @@ export const ModalHeading = createSubcomponent('h2')({ marginInlineStart="l" marginInlineEnd="l" marginTop="l" + marginBottom="zero" as={Element} {...elemProps} /> diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index d66e24cb82..4a3abc543a 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -16,12 +16,8 @@ export const Basic = () => { Delete Item - - - Are you sure you want to delete the item? - - - + Are you sure you want to delete the item? + Delete From e2dd3ee05a35b400c8ff9496663db4ae930656ff Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 24 Aug 2022 13:04:04 -0600 Subject: [PATCH 12/35] fix: Clean up modal padding --- modules/react/modal/stories/examples/BodyOverflow.tsx | 4 ++-- modules/react/modal/stories/examples/CustomFocus.tsx | 4 ++-- modules/react/modal/stories/examples/FullOverflow.tsx | 2 +- modules/react/modal/stories/examples/ReturnFocus.tsx | 2 +- modules/react/modal/stories/examples/WithoutCloseIcon.tsx | 6 +++--- modules/react/modal/stories/stories_testing.tsx | 2 -- 6 files changed, 9 insertions(+), 11 deletions(-) diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 1e66cf21d3..4eb8366b5f 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -15,7 +15,7 @@ export const BodyOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -41,7 +41,7 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 0d6a2f94c8..ccd3de1238 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -24,14 +24,14 @@ export const CustomFocus = () => { Delete Item - + Enter name to confirm deletion setValue(e.currentTarget.value)} /> - + Delete diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index d9933a061d..f1d615f15d 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -15,7 +15,7 @@ export const FullOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index bcbb17cc0e..b0be2d70c3 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -39,7 +39,7 @@ export const ReturnFocus = () => { Delete Item - + Are you sure you want to delete the item? diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 047b745297..2f833c76d6 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -31,12 +31,12 @@ export const WithoutCloseIcon = () => { Delete Item - - + + Are you sure you want to delete the item? - + Delete diff --git a/modules/react/modal/stories/stories_testing.tsx b/modules/react/modal/stories/stories_testing.tsx index 8cacd10d77..c1536c3f4f 100644 --- a/modules/react/modal/stories/stories_testing.tsx +++ b/modules/react/modal/stories/stories_testing.tsx @@ -101,7 +101,6 @@ export const WithRadioButtons = () => { Select Item - {/* */} { - {/* */} From 3484d995759ab89f0bebeaf066619c40de396398 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 24 Aug 2022 13:07:59 -0600 Subject: [PATCH 13/35] fix: Clean up remaining padding --- modules/react/modal/stories/examples/WithoutCloseIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 2f833c76d6..d149841b0c 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -32,7 +32,7 @@ export const WithoutCloseIcon = () => { Delete Item - + Are you sure you want to delete the item? From 2838042c897a2fbca9743321ddc880c536c57fce Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 24 Aug 2022 16:51:27 -0600 Subject: [PATCH 14/35] fix: Move logic to popup --- modules/react/modal/lib/Modal.tsx | 6 ++---- modules/react/modal/lib/ModalBody.tsx | 12 ----------- modules/react/modal/lib/ModalCard.tsx | 10 +--------- modules/react/modal/lib/ModalHeading.tsx | 11 +--------- modules/react/popup/lib/Popup.tsx | 2 ++ modules/react/popup/lib/PopupBody.tsx | 2 +- modules/react/popup/lib/PopupCard.tsx | 2 +- .../lib/PopupFooter.tsx} | 12 +++++------ modules/react/popup/lib/PopupHeading.tsx | 9 ++++++++- .../react/popup/stories/examples/Basic.tsx | 2 +- .../popup/stories/examples/FocusRedirect.tsx | 20 ++++++++++--------- .../popup/stories/examples/FocusTrap.tsx | 6 +++--- 12 files changed, 37 insertions(+), 57 deletions(-) delete mode 100644 modules/react/modal/lib/ModalBody.tsx rename modules/react/{modal/lib/ModalFooter.tsx => popup/lib/PopupFooter.tsx} (57%) diff --git a/modules/react/modal/lib/Modal.tsx b/modules/react/modal/lib/Modal.tsx index df742dda52..f1728c24d6 100644 --- a/modules/react/modal/lib/Modal.tsx +++ b/modules/react/modal/lib/Modal.tsx @@ -7,14 +7,12 @@ import {ModalCard} from './ModalCard'; import {useModalModel} from './hooks'; import {ModalHeading} from './ModalHeading'; import {ModalOverflowOverlay} from './ModalOverflowOverlay'; -import {ModalBody} from './ModalBody'; -import {ModalFooter} from './ModalFooter'; export const Modal = createContainer()({ displayName: 'Modal', modelHook: useModalModel, subComponents: { - Body: ModalBody, + Body: Popup.Body, Card: ModalCard, CloseIcon: Popup.CloseIcon, Target: Popup.Target, @@ -22,7 +20,7 @@ export const Modal = createContainer()({ Overlay: ModalOverlay, OverflowOverlay: ModalOverflowOverlay, CloseButton: Popup.CloseButton, - Footer: ModalFooter, + Footer: Popup.Footer, }, })>(elemProps => { return <>{elemProps.children}; diff --git a/modules/react/modal/lib/ModalBody.tsx b/modules/react/modal/lib/ModalBody.tsx deleted file mode 100644 index 944b16991d..0000000000 --- a/modules/react/modal/lib/ModalBody.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; - -import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; -import {Card} from '@workday/canvas-kit-react/card'; -import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup'; - -export const ModalBody = createSubcomponent('div')({ - displayName: 'Modal.Body', - modelHook: usePopupModel, -})>(elemProps => { - return ; -}); diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index f43bd97ccb..8889a7a732 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -13,14 +13,6 @@ export const ModalCard = createSubcomponent('div')({ elemPropsHook: useModalCard, })((elemProps, Element) => { return ( - + ); }); diff --git a/modules/react/modal/lib/ModalHeading.tsx b/modules/react/modal/lib/ModalHeading.tsx index 40d1fc8b89..c47ec578e8 100644 --- a/modules/react/modal/lib/ModalHeading.tsx +++ b/modules/react/modal/lib/ModalHeading.tsx @@ -12,14 +12,5 @@ export const ModalHeading = createSubcomponent('h2')({ modelHook: useModalModel, elemPropsHook: useModalHeading, })((elemProps, Element) => { - return ( - - ); + return ; }); diff --git a/modules/react/popup/lib/Popup.tsx b/modules/react/popup/lib/Popup.tsx index 0d0c5ccb1a..ea32970c47 100644 --- a/modules/react/popup/lib/Popup.tsx +++ b/modules/react/popup/lib/Popup.tsx @@ -9,6 +9,7 @@ import {PopupPopper} from './PopupPopper'; import {PopupHeading} from './PopupHeading'; import {PopupCloseIcon} from './PopupCloseIcon'; import {PopupCloseButton} from './PopupCloseButton'; +import {PopupFooter} from './PopupFooter'; import {PopupBody} from './PopupBody'; export interface PopupProps { @@ -28,6 +29,7 @@ export const Popup = createContainer()({ CloseIcon: PopupCloseIcon, Target: PopupTarget, Popper: PopupPopper, + Footer: PopupFooter, CloseButton: PopupCloseButton, }, })(({children}: PopupProps) => { diff --git a/modules/react/popup/lib/PopupBody.tsx b/modules/react/popup/lib/PopupBody.tsx index 89919b632a..fb738b6ffc 100644 --- a/modules/react/popup/lib/PopupBody.tsx +++ b/modules/react/popup/lib/PopupBody.tsx @@ -8,5 +8,5 @@ export const PopupBody = createSubcomponent('div')({ displayName: 'Popup.Body', modelHook: usePopupModel, })>(elemProps => { - return ; + return ; }); diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 2820043955..d62a36d767 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -71,11 +71,11 @@ export const PopupCard = createSubcomponent('div')({ as={As} transformOrigin={transformOrigin} position="relative" - padding="l" depth={5} maxWidth={`calc(100vw - ${space.l})`} flexDirection="column" minHeight={0} + padding="zero" maxHeight={`calc(100vh - ${ elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl } * 2)`} diff --git a/modules/react/modal/lib/ModalFooter.tsx b/modules/react/popup/lib/PopupFooter.tsx similarity index 57% rename from modules/react/modal/lib/ModalFooter.tsx rename to modules/react/popup/lib/PopupFooter.tsx index 8d44f84dc4..531806c4c0 100644 --- a/modules/react/modal/lib/ModalFooter.tsx +++ b/modules/react/popup/lib/PopupFooter.tsx @@ -3,14 +3,14 @@ import * as React from 'react'; import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; import {HStack} from '@workday/canvas-kit-react/layout'; -import {useModalModel} from './hooks'; +import {usePopupModel} from './hooks'; -export interface ModalFooterProps +export interface PopupFooterProps extends Partial> {} -export const ModalFooter = createSubcomponent('div')({ - displayName: 'Modal.Footer', - modelHook: useModalModel, -})(({...elemProps}) => { +export const PopupFooter = createSubcomponent('div')({ + displayName: 'Popup.Footer', + modelHook: usePopupModel, +})(({...elemProps}) => { return ; }); diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx index c3c9865484..0b73fa20cb 100644 --- a/modules/react/popup/lib/PopupHeading.tsx +++ b/modules/react/popup/lib/PopupHeading.tsx @@ -15,7 +15,14 @@ export const PopupHeading = createSubcomponent('h2')({ elemPropsHook: usePopupHeading, })(({children, ...elemProps}, Element) => { return ( - + {children} ); diff --git a/modules/react/popup/stories/examples/Basic.tsx b/modules/react/popup/stories/examples/Basic.tsx index d72c81da0d..c8d997a14a 100644 --- a/modules/react/popup/stories/examples/Basic.tsx +++ b/modules/react/popup/stories/examples/Basic.tsx @@ -27,7 +27,7 @@ export const Basic = () => { Delete Item - + Delete Item diff --git a/modules/react/popup/stories/examples/FocusRedirect.tsx b/modules/react/popup/stories/examples/FocusRedirect.tsx index 7fd2bd117e..0a0743999d 100644 --- a/modules/react/popup/stories/examples/FocusRedirect.tsx +++ b/modules/react/popup/stories/examples/FocusRedirect.tsx @@ -39,19 +39,21 @@ export const FocusRedirect = () => { Delete Item
- + Delete Item -

Are you sure you'd like to delete the item titled 'My Item'?

+

+ Are you sure you'd like to delete the item titled 'My Item'? +

+ + + Delete + + {/* Disabled elements should not be focusable and focus should move to the next focusable element */} + Cancel + - - - Delete - - {/* Disabled elements should not be focusable and focus should move to the next focusable element */} - Cancel - Next Focusable Button diff --git a/modules/react/popup/stories/examples/FocusTrap.tsx b/modules/react/popup/stories/examples/FocusTrap.tsx index a0a43786b9..599e67dc22 100644 --- a/modules/react/popup/stories/examples/FocusTrap.tsx +++ b/modules/react/popup/stories/examples/FocusTrap.tsx @@ -39,18 +39,18 @@ export const FocusTrap = () => { Delete Item
- + Delete Item

Are you sure you'd like to delete the item titled 'My Item'?

 - + Delete Cancel - + Next Focusable Button From 880dab08bd84fee25a1ab254abb7afd45ee13751 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 26 Aug 2022 14:07:49 -0600 Subject: [PATCH 15/35] fix: Clean up toast and popup stories --- modules/react/popup/lib/PopupCard.tsx | 4 +-- .../react/popup/stories/examples/Basic.tsx | 6 ++-- .../popup/stories/examples/FocusRedirect.tsx | 6 ++-- .../popup/stories/examples/FocusTrap.tsx | 6 ++-- .../popup/stories/examples/InitialFocus.tsx | 18 +++++----- .../popup/stories/examples/NestedPopups.tsx | 34 +++++++++---------- modules/react/popup/stories/examples/RTL.tsx | 16 +++++---- modules/react/toast/lib/Toast.tsx | 3 +- 8 files changed, 50 insertions(+), 43 deletions(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index d62a36d767..015f480996 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,7 +12,7 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout'; +import {Flex, FlexStyleProps, Stack} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; @@ -64,7 +64,7 @@ export const PopupCard = createSubcomponent('div')({ }, [model.state.placement]); // As is a Stack that will render an element of `Element` - const As = useConstant(() => Flex.as(Element)); + const As = useConstant(() => Stack.as(Element)); return ( { const model = usePopupModel(); @@ -31,7 +31,9 @@ export const Basic = () => { Delete Item -

Are you sure you'd like to delete the item titled 'My Item'?

+ + Are you sure you'd like to delete the item titled 'My Item'? + Delete diff --git a/modules/react/popup/stories/examples/FocusRedirect.tsx b/modules/react/popup/stories/examples/FocusRedirect.tsx index 0a0743999d..fd7c37acba 100644 --- a/modules/react/popup/stories/examples/FocusRedirect.tsx +++ b/modules/react/popup/stories/examples/FocusRedirect.tsx @@ -10,7 +10,7 @@ import { useFocusRedirect, usePopupModel, } from '@workday/canvas-kit-react/popup'; -import {HStack} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const FocusRedirect = () => { const model = usePopupModel(); @@ -43,9 +43,9 @@ export const FocusRedirect = () => { Delete Item -

+ Are you sure you'd like to delete the item titled 'My Item'? -

+ Delete diff --git a/modules/react/popup/stories/examples/FocusTrap.tsx b/modules/react/popup/stories/examples/FocusTrap.tsx index 599e67dc22..69b0edadbb 100644 --- a/modules/react/popup/stories/examples/FocusTrap.tsx +++ b/modules/react/popup/stories/examples/FocusTrap.tsx @@ -10,7 +10,7 @@ import { useReturnFocus, usePopupModel, } from '@workday/canvas-kit-react/popup'; -import {HStack} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const FocusTrap = () => { const model = usePopupModel(); @@ -43,7 +43,9 @@ export const FocusTrap = () => { Delete Item -

Are you sure you'd like to delete the item titled 'My Item'?

+ + Are you sure you'd like to delete the item titled 'My Item'? + diff --git a/modules/react/popup/stories/examples/InitialFocus.tsx b/modules/react/popup/stories/examples/InitialFocus.tsx index 1a2206adba..e1ea3ace55 100644 --- a/modules/react/popup/stories/examples/InitialFocus.tsx +++ b/modules/react/popup/stories/examples/InitialFocus.tsx @@ -8,7 +8,7 @@ import { useInitialFocus, useReturnFocus, } from '@workday/canvas-kit-react/popup'; -import {HStack} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const InitialFocus = () => { const initialFocusRef = React.useRef(null); @@ -25,17 +25,19 @@ export const InitialFocus = () => { Send Message - + Confirmation - + + Your message has been sent! + + + + OK + + - - - OK - - diff --git a/modules/react/popup/stories/examples/NestedPopups.tsx b/modules/react/popup/stories/examples/NestedPopups.tsx index 0b0a25ae8f..b05b828571 100644 --- a/modules/react/popup/stories/examples/NestedPopups.tsx +++ b/modules/react/popup/stories/examples/NestedPopups.tsx @@ -37,24 +37,24 @@ export const NestedPopups = () => {

Contents of Popup 1

+ + Open Popup 2 + + + + +

Contents of Popup 2

+ + + Close Both (as) + + Close Both (props) + + + + + - - Open Popup 2 - - - - -

Contents of Popup 2

- - - - Close Both (as) - - Close Both (props) - - - - diff --git a/modules/react/popup/stories/examples/RTL.tsx b/modules/react/popup/stories/examples/RTL.tsx index 0b4c5a8b5f..4b27b06aa4 100644 --- a/modules/react/popup/stories/examples/RTL.tsx +++ b/modules/react/popup/stories/examples/RTL.tsx @@ -3,21 +3,23 @@ import React from 'react'; import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button'; import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common'; import {Popup} from '@workday/canvas-kit-react/popup'; -import {HStack} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const RTL = () => { return ( - + למחוק פריט -

האם ברצונך למחוק פריט זה

+ + האם ברצונך למחוק פריט זה + + + לִמְחוֹק + לְבַטֵל + - - לִמְחוֹק - לְבַטֵל - ); diff --git a/modules/react/toast/lib/Toast.tsx b/modules/react/toast/lib/Toast.tsx index b4ac3356a4..f7bb92bfd0 100644 --- a/modules/react/toast/lib/Toast.tsx +++ b/modules/react/toast/lib/Toast.tsx @@ -92,7 +92,6 @@ export const Toast = createComponent('div')({ ref={ref} as={Element} width={toastWidth} - padding="s" depth={5} role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'} aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'} @@ -100,7 +99,7 @@ export const Toast = createComponent('div')({ {...elemProps} > {onClose && } - + {icon && } From 78797d4a5bfcbec81798350c556bef1942a4decc Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 26 Aug 2022 14:51:56 -0600 Subject: [PATCH 16/35] fix: Remove flex and use stack --- modules/react/popup/lib/PopupCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 015f480996..4283d65d61 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,11 +12,11 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {Flex, FlexStyleProps, Stack} from '@workday/canvas-kit-react/layout'; +import {StackStyleProps, Stack} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; -export type FlexAndBoxProps = ExtractProps & FlexStyleProps; +export type FlexAndBoxProps = ExtractProps & StackStyleProps; export interface PopupCardProps extends FlexAndBoxProps { children?: React.ReactNode; } From 8311a2ad3ffcfb859a5dffc8f053993a7406bc2e Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Fri, 26 Aug 2022 14:54:05 -0600 Subject: [PATCH 17/35] fix: Clean up popup card props --- modules/react/popup/lib/PopupCard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 4283d65d61..b843532f74 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -16,8 +16,7 @@ import {StackStyleProps, Stack} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; -export type FlexAndBoxProps = ExtractProps & StackStyleProps; -export interface PopupCardProps extends FlexAndBoxProps { +export interface PopupCardProps extends ExtractProps, Partial { children?: React.ReactNode; } From c45a6e75ad76105c673050ae51428ee6b85c850c Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Tue, 30 Aug 2022 15:44:18 -0600 Subject: [PATCH 18/35] fix: Clean up stories and remove footer for popup and modal --- modules/react/modal/lib/Modal.tsx | 1 - modules/react/modal/stories/Modal.stories.mdx | 7 ------- .../react/modal/stories/examples/Basic.tsx | 20 +++++++++++-------- .../modal/stories/examples/BodyOverflow.tsx | 7 ++++--- .../modal/stories/examples/CustomFocus.tsx | 18 ++++++++--------- .../modal/stories/examples/FullOverflow.tsx | 7 ++++--- .../modal/stories/examples/ReturnFocus.tsx | 2 +- .../stories/examples/WithoutCloseIcon.tsx | 16 +++++++-------- modules/react/popup/lib/Popup.tsx | 2 -- modules/react/popup/lib/PopupBody.tsx | 4 +++- modules/react/popup/lib/PopupFooter.tsx | 16 --------------- 11 files changed, 41 insertions(+), 59 deletions(-) delete mode 100644 modules/react/popup/lib/PopupFooter.tsx diff --git a/modules/react/modal/lib/Modal.tsx b/modules/react/modal/lib/Modal.tsx index f1728c24d6..06e947e107 100644 --- a/modules/react/modal/lib/Modal.tsx +++ b/modules/react/modal/lib/Modal.tsx @@ -20,7 +20,6 @@ export const Modal = createContainer()({ Overlay: ModalOverlay, OverflowOverlay: ModalOverflowOverlay, CloseButton: Popup.CloseButton, - Footer: Popup.Footer, }, })>(elemProps => { return <>{elemProps.children}; diff --git a/modules/react/modal/stories/Modal.stories.mdx b/modules/react/modal/stories/Modal.stories.mdx index 70ed5261cb..4825f0fe9e 100644 --- a/modules/react/modal/stories/Modal.stories.mdx +++ b/modules/react/modal/stories/Modal.stories.mdx @@ -158,13 +158,6 @@ cannot use this component. The default element is an `h2` and can be changed via -### Modal.Footer - -The `Modal.Footer` is an `HStack` that allows you to add any buttons or elements that would go in a -footer of a Modal. - - - ### Modal.CloseIcon The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 4a3abc543a..f6c75e20e3 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; -import {Box} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const Basic = () => { const handleClose = () => { @@ -16,13 +16,17 @@ export const Basic = () => { Delete Item - Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Are you sure you want to delete the item? + + + + Delete + + Cancel + + diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 4eb8366b5f..0a6152e01b 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {HStack} from '@workday/canvas-kit-react/layout'; export const BodyOverflow = () => { const handleClose = () => { @@ -15,7 +16,7 @@ export const BodyOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -41,12 +42,12 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete Cancel - + diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index ccd3de1238..666009641c 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -3,7 +3,7 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; import FormField from '@workday/canvas-kit-react/form-field'; import TextInput from '@workday/canvas-kit-react/text-input'; -import {Box} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const CustomFocus = () => { const ref = React.useRef(null); @@ -23,20 +23,20 @@ export const CustomFocus = () => { Delete Item - - + + Enter name to confirm deletion setValue(e.currentTarget.value)} /> + + + Delete + + Cancel + - - - Delete - - Cancel - diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index f1d615f15d..65aca9dab9 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {HStack} from '@workday/canvas-kit-react/layout'; export const FullOverflow = () => { const handleClose = () => { @@ -15,7 +16,7 @@ export const FullOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -41,12 +42,12 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete Cancel - + diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index b0be2d70c3..bcbb17cc0e 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -39,7 +39,7 @@ export const ReturnFocus = () => { Delete Item - + Are you sure you want to delete the item? diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index d149841b0c..b204ac975a 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -10,7 +10,7 @@ import { useDisableBodyScroll, } from '@workday/canvas-kit-react/popup'; import {DeleteButton} from '@workday/canvas-kit-react/button'; -import {Box} from '@workday/canvas-kit-react/layout'; +import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const WithoutCloseIcon = () => { const model = usePopupModel(); @@ -32,16 +32,16 @@ export const WithoutCloseIcon = () => { Delete Item - + Are you sure you want to delete the item? + + + Delete + + Cancel + - - - Delete - - Cancel - diff --git a/modules/react/popup/lib/Popup.tsx b/modules/react/popup/lib/Popup.tsx index ea32970c47..0d0c5ccb1a 100644 --- a/modules/react/popup/lib/Popup.tsx +++ b/modules/react/popup/lib/Popup.tsx @@ -9,7 +9,6 @@ import {PopupPopper} from './PopupPopper'; import {PopupHeading} from './PopupHeading'; import {PopupCloseIcon} from './PopupCloseIcon'; import {PopupCloseButton} from './PopupCloseButton'; -import {PopupFooter} from './PopupFooter'; import {PopupBody} from './PopupBody'; export interface PopupProps { @@ -29,7 +28,6 @@ export const Popup = createContainer()({ CloseIcon: PopupCloseIcon, Target: PopupTarget, Popper: PopupPopper, - Footer: PopupFooter, CloseButton: PopupCloseButton, }, })(({children}: PopupProps) => { diff --git a/modules/react/popup/lib/PopupBody.tsx b/modules/react/popup/lib/PopupBody.tsx index fb738b6ffc..5df71228f9 100644 --- a/modules/react/popup/lib/PopupBody.tsx +++ b/modules/react/popup/lib/PopupBody.tsx @@ -8,5 +8,7 @@ export const PopupBody = createSubcomponent('div')({ displayName: 'Popup.Body', modelHook: usePopupModel, })>(elemProps => { - return ; + return ( + + ); }); diff --git a/modules/react/popup/lib/PopupFooter.tsx b/modules/react/popup/lib/PopupFooter.tsx deleted file mode 100644 index 531806c4c0..0000000000 --- a/modules/react/popup/lib/PopupFooter.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; - -import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; - -import {HStack} from '@workday/canvas-kit-react/layout'; -import {usePopupModel} from './hooks'; - -export interface PopupFooterProps - extends Partial> {} - -export const PopupFooter = createSubcomponent('div')({ - displayName: 'Popup.Footer', - modelHook: usePopupModel, -})(({...elemProps}) => { - return ; -}); From 9f338435f7056b9e2062db153f95c7b47da6e603 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 31 Aug 2022 09:34:19 -0600 Subject: [PATCH 19/35] fix: Clean up stories function name --- modules/react/modal/stories/examples/Basic.tsx | 4 ++-- .../react/modal/stories/examples/BodyOverflow.tsx | 4 ++-- .../react/modal/stories/examples/CustomFocus.tsx | 4 ++-- .../react/modal/stories/examples/FullOverflow.tsx | 4 ++-- .../modal/stories/examples/WithoutCloseIcon.tsx | 4 ++-- modules/react/popup/stories/examples/FocusTrap.tsx | 14 +++++++------- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index f6c75e20e3..b4aa97fb2d 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -5,7 +5,7 @@ import {DeleteButton} from '@workday/canvas-kit-react/button'; import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const Basic = () => { - const handleClose = () => { + const handleDelete = () => { console.log('Close modal'); }; @@ -21,7 +21,7 @@ export const Basic = () => { Are you sure you want to delete the item? - + Delete Cancel diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 0a6152e01b..57f9083e54 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -5,7 +5,7 @@ import {DeleteButton} from '@workday/canvas-kit-react/button'; import {HStack} from '@workday/canvas-kit-react/layout'; export const BodyOverflow = () => { - const handleClose = () => { + const handleDelete = () => { console.log('Close modal'); }; @@ -43,7 +43,7 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

 - + Delete Cancel diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 666009641c..4bd4c89925 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -12,7 +12,7 @@ export const CustomFocus = () => { initialFocusRef: ref, }); - const handleClose = () => { + const handleDelete = () => { console.log('Close modal'); }; @@ -31,7 +31,7 @@ export const CustomFocus = () => { setValue(e.currentTarget.value)} /> - + Delete Cancel diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index 65aca9dab9..84b5641768 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -5,7 +5,7 @@ import {DeleteButton} from '@workday/canvas-kit-react/button'; import {HStack} from '@workday/canvas-kit-react/layout'; export const FullOverflow = () => { - const handleClose = () => { + const handleDelete = () => { console.log('Deleted item'); }; @@ -43,7 +43,7 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

- + Delete Cancel diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index b204ac975a..82c915cfa0 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -21,7 +21,7 @@ export const WithoutCloseIcon = () => { useFocusTrap(model); useAssistiveHideSiblings(model); useDisableBodyScroll(model); - const handleClose = () => { + const handleDelete = () => { console.log('Deleted item'); }; @@ -36,7 +36,7 @@ export const WithoutCloseIcon = () => { Are you sure you want to delete the item? - + Delete Cancel diff --git a/modules/react/popup/stories/examples/FocusTrap.tsx b/modules/react/popup/stories/examples/FocusTrap.tsx index 69b0edadbb..43444f4fc5 100644 --- a/modules/react/popup/stories/examples/FocusTrap.tsx +++ b/modules/react/popup/stories/examples/FocusTrap.tsx @@ -43,16 +43,16 @@ export const FocusTrap = () => { Delete Item - + Are you sure you'd like to delete the item titled 'My Item'? + + + Delete + + Cancel + - - - Delete - - Cancel - Next Focusable Button From b4638830c11dff2cea69f17726b3e5967e84a1cf Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 31 Aug 2022 09:36:01 -0600 Subject: [PATCH 20/35] fix: Clean up console message --- modules/react/modal/stories/examples/Basic.tsx | 2 +- modules/react/modal/stories/examples/BodyOverflow.tsx | 2 +- modules/react/modal/stories/examples/CustomFocus.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index b4aa97fb2d..d96556e15b 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -6,7 +6,7 @@ import {Box, HStack} from '@workday/canvas-kit-react/layout'; export const Basic = () => { const handleDelete = () => { - console.log('Close modal'); + console.log('Deleted item'); }; return ( diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index 57f9083e54..c796e59ed9 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -6,7 +6,7 @@ import {HStack} from '@workday/canvas-kit-react/layout'; export const BodyOverflow = () => { const handleDelete = () => { - console.log('Close modal'); + console.log('Deleted item'); }; return ( diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 4bd4c89925..8c9374ba0d 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -13,7 +13,7 @@ export const CustomFocus = () => { }); const handleDelete = () => { - console.log('Close modal'); + console.log('Deleted item'); }; return ( From f1a2e23d7e75d57f774a2647b7b0b373f2419e69 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 31 Aug 2022 10:33:42 -0600 Subject: [PATCH 21/35] fix: Clean up imports --- modules/react/modal/stories/examples/Basic.tsx | 2 +- modules/react/modal/stories/examples/CustomFocus.tsx | 2 +- modules/react/modal/stories/examples/WithoutCloseIcon.tsx | 2 +- modules/react/popup/lib/PopupCard.tsx | 3 ++- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index d96556e15b..997276bdf5 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; -import {Box, HStack} from '@workday/canvas-kit-react/layout'; +import {HStack, Box} from '@workday/canvas-kit-react/layout'; export const Basic = () => { const handleDelete = () => { diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 8c9374ba0d..fbd2a588a8 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -3,7 +3,7 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal'; import {DeleteButton} from '@workday/canvas-kit-react/button'; import FormField from '@workday/canvas-kit-react/form-field'; import TextInput from '@workday/canvas-kit-react/text-input'; -import {Box, HStack} from '@workday/canvas-kit-react/layout'; +import {HStack, Box} from '@workday/canvas-kit-react/layout'; export const CustomFocus = () => { const ref = React.useRef(null); diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 82c915cfa0..6dd2c244f1 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -10,7 +10,7 @@ import { useDisableBodyScroll, } from '@workday/canvas-kit-react/popup'; import {DeleteButton} from '@workday/canvas-kit-react/button'; -import {Box, HStack} from '@workday/canvas-kit-react/layout'; +import {HStack, Box} from '@workday/canvas-kit-react/layout'; export const WithoutCloseIcon = () => { const model = usePopupModel(); diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index b843532f74..207a3ff409 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,7 +12,7 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {StackStyleProps, Stack} from '@workday/canvas-kit-react/layout'; +import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; @@ -72,6 +72,7 @@ export const PopupCard = createSubcomponent('div')({ position="relative" depth={5} maxWidth={`calc(100vw - ${space.l})`} + spacing={0} flexDirection="column" minHeight={0} padding="zero" From 4424cfa375b5ab008c060b060c6a715d697389e1 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 31 Aug 2022 10:55:31 -0600 Subject: [PATCH 22/35] fix: Add back in spacing --- modules/react/popup/lib/PopupCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 207a3ff409..31fc1480af 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -72,7 +72,6 @@ export const PopupCard = createSubcomponent('div')({ position="relative" depth={5} maxWidth={`calc(100vw - ${space.l})`} - spacing={0} flexDirection="column" minHeight={0} padding="zero" From 5446425480b25663b2102d29340d6adea8e06e84 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Tue, 6 Sep 2022 14:54:12 -0600 Subject: [PATCH 23/35] fix: Add some maring to heading --- modules/react/popup/lib/PopupBody.tsx | 2 +- modules/react/popup/lib/PopupHeading.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/react/popup/lib/PopupBody.tsx b/modules/react/popup/lib/PopupBody.tsx index 5df71228f9..0acd1af63f 100644 --- a/modules/react/popup/lib/PopupBody.tsx +++ b/modules/react/popup/lib/PopupBody.tsx @@ -9,6 +9,6 @@ export const PopupBody = createSubcomponent('div')({ modelHook: usePopupModel, })>(elemProps => { return ( - + ); }); diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx index 0b73fa20cb..cbcc8bde8b 100644 --- a/modules/react/popup/lib/PopupHeading.tsx +++ b/modules/react/popup/lib/PopupHeading.tsx @@ -20,7 +20,7 @@ export const PopupHeading = createSubcomponent('h2')({ marginInlineStart="l" marginInlineEnd="l" marginTop="l" - marginBottom="zero" + marginBottom="xxs" {...elemProps} > {children} From a3ed5a3cc28c3ce534faa6532936f78fd9deb4bb Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Wed, 7 Sep 2022 15:16:03 -0600 Subject: [PATCH 24/35] fix: Update spacing between heading and body --- modules/react/popup/lib/PopupHeading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx index cbcc8bde8b..0bd09f83d4 100644 --- a/modules/react/popup/lib/PopupHeading.tsx +++ b/modules/react/popup/lib/PopupHeading.tsx @@ -20,7 +20,7 @@ export const PopupHeading = createSubcomponent('h2')({ marginInlineStart="l" marginInlineEnd="l" marginTop="l" - marginBottom="xxs" + marginBottom="s" {...elemProps} > {children} From 1be9adf8c612ecb01c2801dd137c444ec069df35 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 12:01:51 -0600 Subject: [PATCH 25/35] fix: Clean up padding, thanks Alan and James --- modules/react/modal/stories/examples/Basic.tsx | 14 +++++++------- .../react/modal/stories/examples/BodyOverflow.tsx | 6 +++--- .../react/modal/stories/examples/CustomFocus.tsx | 14 +++++++------- .../react/modal/stories/examples/ReturnFocus.tsx | 12 ++++++------ .../modal/stories/examples/WithoutCloseIcon.tsx | 14 +++++++------- modules/react/popup/lib/PopupBody.tsx | 4 +--- modules/react/popup/lib/PopupCard.tsx | 4 +++- modules/react/popup/lib/PopupHeading.tsx | 9 +++++---- 8 files changed, 39 insertions(+), 38 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 997276bdf5..14312227e4 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -17,16 +17,16 @@ export const Basic = () => { Delete Item - + Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Delete + + Cancel + diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index c796e59ed9..c468c0f916 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton, PrimaryButton} from '@workday/canvas-kit-react/button'; import {HStack} from '@workday/canvas-kit-react/layout'; export const BodyOverflow = () => { @@ -16,7 +16,7 @@ export const BodyOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -42,7 +42,7 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index fbd2a588a8..11427202aa 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -27,16 +27,16 @@ export const CustomFocus = () => { Enter name to confirm deletion - + setValue(e.currentTarget.value)} /> - - - Delete - - Cancel - + + + Delete + + Cancel + diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index bcbb17cc0e..19ede71703 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -42,13 +42,13 @@ export const ReturnFocus = () => { Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Delete + + Cancel + diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 6dd2c244f1..90389f36c0 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -32,16 +32,16 @@ export const WithoutCloseIcon = () => { Delete Item - + Are you sure you want to delete the item? - - - Delete - - Cancel - + + + Delete + + Cancel + diff --git a/modules/react/popup/lib/PopupBody.tsx b/modules/react/popup/lib/PopupBody.tsx index 0acd1af63f..1ca9a0da1f 100644 --- a/modules/react/popup/lib/PopupBody.tsx +++ b/modules/react/popup/lib/PopupBody.tsx @@ -8,7 +8,5 @@ export const PopupBody = createSubcomponent('div')({ displayName: 'Popup.Body', modelHook: usePopupModel, })>(elemProps => { - return ( - - ); + return ; }); diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 31fc1480af..047d28a52f 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -73,8 +73,10 @@ export const PopupCard = createSubcomponent('div')({ depth={5} maxWidth={`calc(100vw - ${space.l})`} flexDirection="column" + spacing="xxs" minHeight={0} - padding="zero" + padding="m" + // margin="m" maxHeight={`calc(100vh - ${ elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl } * 2)`} diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx index 0bd09f83d4..fd150c9b8c 100644 --- a/modules/react/popup/lib/PopupHeading.tsx +++ b/modules/react/popup/lib/PopupHeading.tsx @@ -17,10 +17,11 @@ export const PopupHeading = createSubcomponent('h2')({ return ( {children} From c8801092f5871de6106a47ad13bf07ab50d70547 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 12:21:30 -0600 Subject: [PATCH 26/35] fix: Clean up padding --- modules/react/modal/stories/examples/Basic.tsx | 2 +- .../react/modal/stories/examples/BodyOverflow.tsx | 3 +++ modules/react/popup/lib/PopupCard.tsx | 9 +++++---- modules/react/popup/lib/PopupHeading.tsx | 2 +- modules/react/popup/stories/examples/Basic.tsx | 14 +++++++------- 5 files changed, 17 insertions(+), 13 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index 14312227e4..a564400d49 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -13,7 +13,7 @@ export const Basic = () => { Delete Item - + Delete Item diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index c468c0f916..c17552cb91 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -17,8 +17,10 @@ export const BodyOverflow = () => { Delete Item + FOCUSSSSSSSSSS

Are you sure you want to delete the item?

Are you sure you want to delete the item?

+ FOCUSSSSSSSSSS

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -41,6 +43,7 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

+ FOCUSSSSSSSSSS diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 047d28a52f..9750a37ec9 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,11 +12,13 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout'; +import {Flex, FlexItemStyleProps} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; -export interface PopupCardProps extends ExtractProps, Partial { +export interface PopupCardProps + extends ExtractProps, + Partial { children?: React.ReactNode; } @@ -63,7 +65,7 @@ export const PopupCard = createSubcomponent('div')({ }, [model.state.placement]); // As is a Stack that will render an element of `Element` - const As = useConstant(() => Stack.as(Element)); + const As = useConstant(() => Flex.as(Element)); return ( diff --git a/modules/react/popup/stories/examples/Basic.tsx b/modules/react/popup/stories/examples/Basic.tsx index 0dbad6feba..1a851c4e71 100644 --- a/modules/react/popup/stories/examples/Basic.tsx +++ b/modules/react/popup/stories/examples/Basic.tsx @@ -31,16 +31,16 @@ export const Basic = () => { Delete Item - + Are you sure you'd like to delete the item titled 'My Item'? - - - Delete - - Cancel - + + + Delete + + Cancel + From baff697ce281c454b51a62bd8329e8910c74982d Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 12:34:37 -0600 Subject: [PATCH 27/35] fix: Clean up more code --- modules/react/popup/lib/PopupCard.tsx | 9 ++++----- modules/react/popup/lib/PopupHeading.tsx | 10 +--------- modules/react/popup/stories/examples/Basic.tsx | 2 +- .../popup/stories/examples/FocusRedirect.tsx | 16 ++++++++-------- .../react/popup/stories/examples/FocusTrap.tsx | 14 +++++++------- .../popup/stories/examples/InitialFocus.tsx | 12 ++++++------ 6 files changed, 27 insertions(+), 36 deletions(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 9750a37ec9..1bad5990ad 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -12,13 +12,13 @@ import { useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common'; -import {Flex, FlexItemStyleProps} from '@workday/canvas-kit-react/layout'; +import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from './getTransformFromPlacement'; import {usePopupCard, usePopupModel} from './hooks'; -export interface PopupCardProps - extends ExtractProps, - Partial { + +export type FlexAndBoxProps = ExtractProps & FlexStyleProps; +export interface PopupCardProps extends FlexAndBoxProps { children?: React.ReactNode; } @@ -77,7 +77,6 @@ export const PopupCard = createSubcomponent('div')({ flexDirection="column" minHeight={0} padding="m" - // margin="m" maxHeight={`calc(100vh - ${ elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl } * 2)`} diff --git a/modules/react/popup/lib/PopupHeading.tsx b/modules/react/popup/lib/PopupHeading.tsx index 87e38ab361..5989ba0dcb 100644 --- a/modules/react/popup/lib/PopupHeading.tsx +++ b/modules/react/popup/lib/PopupHeading.tsx @@ -15,15 +15,7 @@ export const PopupHeading = createSubcomponent('h2')({ elemPropsHook: usePopupHeading, })(({children, ...elemProps}, Element) => { return ( - + {children} ); diff --git a/modules/react/popup/stories/examples/Basic.tsx b/modules/react/popup/stories/examples/Basic.tsx index 1a851c4e71..5eabc09b9c 100644 --- a/modules/react/popup/stories/examples/Basic.tsx +++ b/modules/react/popup/stories/examples/Basic.tsx @@ -31,7 +31,7 @@ export const Basic = () => { Delete Item - + Are you sure you'd like to delete the item titled 'My Item'? diff --git a/modules/react/popup/stories/examples/FocusRedirect.tsx b/modules/react/popup/stories/examples/FocusRedirect.tsx index fd7c37acba..2f7c8d07e1 100644 --- a/modules/react/popup/stories/examples/FocusRedirect.tsx +++ b/modules/react/popup/stories/examples/FocusRedirect.tsx @@ -43,17 +43,17 @@ export const FocusRedirect = () => { Delete Item - + Are you sure you'd like to delete the item titled 'My Item'? - - - Delete - - {/* Disabled elements should not be focusable and focus should move to the next focusable element */} - Cancel - + + + Delete + + {/* Disabled elements should not be focusable and focus should move to the next focusable element */} + Cancel + Next Focusable Button diff --git a/modules/react/popup/stories/examples/FocusTrap.tsx b/modules/react/popup/stories/examples/FocusTrap.tsx index 43444f4fc5..15f241f0c5 100644 --- a/modules/react/popup/stories/examples/FocusTrap.tsx +++ b/modules/react/popup/stories/examples/FocusTrap.tsx @@ -43,16 +43,16 @@ export const FocusTrap = () => { Delete Item - + Are you sure you'd like to delete the item titled 'My Item'? - - - Delete - - Cancel - + + + Delete + + Cancel + Next Focusable Button diff --git a/modules/react/popup/stories/examples/InitialFocus.tsx b/modules/react/popup/stories/examples/InitialFocus.tsx index e1ea3ace55..9075066b3c 100644 --- a/modules/react/popup/stories/examples/InitialFocus.tsx +++ b/modules/react/popup/stories/examples/InitialFocus.tsx @@ -29,15 +29,15 @@ export const InitialFocus = () => { Confirmation - + Your message has been sent! - - - OK - - + + + OK + + From 053db05def79b9439c97a4045919f27461a15e0b Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 12:50:20 -0600 Subject: [PATCH 28/35] fix: Update stories with correct padding --- modules/react/modal/stories/examples/Basic.tsx | 6 +++--- modules/react/modal/stories/examples/BodyOverflow.tsx | 2 +- modules/react/modal/stories/examples/CustomFocus.tsx | 2 +- modules/react/modal/stories/examples/FullOverflow.tsx | 4 ++-- modules/react/modal/stories/examples/ReturnFocus.tsx | 4 ++-- modules/react/modal/stories/examples/WithoutCloseIcon.tsx | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/modules/react/modal/stories/examples/Basic.tsx b/modules/react/modal/stories/examples/Basic.tsx index a564400d49..ce2d4c9866 100644 --- a/modules/react/modal/stories/examples/Basic.tsx +++ b/modules/react/modal/stories/examples/Basic.tsx @@ -13,15 +13,15 @@ export const Basic = () => { Delete Item - + Delete Item - + Are you sure you want to delete the item? - + Delete diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index c17552cb91..fc812cb584 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -45,7 +45,7 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

FOCUSSSSSSSSSS - + Delete diff --git a/modules/react/modal/stories/examples/CustomFocus.tsx b/modules/react/modal/stories/examples/CustomFocus.tsx index 11427202aa..56def5937e 100644 --- a/modules/react/modal/stories/examples/CustomFocus.tsx +++ b/modules/react/modal/stories/examples/CustomFocus.tsx @@ -31,7 +31,7 @@ export const CustomFocus = () => { setValue(e.currentTarget.value)} /> - + Delete diff --git a/modules/react/modal/stories/examples/FullOverflow.tsx b/modules/react/modal/stories/examples/FullOverflow.tsx index 84b5641768..b335945941 100644 --- a/modules/react/modal/stories/examples/FullOverflow.tsx +++ b/modules/react/modal/stories/examples/FullOverflow.tsx @@ -16,7 +16,7 @@ export const FullOverflow = () => { Delete Item - +

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -42,7 +42,7 @@ export const FullOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

 - + Delete diff --git a/modules/react/modal/stories/examples/ReturnFocus.tsx b/modules/react/modal/stories/examples/ReturnFocus.tsx index 19ede71703..fe1b833752 100644 --- a/modules/react/modal/stories/examples/ReturnFocus.tsx +++ b/modules/react/modal/stories/examples/ReturnFocus.tsx @@ -39,11 +39,11 @@ export const ReturnFocus = () => { Delete Item - + Are you sure you want to delete the item? - + Delete diff --git a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx index 90389f36c0..f616d43f46 100644 --- a/modules/react/modal/stories/examples/WithoutCloseIcon.tsx +++ b/modules/react/modal/stories/examples/WithoutCloseIcon.tsx @@ -32,11 +32,11 @@ export const WithoutCloseIcon = () => { Delete Item - + Are you sure you want to delete the item? - + Delete From d86c06621fb2cfda9a0d6f689a387cbc7ba5ea01 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 13:33:35 -0600 Subject: [PATCH 29/35] fix: Clean up toast padding --- modules/react/modal/stories/stories_VisualTesting.tsx | 10 +++++----- modules/react/toast/lib/Toast.tsx | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/modules/react/modal/stories/stories_VisualTesting.tsx b/modules/react/modal/stories/stories_VisualTesting.tsx index 945c5e6f1a..bfb86a6cc5 100644 --- a/modules/react/modal/stories/stories_VisualTesting.tsx +++ b/modules/react/modal/stories/stories_VisualTesting.tsx @@ -39,14 +39,14 @@ const TestModal = () => { Delete Item - + Are you sure you want to delete the item? - - Delete - Cancel - + + Delete + Cancel + diff --git a/modules/react/toast/lib/Toast.tsx b/modules/react/toast/lib/Toast.tsx index f7bb92bfd0..0d0121696a 100644 --- a/modules/react/toast/lib/Toast.tsx +++ b/modules/react/toast/lib/Toast.tsx @@ -96,10 +96,11 @@ export const Toast = createComponent('div')({ role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'} aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'} aria-atomic={!isInteractive} + padding="xxs" {...elemProps} > {onClose && } - + {icon && } From 7bebed7f18da5a832b80a7a7188b802a8851901d Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 13:52:47 -0600 Subject: [PATCH 30/35] fix: Clean up visual testing story --- modules/react/modal/stories/stories_VisualTesting.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react/modal/stories/stories_VisualTesting.tsx b/modules/react/modal/stories/stories_VisualTesting.tsx index bfb86a6cc5..95adf26e37 100644 --- a/modules/react/modal/stories/stories_VisualTesting.tsx +++ b/modules/react/modal/stories/stories_VisualTesting.tsx @@ -39,7 +39,7 @@ const TestModal = () => { Delete Item - + Are you sure you want to delete the item? From 6f4beba7a8393ad719cef69a945244e362d48bd5 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 14:11:14 -0600 Subject: [PATCH 31/35] fix: Clean up dialog story --- modules/react/dialog/stories/stories.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/modules/react/dialog/stories/stories.tsx b/modules/react/dialog/stories/stories.tsx index 2d06556215..e11201ff72 100644 --- a/modules/react/dialog/stories/stories.tsx +++ b/modules/react/dialog/stories/stories.tsx @@ -25,14 +25,14 @@ export const Basic = () => { Delete Item -

Are you sure you want to delete the item?

- - - Delete - - Cancel - +

Are you sure you want to delete the item?

 + + + Delete + + Cancel + From 9a7f498f98779ff2a6784b6157fccf8a243fc028 Mon Sep 17 00:00:00 2001 From: James Fan Date: Thu, 8 Sep 2022 14:07:39 -0700 Subject: [PATCH 32/35] fix: Move HStack footer out of Body for Popup stories --- .../popup/stories/examples/NestedPopups.tsx | 20 ++++++++++--------- modules/react/popup/stories/examples/RTL.tsx | 8 ++++---- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/modules/react/popup/stories/examples/NestedPopups.tsx b/modules/react/popup/stories/examples/NestedPopups.tsx index b05b828571..0649a3e1cb 100644 --- a/modules/react/popup/stories/examples/NestedPopups.tsx +++ b/modules/react/popup/stories/examples/NestedPopups.tsx @@ -36,25 +36,27 @@ export const NestedPopups = () => { -

Contents of Popup 1

+

Contents of Popup 1

+ + Open Popup 2 -

Contents of Popup 2

- - - Close Both (as) - - Close Both (props) - +

Contents of Popup 2

 + + + Close Both (as) + + Close Both (props) + - + diff --git a/modules/react/popup/stories/examples/RTL.tsx b/modules/react/popup/stories/examples/RTL.tsx index 4b27b06aa4..a488cd8b4c 100644 --- a/modules/react/popup/stories/examples/RTL.tsx +++ b/modules/react/popup/stories/examples/RTL.tsx @@ -15,11 +15,11 @@ export const RTL = () => { האם ברצונך למחוק פריט זה - - לִמְחוֹק - לְבַטֵל - + + לִמְחוֹק + לְבַטֵל + ); From 2056502d6ec6f8fc323062bb52065b1df94ae631 Mon Sep 17 00:00:00 2001 From: "manuel.carrera" Date: Thu, 8 Sep 2022 15:15:46 -0600 Subject: [PATCH 33/35] fix: Remove primary button from example --- modules/react/modal/stories/examples/BodyOverflow.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx index fc812cb584..eaa3d13a98 100644 --- a/modules/react/modal/stories/examples/BodyOverflow.tsx +++ b/modules/react/modal/stories/examples/BodyOverflow.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Modal} from '@workday/canvas-kit-react/modal'; -import {DeleteButton, PrimaryButton} from '@workday/canvas-kit-react/button'; +import {DeleteButton} from '@workday/canvas-kit-react/button'; import {HStack} from '@workday/canvas-kit-react/layout'; export const BodyOverflow = () => { @@ -17,10 +17,8 @@ export const BodyOverflow = () => { Delete Item - FOCUSSSSSSSSSS

Are you sure you want to delete the item?

Are you sure you want to delete the item?

- FOCUSSSSSSSSSS

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

@@ -43,7 +41,6 @@ export const BodyOverflow = () => {

Are you sure you want to delete the item?

Are you sure you want to delete the item?

Are you sure you want to delete the item?

- FOCUSSSSSSSSSS From ed5872358824fe9259584c28e997252a85af52f2 Mon Sep 17 00:00:00 2001 From: Manuel Carrera Date: Thu, 8 Sep 2022 15:27:48 -0600 Subject: [PATCH 34/35] Update modules/react/popup/lib/PopupCard.tsx Co-authored-by: James Fan --- modules/react/popup/lib/PopupCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 1bad5990ad..c6e72ed277 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -64,7 +64,7 @@ export const PopupCard = createSubcomponent('div')({ return getTransformFromPlacement(model.state.placement || 'bottom'); }, [model.state.placement]); - // As is a Stack that will render an element of `Element` + // As is a Flex that will render an element of `Element` const As = useConstant(() => Flex.as(Element)); return ( From de29d1cb5d8300fc7cb93c4e7c46a469c9624e55 Mon Sep 17 00:00:00 2001 From: James Fan Date: Thu, 8 Sep 2022 14:39:56 -0700 Subject: [PATCH 35/35] fix: Fix paragraph margin on Popup RTL example --- modules/react/popup/stories/examples/RTL.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react/popup/stories/examples/RTL.tsx b/modules/react/popup/stories/examples/RTL.tsx index a488cd8b4c..c889573612 100644 --- a/modules/react/popup/stories/examples/RTL.tsx +++ b/modules/react/popup/stories/examples/RTL.tsx @@ -12,7 +12,7 @@ export const RTL = () => { למחוק פריט - + האם ברצונך למחוק פריט זה