patternfly / patternfly/patternfly-react
Bug - ModalFooter - Wrapping a Button in a ModalFooter with a Tooltip changes margins
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
We have a button in a ModalFooter that might be disabled and then has a Tooltip to explain the reason. The Button has a wrong margin-inline-end style when it has a Tooltip.
Without theTooltip:
With the Tooltip:
You can see that the "Cancel" button has moved to the left a bit and is now touching the "Create and edit" button.
The code is something like this:
...
<ModalFooter>
<Button>Create and run</Button>
<Tooltip content={...}><Button isAriaDisabled>Create and edit</Button></Tooltip>
</ModalFooter>
There is some CSS somewhere that gives the Buttons in a ModalFooter a margin-inline-end value of 8px. This CSS however only applies to Buttons that are directly in a ModalFooter. It will be ignored for the Button wrapped in a Tooltip.
(Since the ModalFooter is a flex anyway, I would expect the button spacing to be handled by the column-gap of that, and not by margin manipulations, but maybe that doesn't work for some reason.)
Jira Issue: PF-4411
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
ModalFooter の間隔スタイルと、Button および Tooltip コンポーネントの実装を確認します。button を直接ネストした場合と、Tooltip でラップした場合の両方でレイアウトを再現し、その後、関連するコンポーネントテストを確認します。両方の配置で意図した間隔が維持され、ラップした button によって隣接する button がずれなければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 68/100