Skip to content

IconButton: introduce tooltips on icon buttons behind the unsafeDisableTooltip prop for an incremental rollout #4224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 33 commits into from
Apr 15, 2024

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Feb 6, 2024

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

Changelog

New

  • unsafeDisableTooltip prop is added with the default value of true
  • tooltipDirection prop is added to icon button as an optional prop.
  • 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)

Changed

  • If unsafeDisableTooltip prop is passed as false, IconButton is going to be rendered with 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 do not expect any change in icon buttons with this PR. This is the first step of the roll out strategy.

Testing & Reviewing

Merge checklist

Copy link

changeset-bot bot commented Feb 6, 2024

🦋 Changeset detected

Latest commit: a4cef3b

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

Copy link
Contributor

github-actions bot commented Feb 6, 2024

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% 🔺)

@broccolinisoup broccolinisoup marked this pull request as ready for review February 6, 2024 06:20
@broccolinisoup broccolinisoup requested review from a team and langermank February 6, 2024 06:20
@siddharthkp
Copy link
Member

siddharthkp commented Feb 8, 2024

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.

@github-actions github-actions bot temporarily deployed to storybook-preview-4224 February 9, 2024 03:22 Inactive
@broccolinisoup broccolinisoup changed the title IconButton: introduce tooltip behavior behind a prop IconButton: Introduce tooltip by default Feb 9, 2024
@primer primer bot temporarily deployed to github-pages April 5, 2024 02:58 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4224 April 5, 2024 02:58 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4224 April 8, 2024 00:21 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-4224 April 8, 2024 00:34 Inactive
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving the rogue snapshot test!

@broccolinisoup broccolinisoup added this pull request to the merge queue Apr 15, 2024
Merged via the queue into main with commit 8e9267f Apr 15, 2024
@broccolinisoup broccolinisoup deleted the icon-button-tooltip-feature branch April 15, 2024 01:23
@primer primer bot mentioned this pull request Apr 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants