feat(donut-s2): Emphasize

[madelineluke]

Description

Implements the donut-emphasize spec: a static, design-time per-segment highlight, distinct from the mouse-driven donut-hover feature (#895) this is stacked on.

• Adds emphasizedItems/otherItemColor to DonutOptions, mirroring Line's primarySeries/otherSeriesColor but matched against the segment's own color facet value (not idKey), so users specify category names directly rather than internal row identifiers.
• Adds a new fill production rule in getArcMark that swaps non-emphasized segments to solid gray-400 at full opacity - a static color swap, kept fully independent from the opacity-based hover/legend-fade mechanism donut-hover established.
• Non-emphasized segments' labels are explicitly left untouched (verified by a regression test asserting identical label encodes to an ordinary interactive donut) - unlike Line's primarySeries, which suppresses non-primary direct labels entirely.
• Mouse hover is fully suppressed while emphasize is active, for every segment (not just non-emphasized ones) - emphasize is a static state, and hover re-fading an already-gray sibling (or fading anything at all) fights that. Reuses the existing generic excludeCondition param on addHoveredItemSignal rather than inventing a new mechanism.
• Adds Donut/Features/Emphasize stories: a single emphasized segment, and multiple emphasized segments.

Related Issue

planning/specs/donut/donut-emphasize.json (approved)

Motivation and Context

Figma's donut component has a static per-segment Emphasize variant, independent of mouse position, that's distinct from (and not yet built alongside) the mouse-hover fade donut-hover implements. Building this on top of the hover branch let the interaction between the two be resolved with real behavior rather than guesswork - specifically, whether hovering a grayed-out or emphasized segment should still fade siblings (decided: no, hover is fully suppressed while emphasize is active, since it's meant to be a stable, non-interactive state).

How Has This Been Tested?

• Unit tests added in donutUtils.test.ts (fill encoding for single/multiple emphasized items, custom otherItemColor, opacity rules untouched), donutSpecBuilder.test.ts (hover fully suppressed when emphasizedItems is set), and segmentLabelUtils.test.tsx (labels byte-identical to an ordinary interactive donut).
• Full vega-spec-builder-s2/react-spectrum-charts-s2 test suite passes (131 suites, 2127 tests).
• yarn lint and yarn tsc --noEmit are clean (no new errors).
• Verified live in Storybook via Playwright, using precise on-pixel hover simulation: hovering either the emphasized segment or a grayed-out segment produces zero opacity change while emphasizedItems is set; the Basic and Multi stories render exactly matching the Figma reference (one or more segments in full color, the rest solid gray, all labels fully visible).

Screenshots (if appropriate):

See the Basic and Multi stories under React Spectrum Charts 2/Donut/Features/Emphasize in Storybook.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-897

🎨 S2 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-897-s2

📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-897-docs/