From fe82a23071e670f72a0c226883c39bc42860bd4c Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Mon, 20 Jul 2026 14:02:15 +0200 Subject: [PATCH 1/5] adjust dialog styling --- .../src/components/Dialog/Dialog.stories.tsx | 25 +++++++++ .../src/components/Dialog/Dialog.tsx | 13 ++++- .../Dialog/styles/dialog.module.scss | 56 +++++++++++++++++-- 3 files changed, 86 insertions(+), 8 deletions(-) diff --git a/packages/components/src/components/Dialog/Dialog.stories.tsx b/packages/components/src/components/Dialog/Dialog.stories.tsx index f8da0fbe13..359e894e70 100644 --- a/packages/components/src/components/Dialog/Dialog.stories.tsx +++ b/packages/components/src/components/Dialog/Dialog.stories.tsx @@ -337,6 +337,31 @@ export const WithFocusableContent: Story = { }, }; +export const Fullscreen: Story = { + args: { + size: 'fullscreen', + }, + render: (args) => { + return ( + + + + + + + Header + + None + + + + + + + ); + }, +}; + export const WithNoPadding: Story = { render: (args) => { return ( diff --git a/packages/components/src/components/Dialog/Dialog.tsx b/packages/components/src/components/Dialog/Dialog.tsx index d7123df266..b60d0d87bf 100644 --- a/packages/components/src/components/Dialog/Dialog.tsx +++ b/packages/components/src/components/Dialog/Dialog.tsx @@ -18,6 +18,7 @@ import { useSyncRefs } from '#/hooks/useSyncRefs'; import { useTranslation } from '#/hooks/useTranslation'; import { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities'; +import { Button } from '../Button/Button'; import { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider'; import styles from './styles/dialog.module.scss'; @@ -62,7 +63,11 @@ export type DialogContentProps = { * @default "center" */ verticalAlign?: 'top' | 'center'; - + /** + * Whether the dialog should be fit or fullscreen + * @default "fit" + */ + size?: 'fit' | 'fullscreen'; /** * Define a maximum width for the dialog * @default "800px" @@ -221,6 +226,7 @@ export const DialogContent = ( minHeight = '200px', padding = 'compact', verticalAlign = 'center', + size = 'fit', 'data-test-id': dataTestId = 'fondue-dialog-content', showUnderlay = false, rounded = true, @@ -290,6 +296,7 @@ export const DialogContent = ( data-dialog-padding={padding} data-dialog-rounded={rounded} data-test-id={dataTestId} + data-dialog-size={size} data-dialog-vertical-align={verticalAlign} dir={dir} > @@ -332,7 +339,9 @@ export const DialogHeader = ( aria-label={t('Dialog_close')} {...closeProps} > - + )} diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss index 0a7db94c34..7601798695 100644 --- a/packages/components/src/components/Dialog/styles/dialog.module.scss +++ b/packages/components/src/components/Dialog/styles/dialog.module.scss @@ -34,6 +34,13 @@ } } + &[data-dialog-size='fullscreen'] { + max-height: calc(100vh - 2rem); + height: calc(100vh - 2rem); + max-width: calc(100vw - 2rem); + width: calc(100vw - 2rem); + } + &:has([data-dialog-layout-component]) { display: grid; } @@ -44,10 +51,14 @@ } &[data-dialog-rounded='true'] { - border-radius: var(--border-radius-large); + border-radius: var(--border-radius-x-large); } + --header-divider-padding: #{sizeToken.get(0)}; + --footer-divider-padding: #{sizeToken.get(0)}; &[data-dialog-padding='tight'] { + --header-divider-padding: #{sizeToken.get(2)}; + --footer-divider-padding: #{sizeToken.get(2)}; .header, .footer, .body { @@ -56,6 +67,8 @@ } &[data-dialog-padding='compact'] { + --header-divider-padding: #{sizeToken.get(4)}; + --footer-divider-padding: #{sizeToken.get(4)}; .header, .footer { padding: sizeToken.get(4); @@ -68,6 +81,8 @@ } &[data-dialog-padding='comfortable'] { + --header-divider-padding: #{sizeToken.get(6)}; + --footer-divider-padding: #{sizeToken.get(6)}; .header, .footer { padding: sizeToken.get(6); @@ -80,6 +95,9 @@ } &[data-dialog-padding='spacious'] { + --header-divider-padding: #{sizeToken.get(10)}; + --footer-divider-padding: #{sizeToken.get(10)}; + .header, .footer { padding: sizeToken.get(10); @@ -99,29 +117,42 @@ font-weight: var(--typography-font-weight-medium); grid-row: 2; grid-column: 1; - - &[data-show-border='true'] { - border-block-end: var(--border-width-default) solid var(--color-line-subtle); + position: relative; + + &[data-show-border='true']::after { + content: ''; + display: block; + position: absolute; + height: 0; + bottom: 0; + left: var(--header-divider-padding); + right: var(--header-divider-padding); + border-top: var(--border-width-default) solid var(--color-line-subtle); } &[data-dialog-header-padding='none'] { padding: sizeToken.get(0); + --header-divider-padding: #{sizeToken.get(0)}; } &[data-dialog-header-padding='tight'] { padding: sizeToken.get(2); + --header-divider-padding: #{sizeToken.get(2)}; } &[data-dialog-header-padding='compact'] { padding: sizeToken.get(4); + --header-divider-padding: #{sizeToken.get(4)}; } &[data-dialog-header-padding='comfortable'] { padding: sizeToken.get(6); + --header-divider-padding: #{sizeToken.get(6)}; } &[data-dialog-header-padding='spacious'] { padding: sizeToken.get(10); + --header-divider-padding: #{sizeToken.get(10)}; } & { @@ -190,29 +221,42 @@ font-weight: var(--font-weight-medium); grid-row: 4; grid-column: 1; + position: relative; &[data-dialog-footer-padding='none'] { padding: sizeToken.get(0); + --footer-divider-padding: #{sizeToken.get(0)}; } &[data-dialog-footer-padding='tight'] { padding: sizeToken.get(2); + --footer-divider-padding: #{sizeToken.get(2)}; } &[data-dialog-footer-padding='compact'] { padding: sizeToken.get(4); + --footer-divider-padding: #{sizeToken.get(4)}; } &[data-dialog-footer-padding='comfortable'] { padding: sizeToken.get(6); + --footer-divider-padding: #{sizeToken.get(6)}; } &[data-dialog-footer-padding='spacious'] { padding: sizeToken.get(10); + --footer-divider-padding: #{sizeToken.get(10)}; } - &[data-show-border='true'] { - border-block-start: var(--border-width-default) solid var(--color-line-subtle); + &[data-show-border='true']::before { + content: ''; + display: block; + position: absolute; + height: 0; + top: 0; + left: var(--footer-divider-padding); + right: var(--footer-divider-padding); + border-top: var(--border-width-default) solid var(--color-line-subtle); } & { From 0713871e9dbf390da7fbd6169c852eec07275f11 Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Mon, 20 Jul 2026 14:03:06 +0200 Subject: [PATCH 2/5] add changeset --- .changeset/fifty-jokes-chew.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fifty-jokes-chew.md diff --git a/.changeset/fifty-jokes-chew.md b/.changeset/fifty-jokes-chew.md new file mode 100644 index 0000000000..36b0ed7816 --- /dev/null +++ b/.changeset/fifty-jokes-chew.md @@ -0,0 +1,6 @@ +--- +"@frontify/fondue-components": minor +"@frontify/fondue": patch +--- + +feat: adjust dialog component styling From 28ecb01cff1ccdd3f7eea1c908d984a26b22e423 Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Mon, 20 Jul 2026 16:10:28 +0200 Subject: [PATCH 3/5] remove border --- .../components/src/components/Dialog/styles/dialog.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/Dialog/styles/dialog.module.scss b/packages/components/src/components/Dialog/styles/dialog.module.scss index 7601798695..863fa1f38f 100644 --- a/packages/components/src/components/Dialog/styles/dialog.module.scss +++ b/packages/components/src/components/Dialog/styles/dialog.module.scss @@ -14,7 +14,6 @@ transform: translateX(-50%) translateY(-50%); background-color: var(--color-surface-default); box-shadow: var(--shadow-default); - border: var(--border-width-default) solid var(--color-line-subtle); z-index: 1; width: calc(100vw - 2rem); max-width: var(--dialog-max-width); From e6321ac9be3ea9fd6fe92343a7a7dd915f02ad5c Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Mon, 20 Jul 2026 16:12:14 +0200 Subject: [PATCH 4/5] add tests --- .../components/Dialog/__tests__/Dialog.ct.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx index 425aaee296..485d979ea9 100644 --- a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx +++ b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx @@ -472,6 +472,46 @@ test('should have its content to expand to max width set by user', async ({ moun await expect(contentElement).toHaveCSS('width', '810px'); }); +test('should render fit size by default', async ({ mount, page }) => { + await mount( + + + + + + {DIALOG_HEADER_TEXT} + {DIALOG_BODY_TEXT} + + , + ); + const contentElement = page.getByTestId(DIALOG_CONTENT_TEST_ID); + await expect(contentElement).toHaveAttribute('data-dialog-size', 'fit'); +}); + +test('should render fullscreen size', async ({ mount, page }) => { + await mount( + + + + + + {DIALOG_HEADER_TEXT} + {DIALOG_BODY_TEXT} + + , + ); + const contentElement = page.getByTestId(DIALOG_CONTENT_TEST_ID); + await expect(contentElement).toHaveAttribute('data-dialog-size', 'fullscreen'); + + // Fullscreen expands the dialog to the viewport minus a 2rem (32px) inset. + const viewport = page.viewportSize(); + expect(viewport).not.toBeNull(); + if (viewport) { + await expect(contentElement).toHaveCSS('width', `${viewport.width - 32}px`); + await expect(contentElement).toHaveCSS('height', `${viewport.height - 32}px`); + } +}); + test('should focus first input in body when dialog opens', async ({ mount, page }) => { const component = await mount( From f39025e861bbf18ce651cd06d9f6024dfd4a6d70 Mon Sep 17 00:00:00 2001 From: Noah Waldner Date: Tue, 21 Jul 2026 08:01:11 +0200 Subject: [PATCH 5/5] adjust test --- .../src/components/Dialog/__tests__/Dialog.ct.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx index 485d979ea9..c70ea9d3af 100644 --- a/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx +++ b/packages/components/src/components/Dialog/__tests__/Dialog.ct.tsx @@ -422,8 +422,14 @@ test('should render borders on footer and header by default', async ({ mount, pa ); const headerElement = page.getByTestId(DIALOG_HEADER_TEST_ID); const footerElement = page.getByTestId(DIALOG_FOOTER_TEST_ID); - await expect(headerElement).toHaveCSS('border-bottom-width', '1px'); - await expect(footerElement).toHaveCSS('border-top-width', '1px'); + const headerBorderWidth = await headerElement.evaluate( + (element) => getComputedStyle(element, '::after').borderTopWidth, + ); + const footerBorderWidth = await footerElement.evaluate( + (element) => getComputedStyle(element, '::before').borderTopWidth, + ); + expect(headerBorderWidth).toBe('1px'); + expect(footerBorderWidth).toBe('1px'); }); test('should not render borders when showBorder is false', async ({ mount, page }) => {