feat: s2 donut summary, metric value/label sizing to named size tiers - #889
Draft
madelineluke wants to merge 1 commit into
Draft
feat: s2 donut summary, metric value/label sizing to named size tiers#889madelineluke wants to merge 1 commit into
madelineluke wants to merge 1 commit into
Conversation
…to named size tiers DonutSummary previously sized its center text with a placeholder ratio (donutRadius * holeRatio * 0.35) that forced the label to always be exactly half the value's font size. The S2 design system instead specifies five named size tiers (XS/S/M/L/XL) with independently authored value and label font sizes that don't follow a fixed ratio. Replaces the single ratio-based scale/signal with two independent threshold scales (value, label) keyed off the donut's outer diameter, snapping to the nearest named tier via shared midpoint cutpoints. Text truncation/fit-based visibility intentionally continues to use the real holeRatio-derived inner radius rather than the tier's ring-width token, since the actual arc geometry is untouched by this change and still holeRatio-based - that mismatch is filed separately. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
madelineluke
marked this pull request as draft
August 19, 2026 19:35
|
|
🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-889 🎨 S2 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-889-s2 📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-889-docs/ |
10 tasks
madelineluke
changed the title
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
1 participant
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.
Description
Replaces DonutSummary's placeholder ratio-based font sizing (
donutRadius * holeRatio * 0.35, with the label always forced to exactly half the value's size) with two independent threshold scales/signals (value, label) keyed off the donut's outer diameter. A diameter snaps to the nearest of the five named S2 size tiers (XS/S/M/L/XL) via shared midpoint cutpoints, rather than the old scale's snap-down behavior. Value/label font sizes are now independently specified per tier (matching the design tokens), not derived as a fixed ratio of each other. Text truncation/fit-based visibility (DONUT_SUMMARY_MIN_RADIUS) intentionally continues to use the realholeRatio-derived inner radius, not the tier's fixed ring-width token - the actual arc ring geometry (getArcMark) is untouched by this change and stillholeRatio-based, so truncation math stays matched to what's actually rendered. That ring-geometry/design-token mismatch is real and confirmed (measured against the Figma reference) but is tracked as a separate issue rather than folded into this PR (see #891). Adds a new non-pre-alphaDonut/Features/Donut SummaryStorybook story showing all five size tiers side by side.Related Issue
Implements
planning/specs/donut/donut-summary-responsive-sizing.json- second spec in theplanning/specs/donut/s2 donut feature series (reordered ahead ofdonut-direct-labels, which depends on the size-tier constants this PR establishes). No GitHub issue tracked.Motivation and Context
The center metric value/label sizing didn't match the S2 design system's named size tiers, and hardcoded the label to always be exactly half the value's font size, which doesn't hold once independently-specified per-tier sizes are used.
How Has This Been Tested?
yarn test --testPathPattern="react-spectrum-charts-s2|vega-spec-builder-s2"- 2112/2112 passingyarn lint- cleanyarn tsc --noEmit- no new errors (pre-existing unrelated errors confirmed present onmain)Donut/Features/Donut Summary/Size Tiers) that value/label font sizes scale correctly across all five tiersScreenshots (if appropriate):
N/A - verified in Storybook, see test plan above.
Types of changes
Checklist: