New sizes for Overlay and Dialog (#1238)

primer · May 21, 2021 · 8368a83 · 8368a83 · vercel · May 21, 2021
1 parent 6973bd8
commit 8368a83
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 35 deletions.
diff --git a/.changeset/swift-pianos-fail.md b/.changeset/swift-pianos-fail.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": minor
+---
+
+New sizes for Overlay and Dialog.  Sizes have been changed from abbreviations to full words.  `xs` -> `xsmall`, `sm` -> `small`, `md` -> `medium`, `lg` -> `large`, `xl` -> `xlarge`.  The sizing for `Overlay` has also been updated to provide a wider range of options.  The original values for Overlay were based on the needs of Dialog, but Dialog is not reliant on Overlay so they don't need to have similar sizing.  This is technically a breaking change, but is being released as a minor because these components are both still in `alpha` status.
diff --git 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
@@ -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`.                                                                                                                                                                                                                                           |
diff --git a/src/Dialog/ConfirmationDialog.tsx b/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}

diff --git 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<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()

diff --git a/src/Overlay.tsx b/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>(

diff --git 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"
         >
           <Flex flexDirection="column" p={2}>
             <Text>Are you sure?</Text>

diff --git 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 && (
-            <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>
           )}

diff --git a/src/stories/Overlay.stories.tsx b/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>