Tearsheet layout updates: Masthead coverage and inset token alignment
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- typescript
調査の方向性
Start by reviewing the Tearsheet component group and the referenced original PR, then inspect how masthead coverage and the current 4rem inset are implemented. Compare the layout logic with --pf-t--global--spacer--inset--page-chrome and determine the configuration needed for masthead visibility. Done means both masthead behavior and page-chrome alignment match the proposed requirements.
索引モデルが issue の本文から書いたものです。
説明
Following design demos and PR feedback, two layout refinements were identified for the Tearsheet component group to maximize vertical screen space and fix horizontal edge alignment with page chrome.
Proposed Updates:
- Masthead Coverage Support
-
Problem: Tearsheets currently display below the masthead, limiting available vertical space compared to large modals.
-
Solution: Allow tearsheets to overlap/cover the masthead area by default or via configuration.
-
Prop Idea: Introduce a prop like coverMasthead (boolean) or showMasthead (boolean) so consumers can toggle masthead visibility based on workflow needs.
- Page Chrome Inset Alignment
-
Problem: The current 4rem (32px) inset creates an ~8px mismatch against standard page chrome (24px inset via --pf-t--global--spacer--inset--page-chrome), causing a sliver of the underlying page container to show along the right edge.
-
Solution: Update width and max-width CSS logic to leverage the design token rather than hardcoded rem values.
-
context from @mcoker's comment from the original PR:
Just an observation (non-blocking IMO) is that the tearsheet inset is about 8px more than our default page chrome/layout inset, so you can see a small bit of the page container behind/along the right edge of the tearsheet.
This is due to the 4rem inset of the tearsheet creating a 32px (2rem) gap on either side, where the page container behind it uses a 24px inset (comes from --pf-t--global--spacer--inset--page-chrome). I imagine the fix would be something like changing the width/max-width to use calc(100% - var(--pf-t--global--spacer--inset--page-chrome * 4) for stack 0, and calc(100% - var(--pf-t--global--spacer--inset--page-chrome * 2) for stack 1. Though if you do that, it's worth noting you should import the tglobalspacerinsetpage*chrome @react-tokens token for the token var instead of hardcoding it.
@GAUNSD @thatblindgeye
Jira Issue: PF-4685
- 主要言語
- TypeScript
- スター
- 10
- フォーク
- 40
- 平均マージ
- 3日 22時間
- マージ済み PR(30日)
- 4
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
patternfly/react-component-groups のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
patternfly/react-component-groups#968 · コメント 1 件 ·
-
PF Team
patternfly/react-component-groups#979 · 担当者 1 名 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
-
難易度 3/5 1〜2日 初心者へのやさしさ 55/100
patternfly/react-component-groups#942 · コメント 1 件 ·
-
rehor-ai-patternfly
難易度 2/5 1〜3時間 初心者へのやさしさ 58/100
patternfly/react-component-groups#909 · コメント 1 件 ·
patternfly/react-component-groups の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
-
security
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
IBM/node-sdk-core#373 ·
-
e2e-failure ready-to-code
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
-
chore
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100