fix: Dialog 背景に z-index を追加 #4910
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
uknmr
requested review from
s-sasaki-0529 and
atzzCokeK
and removed request for
a team
uknmr
force-pushed
the
fix-DialogOverlap-zIndex
branch
from
05941e5 to
185c669
Compare
| @@ -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 }} | |||
There was a problem hiding this comment.
[ask]
マジックナンバーで良いです？軽く調べただけですが、一応テーマには z-index 定義があったので、ちゃんと強弱関係管理できるように変数化されてるのかなぁと気になりました。
smarthr-ui/packages/smarthr-ui/src/themes/createZIndex.ts
Lines 21 to 28 in db34941
There was a problem hiding this comment.
基本的には z-index: 1 で済むところを、Bootstrap などが使わている旧環境のために大きな値を使っている認識なので Story 上でプロダクトを疑似再現するマジックナンバーで良いと考えています。
Dialog の戻した z-index は定義値を使っています。
s-sasaki-0529
approved these changes
Sep 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
関連URL
概要
一部環境においてスタッキングコンテキストの発生した特定要素がダイアログ背景よりも上に現れてしまう不具合を修正します。
変更内容
ダイアログ背景の
shr-z-overlap-baseを消したのが原因だったため、戻しました。https://github.com/kufu/smarthr-ui/pull/4848/files#diff-41a98e1c7f207238823888de15eee54e035b490d73a741f885cd1e7b834a15ebL20
確認方法
各ダイアログの Story にスタッキングコンテキストを追加したので、Chromatic に差分がでていなければ問題ありません。