CORE-2710: Compose render-callback style in react-aria-components wrappers

[OpenStaxClaude]

Jira: CORE-2710

The style half of the bug fixed for className in CORE-2708 / #136.

Problem

react-aria-components types style on anything extending StyleRenderProps as CSSProperties | ((values) => CSSProperties). Three wrappers merged the caller's style into their own CSS-variable object with a spread:

const popoverStyle: CSSPropertiesWithVariables = {
  '--navbar-popover-border-color': colors.palette.darkGreen,
  ...style   // <-- if style is a function, this contributes nothing
};

Spreading a function into an object literal is legal TypeScript and copies no enumerable own properties, so a caller-supplied style callback was silently discarded. Unlike the className case there was no type error to catch it.

Fix

NavBarMenuItem, NavBarPopover and TreeCheckbox now build their CSS variables inside a composeRenderProps callback, which resolves the callback form before the merge:

const popoverStyle = composeRenderProps(
  style,
  (resolvedStyle): CSSPropertiesWithVariables => ({
    '--navbar-popover-border-color': colors.palette.darkGreen,
    ...resolvedStyle
  })
);

The caller still spreads last, so its ability to override the wrapper's CSS variables is preserved.

TreeCheckbox also drops its as unknown as RACCheckboxProps['style'] double cast in favour of a CSSPropertiesWithVariables return-type annotation, which types the custom properties properly rather than casting them away.

Acceptance criteria

• The three components merge a render-callback style instead of discarding it.
• The object form is unchanged, including caller-last precedence over the wrapper's variables.
• Each component has a callback-style test, plus an override test and an object-form test. Confirmed failing before the fix: checking out only the two source files from main leaves 6 failed, 18 passed across the two specs — the 6 callback/override cases fail, the rest pass.
• No snapshot churn. All 116 snapshots pass untouched; the emitted inline styles for the object form are byte-identical (RAC's useRenderProps resolves both forms to the same object, and none of MenuItem/Popover/Checkbox supply a defaultStyle).

Rebase onto #136

Rebased onto main at bf6ef32 (#136, CORE-2708) per review. Resolution notes:

• NavBarMenuButtons.tsx / TreeCheckbox.tsx — auto-merged. Each wrapper now has both fixes side by side: composeRenderProps on className from CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136, composeRenderProps on style from this branch.
• CHANGELOG.md — kept both entries under ### Fixed, CORE-2708 then CORE-2710.
• Spec files — kept both branches' tests. For NavBarPopover the two sides had conflicting scaffolding: CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136 rendered each case inline, this branch added a renderPopover helper. Kept the helper and ported CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136's two className cases onto it, so the describe block has one render path rather than two.
• .github/workflows/checks.yml — the JIRA_EMAIL/JIRA_TOKEN secret fix this branch carried as a cherry-pick is now on main via CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136, so it dropped out of the diff entirely.

Post-rebase verification: tsc --noEmit clean, eslint clean, full suite 256 passed / 116 snapshots green.

Notes

• ProfileMenu › opens menu on click failed its document.body snapshot once during post-rebase verification, with a stray data-pressed="true" in the received output, then passed on the immediately following full-suite run and on 3 consecutive isolated runs. Same pre-existing press-state timing flake flagged before the rebase; it involves no style and nothing this PR touches. There is a CORE-2715-profile-menu-flaky-snapshot branch for it. Flagging in case CI hits it.

[Copilot]

Pull request overview

Fixes render-callback style handling in React Aria component wrappers while preserving caller override precedence.

Changes:

• Composes callback and object styles for three wrappers.
• Adds regression and override-precedence tests.
• Corrects Jira secret references and documents the fix.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/Tree/TreeCheckbox.tsx	Composes checkbox styles safely.
src/components/Tree/TreeCheckbox.spec.tsx	Tests callback and object styles.
src/components/NavBarMenuButtons.tsx	Composes menu item and popover styles.
src/components/NavBarMenuButtons.spec.tsx	Adds style regression tests.
CHANGELOG.md	Documents the corrected behavior.
.github/workflows/checks.yml	Corrects Jira secret names.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[RoyEJohnson]

Rebase to main and resolve conflicts.

[OpenStaxClaude]

@RoyEJohnson Rebased onto main at bf6ef32 (#136) and force-pushed — 27ab430. All checks green.

Three files conflicted; the two components auto-merged.

• NavBarMenuButtons.tsx / TreeCheckbox.tsx — no conflict. Each wrapper now carries both fixes: composeRenderProps on className from CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136, composeRenderProps on style from here.
• CHANGELOG.md — kept both entries under ### Fixed, CORE-2708 then CORE-2710.
• NavBarMenuButtons.spec.tsx / TreeCheckbox.spec.tsx — kept both sides' tests. One judgement call: in the NavBarPopover describe block, CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136 rendered each case inline while this branch had added a renderPopover helper. I kept the helper and ported CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136's two className cases onto it, so the block has one render path instead of two. Assertions are unchanged, just re-expressed against the helper's return value.
• .github/workflows/checks.yml — the JIRA_EMAIL/JIRA_TOKEN cherry-pick this branch was carrying is on main via CORE-2708: Compose render-callback classNames in react-aria-components wrappers #136 now, so it dropped out of the diff on its own. Nothing left to drop.

Verification after the rebase:

• tsc --noEmit clean, eslint clean.
• Full suite 256 passed / 116 snapshots, no snapshot updates.
• Regression tests still bite: checking out only the two source files from main leaves 6 failed, 18 passed across the two specs — the six callback/override cases fail, the rest pass.

Two heads-ups:

• ProfileMenu › opens menu on click failed its document.body snapshot once during verification with a stray data-pressed="true", then passed on the next full run and on three isolated runs. Same pre-existing press-state flake I flagged earlier — nothing to do with style. I see there's a CORE-2715-profile-menu-flaky-snapshot branch for it.
• CORE-2006: Migrate ProfileMenu and HelpMenu components to plain CSS #141 (CORE-2006) has its base set to this branch, so the force-push moved its base out from under it. GitHub still reports it MERGEABLE — its head branched from 5fdc635 and never contained the CORE-2710 commit — but its diff will now read against the rebased tip. Worth a glance from whoever picks that one up.

Re-requesting review.

[Copilot]

🟢 Approval recommended

All reviewed changes are covered by regression tests with no unresolved issues.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 0 new
• Review effort level: Balanced