fix a bug where when you open a modal from a popover, the popover is not blurred

Author: ndelangen

code/core/src/components/components/Modal/Modal.styled.tsx

@@ -83,7 +83,7 @@ export const Overlay = styled.div<{
   inset: 0,
   width: '100%',
   height: '100%',
-  zIndex: 90,
+  zIndex: 100000,
   '@media (prefers-reduced-motion: no-preference)': {
     animation:
       $status === 'exiting' || $status === 'preExit'
@@ -106,7 +106,7 @@ export const Container = styled.div<{
     boxShadow: '0px 4px 67px 0px #00000040',
     position: 'absolute',
     overflow: 'auto',
-    zIndex: 100,
+    zIndex: 100000,
 
     '&:focus-visible': {
       outline: 'none',

code/core/src/components/components/Popover/Popover.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { Button } from 'storybook/internal/components';
+import { Button, Modal, PopoverProvider } from 'storybook/internal/components';
 
 import { CloseAltIcon } from '@storybook/icons';
 
+import { screen } from 'storybook/test';
 import { fn } from 'storybook/test';
 
 import preview from '../../../../../.storybook/preview';
@@ -146,3 +147,34 @@ export const WithoutColor = meta.story({
     color: 'none',
   },
 });
+
+const PopoverWithModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div>
+      <Button ariaLabel={false} onClick={() => setIsOpen(true)}>
+        Open modal
+      </Button>
+      <Modal open={isOpen} onOpenChange={setIsOpen}>
+        <div>Hello</div>
+      </Modal>
+    </div>
+  );
+};
+
+export const WithModal = meta.story({
+  render: () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(true);
+    return (
+      <>
+        <PopoverProvider visible={isPopoverOpen} popover={<PopoverWithModal />}>
+          <Button ariaLabel={false}>Open popover</Button>
+        </PopoverProvider>
+        <div style={{ width: 100, height: 100, backgroundColor: 'thistle' }}></div>
+      </>
+    );
+  },
+  play: async ({ userEvent }) => {
+    await userEvent.click(screen.getByRole('button', { name: 'Open modal' }));
+  },
+});