fix: Dialog 背景に z-index を追加 (#4910)

kufu · Sep 11, 2024 · 1039225 · 1039225
1 parent e5976a0
commit 1039225
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx
@@ -52,6 +52,8 @@ export const Action_Dialog: StoryFn = () => {
         aria-haspopup="dialog"
         aria-controls="dialog-action"
         data-test="dialog-trigger"
+        // 別のスタッキングコンテキストがダイアログ背景よりも上に来ないことを確認するための記述
+        style={{ position: 'relative', zIndex: 21 }}
       >
         ActionDialog
       </Button>

diff --git a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx
@@ -73,6 +73,8 @@ export const Default: StoryFn = () => {
           aria-haspopup="dialog"
           aria-controls="dialog-default"
           data-test="dialog-trigger"
+          // 別のスタッキングコンテキストがダイアログ背景よりも上に来ないことを確認するための記述
+          style={{ zIndex: 21, position: 'relative' }}
         >
           Dialog
         </Button>
@@ -188,6 +190,8 @@ export const Form_Dialog: StoryFn = () => {
         aria-haspopup="dialog"
         aria-controls="dialog-form"
         data-test="dialog-trigger"
+        // 別のスタッキングコンテキストがダイアログ背景よりも上に来ないことを確認するための記述
+        style={{ position: 'relative', zIndex: 21 }}
       >
         FormDialog
       </Button>

diff --git a/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx b/packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx
@@ -20,7 +20,7 @@ type Props = PropsWithChildren<
 
 const dialogOverlap = tv({
   base: [
-    'shr-absolute shr-inset-0',
+    'shr-absolute shr-inset-0 shr-z-overlap-base',
     '[&.shr-dialog-transition-enter]:shr-opacity-0',
     '[&.shr-dialog-transition-enter-active]:shr-transition-opacity',
     '[&.shr-dialog-transition-enter-active]:shr-duration-300',

diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog.stories.tsx
@@ -61,6 +61,8 @@ export const Message_Dialog: StoryFn = () => {
         aria-haspopup="dialog"
         aria-controls="dialog-message"
         data-test="dialog-trigger"
+        // 別のスタッキングコンテキストがダイアログ背景よりも上に来ないことを確認するための記述
+        style={{ position: 'relative', zIndex: 21 }}
       >
         MessageDialog
       </Button>