fix(chart): align legend and tooltip spacings with Figma spec#238
Open
rmojica-godaddy wants to merge 3 commits into
Open
fix(chart): align legend and tooltip spacings with Figma spec#238rmojica-godaddy wants to merge 3 commits into
rmojica-godaddy wants to merge 3 commits into
Conversation
- legend: horizontal items gap md → lg (matches Figma LGSpace = 12px real) - legend: remove unused --legend-gap-items referencing non-existent token - tooltip: add display: inline-block to tooltip root - snapshots: update legend, bar-chart, line-chart node test snapshots
🦋 Changeset detectedLatest commit: 7fd33ba 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 |
Contributor
Docs Site PreviewPreview URL: https://godaddy.github.io/antares/pr-238-site/ Preview will be automatically deleted when this PR is closed. |
Contributor
📚 Storybook PreviewPreview URL: https://godaddy.github.io/antares/pr-238-storybook/ Preview will be automatically deleted when this PR is closed. |
Contributor
Author
|
/update-screenshots |
Contributor
📸 Updating screenshots... View workflow run |
Contributor
🎉 Successfully updated and committed screenshots! |
Contributor
There was a problem hiding this comment.
Pull request overview
Aligns internal Chart Legend and Tooltip spacing behavior to match the Figma Data Visualization spec, ensuring consistent token usage (sm/md/lg) across rendered charts and snapshots.
Changes:
- Updated
Legendhorizontal item gap frommdtolg, and refreshed affected node snapshots (Legend, LineChart, BarChart). - Removed an unused Legend CSS custom property that referenced a non-existent token.
- Updated Tooltip root styling to
display: inline-blockto match intended layout behavior.
Reviewed changes
Copilot reviewed 7 out of 16 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/@godaddy/antares/components/chart/_internal/legend/src/index.tsx | Changes horizontal legend item gap token from md to lg. |
| packages/@godaddy/antares/components/chart/_internal/legend/src/index.module.css | Removes unused --legend-gap-items custom property. |
| packages/@godaddy/antares/components/chart/_internal/tooltip/src/index.module.css | Sets .tooltip to display: inline-block. |
| packages/@godaddy/antares/components/chart/_internal/legend/test/snapshots/legend.node.test.tsx.snap | Updates snapshots to reflect new legend gap token output. |
| packages/@godaddy/antares/components/chart/line-chart/test/snapshots/line-chart.node.test.tsx.snap | Updates snapshots where legend gap output changes. |
| packages/@godaddy/antares/components/chart/bar-chart/test/snapshots/bar-chart.node.test.tsx.snap | Updates snapshots where legend gap output changes. |
| .changeset/spotty-spiders-warn.md | Adds a patch changeset for the spacing alignment fix. |
rmarkins-godaddy
approved these changes
Jun 23, 2026
egaitan-godaddy
approved these changes
Jun 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Aligns
LegendandTooltipchart component spacings with the Figma Data Visualization spec sheets. Spacings were verified by comparing each gap and padding value against the spec annotations (which use a 2× display scale), confirming the correct Box token mapping (sm= 1GU = 4px,md= 2GU = 8px,lg= 3GU = 12px).Links
modified components
Changes Made
chart/_internal/legend): corrects horizontal items gap frommd(8px) tolg(12px) to match the FigmaLGSpacespec (24px at 2× = 12px real).--legend-gap-items: var(--ux-1pfsknb)— the token--ux-1pfsknbdoes not exist in the intent map and the variable was never applied to any selector.chart/_internal/tooltip): addsdisplay: inline-blockto.tooltiproot class.legend,bar-chart, andline-chartnode test snapshots to reflect the newgap:var(--sp-lg, 12px)value.Test Plan
Checklist
npm run changesetif this affects packages)