fix styles and type of children

sumup-oss · Dec 5, 2024 · ff0ea0e · ff0ea0e
1 parent 7943586
commit ff0ea0e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/circuit-ui/components/Dialog/Dialog.module.css b/packages/circuit-ui/components/Dialog/Dialog.module.css
@@ -10,7 +10,7 @@
   pointer-events: none;
   visibility: hidden;
   border: none;
-  border-radius: var(--cui-border-radius-byte);
+  border-radius: var(--cui-border-radius-mega);
   outline: none;
   box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%);
   opacity: 0;
@@ -26,8 +26,8 @@
 }
 
 @media (min-width: 480px) {
-  .dialog {
-    width: max-content;
+  .dialog .content {
+    width: min-content;
     min-width: 480px;
     max-width: 90vw;
     max-height: 90vw;
@@ -90,7 +90,7 @@
   opacity: 1;
 }
 
-.close {
+.dialog .close {
   position: absolute;
   top: var(--cui-spacings-byte);
   right: var(--cui-spacings-byte);
@@ -115,7 +115,6 @@
 .content {
   overflow-y: auto;
   background-color: var(--cui-bg-elevated);
-  border-radius: var(--cui-border-radius-byte);
 }
 
 @media (max-width: 479px) {

diff --git a/packages/circuit-ui/components/Dialog/Dialog.tsx b/packages/circuit-ui/components/Dialog/Dialog.tsx
@@ -55,9 +55,11 @@ export interface DialogProps
    */
   onClose?: () => void;
   /**
-   * a function that returns the content of the dialog.
+   * a ReactNode or a function that returns the content of the dialog.
    */
-  children?: ({ onClose }: { onClose?: DialogProps['onClose'] }) => ReactNode;
+  children?:
+    | ReactNode
+    | (({ onClose }: { onClose?: DialogProps['onClose'] }) => ReactNode);
   /**
    * Text label for the close button for screen readers.
    * Important for accessibility.
@@ -256,7 +258,11 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
             {closeButtonLabel}
           </CloseButton>
           {open && (
-            <div className={classes.content}>{children?.({ onClose })}</div>
+            <div className={classes.content}>
+              {typeof children === 'function'
+                ? children?.({ onClose })
+                : children}
+            </div>
           )}
         </dialog>
       </>