Review <Icon> usage
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
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 の本文から書いたものです。
説明
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.
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
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.
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR（30日）
- 9
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
patternfly/patternfly-react のほかの issue
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12651 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
patternfly/patternfly-react#12617 · コメント 1 件 ·
-
PF Team
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12610 · コメント 1 件 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
patternfly/patternfly-react#12600 ·
patternfly/patternfly-react の issue をすべて見る
似ている issue
-
Type/Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
OpenNSW/nsw-srilanka#497 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
0xMiden/bridge-portal#132 ·
-
react-doctor severity:warning tech-debt
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
digidem/comapeo-cloud-app#403 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100