feat(react-headless-components-preview): add InfoLabel component

[dmytrokirpa]

Summary

• Adds a headless InfoLabel component to @fluentui/react-headless-components-preview, built on the existing Label primitive.
• Includes a nested InfoButton sub-component that wraps a Popover to surface contextual information.
• Adds conformance tests, unit tests, Cypress component tests, and Storybook stories (default, in-field, required).
• Wires up the ./info-label package export, the API report, and the bundle-size fixture.

Note: The Headless InfoLabel component doesn’t use the base types or hooks from @fluentui/react-infolabel. It wouldn’t really make sense, since most of its slots are focused on Popover, PopoverSurface, and Button—which we end up overriding anyway.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-headless-components-preview react-headless-components-preview: entire library	158.206 kB 45.02 kB	160.587 kB 45.747 kB	2.381 kB 727 B

_{🤖 This report was generated against cbdc211171dd61a50ee2444609243a6c14a88191}

[github-actions]

Pull request demo site: URL

[Copilot]

Pull request overview

Adds a new headless InfoLabel component to @fluentui/react-headless-components-preview, built on the existing headless Label primitive, with an internal InfoButton that uses headless Popover to display contextual info.

Changes:

• Introduces InfoLabel + InfoButton implementation (hooks/types/render), plus Jest conformance/unit tests and Cypress component tests.
• Adds Storybook stories (default/required/in-field) and basic CSS module styling for the demo.
• Wires up the ./info-label package export, API report, bundle-size fixture, and Beachball change file.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelRequired.stories.tsx	“Required” Storybook example using the required indicator slot.
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelInField.stories.tsx	Story demonstrating InfoLabel rendered via Field’s label render function.
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDescription.md	Component description markdown for Storybook docs (currently empty).
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDefault.stories.tsx	Basic Storybook example of InfoLabel with an info popover.
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/info-label.module.css	Demo-only styling for the Storybook examples.
packages/react-components/react-headless-components-preview/stories/src/InfoLabel/index.stories.tsx	Registers the InfoLabel stories and pulls in the docs description.
packages/react-components/react-headless-components-preview/library/src/info-label.ts	New subpath entrypoint re-exporting InfoLabel APIs from the component folder.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/useInfoLabel.ts	Builds InfoLabel state, wires slots, and sets ARIA props/relationships.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/renderInfoLabel.tsx	Renders the InfoLabel slots (label + optional infoButton).
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoLabel.types.ts	Defines InfoLabel slots/props/state types.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoLabel.tsx	InfoLabel component wrapper (hook + render).
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoLabel.test.tsx	Jest conformance + behavior tests for rendering and ARIA attributes.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoLabel.cy.tsx	Cypress tests for focus/tab-out dismissal and click toggling.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/useInfoButton.tsx	InfoButton state: Popover wiring, controllable open state, focus-out close logic.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/renderInfoButton.tsx	Renders Popover + PopoverTrigger + PopoverSurface slots.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/InfoButton.types.ts	Defines InfoButton slots/props/state types.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/InfoButton.tsx	InfoButton component wrapper (hook + render).
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/InfoButton.test.tsx	Jest conformance test for InfoButton.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/InfoButton/index.ts	Barrel exports for InfoButton internals.
packages/react-components/react-headless-components-preview/library/src/components/InfoLabel/index.ts	Barrel exports for InfoLabel internals.
packages/react-components/react-headless-components-preview/library/package.json	Adds ./info-label to package exports map.
packages/react-components/react-headless-components-preview/library/etc/info-label.api.md	Adds API Extractor report output for the new ./info-label entrypoint.
packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js	Includes info-label in the bundle-size fixture import set.
change/@fluentui-react-headless-components-preview-079e0291-64a3-4b57-b585-0ccffe4b6f41.json	Beachball change file for the new feature.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 5 comments.

[Hotell]

some actionables, overal LGTM