fix: wrapping content of dialog in overlay to restore pointer-events (#1930)

Author: Adzouz

.changeset/tricky-plants-sip.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: wrapping content of dialog in overlay to restore pointer-events

docs/stories/04-components/Dialog.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Button, Dialog, Flex, Radio } from '@strapi/design-system';
+import { Button, Dialog, Field, Flex, Radio, SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { WarningCircle } from '@strapi/icons';
 import { outdent } from 'outdent';
 
@@ -33,20 +33,33 @@ const meta: Meta<DialogArgs> = {
         code: outdent`
           <Dialog.Root>
             <Dialog.Trigger>
-              <Button variant="danger">Delete</Button>
+              <Button variant="danger">Choose a fruit</Button>
             </Dialog.Trigger>
             <Dialog.Content>
               <Dialog.Header>Confirmation</Dialog.Header>
-              <Dialog.Body icon={<WarningCircle fill="danger600" />}>Are you sure you want to delete this?</Dialog.Body>
+              <Dialog.Body>
+                <Field.Root width="100%">
+                  <Field.Label>What is your favourite fruit?</Field.Label>
+                  <SingleSelect placeholder="Pick a fruit...">
+                    <SingleSelectOption value="apple">Apple</SingleSelectOption>
+                    <SingleSelectOption value="avocado">Avocado</SingleSelectOption>
+                    <SingleSelectOption value="banana">Banana</SingleSelectOption>
+                    <SingleSelectOption value="kiwi">Kiwi</SingleSelectOption>
+                    <SingleSelectOption value="mango">Mango</SingleSelectOption>
+                    <SingleSelectOption value="orange">Orange</SingleSelectOption>
+                    <SingleSelectOption value="strawberry">Strawberry</SingleSelectOption>
+                  </SingleSelect>
+                </Field.Root>
+              </Dialog.Body>
               <Dialog.Footer>
                 <Dialog.Cancel>
                   <Button fullWidth variant="tertiary">
                     Cancel
                   </Button>
                 </Dialog.Cancel>
                 <Dialog.Action>
-                  <Button fullWidth variant="danger-light">
-                    Yes, delete
+                  <Button fullWidth variant="success-light">
+                    Confirm
                   </Button>
                 </Dialog.Action>
               </Dialog.Footer>
@@ -60,24 +73,37 @@ const meta: Meta<DialogArgs> = {
     return (
       <Dialog.Root {...args}>
         <Dialog.Trigger>
-          <Button variant="danger">Delete</Button>
+          <Button variant="default">Fruit manager</Button>
         </Dialog.Trigger>
         <Dialog.Content
           onOpenAutoFocus={onOpenAutoFocus}
           onCloseAutoFocus={onCloseAutoFocus}
           onEscapeKeyDown={onEscapeKeyDown}
         >
           <Dialog.Header>Confirmation</Dialog.Header>
-          <Dialog.Body icon={icon}>Are you sure you want to delete this?</Dialog.Body>
+          <Dialog.Body>
+            <Field.Root width="100%">
+              <Field.Label>What is your favourite fruit?</Field.Label>
+              <SingleSelect placeholder="Pick a fruit...">
+                <SingleSelectOption value="apple">Apple</SingleSelectOption>
+                <SingleSelectOption value="avocado">Avocado</SingleSelectOption>
+                <SingleSelectOption value="banana">Banana</SingleSelectOption>
+                <SingleSelectOption value="kiwi">Kiwi</SingleSelectOption>
+                <SingleSelectOption value="mango">Mango</SingleSelectOption>
+                <SingleSelectOption value="orange">Orange</SingleSelectOption>
+                <SingleSelectOption value="strawberry">Strawberry</SingleSelectOption>
+              </SingleSelect>
+            </Field.Root>
+          </Dialog.Body>
           <Dialog.Footer>
             <Dialog.Cancel>
               <Button fullWidth variant="tertiary">
                 Cancel
               </Button>
             </Dialog.Cancel>
             <Dialog.Action>
-              <Button fullWidth variant="danger-light">
-                Yes, delete
+              <Button fullWidth variant="success-light">
+                Confirm
               </Button>
             </Dialog.Action>
           </Dialog.Footer>
@@ -108,7 +134,7 @@ export const Children = {
     return (
       <Dialog.Root {...args}>
         <Dialog.Trigger>
-          <Button variant="danger">Delete</Button>
+          <Button variant="default">Fruit manager</Button>
         </Dialog.Trigger>
         <Dialog.Content
           onOpenAutoFocus={onOpenAutoFocus}

packages/design-system/src/components/Dialog/Dialog.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import { styled } from 'styled-components';
 
+import { setOpacity } from '../../helpers/setOpacity';
 import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography, TypographyComponent, TypographyProps } from '../../primitives/Typography';
 import { ANIMATIONS } from '../../styles/motion';
@@ -38,18 +39,19 @@ interface ContentProps extends AlertDialog.AlertDialogContentProps {}
 const Content = React.forwardRef<ContentElement, ContentProps>((props, forwardedRef) => {
   return (
     <AlertDialog.Portal>
-      <Overlay />
-      <ContentImpl ref={forwardedRef} {...props} />
+      <Overlay>
+        <ContentImpl ref={forwardedRef} {...props} />
+      </Overlay>
     </AlertDialog.Portal>
   );
 });
 
 const Overlay = styled(AlertDialog.Overlay)`
-  background-color: ${(props) => props.theme.colors.neutral800};
+  background: ${(props) => setOpacity(props.theme.colors.neutral800, 0.2)};
   position: fixed;
   inset: 0;
   z-index: ${(props) => props.theme.zIndices.overlay};
-  opacity: 0.2;
+  will-change: opacity;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: ${ANIMATIONS.overlayFadeIn} ${(props) => props.theme.motion.timings['200']}