patternfly / patternfly/patternfly-react
Bug - ModalFooter - Wrapping a Button in a ModalFooter with a Tooltip changes margins
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Finde die Abstände definierenden Styles von ModalFooter sowie die Implementierungen der Komponenten Button und Tooltip. Stelle das Layout sowohl mit einem direkt verschachtelten Button als auch mit einem in einen Tooltip eingeschlossenen Button nach und prüfe anschließend die relevanten Komponententests. Erledigt ist die Aufgabe, wenn beide Anordnungen den vorgesehenen Abstand beibehalten, ohne dass der eingeschlossene Button den benachbarten Button verschiebt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 68/100