patternfly / patternfly/patternfly-react
Bug - ModalFooter - Wrapping a Button in a ModalFooter with a Tooltip changes margins
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 862
- Forks
- 392
- Merge moyen
- 4 j 8 h
- PR mergées (30 j)
- 9
Description
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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Repérez les styles d’espacement de ModalFooter ainsi que les implémentations des composants Button et Tooltip. Reproduisez la mise en page avec un bouton directement imbriqué, puis avec un bouton enveloppé dans un Tooltip, et examinez ensuite les tests pertinents des composants. C’est terminé lorsque les deux dispositions conservent l’espacement prévu sans que le bouton enveloppé ne décale le bouton adjacent.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- Calme
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 68/100