New sizes for Overlay and Dialog

Author: dgreif

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
 

docs/content/Overlay.mdx

@@ -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`.                                                                                                                                                                                                                                           |

src/Dialog/ConfirmationDialog.tsx

@@ -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}

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<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;
@@ -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()

src/Overlay.tsx

@@ -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'
 }
 
@@ -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>(

src/__tests__/Overlay.tsx

@@ -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>

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 && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="sm">
+            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
               Hello world
             </Dialog>
           )}
@@ -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>
           )}

src/stories/Overlay.stories.tsx

@@ -51,7 +51,7 @@ export const DropdownOverlay = () => {
         <Overlay
           returnFocusRef={buttonRef}
           height="auto"
-          width="sm"
+          width="small"
           ignoreClickRefs={[buttonRef]}
           onEscape={() => setIsOpen(false)}
           onClickOutside={() => setIsOpen(false)}
@@ -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>