patternfly / patternfly/patternfly-react

Review <Icon> usage

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

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

PF Team Stale
主要言語
TypeScript
スター
862
フォーク
392
平均マージ
4日 8時間
マージ済み PR(30日)
9

説明

A follow up from https://github.com/patternfly/patternfly-react/pull/11005

In the backstop run for the above PR, I spotted an issue we should look into.

Screenshot 2024-11-14 at 1 24 52 PM

That's from this right-to-left table demo and this file - https://github.com/patternfly/patternfly-react/blob/6b56f7f777129a15c515719a83d8fb45fa812322/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx#L259-L270

We use <Icon shouldMirrorRTL /> as the preferred way of including an icon that should mirror/flip if the document is set to dir="rtl", so I'm thinking we need to keep that there, and add isInline to let the <Icon> inherit the color and font-size from its parent instead of using our default icon color/size.

And just looking at that demo, looks like we have that same issue in the labels, too. For example, this one https://github.com/patternfly/patternfly-react/blob/6b56f7f777129a15c515719a83d8fb45fa812322/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx#L212-L221

I updated the first label in the table and added .pf-m-inline to the .pf-v6-c-icon in dev tools and you can see it resized the icon since icons in labels are smaller than our default icon size

Screenshot 2024-11-14 at 1 39 48 PM

I'm not sure how big of a lift it would be, but I would probably suggest we just review each use of <Icon> in the examples/demos and if it's used in a component that wants to style the icon color/size, we consider 1) removing <Icon> if it isn't necessary, and 2) adding isInline if it is necessary.

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

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

はじめの一歩

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

調査の方向性

packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx から始め、特に参照されている paginated-table labels と controls を確認し、関連する backstop result をレビューします。examples と demos の各 Icon の使用について、不要な wrappers や isInline styling の不足がないか確認します。影響を受ける icons が parent の color と size を継承し、必要な箇所では RTL mirroring を維持できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

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

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