Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Tearsheet layout updates: Masthead coverage and inset token alignment

オープン
#985 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
typescript
領域
design, frontend

調査の方向性

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 の本文から書いたものです。

説明

PF Team

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:

  1. 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.

  1. 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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

patternfly/react-component-groups のほかの issue

patternfly/react-component-groups の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。