Skip to content

feat(react-headless-components-preview): expose missing state data attributes - #36480

Open
Victor Genaev (mainframev) wants to merge 4 commits into
microsoft:masterfrom
mainframev:vgenaev/headless-data-attributes
Open

feat(react-headless-components-preview): expose missing state data attributes#36480
Victor Genaev (mainframev) wants to merge 4 commits into
microsoft:masterfrom
mainframev:vgenaev/headless-data-attributes

Conversation

@mainframev

@mainframev Victor Genaev (mainframev) commented Jul 31, 2026

Copy link
Copy Markdown
Contributor
  • Expose missing resolved interaction and structural state as typed data-* attributes.
  • Preserve all existing attribute names and value semantics.

FUI Modern builds on headless components and needs stable selectors for state-driven styling:

.fx-Modal:where([data-state="open"]) {
   ... 
}

.fx-Button:where([data-icon-position="left"]) {
   ...
}

@github-actions

github-actions Bot commented Jul 31, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-headless-components-preview
react-headless-components-preview: entire library
251.701 kB
73.226 kB
253.609 kB
73.624 kB
1.908 kB
398 B
react-headless-components-preview
@fluentui/react-headless-components-preview/tag-picker
62.147 kB
20.587 kB
62.192 kB
20.597 kB
45 B
10 B
react-headless-components-preview
@fluentui/react-headless-components-preview/teaching-popover
35.416 kB
11.745 kB
35.494 kB
11.771 kB
78 B
26 B

🤖 This report was generated against c83bfa7666778640350f54991c8ebe712a8f389b

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@Hotell Martin Hochel (Hotell) left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left some comments, those +2kb are not great :D

});

state.popover.open = popoverOpen;
state.root['data-open'] = stringifyDataAttribute(popoverOpen);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't this boolean ? AFAIR we are going to toggle bool attributes instead of toggling value ?


setMenuItemDataAttributes(state);
// eslint-disable-next-line react-hooks/immutability
state.root['data-checked'] = stringifyDataAttribute(state.checked);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cant this be achieved just by calling the base hook and setting state.root ?

@mainframev
Victor Genaev (mainframev) force-pushed the vgenaev/headless-data-attributes branch 2 times, most recently from 20545eb to c1622bb Compare August 10, 2026 11:50
@mainframev
Victor Genaev (mainframev) force-pushed the vgenaev/headless-data-attributes branch from c1622bb to eebc128 Compare August 10, 2026 12:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants