add size prop

Author: langermank

packages/react/src/Dialog/Dialog.module.css

@@ -101,16 +101,13 @@
 
 .Dialog {
   display: flex;
-  /* stylelint-disable-next-line primer/responsive-widths */
-  width: 640px;
-  min-width: 296px;
+  width: min(var(--overlay-width), 100vw - 2rem);
+  min-width: var(--overlay-width-xsmall);
   max-width: calc(100dvw - 64px);
-  height: auto;
-  max-height: calc(100dvh - 64px);
+  max-height: min(calc(100dvh - 2rem), var(--overlay-height));
   flex-direction: column;
   background-color: var(--overlay-bgColor);
   border-radius: var(--borderRadius-large);
-  border-radius: var(--borderRadius-large, var(--borderRadius-large));
   box-shadow: var(--shadow-floating-small);
   opacity: 1;
 
@@ -135,6 +132,30 @@
     height: 640px;
   }
 
+  &:where([data-height='auto']) {
+    height: auto;
+  }
+
+  &:where([data-size='small']) {
+    --overlay-height: var(--overlay-height-small);
+    --overlay-width: var(--overlay-width-small);
+  }
+
+  &:where([data-size='medium']) {
+    --overlay-height: var(--overlay-height-medium);
+    --overlay-width: var(--overlay-width-medium);
+  }
+
+  &:where([data-size='large']) {
+    --overlay-height: var(--overlay-height-large);
+    --overlay-width: var(--overlay-width-large);
+  }
+
+  &:where([data-size='xlarge']) {
+    --overlay-height: var(--overlay-height-xlarge);
+    --overlay-width: var(--overlay-width-xlarge);
+  }
+
   @media screen and (prefers-reduced-motion: no-preference) {
     animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
   }

packages/react/src/Dialog/Dialog.stories.tsx

@@ -135,13 +135,19 @@ export const Playground = (
   )
 }
 Playground.args = {
-  width: 'xlarge',
+  size: 'large',
   height: 'auto',
   subtitle: 'Subtitle',
   title: 'Dialog heading',
   position: 'center',
 }
 Playground.argTypes = {
+  size: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium', 'large', 'xlarge'],
+  },
   width: {
     control: {
       type: 'radio',

packages/react/src/Dialog/Dialog.tsx

@@ -126,6 +126,8 @@ export interface DialogProps {
    */
   height?: DialogHeight
 
+  size?: 'small' | 'medium' | 'large' | 'xlarge'
+
   /**
    * The position of the dialog
    */
@@ -236,8 +238,9 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     renderFooter,
     onClose,
     role = 'dialog',
-    width = 'xlarge',
+    width,
     height = 'auto',
+    size = 'large',
     footerButtons = defaultFooterButtons,
     position = defaultPosition,
     returnFocusRef,
@@ -325,6 +328,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             {...positionDataAttributes}
             data-width={width}
             data-height={height}
+            data-size={size}
             className={clsx(className, classes.Dialog)}
           >
             {header}