From 103922566a7a6465b8f849e7beda25244fc44e1e Mon Sep 17 00:00:00 2001
From: KANAMORI Yu <y.kinmori@gmail.com>
Date: Wed, 11 Sep 2024 15:13:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Dialog=20=E8=83=8C=E6=99=AF=E3=81=AB=20z?=
 =?UTF-8?q?-index=20=E3=82=92=E8=BF=BD=E5=8A=A0=20(#4910)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx | 2 ++
 packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx  | 4 ++++
 packages/smarthr-ui/src/components/Dialog/DialogOverlap.tsx   | 2 +-
 .../src/components/Dialog/MessageDialog.stories.tsx           | 2 ++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx
index 9d56a50184..d319af2c03 100644
--- 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
index 370381e5c4..c5b3c21fd4 100644
--- 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
index 39c192de21..75aa10f781 100644
--- 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
index 291dbabbf9..35ed591d5a 100644
--- 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>