From 5a17192709f17208792575c354c50bbbd5d270d5 Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Tue, 17 Dec 2024 12:05:11 +0100
Subject: [PATCH 1/9] fix: add padding control to each elememt

---
 .changeset/gentle-insects-smile.md            |   5 +
 .../src/components/Dialog/Dialog.stories.tsx  | 150 ++++++++++++++++--
 .../src/components/Dialog/Dialog.tsx          |  51 ++++--
 .../Dialog/styles/dialog.module.scss          |  89 ++++++-----
 4 files changed, 231 insertions(+), 64 deletions(-)
 create mode 100644 .changeset/gentle-insects-smile.md

diff --git a/.changeset/gentle-insects-smile.md b/.changeset/gentle-insects-smile.md
new file mode 100644
index 0000000000..14b16a6833
--- /dev/null
+++ b/.changeset/gentle-insects-smile.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix(`Dialog`): missing granular padding control
diff --git a/packages/components/src/components/Dialog/Dialog.stories.tsx b/packages/components/src/components/Dialog/Dialog.stories.tsx
index 3a250a4d40..3a6471c8b1 100644
--- a/packages/components/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/components/src/components/Dialog/Dialog.stories.tsx
@@ -338,32 +338,162 @@ export const WithFocusableContent: Story = {
 };
 
 export const WithNoPadding: Story = {
-    args: {
-        padding: 'none',
+    render: () => {
+        return (
+            <Dialog.Root>
+                <Dialog.Trigger>
+                    <Button>Open dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Content>
+                    <Dialog.Header padding="none">
+                        <Flex justify="space-between" align="center" width="100%" pr="1rem">
+                            <Dialog.Title>Header</Dialog.Title>
+                            <Button
+                                emphasis="default"
+                                onPress={() => {
+                                    alert('Button in the header clicked');
+                                }}
+                            >
+                                Button in the header
+                            </Button>
+                        </Flex>
+                    </Dialog.Header>
+                    <Dialog.Body padding="none">None</Dialog.Body>
+                    <Dialog.Footer padding="none">
+                        <Button emphasis="default">Cancel</Button>
+                        <Button>Submit</Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Root>
+        );
     },
 };
 
 export const WithTightPadding: Story = {
-    args: {
-        padding: 'tight',
+    render: () => {
+        return (
+            <Dialog.Root>
+                <Dialog.Trigger>
+                    <Button>Open dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Content>
+                    <Dialog.Header padding="tight">
+                        <Flex justify="space-between" align="center" width="100%" pr="1rem">
+                            <Dialog.Title>Header</Dialog.Title>
+                            <Button
+                                emphasis="default"
+                                onPress={() => {
+                                    alert('Button in the header clicked');
+                                }}
+                            >
+                                Button in the header
+                            </Button>
+                        </Flex>
+                    </Dialog.Header>
+                    <Dialog.Body padding="tight">Tight</Dialog.Body>
+                    <Dialog.Footer padding="tight">
+                        <Button emphasis="default">Cancel</Button>
+                        <Button>Submit</Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Root>
+        );
     },
 };
 
 export const WithCompactPadding: Story = {
-    args: {
-        padding: 'compact',
+    render: () => {
+        return (
+            <Dialog.Root>
+                <Dialog.Trigger>
+                    <Button>Open dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Content>
+                    <Dialog.Header padding="compact">
+                        <Flex justify="space-between" align="center" width="100%" pr="1rem">
+                            <Dialog.Title>Header</Dialog.Title>
+                            <Button
+                                emphasis="default"
+                                onPress={() => {
+                                    alert('Button in the header clicked');
+                                }}
+                            >
+                                Button in the header
+                            </Button>
+                        </Flex>
+                    </Dialog.Header>
+                    <Dialog.Body padding="compact">Compact</Dialog.Body>
+                    <Dialog.Footer padding="compact">
+                        <Button emphasis="default">Cancel</Button>
+                        <Button>Submit</Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Root>
+        );
     },
 };
 
 export const WithComfortablePadding: Story = {
-    args: {
-        padding: 'comfortable',
+    render: () => {
+        return (
+            <Dialog.Root>
+                <Dialog.Trigger>
+                    <Button>Open dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Content>
+                    <Dialog.Header padding="comfortable">
+                        <Flex justify="space-between" align="center" width="100%" pr="1rem">
+                            <Dialog.Title>Header</Dialog.Title>
+                            <Button
+                                emphasis="default"
+                                onPress={() => {
+                                    alert('Button in the header clicked');
+                                }}
+                            >
+                                Button in the header
+                            </Button>
+                        </Flex>
+                    </Dialog.Header>
+                    <Dialog.Body padding="comfortable">Confortable</Dialog.Body>
+                    <Dialog.Footer padding="comfortable">
+                        <Button emphasis="default">Cancel</Button>
+                        <Button>Submit</Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Root>
+        );
     },
 };
 
 export const WithSpaciousPadding: Story = {
-    args: {
-        padding: 'spacious',
+    render: () => {
+        return (
+            <Dialog.Root>
+                <Dialog.Trigger>
+                    <Button>Open dialog</Button>
+                </Dialog.Trigger>
+                <Dialog.Content>
+                    <Dialog.Header padding="spacious">
+                        <Flex justify="space-between" align="center" width="100%" pr="1rem">
+                            <Dialog.Title>Header</Dialog.Title>
+                            <Button
+                                emphasis="default"
+                                onPress={() => {
+                                    alert('Button in the header clicked');
+                                }}
+                            >
+                                Button in the header
+                            </Button>
+                        </Flex>
+                    </Dialog.Header>
+                    <Dialog.Body padding="spacious">Spacious</Dialog.Body>
+                    <Dialog.Footer padding="spacious">
+                        <Button emphasis="default">Cancel</Button>
+                        <Button>Submit</Button>
+                    </Dialog.Footer>
+                </Dialog.Content>
+            </Dialog.Root>
+        );
     },
 };
 
diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index 65afd5c42e..f34c95b724 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -32,11 +32,6 @@ export type DialogContentProps = {
      * @default true
      */
     rounded?: boolean;
-    /**
-     * Define the padding of the dialog
-     * @default "compact"
-     */
-    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * The vertical alignment of the divider
      * @default "center"
@@ -78,6 +73,11 @@ export type DialogTriggerProps = {
 };
 
 export type DialogHeaderProps = {
+    /**
+     * Define the padding of the dialog
+     * @default "compact"
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Show a border at the bottom of the header
      * @default true
@@ -93,6 +93,11 @@ export type DialogHeaderProps = {
 };
 
 export type DialogFooterProps = {
+    /**
+     * Define the padding of the dialog
+     * @default "compact"
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Show a border at the top of the footer
      * @default true
@@ -102,7 +107,15 @@ export type DialogFooterProps = {
     'data-test-id'?: string;
 };
 
-export type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };
+export type DialogBodyProps = {
+    /**
+     * Define the padding of the dialog
+     * @default "compact"
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
 
 export type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };
 
@@ -166,12 +179,11 @@ export const DialogContent = (
         maxWidth = '800px',
         minWidth = '400px',
         minHeight = '200px',
-        padding = 'compact',
         verticalAlign = 'center',
         'data-test-id': dataTestId = 'fondue-dialog-content',
         showUnderlay = false,
-        children,
         rounded = true,
+        children,
         ...props
     }: DialogContentProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -191,7 +203,6 @@ export const DialogContent = (
                     className={styles.content}
                     onFocus={addShowFocusRing}
                     data-dialog-rounded={rounded}
-                    data-dialog-spacing={padding}
                     data-test-id={dataTestId}
                     data-dialog-vertical-align={verticalAlign}
                     {...props}
@@ -206,9 +217,10 @@ DialogContent.displayName = 'Dialog.Content';
 
 export const DialogHeader = (
     {
-        children,
+        padding = 'compact',
         showBorder = true,
         showCloseButton = true,
+        children,
         'data-test-id': dataTestId = 'fondue-dialog-header',
     }: DialogHeaderProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -218,6 +230,7 @@ export const DialogHeader = (
             data-test-id={dataTestId}
             ref={ref}
             className={styles.header}
+            data-dialog-header-padding={padding}
             data-show-border={showBorder}
             data-dialog-layout-component
         >
@@ -233,7 +246,12 @@ export const DialogHeader = (
 DialogHeader.displayName = 'Dialog.Header';
 
 export const DialogFooter = (
-    { showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,
+    {
+        padding = 'compact',
+        showBorder = true,
+        children,
+        'data-test-id': dataTestId = 'fondue-dialog-footer',
+    }: DialogFooterProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
     return (
@@ -241,6 +259,7 @@ export const DialogFooter = (
             data-test-id={dataTestId}
             ref={ref}
             className={styles.footer}
+            data-dialog-footer-padding={padding}
             data-show-border={showBorder}
             data-dialog-layout-component
         >
@@ -251,11 +270,17 @@ export const DialogFooter = (
 DialogFooter.displayName = 'Dialog.Footer';
 
 export const DialogBody = (
-    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,
+    { padding = 'compact', children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
     return (
-        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>
+        <div
+            data-test-id={dataTestId}
+            ref={ref}
+            className={styles.body}
+            data-dialog-body-padding={padding}
+            data-dialog-layout-component
+        >
             {children}
         </div>
     );
diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss
index 65c662ffdf..ed90e0a4a9 100644
--- a/packages/components/src/components/Dialog/styles/dialog.module.scss
+++ b/packages/components/src/components/Dialog/styles/dialog.module.scss
@@ -49,47 +49,6 @@
     &[data-dialog-rounded='true'] {
         border-radius: var(--radius-large);
     }
-
-    &[data-dialog-spacing='tight'] {
-        .header,
-        .footer,
-        .body {
-            padding: sizeToken(2);
-        }
-    }
-
-    &[data-dialog-spacing='compact'] {
-        .header,
-        .footer {
-            padding: sizeToken(4);
-        }
-
-        .body {
-            padding: sizeToken(2) sizeToken(4);
-        }
-    }
-
-    &[data-dialog-spacing='comfortable'] {
-        .header,
-        .footer {
-            padding: sizeToken(6);
-        }
-
-        .body {
-            padding: sizeToken(4) sizeToken(6);
-        }
-    }
-
-    &[data-dialog-spacing='spacious'] {
-        .header,
-        .footer {
-            padding: sizeToken(10);
-        }
-
-        .body {
-            padding: sizeToken(6) sizeToken(10);
-        }
-    }
 }
 
 .underlay {
@@ -130,6 +89,22 @@
         border-bottom: var(--line-width) solid var(--line-color);
     }
 
+    &[data-dialog-header-padding='tight'] {
+        padding: sizeToken(2);
+    }
+
+    &[data-dialog-header-padding='compact'] {
+        padding: sizeToken(4);
+    }
+
+    &[data-dialog-header-padding='comfortable'] {
+        padding: sizeToken(6);
+    }
+
+    &[data-dialog-header-padding='spacious'] {
+        padding: sizeToken(10);
+    }
+
     @include sm {
         grid-row: 1;
         grid-column: 2;
@@ -149,6 +124,22 @@
     grid-row: 4;
     grid-column: 1;
 
+    &[data-dialog-footer-padding='tight'] {
+        padding: sizeToken(2);
+    }
+
+    &[data-dialog-footer-padding='compact'] {
+        padding: sizeToken(4);
+    }
+
+    &[data-dialog-footer-padding='comfortable'] {
+        padding: sizeToken(6);
+    }
+
+    &[data-dialog-footer-padding='spacious'] {
+        padding: sizeToken(10);
+    }
+
     &[data-show-border='true'] {
         border-top: var(--line-width) solid var(--line-color);
     }
@@ -168,6 +159,22 @@
     grid-row: 3;
     grid-column: 1;
 
+    &[data-dialog-body-padding='tight'] {
+        padding: sizeToken(2);
+    }
+
+    &[data-dialog-body-padding='compact'] {
+        padding: sizeToken(2) sizeToken(4);
+    }
+
+    &[data-dialog-body-padding='comfortable'] {
+        padding: sizeToken(4) sizeToken(6);
+    }
+
+    &[data-dialog-body-padding='spacious'] {
+        padding: sizeToken(6) sizeToken(10);
+    }
+
     @include sm {
         grid-row: 2;
         grid-column: 2;

From 89f4acc2e7f8a38ba5749ce55e9fcf6268078d40 Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Tue, 17 Dec 2024 14:00:23 +0100
Subject: [PATCH 2/9] fix: tests

---
 .../components/Dialog/__tests__/Dialog.ct.tsx | 66 +++++++++++++------
 1 file changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx
index 7b025db6ad..1f58dab2ea 100644
--- a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx
+++ b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx
@@ -50,10 +50,16 @@ test('should render no padding', async ({ mount, page }) => {
             <Dialog.Trigger data-test-id={DIALOG_TRIGGER_TEST_ID}>
                 <Button>{DIALOG_TRIGGER_TEXT}</Button>
             </Dialog.Trigger>
-            <Dialog.Content padding="none" data-test-id={DIALOG_CONTENT_TEST_ID}>
-                <Dialog.Header data-test-id={DIALOG_HEADER_TEST_ID}>{DIALOG_HEADER_TEXT}</Dialog.Header>
-                <Dialog.Body data-test-id={DIALOG_BODY_TEST_ID}>{DIALOG_BODY_TEXT}</Dialog.Body>
-                <Dialog.Footer data-test-id={DIALOG_FOOTER_TEST_ID}>{DIALOG_FOOTER_TEXT}</Dialog.Footer>
+            <Dialog.Content data-test-id={DIALOG_CONTENT_TEST_ID}>
+                <Dialog.Header padding="none" data-test-id={DIALOG_HEADER_TEST_ID}>
+                    {DIALOG_HEADER_TEXT}
+                </Dialog.Header>
+                <Dialog.Body padding="none" data-test-id={DIALOG_BODY_TEST_ID}>
+                    {DIALOG_BODY_TEXT}
+                </Dialog.Body>
+                <Dialog.Footer padding="none" data-test-id={DIALOG_FOOTER_TEST_ID}>
+                    {DIALOG_FOOTER_TEXT}
+                </Dialog.Footer>
             </Dialog.Content>
         </Dialog.Root>,
     );
@@ -69,10 +75,16 @@ test('should render tight padding', async ({ mount, page }) => {
             <Dialog.Trigger data-test-id={DIALOG_TRIGGER_TEST_ID}>
                 <Button>{DIALOG_TRIGGER_TEXT}</Button>
             </Dialog.Trigger>
-            <Dialog.Content padding="tight" data-test-id={DIALOG_CONTENT_TEST_ID}>
-                <Dialog.Header data-test-id={DIALOG_HEADER_TEST_ID}>{DIALOG_HEADER_TEXT}</Dialog.Header>
-                <Dialog.Body data-test-id={DIALOG_BODY_TEST_ID}>{DIALOG_BODY_TEXT}</Dialog.Body>
-                <Dialog.Footer data-test-id={DIALOG_FOOTER_TEST_ID}>{DIALOG_FOOTER_TEXT}</Dialog.Footer>
+            <Dialog.Content data-test-id={DIALOG_CONTENT_TEST_ID}>
+                <Dialog.Header padding="tight" data-test-id={DIALOG_HEADER_TEST_ID}>
+                    {DIALOG_HEADER_TEXT}
+                </Dialog.Header>
+                <Dialog.Body padding="tight" data-test-id={DIALOG_BODY_TEST_ID}>
+                    {DIALOG_BODY_TEXT}
+                </Dialog.Body>
+                <Dialog.Footer padding="tight" data-test-id={DIALOG_FOOTER_TEST_ID}>
+                    {DIALOG_FOOTER_TEXT}
+                </Dialog.Footer>
             </Dialog.Content>
         </Dialog.Root>,
     );
@@ -88,10 +100,16 @@ test('should render compact padding', async ({ mount, page }) => {
             <Dialog.Trigger data-test-id={DIALOG_TRIGGER_TEST_ID}>
                 <Button>{DIALOG_TRIGGER_TEXT}</Button>
             </Dialog.Trigger>
-            <Dialog.Content padding="compact" data-test-id={DIALOG_CONTENT_TEST_ID}>
-                <Dialog.Header data-test-id={DIALOG_HEADER_TEST_ID}>{DIALOG_HEADER_TEXT}</Dialog.Header>
-                <Dialog.Body data-test-id={DIALOG_BODY_TEST_ID}>{DIALOG_BODY_TEXT}</Dialog.Body>
-                <Dialog.Footer data-test-id={DIALOG_FOOTER_TEST_ID}>{DIALOG_FOOTER_TEXT}</Dialog.Footer>
+            <Dialog.Content data-test-id={DIALOG_CONTENT_TEST_ID}>
+                <Dialog.Header padding="compact" data-test-id={DIALOG_HEADER_TEST_ID}>
+                    {DIALOG_HEADER_TEXT}
+                </Dialog.Header>
+                <Dialog.Body padding="compact" data-test-id={DIALOG_BODY_TEST_ID}>
+                    {DIALOG_BODY_TEXT}
+                </Dialog.Body>
+                <Dialog.Footer padding="compact" data-test-id={DIALOG_FOOTER_TEST_ID}>
+                    {DIALOG_FOOTER_TEXT}
+                </Dialog.Footer>
             </Dialog.Content>
         </Dialog.Root>,
     );
@@ -107,10 +125,14 @@ test('should render comfortable padding', async ({ mount, page }) => {
             <Dialog.Trigger data-test-id={DIALOG_TRIGGER_TEST_ID}>
                 <Button>{DIALOG_TRIGGER_TEXT}</Button>
             </Dialog.Trigger>
-            <Dialog.Content padding="comfortable" data-test-id={DIALOG_CONTENT_TEST_ID}>
-                <Dialog.Header data-test-id={DIALOG_HEADER_TEST_ID}>{DIALOG_HEADER_TEXT}</Dialog.Header>
-                <Dialog.Body data-test-id={DIALOG_BODY_TEST_ID}>{DIALOG_BODY_TEXT}</Dialog.Body>
-                <Dialog.Footer data-test-id={DIALOG_FOOTER_TEST_ID}>
+            <Dialog.Content data-test-id={DIALOG_CONTENT_TEST_ID}>
+                <Dialog.Header padding="comfortable" data-test-id={DIALOG_HEADER_TEST_ID}>
+                    {DIALOG_HEADER_TEXT}
+                </Dialog.Header>
+                <Dialog.Body padding="comfortable" data-test-id={DIALOG_BODY_TEST_ID}>
+                    {DIALOG_BODY_TEXT}
+                </Dialog.Body>
+                <Dialog.Footer padding="comfortable" data-test-id={DIALOG_FOOTER_TEST_ID}>
                     <Button>{DIALOG_FOOTER_TEXT}</Button>
                 </Dialog.Footer>
             </Dialog.Content>
@@ -128,10 +150,14 @@ test('should render spacious padding', async ({ mount, page }) => {
             <Dialog.Trigger data-test-id={DIALOG_TRIGGER_TEST_ID}>
                 <Button>{DIALOG_TRIGGER_TEXT}</Button>
             </Dialog.Trigger>
-            <Dialog.Content padding="spacious" data-test-id={DIALOG_CONTENT_TEST_ID}>
-                <Dialog.Header data-test-id={DIALOG_HEADER_TEST_ID}>{DIALOG_HEADER_TEXT}</Dialog.Header>
-                <Dialog.Body data-test-id={DIALOG_BODY_TEST_ID}>{DIALOG_BODY_TEXT}</Dialog.Body>
-                <Dialog.Footer data-test-id={DIALOG_FOOTER_TEST_ID}>
+            <Dialog.Content data-test-id={DIALOG_CONTENT_TEST_ID}>
+                <Dialog.Header padding="spacious" data-test-id={DIALOG_HEADER_TEST_ID}>
+                    {DIALOG_HEADER_TEXT}
+                </Dialog.Header>
+                <Dialog.Body padding="spacious" data-test-id={DIALOG_BODY_TEST_ID}>
+                    {DIALOG_BODY_TEXT}
+                </Dialog.Body>
+                <Dialog.Footer padding="spacious" data-test-id={DIALOG_FOOTER_TEST_ID}>
                     <Button>{DIALOG_FOOTER_TEXT}</Button>
                 </Dialog.Footer>
             </Dialog.Content>

From 156613bebc76c7520bb81d826ac0ba5f4ea7dcdc Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Tue, 17 Dec 2024 19:55:58 +0100
Subject: [PATCH 3/9] feat: reintroduce global padding control

---
 .../src/components/Dialog/Dialog.tsx          |   7 +
 .../Dialog/styles/dialog.module.scss          | 233 ++++++++++--------
 2 files changed, 144 insertions(+), 96 deletions(-)

diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index f34c95b724..ff23071b8b 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -32,6 +32,11 @@ export type DialogContentProps = {
      * @default true
      */
     rounded?: boolean;
+    /**
+     * Define the padding of the dialog
+     * @default "compact"
+     */
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * The vertical alignment of the divider
      * @default "center"
@@ -179,6 +184,7 @@ export const DialogContent = (
         maxWidth = '800px',
         minWidth = '400px',
         minHeight = '200px',
+        padding = 'compact',
         verticalAlign = 'center',
         'data-test-id': dataTestId = 'fondue-dialog-content',
         showUnderlay = false,
@@ -202,6 +208,7 @@ export const DialogContent = (
                     ref={ref}
                     className={styles.content}
                     onFocus={addShowFocusRing}
+                    data-dialog-padding={padding}
                     data-dialog-rounded={rounded}
                     data-test-id={dataTestId}
                     data-dialog-vertical-align={verticalAlign}
diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss
index ed90e0a4a9..c81c47e083 100644
--- a/packages/components/src/components/Dialog/styles/dialog.module.scss
+++ b/packages/components/src/components/Dialog/styles/dialog.module.scss
@@ -49,134 +49,175 @@
     &[data-dialog-rounded='true'] {
         border-radius: var(--radius-large);
     }
-}
 
-.underlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgb(from var(--box-neutral-mighty-color) r g b / 0);
-    pointer-events: auto;
-
-    &[data-visible='true'] {
-        background-color: rgb(from var(--box-neutral-mighty-color) r g b / 0.5);
+    &[data-dialog-padding='tight'] {
+        .header,
+        .footer,
+        .body {
+            padding: sizeToken(2);
+        }
     }
-}
 
-.sideContent {
-    grid-row: 1;
-    grid-column: 1;
-    min-height: sizeToken(10);
-    min-width: sizeToken(10);
+    &[data-dialog-padding='compact'] {
+        .header,
+        .footer {
+            padding: sizeToken(4);
+        }
 
-    @include sm {
-        grid-row: 1 / span 3;
+        .body {
+            padding: sizeToken(2) sizeToken(4);
+        }
     }
-}
 
-.header {
-    display: flex;
-    height: fit-content;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: var(--heading-weight-number);
-    grid-row: 2;
-    grid-column: 1;
+    &[data-dialog-padding='comfortable'] {
+        .header,
+        .footer {
+            padding: sizeToken(6);
+        }
 
-    &[data-show-border='true'] {
-        border-bottom: var(--line-width) solid var(--line-color);
+        .body {
+            padding: sizeToken(4) sizeToken(6);
+        }
     }
 
-    &[data-dialog-header-padding='tight'] {
-        padding: sizeToken(2);
-    }
+    &[data-dialog-padding='spacious'] {
+        .header,
+        .footer {
+            padding: sizeToken(10);
+        }
 
-    &[data-dialog-header-padding='compact'] {
-        padding: sizeToken(4);
+        .body {
+            padding: sizeToken(6) sizeToken(10);
+        }
     }
 
-    &[data-dialog-header-padding='comfortable'] {
-        padding: sizeToken(6);
-    }
+    .header {
+        display: flex;
+        height: fit-content;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: var(--heading-weight-number);
+        grid-row: 2;
+        grid-column: 1;
 
-    &[data-dialog-header-padding='spacious'] {
-        padding: sizeToken(10);
-    }
+        &[data-show-border='true'] {
+            border-bottom: var(--line-width) solid var(--line-color);
+        }
 
-    @include sm {
-        grid-row: 1;
-        grid-column: 2;
-    }
+        &[data-dialog-header-padding='tight'] {
+            padding: sizeToken(2);
+        }
 
-    > div {
-        width: 100%;
-    }
-}
+        &[data-dialog-header-padding='compact'] {
+            padding: sizeToken(4);
+        }
 
-.footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: sizeToken(2);
-    height: fit-content;
-    font-weight: var(--font-weight-medium);
-    grid-row: 4;
-    grid-column: 1;
+        &[data-dialog-header-padding='comfortable'] {
+            padding: sizeToken(6);
+        }
 
-    &[data-dialog-footer-padding='tight'] {
-        padding: sizeToken(2);
-    }
+        &[data-dialog-header-padding='spacious'] {
+            padding: sizeToken(10);
+        }
 
-    &[data-dialog-footer-padding='compact'] {
-        padding: sizeToken(4);
-    }
+        @include sm {
+            grid-row: 1;
+            grid-column: 2;
+        }
 
-    &[data-dialog-footer-padding='comfortable'] {
-        padding: sizeToken(6);
+        > div {
+            width: 100%;
+        }
     }
 
-    &[data-dialog-footer-padding='spacious'] {
-        padding: sizeToken(10);
-    }
+    .body {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        gap: sizeToken(4);
+        overflow: hidden;
+        grid-row: 3;
+        grid-column: 1;
 
-    &[data-show-border='true'] {
-        border-top: var(--line-width) solid var(--line-color);
-    }
+        &[data-dialog-body-padding='tight'] {
+            padding: sizeToken(2);
+        }
 
-    @include sm {
-        grid-row: 3;
-        grid-column: 2;
-    }
-}
+        &[data-dialog-body-padding='compact'] {
+            padding: sizeToken(2) sizeToken(4);
+        }
 
-.body {
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    gap: sizeToken(4);
-    overflow: hidden;
-    grid-row: 3;
-    grid-column: 1;
+        &[data-dialog-body-padding='comfortable'] {
+            padding: sizeToken(4) sizeToken(6);
+        }
 
-    &[data-dialog-body-padding='tight'] {
-        padding: sizeToken(2);
-    }
+        &[data-dialog-body-padding='spacious'] {
+            padding: sizeToken(6) sizeToken(10);
+        }
 
-    &[data-dialog-body-padding='compact'] {
-        padding: sizeToken(2) sizeToken(4);
+        @include sm {
+            grid-row: 2;
+            grid-column: 2;
+        }
     }
 
-    &[data-dialog-body-padding='comfortable'] {
-        padding: sizeToken(4) sizeToken(6);
+    .footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: sizeToken(2);
+        height: fit-content;
+        font-weight: var(--font-weight-medium);
+        grid-row: 4;
+        grid-column: 1;
+
+        &[data-dialog-footer-padding='tight'] {
+            padding: sizeToken(2);
+        }
+
+        &[data-dialog-footer-padding='compact'] {
+            padding: sizeToken(4);
+        }
+
+        &[data-dialog-footer-padding='comfortable'] {
+            padding: sizeToken(6);
+        }
+
+        &[data-dialog-footer-padding='spacious'] {
+            padding: sizeToken(10);
+        }
+
+        &[data-show-border='true'] {
+            border-top: var(--line-width) solid var(--line-color);
+        }
+
+        @include sm {
+            grid-row: 3;
+            grid-column: 2;
+        }
     }
+}
 
-    &[data-dialog-body-padding='spacious'] {
-        padding: sizeToken(6) sizeToken(10);
+.underlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgb(from var(--box-neutral-mighty-color) r g b / 0);
+    pointer-events: auto;
+
+    &[data-visible='true'] {
+        background-color: rgb(from var(--box-neutral-mighty-color) r g b / 0.5);
     }
+}
+
+.sideContent {
+    grid-row: 1;
+    grid-column: 1;
+    min-height: sizeToken(10);
+    min-width: sizeToken(10);
 
     @include sm {
-        grid-row: 2;
-        grid-column: 2;
+        grid-row: 1 / span 3;
     }
 }

From f04127d3adb6a4525cac7d465075e0ab487614c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Costa?= <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:10:36 +0100
Subject: [PATCH 4/9] Update
 packages/components/src/components/Dialog/Dialog.tsx

Co-authored-by: Noah Waldner <noahwaldner@users.noreply.github.com>
---
 packages/components/src/components/Dialog/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index ff23071b8b..8184dbb8f0 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -79,7 +79,7 @@ export type DialogTriggerProps = {
 
 export type DialogHeaderProps = {
     /**
-     * Define the padding of the dialog
+     * Define the padding for the dialog header
      * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';

From c9d9abedb29f4213a09fa14273843b995d8123d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Costa?= <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:10:41 +0100
Subject: [PATCH 5/9] Update
 packages/components/src/components/Dialog/Dialog.tsx

Co-authored-by: Noah Waldner <noahwaldner@users.noreply.github.com>
---
 packages/components/src/components/Dialog/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index 8184dbb8f0..f4259adcca 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -114,7 +114,7 @@ export type DialogFooterProps = {
 
 export type DialogBodyProps = {
     /**
-     * Define the padding of the dialog
+     * Define the padding for the dialog body
      * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';

From c711afce12b59b3112a46aeb2674cbaab57baa9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Costa?= <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:10:53 +0100
Subject: [PATCH 6/9] Update
 packages/components/src/components/Dialog/Dialog.tsx

Co-authored-by: Noah Waldner <noahwaldner@users.noreply.github.com>
---
 packages/components/src/components/Dialog/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index f4259adcca..9bf9610913 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -99,7 +99,7 @@ export type DialogHeaderProps = {
 
 export type DialogFooterProps = {
     /**
-     * Define the padding of the dialog
+     * Define the padding for the dialog footer
      * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';

From 1f6cd8aea47a8ab85afa0ac29583ade6093ae1d4 Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:19:56 +0100
Subject: [PATCH 7/9] fix: remove defaults

---
 .../components/src/components/Dialog/Dialog.tsx    | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx
index 9bf9610913..30fb4811bb 100644
--- a/packages/components/src/components/Dialog/Dialog.tsx
+++ b/packages/components/src/components/Dialog/Dialog.tsx
@@ -80,7 +80,6 @@ export type DialogTriggerProps = {
 export type DialogHeaderProps = {
     /**
      * Define the padding for the dialog header
-     * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
@@ -100,7 +99,6 @@ export type DialogHeaderProps = {
 export type DialogFooterProps = {
     /**
      * Define the padding for the dialog footer
-     * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
@@ -115,7 +113,6 @@ export type DialogFooterProps = {
 export type DialogBodyProps = {
     /**
      * Define the padding for the dialog body
-     * @default "compact"
      */
     padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     children?: ReactNode;
@@ -224,7 +221,7 @@ DialogContent.displayName = 'Dialog.Content';
 
 export const DialogHeader = (
     {
-        padding = 'compact',
+        padding,
         showBorder = true,
         showCloseButton = true,
         children,
@@ -253,12 +250,7 @@ export const DialogHeader = (
 DialogHeader.displayName = 'Dialog.Header';
 
 export const DialogFooter = (
-    {
-        padding = 'compact',
-        showBorder = true,
-        children,
-        'data-test-id': dataTestId = 'fondue-dialog-footer',
-    }: DialogFooterProps,
+    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
     return (
@@ -277,7 +269,7 @@ export const DialogFooter = (
 DialogFooter.displayName = 'Dialog.Footer';
 
 export const DialogBody = (
-    { padding = 'compact', children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,
+    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
     return (

From 6637a1f693db5d91a4f73279c8b154724cd54834 Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:34:37 +0100
Subject: [PATCH 8/9] fix: global overriding 0 padding children

---
 .../src/components/Dialog/styles/dialog.module.scss  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss
index c81c47e083..269b9df16a 100644
--- a/packages/components/src/components/Dialog/styles/dialog.module.scss
+++ b/packages/components/src/components/Dialog/styles/dialog.module.scss
@@ -104,6 +104,10 @@
             border-bottom: var(--line-width) solid var(--line-color);
         }
 
+        &[data-dialog-header-padding='none'] {
+            padding: sizeToken(0);
+        }
+
         &[data-dialog-header-padding='tight'] {
             padding: sizeToken(2);
         }
@@ -139,6 +143,10 @@
         grid-row: 3;
         grid-column: 1;
 
+        &[data-dialog-body-padding='none'] {
+            padding: sizeToken(0);
+        }
+
         &[data-dialog-body-padding='tight'] {
             padding: sizeToken(2);
         }
@@ -170,6 +178,10 @@
         grid-row: 4;
         grid-column: 1;
 
+        &[data-dialog-footer-padding='none'] {
+            padding: sizeToken(0);
+        }
+
         &[data-dialog-footer-padding='tight'] {
             padding: sizeToken(2);
         }

From b23bf38b0ef9981f9337fd05c0ae8dfc4d4b01db Mon Sep 17 00:00:00 2001
From: Jose Costa <jose.costa@frontify.com>
Date: Wed, 18 Dec 2024 10:38:55 +0100
Subject: [PATCH 9/9] fix: add args to stories

---
 .../src/components/Dialog/Dialog.stories.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/Dialog/Dialog.stories.tsx b/packages/components/src/components/Dialog/Dialog.stories.tsx
index 3a6471c8b1..d3079a7cc7 100644
--- a/packages/components/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/components/src/components/Dialog/Dialog.stories.tsx
@@ -338,13 +338,13 @@ export const WithFocusableContent: Story = {
 };
 
 export const WithNoPadding: Story = {
-    render: () => {
+    render: (args) => {
         return (
             <Dialog.Root>
                 <Dialog.Trigger>
                     <Button>Open dialog</Button>
                 </Dialog.Trigger>
-                <Dialog.Content>
+                <Dialog.Content {...args}>
                     <Dialog.Header padding="none">
                         <Flex justify="space-between" align="center" width="100%" pr="1rem">
                             <Dialog.Title>Header</Dialog.Title>
@@ -370,13 +370,13 @@ export const WithNoPadding: Story = {
 };
 
 export const WithTightPadding: Story = {
-    render: () => {
+    render: (args) => {
         return (
             <Dialog.Root>
                 <Dialog.Trigger>
                     <Button>Open dialog</Button>
                 </Dialog.Trigger>
-                <Dialog.Content>
+                <Dialog.Content {...args}>
                     <Dialog.Header padding="tight">
                         <Flex justify="space-between" align="center" width="100%" pr="1rem">
                             <Dialog.Title>Header</Dialog.Title>
@@ -402,13 +402,13 @@ export const WithTightPadding: Story = {
 };
 
 export const WithCompactPadding: Story = {
-    render: () => {
+    render: (args) => {
         return (
             <Dialog.Root>
                 <Dialog.Trigger>
                     <Button>Open dialog</Button>
                 </Dialog.Trigger>
-                <Dialog.Content>
+                <Dialog.Content {...args}>
                     <Dialog.Header padding="compact">
                         <Flex justify="space-between" align="center" width="100%" pr="1rem">
                             <Dialog.Title>Header</Dialog.Title>
@@ -434,13 +434,13 @@ export const WithCompactPadding: Story = {
 };
 
 export const WithComfortablePadding: Story = {
-    render: () => {
+    render: (args) => {
         return (
             <Dialog.Root>
                 <Dialog.Trigger>
                     <Button>Open dialog</Button>
                 </Dialog.Trigger>
-                <Dialog.Content>
+                <Dialog.Content {...args}>
                     <Dialog.Header padding="comfortable">
                         <Flex justify="space-between" align="center" width="100%" pr="1rem">
                             <Dialog.Title>Header</Dialog.Title>
@@ -466,13 +466,13 @@ export const WithComfortablePadding: Story = {
 };
 
 export const WithSpaciousPadding: Story = {
-    render: () => {
+    render: (args) => {
         return (
             <Dialog.Root>
                 <Dialog.Trigger>
                     <Button>Open dialog</Button>
                 </Dialog.Trigger>
-                <Dialog.Content>
+                <Dialog.Content {...args}>
                     <Dialog.Header padding="spacious">
                         <Flex justify="space-between" align="center" width="100%" pr="1rem">
                             <Dialog.Title>Header</Dialog.Title>