ButtonGroup styling is not compatible with new IconButton tooltips #4790
Description
Description
When wrapping a group of IconButton components with a ButtonGroup while using version 35.26.0 or higher, the styling of the button group and tooltips appears incorrect. Specifically:
- Tooltips lose their border radius
- The last button in the last does not have correct border radius
Here is an image displaying the issue:
- The plus icon button should be rounded on the right side
- The tooltips should always be fully rounded in each corner.
It looks like the issue stems from the fact that the button group is styling all descendents, which happens to include the new tooltip components, which are rendered as siblings of the buttons.
This might be fixed by updating the selector to exclude popovers:
/* Before */
&& > *:not([data-loading-wrapper]) { /* ... */ }
/* After (proposed) */
&& > *:not([data-loading-wrapper]):not([popover]) { /* ... */ }Other fixes might be necessary, but I think this is the core issue.
Steps to reproduce
This issue can be seen in the Primer ButtonGroup documentation: https://primer.style/react/ButtonGroup#with-icon-buttons.
It can be reproduced by wrapping a group of labeled icon buttons with a ButtonGroup:
<ButtonGroup>
<IconButton aria-label="Zoom out" icon={DashIcon} />
<IconButton aria-label="Zoom in" icon={PlusIcon} />
</ButtonGroup>Version
v35.26.0
Browser
No response