Skip to content

FE-723: Add tooltip to button component#8728

Open
alex-e-leon wants to merge 3 commits into
mainfrom
FE-723-add-tooltip-to-button
Open

FE-723: Add tooltip to button component#8728
alex-e-leon wants to merge 3 commits into
mainfrom
FE-723-add-tooltip-to-button

Conversation

@alex-e-leon
Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

Have the Button component use the Tooltip component if a tooltip prop is passed in.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Error Error May 19, 2026 3:04pm
hashdotdesign-tokens Ready Ready Preview, Comment May 19, 2026 3:04pm
petrinaut Ready Ready Preview, Comment May 19, 2026 3:04pm

@cursor
Copy link
Copy Markdown

cursor Bot commented May 18, 2026

PR Summary

Medium Risk
Moderate risk: changes Button DOM structure and accessibility labeling when tooltip is set, which could affect styling, focus/hover behavior, and tests for consumers.

Overview
Adds first-class tooltip support to Button. When a tooltip string is provided, the button/link is now wrapped in the shared Tooltip component (with new tooltipOptions passthrough props), instead of relying on the native title attribute.

Also updates accessibility for icon-only buttons by defaulting aria-label to the tooltip text when there are no children, and updates Button stories to demonstrate tooltip usage and fix missing React keys in size variants.

Reviewed by Cursor Bugbot for commit 950f53f. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps > hash.design Affects the `hash.design` design site (app) labels May 18, 2026
Comment thread libs/@hashintel/ds-components/src/components/Button/button.tsx
@augmentcode
Copy link
Copy Markdown

augmentcode Bot commented May 18, 2026

🤖 Augment PR Summary

Summary: Adds first-class tooltip support to the design-system Button component.

Changes:

  • Introduce tooltipOptions and wrap rendered <button>/<a> with Tooltip when tooltip is provided
  • Remove use of the native title attribute in favor of the DS tooltip behavior
  • Update Button stories to demonstrate tooltip usage on icon-only buttons and fix missing React keys in mapped fragments

Technical Notes: Tooltip integration is implemented by building the element first, then conditionally wrapping it in Tooltip, allowing the same behavior for both anchor and button variants.

🤖 Was this summary useful? React with 👍 or 👎

Copy link
Copy Markdown

@augmentcode augmentcode Bot left a comment

Choose a reason for hiding this comment

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

Review completed. 2 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

Comment thread libs/@hashintel/ds-components/src/components/Button/button.tsx
Comment thread libs/@hashintel/ds-components/src/components/Button/button.tsx
Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 0f8fcd4. Configure here.

Comment thread libs/@hashintel/ds-components/src/components/Button/button.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

1 participant