fix(react-headless-components-preview): add state data attributes - #36712
Open
Dmytro Kirpa (dmytrokirpa) wants to merge 7 commits into
Open
fix(react-headless-components-preview): add state data attributes#36712Dmytro Kirpa (dmytrokirpa) wants to merge 7 commits into
Dmytro Kirpa (dmytrokirpa) wants to merge 7 commits into
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot started reviewing on behalf of
Dmytro Kirpa (dmytrokirpa)
September 8, 2026 14:04
View session
📊 Bundle size report
Unchanged fixtures
|
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
AvatarGroup size forwarding remains incorrect, and removing data-open introduces an undocumented compatibility break.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds resolved data-* state attributes to headless Nav components and adjusts AvatarGroup context forwarding.
Changes:
- Adds disabled, expanded, selected, and drawer-type attributes with tests.
- Updates public Nav API declarations.
- Reuses styled AvatarGroup context hooks and adds a patch change file.
File summaries
| File | Description |
|---|---|
NavSubItem/useNavSubItem.ts |
Adds data-disabled. |
NavSubItem/NavSubItem.types.ts |
Types the attribute. |
NavSubItem/NavSubItem.test.tsx |
Tests disabled states. |
NavItem/useNavItem.ts |
Adds data-disabled. |
NavItem/NavItem.types.ts |
Types the attribute. |
NavItem/NavItem.test.tsx |
Tests disabled states. |
NavDrawer/useNavDrawer.ts |
Adds resolved data-type. |
NavDrawer/NavDrawer.types.ts |
Types drawer state. |
NavDrawer/NavDrawer.test.tsx |
Tests drawer types. |
NavCategoryItem/useNavCategoryItem.ts |
Adds disabled/expanded states. |
NavCategoryItem/NavCategoryItem.types.ts |
Updates state attributes. |
NavCategoryItem/NavCategoryItem.test.tsx |
Tests category states. |
Nav/Nav.test.tsx |
Updates expanded-state assertions. |
AvatarGroup/useAvatarGroupContextValues.ts |
Delegates group context construction. |
AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts |
Delegates overflow context construction. |
library/etc/nav.api.md |
Updates generated API declarations. |
change/*.json |
Records a patch release. |
Review details
- Files reviewed: 17/17 changed files
- Comments generated: 3
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+13
to
+15
| export const useAvatarGroupPopoverContextValues = useAvatarGroupPopoverContextValues_unstable as unknown as ( | ||
| state: AvatarGroupPopoverState, | ||
| ) => AvatarGroupContextValues; |
Contributor
Author
There was a problem hiding this comment.
This is intentional: consumers may need to access the size context at runtime, even though this value is excluded from the types by default.
Comment on lines
+11
to
+13
| export const useAvatarGroupContextValues = useAvatarGroupContextValues_unstable as ( | ||
| state: AvatarGroupState, | ||
| ) => AvatarGroupContextValues; |
Contributor
Author
There was a problem hiding this comment.
same as above
|
|
||
| state.root['data-open'] = toDataAttributeValue(state.open); | ||
| state.root['data-disabled'] = toDataAttributeValue(state.root.disabled || state.root['aria-disabled']); | ||
| state.root['data-expanded'] = toDataAttributeValue(state.open); |
Contributor
Author
There was a problem hiding this comment.
Copilot revert the data-open to data-exanded change and update the API snapshot
|
Pull request demo site: URL |
Copilot started reviewing on behalf of
Dmytro Kirpa (dmytrokirpa)
September 8, 2026 15:11
View session
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The patch still breaks the existing data-open contract and omits required Storybook documentation for the new attributes.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Suppressed comments (1)
packages/react-components/react-headless-components-preview/library/src/components/Nav/NavCategoryItem/useNavCategoryItem.ts:67
- The requested compatibility revert is still missing: this removes the existing public
data-openstate/DOM attribute in favor ofdata-expanded. The headless contract explicitly classifies attribute removal/rename as breaking (docs/react-v9/contributing/rfcs/react-components/convergence/headless-components.md:174), while this PR ships a patch. Restoredata-openin the hook, state/API types, and tests; ifdata-expandedis also retained, emit its documented boolean values ("true"/"false") rather than presence/absence.
state.root['data-expanded'] = toDataAttributeValue(state.open);
- Files reviewed: 17/17 changed files
- Comments generated: 1
- Review effort level: Balanced
Comment on lines
+24
to
+27
| /** | ||
| * Data attribute reflecting the resolved Drawer type ('inline' or 'overlay'). | ||
| */ | ||
| 'data-type'?: 'inline' | 'overlay'; |
Contributor
Author
There was a problem hiding this comment.
data attributes will be documented separately similarly to what we have for public props
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.
Previous Behavior
The headless Nav components did not expose several resolved interaction states as
data-*attributes. AvatarGroup context providers could also drop an ambientsizevalue when relaying context.New Behavior
NavDrawer, NavCategoryItem, NavItem, and NavSubItem now emit and type their resolved state attributes for styling and selectors. AvatarGroup context hooks preserve ambient size context without adding size props or state to headless components. Focused tests cover the new true, false, and default states.
Related Issue(s)