fix: ModelessDialog に渡した className が当たる場所を変更

[uknmr]

関連URL

概要

ModelessDialog の重なり順序を変えたいが、z-index 値が固定で上書けない問題を修正しました。

変更内容

コンポーネントに渡した className をもう一つ外側の要素にあたるように修正しました。

styled-components を使った拡張をしている場合は見直しが必要になる可能性があります。

// ## Before
const HogeModelessDialog = styled(ModelessDialog)`
  display: block; // 1

  > div {
    display: block; // 2
  }

  .smarthr-ui-ModelessDialog-header {
    display: block;  // 3

    > span {
      display: block; // 4
    }
  }
`

// ## After
const HogeModelessDialog = styled(ModelessDialog)`
  // 直下に書いていたものは .smarthr-ui-ModelessDialog に当ててください。
  .smarthr-ui-ModelessDialog {
    display: block; // 1'

    > div {
      display: block; // 2'
    }
  }

  // クラスセレクタなど、直下に書いていないスタイルへの影響はありません。
  .smarthr-ui-ModelessDialog-header {
    display: block;  // 3'

    > span {
      display: block; // 4'
    }
  }
`

確認方法

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4978

commit: 212b2d5

[s-sasaki-0529]

👍️ 社内リポジトリのコードを検索する限りは、変更の影響を受けるのは無いように見えます。