Skip to content

react-utilities: Adding helper type to define slot class names#21933

Merged
khmakoto merged 2 commits into
microsoft:masterfrom
khmakoto:classNamesHelper
Mar 3, 2022
Merged

react-utilities: Adding helper type to define slot class names#21933
khmakoto merged 2 commits into
microsoft:masterfrom
khmakoto:classNamesHelper

Conversation

@khmakoto

@khmakoto khmakoto commented Mar 2, 2022

Copy link
Copy Markdown
Member

PR description

This PR adds a SlotClassNames helper type, as specified in RFC #21206, under @fluentui/react-utilities to help correctly define the slot class names object for our components, ensuring that all slots have a corresponding class name. This PR also updates the switchClassNames object under @fluentui/react-switch to use this new helper type.

Related Issue(s)

Fixes part of #21847.

@khmakoto khmakoto requested a review from a team as a code owner March 2, 2022 23:52
@khmakoto khmakoto self-assigned this Mar 2, 2022
@khmakoto khmakoto requested review from a team, behowell and ecraig12345 as code owners March 2, 2022 23:52
@codesandbox-ci

codesandbox-ci Bot commented Mar 2, 2022

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e43810e:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
72.822 kB
22.054 kB
react-avatar
Avatar
44.943 kB
13.043 kB
react-badge
Badge
20.869 kB
6.549 kB
react-badge
CounterBadge
21.737 kB
6.843 kB
react-badge
PresenceBadge
21.827 kB
6.519 kB
react-button
Button
27.982 kB
8.043 kB
react-button
CompoundButton
33.246 kB
9.007 kB
react-button
MenuButton
29.65 kB
8.624 kB
react-button
SplitButton
36.132 kB
9.835 kB
react-button
ToggleButton
37.28 kB
8.647 kB
react-card
Card - All
53.205 kB
15.27 kB
react-card
Card
48.898 kB
14.083 kB
react-card
CardFooter
7.653 kB
3.246 kB
react-card
CardHeader
8.931 kB
3.689 kB
react-card
CardPreview
7.626 kB
3.272 kB
react-combobox
Combobox
6.813 kB
2.895 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
171.709 kB
48.089 kB
react-components
react-components: FluentProvider & webLightTheme
32.526 kB
10.645 kB
react-divider
Divider
15.301 kB
5.532 kB
react-image
Image
10.105 kB
3.952 kB
react-input
Input
21.538 kB
7.134 kB
react-label
Label
8.341 kB
3.487 kB
react-link
Link
11.102 kB
4.504 kB
react-menu
Menu (including children components)
103.43 kB
31.858 kB
react-menu
Menu (including selectable components)
105.785 kB
32.219 kB
react-popover
Popover
96.339 kB
29.399 kB
react-portal
Portal
6.267 kB
2.168 kB
react-positioning
usePopper
23.21 kB
8.084 kB
react-provider
FluentProvider
14.009 kB
5.25 kB
react-select
Select
7.754 kB
3.258 kB
react-slider
Slider
22.975 kB
7.769 kB
react-spinner
Spinner
6.811 kB
2.895 kB
react-switch
Switch
22.598 kB
7.642 kB
react-text
Text - Default
10.793 kB
4.23 kB
react-text
Text - Wrappers
14.107 kB
4.573 kB
react-tooltip
Tooltip
42.76 kB
14.701 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against d4c33467e224fee30434372238eedf5e7f7d3866

@size-auditor

size-auditor Bot commented Mar 3, 2022

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f52f47c2c8db89c01f91e8f9b5107f39e4a8c28b (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1008 1026 5000
BaseButton mount 1058 1062 5000
Breadcrumb mount 2814 2837 1000
ButtonNext mount 541 537 5000
Checkbox mount 1754 1736 5000
CheckboxBase mount 1561 1512 5000
ChoiceGroup mount 5387 5403 5000
ComboBox mount 1166 1090 1000
CommandBar mount 10990 10923 1000
ContextualMenu mount 9154 9159 1000
DefaultButton mount 1309 1316 5000
DetailsRow mount 4203 4141 5000
DetailsRowFast mount 4246 4217 5000
DetailsRowNoStyles mount 4082 4040 5000
Dialog mount 2430 2457 1000
DocumentCardTitle mount 209 242 1000
Dropdown mount 3635 3605 5000
FluentProviderNext mount 2003 1978 5000
FluentProviderWithTheme mount 192 186 10
FluentProviderWithTheme virtual-rerender 144 122 10
FluentProviderWithTheme virtual-rerender-with-unmount 214 207 10
FocusTrapZone mount 2033 2056 5000
FocusZone mount 1953 1981 5000
IconButton mount 2035 2059 5000
Label mount 418 410 5000
Layer mount 3314 3342 5000
Link mount 542 564 5000
MakeStyles mount 1756 1765 50000
MenuButton mount 1700 1697 5000
MessageBar mount 2205 2176 5000
Nav mount 3708 3710 1000
OverflowSet mount 1243 1232 5000
Panel mount 2319 2297 1000
Persona mount 923 967 1000
Pivot mount 1598 1588 1000
PrimaryButton mount 1484 1449 5000
Rating mount 8873 8952 5000
SearchBox mount 1585 1555 5000
Shimmer mount 2907 2897 5000
Slider mount 2217 2160 5000
SpinButton mount 5500 5509 5000
Spinner mount 491 500 5000
SplitButton mount 3550 3612 5000
Stack mount 640 603 5000
StackWithIntrinsicChildren mount 2778 2780 5000
StackWithTextChildren mount 6125 6233 5000
SwatchColorPicker mount 12864 12790 5000
TagPicker mount 3028 3041 5000
TeachingBubble mount 14114 14042 5000
Text mount 515 507 5000
TextField mount 1613 1635 5000
ThemeProvider mount 1316 1305 5000
ThemeProvider virtual-rerender 697 692 5000
ThemeProvider virtual-rerender-with-unmount 2216 2174 5000
Toggle mount 947 958 5000
buttonNative mount 164 176 5000

@khmakoto khmakoto merged commit 852bd41 into microsoft:master Mar 3, 2022
@khmakoto khmakoto mentioned this pull request Mar 3, 2022
31 tasks
@khmakoto khmakoto deleted the classNamesHelper branch March 4, 2022 01:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants