diff --git a/src/components/experimental/Backdrop/Backdrop.tsx b/src/components/experimental/Backdrop/Backdrop.tsx index 72fb9616..19801c9f 100644 --- a/src/components/experimental/Backdrop/Backdrop.tsx +++ b/src/components/experimental/Backdrop/Backdrop.tsx @@ -3,20 +3,33 @@ import { ModalOverlayProps, ModalOverlay } from 'react-aria-components'; import { getSemanticHslValue } from '../../../essentials/experimental'; import { Elevation } from '../../../essentials'; -type BackdropProps = ModalOverlayProps; +interface BackdropProps extends ModalOverlayProps { + isBackdropVisible?: boolean; +} -const Backdrop = styled(ModalOverlay)` +const Backdrop = styled(ModalOverlay)<{ isBackdropVisible?: boolean }>` position: fixed; top: 0; left: 0; width: 100vw; height: var(--visual-viewport-height); - background: hsla(${getSemanticHslValue('on-surface')}, 60%); + background: ${props => + props.isBackdropVisible !== false ? `hsla(${getSemanticHslValue('on-surface')}, 60%)` : 'transparent'}; display: flex; align-items: center; justify-content: center; z-index: ${Elevation.DIMMING}; + ${props => + props.isBackdropVisible === false && + ` + pointer-events: none; + + & > * { + pointer-events: auto; + } + `} + &[data-entering] { animation: backdrop-fade 200ms; } diff --git a/src/components/experimental/Dialog/Dialog.spec.tsx b/src/components/experimental/Dialog/Dialog.spec.tsx index e53dcb72..f7d78ba6 100644 --- a/src/components/experimental/Dialog/Dialog.spec.tsx +++ b/src/components/experimental/Dialog/Dialog.spec.tsx @@ -92,4 +92,12 @@ describe('Dialog', () => { fireEvent.click(screen.getByLabelText('Accept Terms')); expect(handleCheckbox).toHaveBeenCalled(); }); + + it('correctly renders the component when isBackdropVisible is false', () => { + render(); + + expect(screen.getByText('Test Headline')).toBeInTheDocument(); + expect(screen.getByText('Test Subtitle')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + }); }); diff --git a/src/components/experimental/Dialog/Dialog.tsx b/src/components/experimental/Dialog/Dialog.tsx index 187d23e7..67714833 100644 --- a/src/components/experimental/Dialog/Dialog.tsx +++ b/src/components/experimental/Dialog/Dialog.tsx @@ -47,6 +47,7 @@ interface DialogProps extends Omit ( - + {headline} diff --git a/src/components/experimental/Dialog/docs/Dialog.stories.tsx b/src/components/experimental/Dialog/docs/Dialog.stories.tsx index 43709de1..f2cb87e3 100644 --- a/src/components/experimental/Dialog/docs/Dialog.stories.tsx +++ b/src/components/experimental/Dialog/docs/Dialog.stories.tsx @@ -19,6 +19,13 @@ const meta: Meta = { component: Dialog, parameters: { layout: 'centered' + }, + argTypes: { + isBackdropVisible: { + control: 'boolean', + description: 'Whether to show the backdrop behind the dialog', + defaultValue: true + } } }; @@ -93,6 +100,40 @@ export const Alert: Story = { } }; +export const WithInvisibleBackdrop: Story = { + render: () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + + setIsOpen(false)}> + Cancel + + } + actionButton={ + + } + /> + + ); + } +}; + export const WithCheckboxesAsBody: Story = { render: () => { const [isOpen, setIsOpen] = useState(false);