IconButton: Introduce tooltip by default

[broccolinisoup]

This PR introduces the tooltip behaviour on icon buttons with an option to be able to disable it with disable disableTooltip prop. It is based on our team discussion https://github.com/github/primer/discussions/3027

Changelog

New

• disableTooltip prop is added with the default value of false
• tooltipDirection prop is added to icon button as an optional prop.
  • https://github.com/github/primer/pull/3000
• description prop is added to icon button as an optional prop to add additional text to icon buttons (I.e. an icon button named with "Notifications" and "You have unread notifications" as a description to provide extra information)
  • https://github.com/github/primer/pull/2339

Changed

• With the changes in this PR, IconButton will render a tooltip by default.
• If disableTooltip prop is passed as true, IconButton is going to be render without a tooltip.
• listLabelledBy attribute on the ActionMenu.Overlay returns the tooltip id if the menu anchor is an icon button.

Removed

Nothing

Rollout strategy

• [ ] Patch release
• [ ] Minor release
• [ ] Major release; if selected, include a written rollout or migration plan
• [ ] None; if selected, include a brief description as to why

We should consider this change as "potentially breaking" since the behaviour of the component is changing and may cause test failures (if the tests are written based on internal details of the component) or duplicated tooltips, if the icon buttons have a custom tooltip.

For our upstream repo, dotcom, we will include a commit in the upgrade version PR to pass disableTooltip={true} to icon button instances and then incrementally remove them in separate PRs.

Testing & Reviewing

Merge checklist

• [x] Added/updated tests
• [ ] Added/updated documentation
• [x] Added/updated previews (Storybook)
• [ ] Changes are SSR compatible
• [x] Tested in Chrome
• [ ] Tested in Firefox
• [ ] Tested in Safari
• [ ] Tested in Edge
• [ ] (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests) - https://github.com/github/github/pull/311597 There are some failing but I believe they are not related to the branch. I'll update it after checking with the release coordinator

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a4cef3b21b67477c27b00ef393d0281f697f7e25

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	87.96 KB (+0.17% 🔺)
packages/react/dist/browser.umd.js	88.32 KB (+0.12% 🔺)

[siddharthkp]

Hi!

Optional feedback about strategy that has less steps: https://github.com/github/primer/discussions/3027#discussioncomment-8409508 (sorry for changing the strategy on you!)

It's pretty much the same strategy but grouped differently. Key difference is that the prop/flag is always opting-out of tooltip instead of opting-in, which is in line with the future we want.

[joshblack]

@broccolinisoup was trying to review this today but noticed all the merge stuff coming in (sorry about that 🤦‍♂️) is there a good way to only see the changes you're hoping to introduce without the merge changes?

[broccolinisoup]

@broccolinisoup was trying to review this today but noticed all the merge stuff coming in (sorry about that 🤦‍♂️) is there a good way to only see the changes you're hoping to introduce without the merge changes?

lol I have no idea what happened there 😬 Sorry! That wasn't intentional at all. Actually, I am moving back this to draft for now until I implement a few more details and will make it ready for review.

Thanks so much for taking a look 🙏🏻 and sorry again about the confusion and mess!

[broccolinisoup]

@joshblack @siddharthkp it is ready for review whenever you get a chance! Thanks so much for all your help 🙏🏻