-
Notifications
You must be signed in to change notification settings - Fork 647
Align Tooltip font with PVC
#6349
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
Conversation
🦋 Changeset detectedLatest commit: c6fff1c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR aligns the Tooltip component's font styling with Primer View Components (PVC) by replacing hardcoded CSS values with design token variables and making related improvements.
Key changes:
- Updates font and padding properties in Tooltip to use design system tokens instead of hardcoded values
- Adds text-wrap: balance for better typography
- Removes outdated margin adjustment for keybinding hints
- Disables animations in a test for better stability
Reviewed Changes
Copilot reviewed 3 out of 147 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/TooltipV2/Tooltip.module.css | Updates font, padding, and layout styles to use design tokens; adds text-wrap balance; removes keybinding hint margin |
| e2e/components/IconButton.test.ts | Disables animations in keybinding hint test for stability |
| .changeset/hot-cooks-collect.md | Adds changeset entry documenting the font alignment changes |
| border: 0; | ||
| border-radius: var(--borderRadius-medium); | ||
| -webkit-font-smoothing: subpixel-antialiased; | ||
| inset: auto; |
Copilot
AI
Jul 24, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The text-wrap: balance property has limited browser support and may not work in older browsers. Consider adding a fallback or checking if this aligns with the project's browser support requirements.
| inset: auto; | |
| inset: auto; | |
| word-wrap: break-word; /* Fallback for older browsers */ | |
| overflow-wrap: break-word; /* Ensures compatibility */ |
Closes https://github.com/github/primer/issues/5515
Changelog
Visually aligns the React Tooltip with PVC's
Before:
After:
New
Changed
Removed
Rollout strategy
Testing & Reviewing
Merge checklist