Skip to content

Conversation

@layershifter
Copy link
Member

New Behavior

This PR

  • bumps @griffel/eslint-plugin to latest
  • enables @griffel/hook-naming rule
  • updates create-component files to follow .styles.ts naming

Related Issue(s)

@size-auditor
Copy link

size-auditor bot commented Apr 25, 2023

Asset size changes

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

Baseline commit: 3a6bbb0ca32a62a60195d248074236709d7e2b2d (build)

@codesandbox-ci
Copy link

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 fea2e86:

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 20 21 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 693 706 5000
Button mount 402 397 5000
Field mount 1226 1248 5000
FluentProvider mount 786 802 5000
FluentProviderWithTheme mount 111 108 10
FluentProviderWithTheme virtual-rerender 88 96 10
FluentProviderWithTheme virtual-rerender-with-unmount 105 105 10
InfoButton mount 20 21 5000 Possible regression
MakeStyles mount 1197 1175 50000
Persona mount 1929 1891 5000
SpinButton mount 1452 1472 5000

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 106 95 1.12:1
TreeWith60ListItems.default 114 103 1.11:1
ChatWithPopoverPerf.default 261 241 1.08:1
RefMinimalPerf.default 143 133 1.08:1
SegmentMinimalPerf.default 267 247 1.08:1
LoaderMinimalPerf.default 256 240 1.07:1
ReactionMinimalPerf.default 281 262 1.07:1
ButtonOverridesMissPerf.default 856 811 1.06:1
TableMinimalPerf.default 313 294 1.06:1
PortalMinimalPerf.default 118 112 1.05:1
SkeletonMinimalPerf.default 250 239 1.05:1
DividerMinimalPerf.default 258 249 1.04:1
FlexMinimalPerf.default 203 196 1.04:1
LabelMinimalPerf.default 283 273 1.04:1
SliderMinimalPerf.default 923 891 1.04:1
AlertMinimalPerf.default 199 193 1.03:1
BoxMinimalPerf.default 249 242 1.03:1
ListNestedPerf.default 416 405 1.03:1
ProviderMinimalPerf.default 276 269 1.03:1
TextAreaMinimalPerf.default 356 344 1.03:1
ButtonSlotsPerf.default 421 413 1.02:1
CarouselMinimalPerf.default 345 337 1.02:1
DropdownMinimalPerf.default 1827 1799 1.02:1
FormMinimalPerf.default 278 272 1.02:1
ImageMinimalPerf.default 279 274 1.02:1
InputMinimalPerf.default 726 714 1.02:1
MenuMinimalPerf.default 621 610 1.02:1
TreeMinimalPerf.default 592 579 1.02:1
AttachmentSlotsPerf.default 832 822 1.01:1
AvatarMinimalPerf.default 129 128 1.01:1
ChatMinimalPerf.default 528 524 1.01:1
CheckboxMinimalPerf.default 1556 1535 1.01:1
DialogMinimalPerf.default 573 570 1.01:1
DropdownManyItemsPerf.default 493 487 1.01:1
EmbedMinimalPerf.default 2391 2372 1.01:1
GridMinimalPerf.default 242 239 1.01:1
ItemLayoutMinimalPerf.default 910 903 1.01:1
MenuButtonMinimalPerf.default 1256 1240 1.01:1
RosterPerf.default 1816 1797 1.01:1
PopupMinimalPerf.default 453 449 1.01:1
TableManyItemsPerf.default 1422 1403 1.01:1
TextMinimalPerf.default 252 249 1.01:1
CustomToolbarPrototype.default 1906 1883 1.01:1
AnimationMinimalPerf.default 363 362 1:1
ChatDuplicateMessagesPerf.default 202 203 1:1
DatepickerMinimalPerf.default 4534 4522 1:1
HeaderSlotsPerf.default 570 572 1:1
ProviderMergeThemesPerf.default 967 963 1:1
RadioGroupMinimalPerf.default 332 332 1:1
StatusMinimalPerf.default 495 497 1:1
IconMinimalPerf.default 464 462 1:1
ToolbarMinimalPerf.default 656 653 1:1
AccordionMinimalPerf.default 100 101 0.99:1
LayoutMinimalPerf.default 264 267 0.99:1
ListCommonPerf.default 500 504 0.99:1
ListMinimalPerf.default 376 378 0.99:1
SplitButtonMinimalPerf.default 3022 3045 0.99:1
TooltipMinimalPerf.default 1610 1622 0.99:1
ButtonMinimalPerf.default 107 109 0.98:1
CardMinimalPerf.default 367 379 0.97:1
ListWith60ListItems.default 474 495 0.96:1
HeaderMinimalPerf.default 253 265 0.95:1
VideoMinimalPerf.default 510 545 0.94:1

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
560 B
352 B
priority-overflow
createOverflowManager
3.194 kB
1.314 kB
react-accordion
Accordion (including children components)
86.172 kB
26.143 kB
react-alert
Alert
93.779 kB
22.493 kB
react-avatar
Avatar
57.544 kB
14.966 kB
react-avatar
AvatarGroup
15.632 kB
6.258 kB
react-avatar
AvatarGroupItem
73.758 kB
19.478 kB
react-badge
Badge
23.512 kB
7.197 kB
react-badge
CounterBadge
24.416 kB
7.506 kB
react-badge
PresenceBadge
31.904 kB
8.296 kB
react-button
Button
37.179 kB
9.534 kB
react-button
CompoundButton
44.328 kB
11.016 kB
react-button
MenuButton
41.866 kB
10.861 kB
react-button
SplitButton
50.254 kB
12.441 kB
react-button
ToggleButton
55.559 kB
11.479 kB
react-card
Card - All
86.061 kB
24.345 kB
react-card
Card
80.997 kB
22.895 kB
react-card
CardFooter
9.158 kB
3.844 kB
react-card
CardHeader
11.048 kB
4.538 kB
react-card
CardPreview
9.963 kB
4.192 kB
react-checkbox
Checkbox
34.379 kB
10.833 kB
react-combobox
Combobox (including child components)
87.056 kB
28.011 kB
react-combobox
Dropdown (including child components)
85.74 kB
27.747 kB
react-components
react-components: Button, FluentProvider & webLightTheme
65.31 kB
17.931 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
204.5 kB
57.183 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-datepicker-compat
DatePicker Compat
220.414 kB
58.527 kB
react-dialog
Dialog (including children components)
91.028 kB
27.083 kB
react-divider
Divider
17.399 kB
6.298 kB
react-field
Field
18.864 kB
7.004 kB
react-image
Image
11.479 kB
4.573 kB
react-infobutton
InfoButton
128.088 kB
39.045 kB
react-infobutton
InfoLabel
131.371 kB
40.039 kB
react-input
Input
24.133 kB
7.723 kB
react-label
Label
10.104 kB
4.185 kB
react-link
Link
12.357 kB
5.091 kB
react-menu
Menu (including children components)
128.361 kB
39.234 kB
react-menu
Menu (including selectable components)
131.345 kB
39.749 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
64.465 kB
16.892 kB
react-popover
Popover
115.071 kB
35.448 kB
react-portal
Portal
11.649 kB
4.263 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
react-positioning
usePositioning
24.008 kB
8.798 kB
react-progress
ProgressBar
13.856 kB
5.434 kB
react-provider
FluentProvider
18.033 kB
6.666 kB
react-radio
Radio
27.282 kB
8.661 kB
react-radio
RadioGroup
11.312 kB
4.71 kB
react-select
Select
25.357 kB
8.798 kB
react-slider
Slider
34.274 kB
11.069 kB
react-spinbutton
SpinButton
34.045 kB
10.376 kB
react-spinner
Spinner
20.882 kB
6.798 kB
react-switch
Switch
29.806 kB
9.274 kB
react-table
DataGrid
147.821 kB
40.593 kB
react-table
Table (Primitives only)
44.348 kB
12.347 kB
react-table
Table as DataGrid
130.378 kB
33.193 kB
react-table
Table (Selection only)
78.289 kB
19.194 kB
react-table
Table (Sort only)
77.619 kB
19.004 kB
react-text
Text - Default
12.492 kB
4.92 kB
react-text
Text - Wrappers
15.63 kB
5.25 kB
react-textarea
Textarea
27.562 kB
9.087 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
31.33 kB
6.764 kB
react-theme
Teams: Light theme
17.895 kB
5.162 kB
react-tooltip
Tooltip
46.819 kB
16.412 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 3a6bbb0ca32a62a60195d248074236709d7e2b2d

@fabricteam
Copy link
Collaborator

🕵 FluentUI-v0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 849 812 5000
Breadcrumb mount 2165 2239 1000
Checkbox mount 2134 2017 5000
CheckboxBase mount 1894 1768 5000
ChoiceGroup mount 3538 3479 5000
ComboBox mount 838 838 1000
CommandBar mount 8065 7822 1000
ContextualMenu mount 19227 18562 1000
DefaultButton mount 887 996 5000
DetailsRow mount 2608 2836 5000
DetailsRowFast mount 2981 2666 5000
DetailsRowNoStyles mount 2482 2399 5000
Dialog mount 3449 3267 1000
DocumentCardTitle mount 290 299 1000
Dropdown mount 2395 2450 5000
FocusTrapZone mount 1525 1365 5000
FocusZone mount 1499 1471 5000
GroupedList mount 51588 61144 2
GroupedList virtual-rerender 25486 25462 2
GroupedList virtual-rerender-with-unmount 73661 73351 2
GroupedListV2 mount 321 293 2
GroupedListV2 virtual-rerender 303 312 2
GroupedListV2 virtual-rerender-with-unmount 286 301 2
IconButton mount 1356 1296 5000
Label mount 462 412 5000
Layer mount 3524 3603 5000
Link mount 510 475 5000
MenuButton mount 1254 1243 5000
MessageBar mount 26015 26949 5000
Nav mount 2290 2449 1000
OverflowSet mount 1048 937 5000
Panel mount 2239 2252 1000
Persona mount 877 998 1000
Pivot mount 1185 1068 1000
PrimaryButton mount 993 999 5000
Rating mount 5832 5911 5000
SearchBox mount 1079 1197 5000
Shimmer mount 2382 2360 5000
Slider mount 1562 1547 5000
SpinButton mount 3446 3715 5000
Spinner mount 473 472 5000
SplitButton mount 2246 2201 5000
Stack mount 474 528 5000
StackWithIntrinsicChildren mount 1031 1110 5000
StackWithTextChildren mount 2863 3157 5000
SwatchColorPicker mount 7834 7689 5000
TagPicker mount 1931 1873 5000
Text mount 503 453 5000
TextField mount 1149 1228 5000
ThemeProvider mount 1139 1042 5000
ThemeProvider virtual-rerender 779 741 5000
ThemeProvider virtual-rerender-with-unmount 1550 1539 5000
Toggle mount 722 750 5000
buttonNative mount 282 270 5000

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

Is there a follow-up issue to rename all our style files?

@layershifter
Copy link
Member Author

Is there a follow-up issue to rename all our style files?

It's part of #27672 and there is a draft for that #27685.

@layershifter layershifter merged commit e0e8de0 into microsoft:master Apr 26, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Apr 27, 2023
* master:
  chore: enforce files naming to use .styles.ts [cxe-prg files] (microsoft#27707)
  chore: migrate to NodeJS v16 (microsoft#27711)
  remove react-avatar-context package (microsoft#27709)
  test: migrate all v9 libraries to use new conformance setup which improves test execution by approx 46% (microsoft#27669)
  chore: Add caret to react-datepicker-compat dependencies (microsoft#27671)
  test(fluentui/react): fix initial global leaks that were causing OOM issues (microsoft#27661)
  chore(react-utilities): simplifies useControllableState hook internals (microsoft#27702)
  chore: enforce files naming to use .styles.ts (microsoft#27698)
  feat: adds lazy loading example (microsoft#27587)
  feat: react-combobox space conditionally inserts character when freeform is true (microsoft#27025)
  chore(react-tree): updates useOpenItemsState internals (microsoft#27697)
  feat(tools): add conformance setup migration to migrate-converged-pkg generator (microsoft#27668)
  test: use `isolatedModules` for all ts-jest configs to lower memory footprint on CI (microsoft#27670)
  chore: bump @griffel/eslint-plugin & enable @griffel/hook-naming (microsoft#27687)
  feat(react-tree): makes useFlatTree generic (microsoft#27682)
  Enable export to codepen for charting library (microsoft#27539)
  Overflow: added useOverflowCount to exports (microsoft#27678)
  fix: Menu should not steal focus on re-render (microsoft#27688)
  feat(react-conformance): add new TS config api to be able to specify configName and configDir (microsoft#27664)
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

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.

5 participants