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 (
+ <>
+
+