Skip to content

feat(react-components): integrate CAP visual language as a opt-in#36308

Open
GianoglioEnrico wants to merge 6 commits into
microsoft:masterfrom
GianoglioEnrico:feat/cap-into-fluent-ui-v9
Open

feat(react-components): integrate CAP visual language as a opt-in#36308
GianoglioEnrico wants to merge 6 commits into
microsoft:masterfrom
GianoglioEnrico:feat/cap-into-fluent-ui-v9

Conversation

@GianoglioEnrico

@GianoglioEnrico GianoglioEnrico commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

Implements RFC #36309Bring the CAP visual language into Fluent UI v9.

What this PR does

Adds a Visual Language picker to the v9 docs site (Storybook toolbar + Docs view) that lets users toggle between Fluent and CAP styles. When CAP is selected, the FluentProvider wrapping each story applies CAP_STYLE_HOOKS from @fluentui-contrib/react-cap-theme.

Screenshot 2026-06-16 at 13 29 06

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.296 MB
325.535 kB
1.296 MB
325.585 kB
121 B
50 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
531 B
335 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
keyboard-keys
Multiple keyCodes
50 B
70 B
keyboard-keys
Multiple keys
87 B
94 B
keyboard-keys
Single key
44 B
64 B
keyboard-keys
Single keyCode
39 B
59 B
priority-overflow
createOverflowManager
5.376 kB
2.176 kB
react
ActivityItem
71.22 kB
23.347 kB
react
Announced
38.472 kB
13.275 kB
react
Autofill
15.42 kB
4.766 kB
react
Breadcrumb
200.805 kB
59.601 kB
react
Button
194.354 kB
55.886 kB
react
ButtonGrid
179.242 kB
53.891 kB
react
Calendar
121.162 kB
36.83 kB
react
Callout
84.299 kB
27.593 kB
react
Check
53.206 kB
17.835 kB
react
Checkbox
59.978 kB
19.874 kB
react
ChoiceGroup
65.488 kB
21.465 kB
react
ChoiceGroupOption
58.769 kB
19.353 kB
react
Coachmark
92.7 kB
29.305 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
134.97 kB
42.125 kB
react
ComboBox
250.687 kB
71.515 kB
react
CommandBar
201.861 kB
59.387 kB
react
ContextualMenu
154.229 kB
47.566 kB
react
DatePicker
183.251 kB
55.892 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.929 kB
65.81 kB
react
Dialog
210.16 kB
62.358 kB
react
Divider
19.588 kB
6.84 kB
react
DocumentCard
215.843 kB
63.666 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
Dropdown
233.151 kB
67.962 kB
react
ExtendedPicker
96.823 kB
27.866 kB
react
Fabric
41.728 kB
14.343 kB
react
Facepile
209.377 kB
62.375 kB
react
FloatingPicker
240.865 kB
68.222 kB
react
FocusTrapZone
16.99 kB
5.891 kB
react
FocusZone
55.1 kB
17.451 kB
react
Grid
179.242 kB
53.891 kB
react
GroupedList
135.035 kB
40.67 kB
react
GroupedListV2
122.659 kB
37.758 kB
react
HoverCard
96.784 kB
30.688 kB
react
Icon
51.887 kB
17.263 kB
react
Icons
66.339 kB
24.385 kB
react
Image
46.901 kB
15.695 kB
react
Keytip
81.301 kB
26.677 kB
react
KeytipData
14.05 kB
4.583 kB
react
KeytipLayer
103.089 kB
31.9 kB
react
Keytips
105.873 kB
32.904 kB
react
Label
38.324 kB
13.241 kB
react
Layer
48.089 kB
16.348 kB
react
Link
39.665 kB
13.653 kB
react
List
39.346 kB
12.454 kB
react
MarqueeSelection
74.49 kB
22.402 kB
react
MessageBar
189.388 kB
56.33 kB
react
Modal
93.738 kB
30.223 kB
react
Nav
186.825 kB
55.723 kB
react
OverflowSet
33.354 kB
11.282 kB
react
Overlay
40.885 kB
14.077 kB
react
Panel
200.327 kB
59.336 kB
react
Persona
114.591 kB
36.435 kB
react
PersonaCoin
114.591 kB
36.435 kB
react
PersonaPresence
58.076 kB
19.372 kB
react
Pickers
297.91 kB
82.996 kB
react
Pivot
187.734 kB
56.5 kB
react
Popup
12.312 kB
4.197 kB
react
Positioning
22.764 kB
7.683 kB
react
PositioningContainer
73.445 kB
23.685 kB
react
ProgressIndicator
39.477 kB
13.528 kB
react
Rating
82.086 kB
26.09 kB
react
Fluent UI React (entire library)
1.019 MB
283.183 kB
react
ResizeGroup
13.35 kB
4.379 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.541 kB
17.718 kB
react
SearchBox
187.63 kB
55.936 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
231.35 kB
67.176 kB
react
Selection
42.418 kB
12.26 kB
react
Separator
35.365 kB
12.132 kB
react
Shimmer
49.249 kB
16.258 kB
react
ShimmeredDetailsList
240.71 kB
68.549 kB
react
Slider
57.627 kB
19.198 kB
react
SpinButton
191.297 kB
57.006 kB
react
Spinner
41.759 kB
14.468 kB
react
Stack
42.039 kB
14.389 kB
react
Sticky
32.577 kB
10.488 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
189.637 kB
57.417 kB
react
TeachingBubble
204.648 kB
60.317 kB
react
Text
36.886 kB
12.806 kB
react
TextField
80.798 kB
25.308 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
TimePicker
240.515 kB
69.311 kB
react
Toggle
46.201 kB
15.957 kB
react
Tooltip
87.073 kB
28.151 kB
react
Utilities
82.938 kB
25.15 kB
react
Viewport
23.872 kB
7.642 kB
react
WeeklyDayPicker
101.348 kB
31.644 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
91.136 kB
28.716 kB
react-aria
ARIA - useARIAButtonProps
1.354 kB
648 B
react-aria
ARIA - AriaLiveAnnouncer
3.293 kB
1.507 kB
react-avatar
Avatar
47.215 kB
14.859 kB
react-avatar
AvatarGroup
16.316 kB
6.528 kB
react-avatar
AvatarGroupItem
60.361 kB
18.763 kB
react-badge
Badge
22.978 kB
7.355 kB
react-badge
CounterBadge
23.698 kB
7.61 kB
react-badge
PresenceBadge
22.938 kB
8.301 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
102.926 kB
28.76 kB
react-button
Button
32.684 kB
8.504 kB
react-button
CompoundButton
39.562 kB
9.861 kB
react-button
MenuButton
37.584 kB
9.898 kB
react-button
SplitButton
46.383 kB
11.555 kB
react-button
ToggleButton
52.344 kB
10.635 kB
react-calendar-compat
Calendar Compat
142.388 kB
40.15 kB
react-card
Card - All
93.06 kB
26.955 kB
react-card
Card
85.658 kB
25.044 kB
react-card
CardFooter
11.516 kB
4.606 kB
react-card
CardHeader
14.047 kB
5.435 kB
react-card
CardPreview
11.597 kB
4.716 kB
react-charting
AreaChart
302.827 kB
94.751 kB
react-charting
ChartHoverCard
37.196 kB
12.7 kB
react-charting
DeclarativeChart
677.243 kB
191.438 kB
react-charting
DonutChart
203.703 kB
63.757 kB
react-charting
GanttChart
282.793 kB
88.76 kB
react-charting
GaugeChart
197.055 kB
61.221 kB
react-charting
GroupedVerticalBarChart
294.747 kB
91.91 kB
react-charting
HeatMapChart
285.643 kB
89.439 kB
react-charting
HorizontalBarChart
127.266 kB
39.944 kB
react-charting
HorizontalBarChartWithAxis
293.933 kB
91.166 kB
react-charting
Legends
151.481 kB
46.399 kB
react-charting
LineChart
332.434 kB
101.789 kB
react-charting
MultiStackedBarChart
181.933 kB
55.389 kB
react-charting
PieChart
134.305 kB
42.299 kB
react-charting
PolarChart
235.149 kB
74.293 kB
react-charting
SankeyChart
158.002 kB
49.166 kB
react-charting
ScatterChart
289 kB
91.071 kB
react-charting
Sparkline
87.616 kB
29.671 kB
react-charting
StackedBarChart
175.618 kB
52.99 kB
react-charting
TreeChart
84.809 kB
26.636 kB
react-charting
VerticalBarChart
303.585 kB
93.172 kB
react-charting
VerticalStackedBarChart
300.791 kB
92.923 kB
react-charts
AreaChart
404.322 kB
126.056 kB
react-charts
DeclarativeChart
755.323 kB
220.437 kB
react-charts
DonutChart
314.785 kB
96.812 kB
react-charts
FunnelChart
306.284 kB
93.624 kB
react-charts
GanttChart
387.422 kB
120.42 kB
react-charts
GaugeChart
314.163 kB
96.187 kB
react-charts
GroupedVerticalBarChart
395.293 kB
123.143 kB
react-charts
HeatMapChart
389.498 kB
121.461 kB
react-charts
HorizontalBarChart
294.457 kB
89.29 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
234.137 kB
70.117 kB
react-charts
LineChart
415.652 kB
129.018 kB
react-charts
PolarChart
343.136 kB
106.676 kB
react-charts
SankeyChart
211.914 kB
67.836 kB
react-charts
ScatterChart
395.035 kB
123.149 kB
react-charts
Sparkline
80.503 kB
26.644 kB
react-charts
VerticalBarChart
431.773 kB
128.084 kB
react-charts
VerticalStackedBarChart
401.497 kB
124.578 kB
react-checkbox
Checkbox
29.624 kB
10.543 kB
react-color-picker
ColorArea
43.436 kB
15.728 kB
react-color-picker
ColorPicker
15.005 kB
6.057 kB
react-color-picker
ColorSlider
38.424 kB
14.209 kB
react-combobox
Combobox (including child components)
138.324 kB
44.667 kB
react-combobox
Dropdown (including child components)
138.092 kB
44.433 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.328 kB
19.02 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
226.531 kB
68.074 kB
react-components
react-components: FluentProvider & webLightTheme
39.525 kB
13.113 kB
react-datepicker-compat
DatePicker Compat
216.454 kB
63.95 kB
react-dialog
Dialog (including children components)
90.204 kB
27.895 kB
react-divider
Divider
15.08 kB
5.41 kB
react-field
Field
21.127 kB
7.887 kB
react-headless-components-preview
react-headless-components-preview: entire library
248.42 kB
71.443 kB
react-image
Image
12.349 kB
5.023 kB
react-input
Input
25.044 kB
8.183 kB
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime
1.914 kB
908 B
react-jsx-runtime
JSX Runtime
1.314 kB
601 B
react-label
Label
11.696 kB
4.74 kB
react-link
Link
15.263 kB
6.048 kB
react-list
List
74.655 kB
23.01 kB
react-list
ListItem
98.151 kB
29.865 kB
react-menu
Menu (including children components)
160.102 kB
50.764 kB
react-menu
Menu (including selectable components)
163.28 kB
51.395 kB
react-message-bar
MessageBar (all components)
22.306 kB
8.184 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.339 kB
1.881 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
6.091 kB
2.501 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.727 kB
823 B
react-overflow
hooks only
9.117 kB
3.241 kB
react-persona
Persona
54.17 kB
16.793 kB
react-popover
Popover
125.741 kB
40.448 kB
react-portal
Portal
12.731 kB
4.963 kB
react-portal-compat
PortalCompatProvider
5.567 kB
2.237 kB
react-positioning
usePositioning
28.889 kB
10.158 kB
react-positioning
useSafeZoneArea
12.445 kB
5 kB
react-progress
ProgressBar
19.127 kB
7.436 kB
react-provider
FluentProvider
18.911 kB
7.278 kB
react-radio
Radio
27.012 kB
8.731 kB
react-radio
RadioGroup
12.774 kB
5.184 kB
react-select
Select
24.887 kB
8.943 kB
react-slider
Slider
32.259 kB
11.103 kB
react-spinbutton
SpinButton
32.542 kB
10.603 kB
react-spinner
Spinner
22.441 kB
7.35 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
92.162 kB
27.267 kB
react-switch
Switch
32.256 kB
10.183 kB
react-table
DataGrid
147.115 kB
43.627 kB
react-table
Table (Primitives only)
36.931 kB
12.324 kB
react-table
Table as DataGrid
118.7 kB
33.35 kB
react-table
Table (Selection only)
65.492 kB
18.622 kB
react-table
Table (Sort only)
64.135 kB
18.232 kB
react-tag-picker
@fluentui/react-tag-picker - package
174.152 kB
54.127 kB
react-tags
InteractionTag
12.464 kB
4.95 kB
react-tags
Tag
28.389 kB
8.911 kB
react-tags
TagGroup
69.754 kB
21.41 kB
react-teaching-popover
TeachingPopover
101.1 kB
31.859 kB
react-text
Text - Default
14.036 kB
5.461 kB
react-text
Text - Wrappers
17.195 kB
5.772 kB
react-textarea
Textarea
23.409 kB
8.452 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
37.985 kB
7.895 kB
react-theme
Teams: Light theme
20.803 kB
5.851 kB
react-timepicker-compat
TimePicker
141.076 kB
46.036 kB
react-toast
Toast (including Toaster)
90.614 kB
28.148 kB
react-tooltip
Tooltip
53.183 kB
18.848 kB
react-tree
FlatTree
135.901 kB
40.452 kB
react-tree
PersonaFlatTree
137.729 kB
40.967 kB
react-tree
PersonaTree
133.79 kB
39.741 kB
react-tree
Tree
131.968 kB
39.256 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against e1b874ffb3a2ffa5a841b54856ca573e54a32b3c

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -22,6 +22,8 @@ export const parameters = {
dirSwitcher: true,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

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.submenus open.chromium.png 413 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 957 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 801 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 34 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 117 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 81 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed
vr-tests/Keytip 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Disabled.default.chromium.png 26 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

@GianoglioEnrico GianoglioEnrico marked this pull request as ready for review June 19, 2026 17:10
@GianoglioEnrico GianoglioEnrico requested review from a team as code owners June 19, 2026 17:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant