Using `<Tooltip>` within `<ButtonGroup>` affects styling

tmelliottjr commented 10 months ago

Description

Using <Tooltip> within <ButtonGroup> affects the group's styling.

Expected:

Image showing expected output

Actual:

Image showing actual output

Steps to reproduce

<ButtonGroup>
 <Tooltip aria-label="Some text">
  <Button>😜</Button>
 </Tooltip>
 <Tooltip aria-label="Some more text">
  <Button>😳</Button>
 </Tooltip>
 <Tooltip aria-label="Even more text">
  <Button>😭</Button>
 </Tooltip>
</ButtonGroup>

Version

v36.5.0

Browser

Chrome

github-actions[bot] commented 10 months ago

Uh oh! @tmelliottjr, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

github-actions[bot] commented 10 months ago

Uh oh! @tmelliottjr, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

siddharthkp commented 10 months ago

Ah, yes. This is definitely a bug! I have added this to the agenda for the next prioritisation call (every monday)

@broccolinisoup FYI, something to take care of in https://github.com/primer/react/pull/4046 as well!

broccolinisoup commented 10 months ago

Thanks @siddharthkp for the ping! When the button group have text buttons with tooltip, there is a style issue there too. This time, the tooltip style is broken; doesn't have the rounded borders. I suspect this is the issue in the tooltip itself. I added this as a task under https://github.com/github/primer/issues/1244 and will look into it.

Button group that includes three text buttons. The first one has tooltip and the tooltip appears without any radius on the borders.

github-actions[bot] commented 3 months ago

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

broccolinisoup commented 3 months ago

not stale

primer / react