-
Notifications
You must be signed in to change notification settings - Fork 221
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Modal, Dialog, Popup and Toast Styles Refactor (#2795)
Fixes: #2773 Styles refactor for Modal, Dialog and Popup. [category:Components] Release Note: Updated `Modal, Dialog, Popup and Toast` to use new `system` tokens and style utilities.
- Loading branch information
1 parent
066c4b1
commit 92573a5
Showing
20 changed files
with
459 additions
and
266 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,27 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { | ||
| createSubcomponent, | ||
| ExtractProps, | ||
| getTheme, | ||
| styled, | ||
| StyledType, | ||
| } from '@workday/canvas-kit-react/common'; | ||
| import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; | ||
| import {Popup} from '@workday/canvas-kit-react/popup'; | ||
| import {space} from '@workday/canvas-kit-react/tokens'; | ||
|
|
||
| import {useModalModel} from './hooks'; | ||
| import {createStencil} from '@workday/canvas-kit-styling'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
| import {mergeStyles} from '@workday/canvas-kit-react/layout'; | ||
|
|
||
| export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {} | ||
|
|
||
| const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => { | ||
| const {canvas: canvasTheme} = getTheme(theme); | ||
| return { | ||
| [canvasTheme.breakpoints.down('s')]: { | ||
| marginBottom: space.zero, | ||
| padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`, | ||
| export const modalBodyStencil = createStencil({ | ||
| base: { | ||
| '@media screen and (max-width: 768px)': { | ||
| marginBlockEnd: system.space.zero, | ||
| padding: `${system.space.x1} ${system.space.x2} ${system.space.x2}`, | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| export const ModalBody = createSubcomponent('div')({ | ||
| displayName: 'Modal.Body', | ||
| modelHook: useModalModel, | ||
| })<ModalBodyProps>((elemProps, Element) => { | ||
| return <ResponsiveModalBody as={Element} {...elemProps} />; | ||
| return <Popup.Body as={Element} {...mergeStyles(elemProps, modalBodyStencil())} />; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,33 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { | ||
| createSubcomponent, | ||
| ExtractProps, | ||
| StyledType, | ||
| styled, | ||
| getTheme, | ||
| } from '@workday/canvas-kit-react/common'; | ||
| import {space} from '@workday/canvas-kit-react/tokens'; | ||
| import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; | ||
| import {Popup} from '@workday/canvas-kit-react/popup'; | ||
|
|
||
| import {useModalCard, useModalModel} from './hooks'; | ||
| import {calc, createStencil} from '@workday/canvas-kit-styling'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
| import {mergeStyles} from '@workday/canvas-kit-react/layout'; | ||
|
|
||
| export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {} | ||
|
|
||
| const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => { | ||
| const {canvas: canvasTheme} = getTheme(theme); | ||
| return { | ||
| margin: space.xl, | ||
| [canvasTheme.breakpoints.down('s')]: { | ||
| margin: space.s, // 16px all around margin on smaller screen sizes | ||
| padding: space.s, // brings total padding between edge and content to 24px | ||
| borderRadius: space.m, // 24px border radius on smaller devices. | ||
| export const modalCardStencil = createStencil({ | ||
| base: { | ||
| margin: system.space.x10, | ||
| width: calc.add(calc.multiply(system.space.x20, 5), system.space.x10), | ||
| borderWidth: system.space.zero, | ||
| boxShadow: system.depth[6], | ||
| '@media screen and (max-width: 768px)': { | ||
| margin: system.space.x4, // 16px all around margin on smaller screen sizes | ||
| padding: system.space.x4, // brings total padding between edge and content to 24px | ||
| borderRadius: system.space.x6, // 24px border radius on smaller devices. | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| export const ModalCard = createSubcomponent('div')({ | ||
| displayName: 'Modal.Card', | ||
| modelHook: useModalModel, | ||
| elemPropsHook: useModalCard, | ||
| })<ModalCardProps>((elemProps, Element) => { | ||
| return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />; | ||
| return <Popup.Card as={Element} {...mergeStyles(elemProps, modalCardStencil())} />; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,28 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { | ||
| createSubcomponent, | ||
| ExtractProps, | ||
| getTheme, | ||
| styled, | ||
| StyledType, | ||
| } from '@workday/canvas-kit-react/common'; | ||
| import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; | ||
| import {Popup} from '@workday/canvas-kit-react/popup'; | ||
| import {space} from '@workday/canvas-kit-react/tokens'; | ||
|
|
||
| import {useModalHeading, useModalModel} from './hooks'; | ||
| import {createStencil} from '@workday/canvas-kit-styling'; | ||
| import {system} from '@workday/canvas-tokens-web'; | ||
| import {mergeStyles} from '@workday/canvas-kit-react/layout'; | ||
|
|
||
| export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {} | ||
|
|
||
| const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => { | ||
| const {canvas: canvasTheme} = getTheme(theme); | ||
| return { | ||
| [canvasTheme.breakpoints.down('s')]: { | ||
| marginBottom: space.zero, | ||
| padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`, | ||
| export const modalHeadingStencil = createStencil({ | ||
| base: { | ||
| '@media screen and (max-width: 768px)': { | ||
| marginBlockEnd: system.space.zero, | ||
| padding: `${system.space.x2} ${system.space.x2} ${system.space.x1}`, | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| export const ModalHeading = createSubcomponent('h2')({ | ||
| displayName: 'Modal.Heading', | ||
| modelHook: useModalModel, | ||
| elemPropsHook: useModalHeading, | ||
| })<ModalHeadingProps>((elemProps, Element) => { | ||
| return <ResponsiveModalHeading as={Element} {...elemProps} />; | ||
| return <Popup.Heading as={Element} {...mergeStyles(elemProps, modalHeadingStencil())} />; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,22 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import {createSubcomponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common'; | ||
| import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; | ||
|
|
||
| import {ModalOverlay} from './ModalOverlay'; | ||
| import styled from '@emotion/styled'; | ||
| import {useModalModel} from './hooks'; | ||
| import {createStencil} from '@workday/canvas-kit-styling'; | ||
| import {mergeStyles} from '@workday/canvas-kit-react/layout'; | ||
|
|
||
| const StyledOverlay = styled(ModalOverlay)<StyledType>({ | ||
| '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div | ||
| export const modalOverflowOverlayStencil = createStencil({ | ||
| base: { | ||
| '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div | ||
| overflow: 'hidden auto', | ||
| }, | ||
| }); | ||
|
|
||
| export const ModalOverflowOverlay = createSubcomponent('div')({ | ||
| displayName: 'Modal.OverflowOverlay', | ||
| modelHook: useModalModel, | ||
| })<ExtractProps<typeof ModalOverlay, never>>((elemProps, Element) => { | ||
| return <StyledOverlay as={Element} overflowX="hidden" overflowY="auto" {...elemProps} />; | ||
| return <ModalOverlay as={Element} {...mergeStyles(elemProps, modalOverflowOverlayStencil())} />; | ||
| }); |
Oops, something went wrong.