feat(react-infolabel): add useInfoLabelBase_unstable and useInfoButtonBase_unstable hooks#35810
Closed
dmytrokirpa wants to merge 3 commits into
Closed
feat(react-infolabel): add useInfoLabelBase_unstable and useInfoButtonBase_unstable hooks#35810dmytrokirpa wants to merge 3 commits into
dmytrokirpa wants to merge 3 commits into
Conversation
…nBase_unstable hooks Adds base types and hooks for both InfoLabel and InfoButton components: - InfoLabelBaseProps/InfoLabelBaseState: omit design prop 'size' - InfoButtonBaseProps/InfoButtonBaseState: omit design prop 'size' - useInfoLabelBase_unstable: handles ARIA, slot structure, popover open state without size - useInfoButtonBase_unstable: handles ARIA, slot structure, focus/blur behavior without size-dependent defaults - Refactors styled hooks to call base hooks and spread results, then apply design props Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
dmytrokirpa
force-pushed
the
feat/react-infolabel-base-hooks
branch
from
d2e5150 to
68f35e4
Compare
dmytrokirpa
changed the base branch from
experimental/component-base-hooks
to
master
… not a slot prop
The root slot props in ComponentProps<Slots> are spread directly into the component
props, not wrapped in a root:{} object. Fix by using children prop directly.
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png | 495 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 1107 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 403 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 1236 | Changed |
vr-tests-react-components/Charts-DonutChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 5570 | Changed |
vr-tests-react-components/InfoLabel 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/InfoLabel.size-small.rest.chromium.png | 594 | Changed |
| vr-tests-react-components/InfoLabel.size-large.rest.chromium.png | 833 | Changed |
| vr-tests-react-components/InfoLabel.sizes -- open.rest.chromium.png | 3422 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 273 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 499 | Changed |
vr-tests-react-components/TagPicker 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
1 task
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
1 participant
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
InfoLabelBaseProps/InfoLabelBaseStatetypes (omitting design propsize)InfoButtonBaseProps/InfoButtonBaseStatetypes (omitting design propsize)useInfoLabelBase_unstablehook: handles ARIA attributes (aria-owns,aria-labelledby), slot structure (root span, label, infoButton slots), and popover open tracking — without thesizepropuseInfoButtonBase_unstablehook: handles popover open/close state, focus/blur behavior (hiding popover when focus leaves), and button ARIA attributes — without size-dependent icon or popover size defaultsuseInfoLabel_unstableto calluseInfoLabelBase_unstableand spread its result, then addsizeuseInfoButton_unstableto calluseInfoButtonBase_unstablewith size-dependent defaults pre-applied, then addsizepackages/react-components/react-infolabel/library/src/index.tsWhat base hooks do
Base hooks extract pure component logic — ARIA, keyboard handling, slot structure — WITHOUT styling, design props, or default slot implementations. This allows consumers to build custom-styled variants without taking on the full FluentUI design system.
Test plan
useInfoLabel_unstablestill works as before (behavior unchanged)useInfoButton_unstablestill works as before (behavior unchanged)useInfoLabelBase_unstablereturns the expected state withoutsizeuseInfoButtonBase_unstablereturns the expected state withoutsize🤖 Generated with Claude Code