feat: add support of non visible backdrop to the experimental Dialog component (#535)

Author: AlanFnz

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;
     }

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(<Dialog {...defaultProps} isBackdropVisible={false} />);
+
+        expect(screen.getByText('Test Headline')).toBeInTheDocument();
+        expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
 });

src/components/experimental/Dialog/Dialog.tsx

@@ -47,6 +47,7 @@ interface DialogProps extends Omit<BackdropProps, 'isDismissable' | 'isKeyboardD
     dismissButton?: ReactNode;
     actionButton: ReactNode;
     body?: ReactNode;
+    isBackdropVisible?: boolean;
 }
 
 const Dialog = ({
@@ -56,9 +57,10 @@ const Dialog = ({
     dismissButton,
     actionButton,
     body,
+    isBackdropVisible = true,
     ...props
 }: DialogProps): ReactElement => (
-    <Backdrop {...props} isDismissable={false} isKeyboardDismissDisabled>
+    <Backdrop {...props} isDismissable={false} isKeyboardDismissDisabled isBackdropVisible={isBackdropVisible}>
         <StyledModal role={role}>
             <Card>
                 <HeadlineText slot="title">{headline}</HeadlineText>

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 (
+            <>
+                <Button onPress={() => setIsOpen(true)}>Open dialog without backdrop</Button>
+                <Dialog
+                    isOpen={isOpen}
+                    onOpenChange={setIsOpen}
+                    isBackdropVisible={false}
+                    headline="No Backdrop Dialog"
+                    subtitle="This dialog has no visible backdrop"
+                    dismissButton={
+                        <Button emphasis="secondary" onPress={() => setIsOpen(false)}>
+                            Cancel
+                        </Button>
+                    }
+                    actionButton={
+                        <Button
+                            onPress={() => {
+                                action('Action')();
+                                setIsOpen(false);
+                            }}
+                        >
+                            Confirm
+                        </Button>
+                    }
+                />
+            </>
+        );
+    }
+};
+
 export const WithCheckboxesAsBody: Story = {
     render: () => {
         const [isOpen, setIsOpen] = useState(false);