patternfly / patternfly/patternfly-react
Bug - ModalFooter - Wrapping a Button in a ModalFooter with a Tooltip changes margins
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the ModalFooter spacing styles and the Button and Tooltip component implementations. Reproduce the layout with a directly nested button and with a button wrapped in a Tooltip, then inspect the relevant component tests. Done means both arrangements preserve the intended spacing without the wrapped button shifting the adjacent button.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100