Skip to content

Commit

Permalink
New sizes for Overlay and Dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgreif
dgreif committed May 19, 2021
1 parent 909ada5 commit 9dfc130
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 35 deletions.
4 changes: 2 additions & 2 deletions docs/content/Dialog2.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ By default, the Dialog component implements the design and interactions defined
| footerButtons | `DialogButtonProps[]` | | Optional. Specify buttons that will be rendered in the footer of the dialog. |
| onClose | `(gesture: 'close-button' │ 'escape') => void` | | Required. This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the "X" in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape'). |
| role | `"dialog" │ "alertdialog"` | `"dialog"` | The ARIA role given to the dialog element. More info: [dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), [alertdialog](https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog) |
| width | `"sm" │ "md" │ "lg" │ "xl"` | `"xl"` | The fixed width of the dialog. |
| height | `"sm" │ "lg" │ "auto"` | `"auto"` | The fixed height of the dialog, or, auto to adjust the height based on its contents. |
| width | `"small" │ "medium" │ "large" │ "xLarge"` | `"xLarge"` | The fixed width of the dialog. |
| height | `"small" │ "large" │ "auto"` | `"auto"` | The fixed height of the dialog, or, auto to adjust the height based on its contents. |

### DialogHeaderProps

Expand Down
4 changes: 2 additions & 2 deletions docs/content/Overlay.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,6 @@ render(<Demo />)
| returnFocusRef | `React.RefObject<HTMLElement>` | `undefined` | Required. Ref for the element to focus when the `Overlay` is closed. |
| onClickOutside | `function` | `undefined` | Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`. |
| onEscape | `function` | `undefined` | Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`. |
| width | `'sm', 'md', 'lg', 'xl', 'auto'` | `auto` | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `sm` corresponds to `256px`, `md` corresponds to `320px`, `lg` corresponds to `480px`, and `xl` corresponds to `640px`. |
| height | `'sm', 'md', 'auto'` | `auto` | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `sm` corresponds to `480px` and `md` corresponds to `640px`. |
| width | `'small' │ 'medium' │ 'large' │ 'xLarge' │ 'xxLarge' │ 'auto'` | `auto` | Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xLarge` corresponds to `640px`, `xxLarge` corresponds to `960px`. |
| height | `'xSmall', 'small', 'medium', 'large', 'xLarge', 'auto'` | `auto` | Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xSmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xLarge` corresponds to `600px`. |
| visibility | `'visible', 'hidden'` | `visible` | Sets the visibility of the `Overlay`. |
2 changes: 1 addition & 1 deletion src/Dialog/ConfirmationDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
title={title}
footerButtons={footerButtons}
role="alertdialog"
width="md"
width="medium"
renderHeader={ConfirmationHeader}
renderBody={ConfirmationBody}
renderFooter={ConfirmationFooter}
Expand Down
28 changes: 14 additions & 14 deletions src/Dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,17 @@ export interface DialogProps {

/**
* The width of the dialog.
* sm: 296px
* md: 320px
* lg: 480px
* xl: 640px
* small: 296px
* medium: 320px
* large: 480px
* xLarge: 640px
*/
width?: DialogWidth

/**
* The height of the dialog.
* sm: 296x480
* lg: 480x640
* small: 296x480
* large: 480x640
* auto: variable based on contents
*/
height?: DialogHeight
Expand Down Expand Up @@ -160,16 +160,16 @@ const Backdrop = styled('div')`
`

const heightMap = {
sm: '480px',
lg: '640px',
small: '480px',
large: '640px',
auto: 'auto'
} as const

const widthMap = {
sm: '296px',
md: '320px',
lg: '480px',
xl: '640px'
small: '296px',
medium: '320px',
large: '480px',
xLarge: '640px'
} as const

export type DialogWidth = keyof typeof widthMap
Expand All @@ -188,7 +188,7 @@ const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPo
min-width: 296px;
max-width: calc(100vw - 64px);
max-height: calc(100vh - 64px);
width: ${props => widthMap[props.width ?? ('xl' as const)]};
width: ${props => widthMap[props.width ?? ('xLarge' as const)]};
height: ${props => heightMap[props.height ?? ('auto' as const)]};
border-radius: 12px;
opacity: 1;
Expand Down Expand Up @@ -250,7 +250,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
renderFooter,
onClose,
role = 'dialog',
width = 'xl',
width = 'xLarge',
height = 'auto'
} = props
const dialogLabelId = uniqueId()
Expand Down
20 changes: 12 additions & 8 deletions src/Overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,20 @@ type StyledOverlayProps = {
}

const heightMap = {
sm: '480px',
md: '640px',
xSmall: '192px',
small: '256px',
medium: '320px',
large: '432px',
xLarge: '600px',
auto: 'auto'
}

const widthMap = {
sm: '256px',
md: '320px',
lg: '480px',
xl: '640px',
small: '256px',
medium: '320px',
large: '480px',
xLarge: '640px',
xxLarge: '960px',
auto: 'auto'
}

Expand Down Expand Up @@ -71,8 +75,8 @@ export type OverlayProps = {
* @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
* @param onClickOutside Required. Function to call when clicking outside of the `Overlay`. Typically this function sets the `Overlay` visibility state to `false`.
* @param onEscape Required. Function to call when user presses `Escape`. Typically this function sets the `Overlay` visibility state to `false`.
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `sm` corresponds to `256px`, `md` corresponds to `320px`, `lg` corresponds to `480px`, and `xl` corresponds to `640px`.
* @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `sm` corresponds to `480px` and `md` corresponds to `640px`.
* @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xLarge` corresponds to `640px`, `xxLarge` corresponds to `960px`.
* @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`. `xSmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xLarge` corresponds to `600px`.
* @param visibility Sets the visibility of the `Overlay`
*/
const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/Overlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
ignoreClickRefs={[buttonRef]}
onEscape={closeOverlay}
onClickOutside={closeOverlay}
width="sm"
width="small"
>
<Flex flexDirection="column" p={2}>
<Text>Are you sure?</Text>
Expand Down
10 changes: 5 additions & 5 deletions src/stories/Dialog.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ export default {
],
argTypes: {
width: {
defaultValue: 'xl',
defaultValue: 'xLarge',
control: {
type: 'radio',
options: ['sm', 'md', 'lg', 'xl']
options: ['small', 'medium', 'large', 'xLarge']
}
},
height: {
defaultValue: 'auto',
control: {
type: 'radio',
options: ['sm', 'lg', 'auto']
options: ['small', 'large', 'auto']
}
},
subtitle: {
Expand Down Expand Up @@ -128,7 +128,7 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
>
{lipsum}
{secondOpen && (
<Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="sm">
<Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
Hello world
</Dialog>
)}
Expand Down Expand Up @@ -229,7 +229,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
>
{lipsum}
{secondOpen && (
<Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="sm">
<Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
Hello world
</Dialog>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/stories/Overlay.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const DropdownOverlay = () => {
<Overlay
returnFocusRef={buttonRef}
height="auto"
width="sm"
width="small"
ignoreClickRefs={[buttonRef]}
onEscape={() => setIsOpen(false)}
onClickOutside={() => setIsOpen(false)}
Expand Down Expand Up @@ -87,7 +87,7 @@ export const DialogOverlay = () => {
ignoreClickRefs={[buttonRef]}
onEscape={closeOverlay}
onClickOutside={closeOverlay}
width="sm"
width="small"
>
<Flex flexDirection="column" p={2}>
<Text>Are you sure?</Text>
Expand Down

0 comments on commit 9dfc130

Please sign in to comment.