feat(react-base-components): add a new package to export Fluent UI base state hooks and render functions#35931
Open
dmytrokirpa wants to merge 14 commits intomicrosoft:masterfrom
Open
Conversation
dmytrokirpa
force-pushed
the
feat/export-base-hooks-from-suite
branch
from
2da26f5 to
1502ffe
Compare
dmytrokirpa
force-pushed
the
feat/export-base-hooks-from-suite
branch
2 times, most recently
from
a0b20cb to
4118175
Compare
dmytrokirpa
changed the title
dmytrokirpa
commented
Mar 31, 2026
📊 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}
| @@ -331,6 +331,8 @@ packages/react-components/component-selector-preview/library @microsoft/teams-pr | |||
| packages/react-components/component-selector-preview/stories @microsoft/teams-prg | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png | 6 | Changed |
vr-tests-react-components/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 672 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 2215 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png | 679 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 2294 | Changed |
vr-tests-react-components/Charts-DonutChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png | 7530 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 731 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 613 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 38 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 60 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 36 | Changed |
vr-tests-react-components/TagPicker 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
vr-tests/Callout 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Callout.No callout width specified.default.chromium.png | 2143 | Changed |
vr-tests/Keytip 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Keytip.Disabled.default.chromium.png | 26 | Changed |
| vr-tests/Keytip.Root.default.chromium.png | 55 | Changed |
vr-tests/react-charting-LineChart 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-LineChart.Events.default.chromium.png | 1 | Changed |
| vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png | 200 | Changed |
| vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png | 181 | Changed |
| vr-tests/react-charting-LineChart.Multiple.default.chromium.png | 192 | Changed |
vr-tests/react-charting-MultiStackBarChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - Dark Mode.default.chromium.png | 363 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole.default.chromium.png | 359 | Changed |
vr-tests/react-charting-VerticalBarChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png | 3 | Changed |
There were 4 duplicate changes discarded. Check the build logs for more information.
Hotell
reviewed
Apr 1, 2026
packages/react-components/react-base-components/library/src/testing/isConformant.ts
Outdated
Show resolved
Hide resolved
dmytrokirpa
force-pushed
the
feat/export-base-hooks-from-suite
branch
5 times, most recently
from
2d8b182 to
edb7fd5
Compare
dmytrokirpa
force-pushed
the
feat/export-base-hooks-from-suite
branch
from
dc4296c to
8ced617
Compare
dmytrokirpa
commented
Apr 1, 2026
| // TODO: Remove this workaround once the stories are fixed or we have a better way to | ||
| // decide which stories to include/exclude in docs mode. | ||
| '../../../packages/react-components/react-nav/stories/src/Nav/index.stories.@(ts|tsx)', | ||
| '../../../packages/react-components/react-base-components/stories/src/*/index.stories.@(ts|tsx)', |
Contributor
Author
There was a problem hiding this comment.
Not sure about this one, if we want to have both Base and Fluent components on the same site
Contributor
There was a problem hiding this comment.
disscused offline -> probably separate SB with composition in v9 docsite
dmytrokirpa
requested review from
a team,
JustSlone,
ValentinaKozlova,
jurokapsiar,
mainframev and
tudorpopams
as code owners
Contributor
|
we are having additional offline discussion regarding the package naming |
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
2 participants
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
Introduces
@fluentui/react-base-components— a new opt-in package that exposes the unstyled base layer of Fluent UI v9 components: behavior logic, accessibility patterns, and semantic slot structure, without any styling opinions.This is aimed at teams building custom design systems that diverge significantly from Fluent 2. For most teams, the default styled components in
@fluentui/react-componentsremain the recommended path.What this package provides
useButtoninstead ofuseButton_unstable)@fluentui/react-utilitiesand@fluentui/react-shared-contextscomposeComponentutility to compose a component from a base hook + render functionWhat this package does NOT provide
appearance,size,shape, etc.)Components included
useAccordion,useAccordionItem,useAccordionHeader,useAccordionPanelrenderAccordion,renderAccordionItem,renderAccordionHeader,renderAccordionPaneluseBadge,usePresenceBadge,useCounterBadgerenderBadgeuseBreadcrumb,useBreadcrumbDivider,useBreadcrumbItem,useBreadcrumbButtonrenderBreadcrumb,renderBreadcrumbDivider,renderBreadcrumbItem,renderBreadcrumbButtonuseButton,useToggleButtonrenderButton_unstable,renderToggleButton_unstableuseCard,useCardFooter,useCardHeader,useCardPreviewrenderCard_unstable,renderCardFooter_unstable,renderCardHeader_unstable,renderCardPreview_unstableuseDividerrenderDivider_unstableuseImagerenderImage_unstableuseInputrenderInput_unstableuseLinkrenderLink_unstableusePersonarenderPersonauseRadioGroup,useRadiorenderRadioGroup_unstable,renderRadio_unstableuseRating,useRatingDisplay,useRatingItemrenderRating_unstable,renderRatingDisplay_unstable,renderRatingItem_unstableuseSearchBoxrenderSearchBox_unstableuseSkeleton,useSkeletonItemrenderSkeleton_unstable,renderSkeletonItem_unstableuseSliderrenderSlider_unstableuseSpinButtonrenderSpinButton_unstableuseSpinnerrenderSpinner_unstableuseSwitchrenderSwitch_unstableuseTextarearenderTextarea_unstablePackage changes
@fluentui/react-base-componentswith full setup (build, tests, stories, bundle-size fixture, API report)@fluentui/react-breadcrumb— exportsrenderBreadcrumb_unstableand sub-component render functions@fluentui/react-button— render function signature alignment@fluentui/react-rating— exports base context values hook@fluentui/react-skeleton— exports base hooks and render functions@fluentui/react-textarea— render function signature alignmentpublic-docsite-v9Related Issue(s)