From 9dfc13091ac078812e8d55fced56a88c8b4c42f8 Mon Sep 17 00:00:00 2001 From: dgreif Date: Wed, 19 May 2021 13:23:01 -0700 Subject: [PATCH] New sizes for Overlay and Dialog --- docs/content/Dialog2.mdx | 4 ++-- docs/content/Overlay.mdx | 4 ++-- src/Dialog/ConfirmationDialog.tsx | 2 +- src/Dialog/Dialog.tsx | 28 ++++++++++++++-------------- src/Overlay.tsx | 20 ++++++++++++-------- src/__tests__/Overlay.tsx | 2 +- src/stories/Dialog.stories.tsx | 10 +++++----- src/stories/Overlay.stories.tsx | 4 ++-- 8 files changed, 39 insertions(+), 35 deletions(-) diff --git a/docs/content/Dialog2.mdx b/docs/content/Dialog2.mdx index 597f926b450..776f8309f5e 100644 --- a/docs/content/Dialog2.mdx +++ b/docs/content/Dialog2.mdx @@ -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 diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx index 34e4e8ba9fa..c83837e2507 100644 --- a/docs/content/Overlay.mdx +++ b/docs/content/Overlay.mdx @@ -75,6 +75,6 @@ render() | returnFocusRef | `React.RefObject` | `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`. | diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 272d815e870..4d33ec3cb49 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -163,7 +163,7 @@ export const ConfirmationDialog: React.FC = props => { title={title} footerButtons={footerButtons} role="alertdialog" - width="md" + width="medium" renderHeader={ConfirmationHeader} renderBody={ConfirmationBody} renderFooter={ConfirmationFooter} diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index f4d97cb9e93..085b26f10ab 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -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 @@ -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 @@ -188,7 +188,7 @@ const StyledDialog = styled.div 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; @@ -250,7 +250,7 @@ const _Dialog = React.forwardRef( diff --git a/src/__tests__/Overlay.tsx b/src/__tests__/Overlay.tsx index f1071bc33d8..21ef6374335 100644 --- a/src/__tests__/Overlay.tsx +++ b/src/__tests__/Overlay.tsx @@ -34,7 +34,7 @@ const TestComponent = ({initialFocus, callback}: TestComponentSettings) => { ignoreClickRefs={[buttonRef]} onEscape={closeOverlay} onClickOutside={closeOverlay} - width="sm" + width="small" > Are you sure? diff --git a/src/stories/Dialog.stories.tsx b/src/stories/Dialog.stories.tsx index 3b0a5680680..91406d91212 100644 --- a/src/stories/Dialog.stories.tsx +++ b/src/stories/Dialog.stories.tsx @@ -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: { @@ -128,7 +128,7 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => { > {lipsum} {secondOpen && ( - + Hello world )} @@ -229,7 +229,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => { > {lipsum} {secondOpen && ( - + Hello world )} diff --git a/src/stories/Overlay.stories.tsx b/src/stories/Overlay.stories.tsx index 805da3a0fd2..3cde8aa62dd 100644 --- a/src/stories/Overlay.stories.tsx +++ b/src/stories/Overlay.stories.tsx @@ -51,7 +51,7 @@ export const DropdownOverlay = () => { setIsOpen(false)} onClickOutside={() => setIsOpen(false)} @@ -87,7 +87,7 @@ export const DialogOverlay = () => { ignoreClickRefs={[buttonRef]} onEscape={closeOverlay} onClickOutside={closeOverlay} - width="sm" + width="small" > Are you sure?