feat(react-headless-components-preview): add InfoLabel component#36220
Open
dmytrokirpa wants to merge 5 commits into
Open
feat(react-headless-components-preview): add InfoLabel component#36220dmytrokirpa wants to merge 5 commits into
dmytrokirpa wants to merge 5 commits into
Conversation
…stories Adds a headless InfoLabel component built on top of the existing Label primitive, including a nested InfoButton sub-component, conformance and unit tests, Cypress tests, and Storybook stories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📊 Bundle size report
🤖 This report was generated against c16cd8766cb0cb1ccb771736a1480dcf751f5a8c |
|
Pull request demo site: URL |
Contributor
There was a problem hiding this comment.
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+InfoButtonimplementation (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-labelpackage 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. |
Comment on lines
+31
to
+36
| export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & { | ||
| /** | ||
| * The content of the InfoButton's popover. | ||
| */ | ||
| info?: InfoButtonProps['info']; | ||
| }; |
Comment on lines
+18
to
+24
| // @public | ||
| export const InfoLabel: ForwardRefComponent<InfoLabelProps>; | ||
|
|
||
| // @public | ||
| export type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & { | ||
| info?: InfoButtonProps['info']; | ||
| }; |
Comment on lines
+79
to
+82
|
|
||
| if (open) { | ||
| root['aria-owns'] ??= infoButton.info?.id; | ||
| } |
Comment on lines
+13
to
+14
| * The returned state can be modified with hooks such as useInfoLabelStyles_unstable, | ||
| * before being passed to renderInfoLabel_unstable. |
Comment on lines
+1
to
+16
| import { InfoLabel } from '@fluentui/react-headless-components-preview/info-label'; | ||
|
|
||
| import descriptionMd from './InfoLabelDescription.md'; | ||
|
|
||
| export { Default } from './InfoLabelDefault.stories'; | ||
| export { Required } from './InfoLabelRequired.stories'; | ||
| export { InField } from './InfoLabelInField.stories'; | ||
|
|
||
| export default { | ||
| title: 'Components/InfoLabel', | ||
| component: InfoLabel, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: descriptionMd, | ||
| }, |
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.
Summary
InfoLabelcomponent to@fluentui/react-headless-components-preview, built on the existingLabelprimitive.InfoButtonsub-component that wraps aPopoverto surface contextual information../info-labelpackage 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.