Bootstrap のバージョンアップに伴うデザイン修正 #6133
Merged
+349
−147
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.
概要(Overview・Refs Issue)
Fixes #6095
Bootstrap 5.1.3 の button-variant を移植
方針(Policy)
Bootstrap 5.2 から CSS variables に変更されたため、Bootstrap 5.1.3 の button-variant を移植することで互換性を維持する
実装に関する補足(Appendix)
Bootstrap 5.2 から CSS variables を使用して、カスタマイズするように変更された。
https://getbootstrap.com/docs/5.3/migration/#more-css-variables
その影響で、
button-variant
の実装が大幅に変更され、従来どおりの色指定ができなくなってしまった模様https://github.com/twbs/bootstrap/blob/edf9c40956d19e6ab3f9151bfe0dfac6be06fa21/scss/mixins/_buttons.scss#L7-L60
フロント側の scss は、 bootstrap のカラーテーマを使用しておらず、 mixin の仕組みのみ流用している。
今回影響を受けたのは
button-variant
のみなので、 Bootstrap 5.1.3 の button-variant を移植すれば問題ないhttps://github.com/twbs/bootstrap/blob/1a6fdfae6be09b09eaced8f0e442ca6f7680a61e/scss/mixins/_buttons.scss#L7-L74
管理画面側は、 bootstrap のカラーテーマをそのまま流用しているため影響無いはず。
テスト(Test)
各所のボタンが正常に表示されるのを確認
相談(Discussion)
本質的には CSS variables を使用してカスタマイズした方が良い。そうすれば scss のコンパイルも必要無くなり、 minify も有効に活用できる
マイナーバージョン互換性保持のための制限事項チェックリスト
レビュワー確認項目