feat(fluentui/react-provider): Export all types required for complete custom stylehooks #35007

Mitch-At-Work · 2025-08-11T16:47:15Z

Previous Behavior

Custom style hooks were enabled on the majority of components
This was often used for simple overrides, however for complete style redefinitions we require some additional classnames and state type exports

New Behavior

Add:

DrawerSurfaceStyle custom style hook (was missing)

Export:

Dialog constants nessecary for breakpoints in react-dialog
DrawerBaseState in react-drawer
reservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for react-tabs
ToastContainerState and classNames in react-toast
Export TreeItemCSSProperties in react-tree

Provides nessecary core changes for: #34256

github-actions · 2025-08-11T16:53:37Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: entire library	`1.278 MB` `321.584 kB`	`1.278 MB` `321.588 kB`	`48 B` `4 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`react-accordion` Accordion (including children components)	`108.347 kB` `33.133 kB`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`48.518 kB` `15.508 kB`
`react-avatar` AvatarGroup	`19.235 kB` `7.617 kB`
`react-avatar` AvatarGroupItem	`62.662 kB` `19.727 kB`
`react-badge` Badge	`25.06 kB` `8.242 kB`
`react-badge` CounterBadge	`25.84 kB` `8.517 kB`
`react-badge` PresenceBadge	`24.929 kB` `9.147 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.212 kB` `31.517 kB`
`react-button` Button	`36.705 kB` `10.508 kB`
`react-button` CompoundButton	`43.117 kB` `11.812 kB`
`react-button` MenuButton	`41.6 kB` `11.902 kB`
`react-button` SplitButton	`49.667 kB` `13.477 kB`
`react-button` ToggleButton	`52.636 kB` `12.285 kB`
`react-calendar-compat` Calendar Compat	`149.762 kB` `39.933 kB`
`react-card` Card - All	`101.577 kB` `28.578 kB`
`react-card` Card	`94.223 kB` `26.749 kB`
`react-card` CardFooter	`13.662 kB` `5.517 kB`
`react-card` CardHeader	`16.195 kB` `6.38 kB`
`react-card` CardPreview	`13.729 kB` `5.645 kB`
`react-charts` AreaChart	`378.178 kB` `114.99 kB`
`react-charts` DeclarativeChart	`625.615 kB` `178.476 kB`
`react-charts` DonutChart	`294.274 kB` `87.979 kB`
`react-charts` FunnelChart	`287.535 kB` `85.474 kB`
`react-charts` GanttChart	`362.362 kB` `108.866 kB`
`react-charts` GaugeChart	`310.651 kB` `92.021 kB`
`react-charts` GroupedVerticalBarChart	`363.192 kB` `108.895 kB`
`react-charts` HeatMapChart	`360.742 kB` `109.231 kB`
`react-charts` HorizontalBarChart	`294.95 kB` `86.744 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` Legends	`234.737 kB` `69.425 kB`
`react-charts` LineChart	`384.024 kB` `115.585 kB`
`react-charts` SankeyChart	`198.471 kB` `60.992 kB`
`react-charts` ScatterChart	`363.285 kB` `109.075 kB`
`react-charts` Sparkline	`91.115 kB` `28.688 kB`
`react-charts` VerticalBarChart	`401.797 kB` `115.615 kB`
`react-charts` VerticalStackedBarChart	`373.451 kB` `111.601 kB`
`react-checkbox` Checkbox	`34.335 kB` `11.786 kB`
`react-color-picker` ColorArea	`49.32 kB` `17.32 kB`
`react-color-picker` ColorPicker	`17.95 kB` `7.143 kB`
`react-color-picker` ColorSlider	`41.493 kB` `15.375 kB`
`react-combobox` Combobox (including child components)	`106.93 kB` `34.798 kB`
`react-combobox` Dropdown (including child components)	`107.56 kB` `34.721 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.79 kB` `19.902 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`236.519 kB` `68.472 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.624 kB` `14.255 kB`
`react-datepicker-compat` DatePicker Compat	`226.614 kB` `64.087 kB`
`react-dialog` Dialog (including children components)	`102.445 kB` `30.622 kB`
`react-divider` Divider	`20.626 kB` `7.654 kB`
`react-field` Field	`22.657 kB` `8.602 kB`
`react-image` Image	`14.489 kB` `5.882 kB`
`react-input` Input	`27.148 kB` `9.108 kB`
`react-jsx-runtime` Classic Pragma	`1.101 kB` `550 B`
`react-jsx-runtime` JSX Dev Runtime	`2.8 kB` `1.251 kB`
`react-jsx-runtime` JSX Runtime	`3.422 kB` `1.493 kB`
`react-label` Label	`13.799 kB` `5.644 kB`
`react-link` Link	`16.746 kB` `6.785 kB`
`react-list` List	`88.892 kB` `26.38 kB`
`react-list` ListItem	`112.276 kB` `33.202 kB`
`react-menu` Menu (including children components)	`164.994 kB` `49.945 kB`
`react-menu` Menu (including selectable components)	`167.976 kB` `50.541 kB`
`react-message-bar` MessageBar (all components)	`24.088 kB` `8.96 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`3.995 kB` `1.755 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.628 kB` `2.36 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.727 kB` `823 B`
`react-overflow` hooks only	`12.832 kB` `4.828 kB`
`react-persona` Persona	`55.409 kB` `17.389 kB`
`react-popover` Popover	`132.198 kB` `41.134 kB`
`react-portal` Portal	`15.411 kB` `5.385 kB`
`react-portal-compat` PortalCompatProvider	`8.386 kB` `2.624 kB`
`react-positioning` usePositioning	`28.865 kB` `10.146 kB`
`react-positioning` useSafeZoneArea	`12.29 kB` `4.967 kB`
`react-progress` ProgressBar	`16.593 kB` `6.613 kB`
`react-provider` FluentProvider	`23.8 kB` `8.556 kB`
`react-radio` Radio	`31.8 kB` `10.006 kB`
`react-radio` RadioGroup	`14.889 kB` `6.09 kB`
`react-select` Select	`26.95 kB` `9.833 kB`
`react-slider` Slider	`37.211 kB` `12.461 kB`
`react-spinbutton` SpinButton	`34.431 kB` `11.449 kB`
`react-spinner` Spinner	`24.374 kB` `8.192 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`106.039 kB` `30.537 kB`
`react-switch` Switch	`34.51 kB` `11.014 kB`
`react-table` DataGrid	`161.275 kB` `45.589 kB`
`react-table` Table (Primitives only)	`41.978 kB` `13.573 kB`
`react-table` Table as DataGrid	`131.476 kB` `36.341 kB`
`react-table` Table (Selection only)	`69.846 kB` `19.704 kB`
`react-table` Table (Sort only)	`68.489 kB` `19.321 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`188.272 kB` `56.449 kB`
`react-tags` InteractionTag	`14.561 kB` `5.865 kB`
`react-tags` Tag	`30.33 kB` `9.76 kB`
`react-tags` TagGroup	`83.089 kB` `24.555 kB`
`react-teaching-popover` TeachingPopover	`102.747 kB` `30.737 kB`
`react-text` Text - Default	`16.19 kB` `6.366 kB`
`react-text` Text - Wrappers	`19.35 kB` `6.695 kB`
`react-textarea` Textarea	`25.53 kB` `9.361 kB`
`react-timepicker-compat` TimePicker	`109.913 kB` `36.335 kB`
`react-toast` Toast (including Toaster)	`103.458 kB` `30.97 kB`
`react-tooltip` Tooltip	`57.853 kB` `20.037 kB`
`react-tree` FlatTree	`149.112 kB` `42.659 kB`
`react-tree` PersonaFlatTree	`149.868 kB` `42.777 kB`
`react-tree` PersonaTree	`146.125 kB` `41.639 kB`
`react-tree` Tree	`145.375 kB` `41.503 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against c0aabdccb5c79620be68ec17d80c8454b541d1be}

github-actions · 2025-08-11T16:53:50Z

Pull request demo site: URL

change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json

packages/react-components/react-dialog/library/src/index.ts

packages/react-components/react-drawer/library/src/index.ts

packages/react-components/react-tabs/library/src/Tab.ts

Mitch-At-Work requested review from a team, dmytrokirpa and marcosmoura as code owners August 11, 2025 16:47

Mitch-At-Work requested a review from layershifter August 11, 2025 16:47

Mitch-At-Work mentioned this pull request Aug 11, 2025

Feat: Semantic Tokens #34256

Open

Mitch-At-Work force-pushed the user/mifraser/export-required-stylehooks-types branch 3 times, most recently from cdd9335 to 8b1ac6a Compare August 11, 2025 17:11

github-actions bot reviewed Aug 11, 2025

View reviewed changes

change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json Show resolved Hide resolved

etudie approved these changes Aug 11, 2025

View reviewed changes

layershifter reviewed Aug 12, 2025

View reviewed changes

packages/react-components/react-dialog/library/src/index.ts Show resolved Hide resolved

layershifter reviewed Aug 12, 2025

View reviewed changes

packages/react-components/react-drawer/library/src/index.ts Outdated Show resolved Hide resolved

layershifter reviewed Aug 12, 2025

View reviewed changes

packages/react-components/react-tabs/library/src/Tab.ts Outdated Show resolved Hide resolved

layershifter approved these changes Aug 12, 2025

View reviewed changes

Hotell self-requested a review August 12, 2025 12:04

Mitch-At-Work force-pushed the user/mifraser/export-required-stylehooks-types branch 3 times, most recently from cd80980 to d73a00c Compare August 14, 2025 16:17

marcosmoura approved these changes Aug 14, 2025

View reviewed changes

Mitch-At-Work added 2 commits August 14, 2025 10:24

Squish for rebase and remove drawer base state export

4aa458a

Add change file for drawer custom style hook

61d266c

Mitch-At-Work force-pushed the user/mifraser/export-required-stylehooks-types branch from f316a2d to 61d266c Compare August 14, 2025 17:25

Mitch-At-Work merged commit e9d9ff6 into microsoft:master Aug 14, 2025
14 of 15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(fluentui/react-provider): Export all types required for complete custom stylehooks #35007

feat(fluentui/react-provider): Export all types required for complete custom stylehooks #35007

Uh oh!

Mitch-At-Work commented Aug 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 11, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(fluentui/react-provider): Export all types required for complete custom stylehooks #35007

feat(fluentui/react-provider): Export all types required for complete custom stylehooks #35007

Uh oh!

Conversation

Mitch-At-Work commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Uh oh!

github-actions bot commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Aug 11, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mitch-At-Work commented Aug 11, 2025 •

edited

Loading

github-actions bot commented Aug 11, 2025 •

edited

Loading