Skip to content

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Nov 6, 2023

Previous Behavior

New Behavior

  • devcontainer uses node 18 ( used within codespaces )

    • image
  • updated lage ignore

Related Issue(s)

@Hotell Hotell added the CI label Nov 6, 2023
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 650 642 5000
Button mount 321 308 5000
Field mount 1143 1125 5000
FluentProvider mount 716 708 5000
FluentProviderWithTheme mount 81 90 10
FluentProviderWithTheme virtual-rerender 74 70 10
FluentProviderWithTheme virtual-rerender-with-unmount 69 79 10
MakeStyles mount 865 890 50000
Persona mount 1781 1716 5000
SpinButton mount 1412 1371 5000

@Hotell Hotell marked this pull request as ready for review November 6, 2023 14:16
@Hotell Hotell requested a review from a team as a code owner November 6, 2023 14:16
@Hotell Hotell enabled auto-merge (squash) November 6, 2023 14:16
@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 6, 2023

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 1a73613:

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

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 120 106 1.13:1
ChatWithPopoverPerf.default 210 189 1.11:1
DividerMinimalPerf.default 211 194 1.09:1
HeaderMinimalPerf.default 215 201 1.07:1
AvatarMinimalPerf.default 111 105 1.06:1
HeaderSlotsPerf.default 472 447 1.06:1
LoaderMinimalPerf.default 200 188 1.06:1
PortalMinimalPerf.default 87 82 1.06:1
TextMinimalPerf.default 200 189 1.06:1
AlertMinimalPerf.default 161 154 1.05:1
AttachmentMinimalPerf.default 86 82 1.05:1
ButtonMinimalPerf.default 86 82 1.05:1
CarouselMinimalPerf.default 258 245 1.05:1
VideoMinimalPerf.default 472 448 1.05:1
CardMinimalPerf.default 330 318 1.04:1
DropdownManyItemsPerf.default 397 381 1.04:1
LayoutMinimalPerf.default 199 191 1.04:1
RadioGroupMinimalPerf.default 268 257 1.04:1
SkeletonMinimalPerf.default 197 190 1.04:1
StatusMinimalPerf.default 404 389 1.04:1
TreeWith60ListItems.default 86 83 1.04:1
AttachmentSlotsPerf.default 642 625 1.03:1
BoxMinimalPerf.default 195 189 1.03:1
ButtonSlotsPerf.default 314 304 1.03:1
InputMinimalPerf.default 545 528 1.03:1
ItemLayoutMinimalPerf.default 724 701 1.03:1
LabelMinimalPerf.default 217 211 1.03:1
MenuMinimalPerf.default 500 486 1.03:1
IconMinimalPerf.default 402 390 1.03:1
TableMinimalPerf.default 238 232 1.03:1
ProviderMergeThemesPerf.default 657 641 1.02:1
SliderMinimalPerf.default 735 722 1.02:1
TableManyItemsPerf.default 1114 1095 1.02:1
CustomToolbarPrototype.default 1479 1457 1.02:1
TooltipMinimalPerf.default 1290 1259 1.02:1
TreeMinimalPerf.default 483 473 1.02:1
CheckboxMinimalPerf.default 1134 1123 1.01:1
DropdownMinimalPerf.default 1425 1405 1.01:1
FlexMinimalPerf.default 154 153 1.01:1
AnimationMinimalPerf.default 292 291 1:1
ButtonOverridesMissPerf.default 651 652 1:1
DialogMinimalPerf.default 438 438 1:1
ProviderMinimalPerf.default 203 203 1:1
ReactionMinimalPerf.default 213 213 1:1
SplitButtonMinimalPerf.default 2257 2257 1:1
ChatDuplicateMessagesPerf.default 154 155 0.99:1
ChatMinimalPerf.default 413 419 0.99:1
DatepickerMinimalPerf.default 3459 3496 0.99:1
EmbedMinimalPerf.default 1862 1887 0.99:1
MenuButtonMinimalPerf.default 939 944 0.99:1
GridMinimalPerf.default 188 191 0.98:1
ListCommonPerf.default 377 383 0.98:1
ListMinimalPerf.default 299 306 0.98:1
ListWith60ListItems.default 361 368 0.98:1
PopupMinimalPerf.default 344 350 0.98:1
FormMinimalPerf.default 214 221 0.97:1
ImageMinimalPerf.default 228 235 0.97:1
ListNestedPerf.default 302 311 0.97:1
TextAreaMinimalPerf.default 282 290 0.97:1
ToolbarMinimalPerf.default 533 547 0.97:1
SegmentMinimalPerf.default 187 194 0.96:1
AccordionMinimalPerf.default 79 84 0.94:1
RosterPerf.default 1497 1585 0.94:1

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.341 kB
1.81 kB
react-accordion
Accordion (including children components)
92.983 kB
28.418 kB
react-alert
Alert
84.293 kB
23.456 kB
react-avatar
Avatar
50.534 kB
15.923 kB
react-avatar
AvatarGroup
20.064 kB
7.894 kB
react-avatar
AvatarGroupItem
65.19 kB
20.259 kB
react-badge
Badge
27.264 kB
8.808 kB
react-badge
CounterBadge
28.165 kB
9.101 kB
react-badge
PresenceBadge
25.67 kB
9.313 kB
react-button
Button
40.074 kB
11.292 kB
react-button
CompoundButton
47.43 kB
12.787 kB
react-button
MenuButton
44.848 kB
12.668 kB
react-button
SplitButton
52.862 kB
14.254 kB
react-button
ToggleButton
57.122 kB
13.194 kB
react-calendar-compat
Calendar Compat
141.364 kB
36.841 kB
react-card
Card - All
92.955 kB
26.977 kB
react-card
Card
87.781 kB
25.462 kB
react-card
CardFooter
13.423 kB
5.481 kB
react-card
CardHeader
15.666 kB
6.235 kB
react-card
CardPreview
14.374 kB
5.854 kB
react-checkbox
Checkbox
37.505 kB
12.327 kB
react-combobox
Combobox (including child components)
92.033 kB
30.008 kB
react-combobox
Dropdown (including child components)
90.475 kB
29.668 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.007 kB
20.164 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
207.417 kB
59.289 kB
react-components
react-components: FluentProvider & webLightTheme
42.291 kB
14.005 kB
react-datepicker-compat
DatePicker Compat
212.534 kB
59.345 kB
react-dialog
Dialog (including children components)
94.473 kB
28.28 kB
react-divider
Divider
21.179 kB
7.839 kB
react-field
Field
22.788 kB
8.639 kB
react-image
Image
16.096 kB
6.317 kB
react-infobutton
InfoButton
130.729 kB
41.194 kB
react-infobutton
InfoLabel
134.413 kB
42.351 kB
react-input
Input
27.247 kB
9.194 kB
react-jsx-runtime
Classic Pragma
1.049 kB
531 B
react-jsx-runtime
JSX Dev Runtime
4.14 kB
1.741 kB
react-jsx-runtime
JSX Runtime
4.734 kB
1.983 kB
react-label
Label
14.508 kB
5.857 kB
react-link
Link
17.4 kB
6.977 kB
react-menu
Menu (including children components)
140.176 kB
43.004 kB
react-menu
Menu (including selectable components)
142.862 kB
43.51 kB
react-message-bar
MessageBar (all components)
25.54 kB
9.102 kB
react-overflow
hooks only
12.598 kB
4.754 kB
react-persona
Persona
57.425 kB
17.798 kB
react-popover
Popover
119.46 kB
37.714 kB
react-portal
Portal
12.4 kB
4.541 kB
react-portal-compat
PortalCompatProvider
6.651 kB
2.252 kB
react-positioning
usePositioning
25.305 kB
9.162 kB
react-progress
ProgressBar
17.788 kB
6.986 kB
react-provider
FluentProvider
22.831 kB
8.429 kB
react-radio
Radio
31.266 kB
10.267 kB
react-radio
RadioGroup
15.704 kB
6.35 kB
react-select
Select
28.968 kB
10.269 kB
react-slider
Slider
38.349 kB
12.595 kB
react-spinbutton
SpinButton
37.133 kB
11.856 kB
react-spinner
Spinner
23.762 kB
8.556 kB
react-switch
Switch
33.731 kB
10.899 kB
react-table
DataGrid
157.084 kB
43.906 kB
react-table
Table (Primitives only)
43.941 kB
13.76 kB
react-table
Table as DataGrid
130.165 kB
35.174 kB
react-table
Table (Selection only)
75.777 kB
20.477 kB
react-table
Table (Sort only)
74.384 kB
20.075 kB
react-tags
InteractionTag
15.618 kB
6.152 kB
react-tags
Tag
30.341 kB
9.505 kB
react-tags
TagGroup
73.816 kB
22.097 kB
react-text
Text - Default
17.065 kB
6.645 kB
react-text
Text - Wrappers
20.237 kB
6.965 kB
react-textarea
Textarea
31.306 kB
10.549 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.616 kB
7.299 kB
react-theme
Teams: Light theme
19.287 kB
5.49 kB
react-timepicker-compat-preview
TimePicker
93.434 kB
31.284 kB
react-toast
Toast (including Toaster)
92.725 kB
27.876 kB
react-tooltip
Tooltip
52.466 kB
18.466 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 4382651840595f5f3de5a85bdea3bf8343c35ef9

@size-auditor
Copy link

size-auditor bot commented Nov 6, 2023

Asset size changes

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

Baseline commit: 4382651840595f5f3de5a85bdea3bf8343c35ef9 (build)

@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 648 615 5000
Breadcrumb mount 1649 1654 1000
Checkbox mount 1678 1680 5000
CheckboxBase mount 1476 1462 5000
ChoiceGroup mount 3022 2922 5000
ComboBox mount 671 679 1000
CommandBar mount 6232 6222 1000
ContextualMenu mount 12845 13657 1000
DefaultButton mount 753 772 5000
DetailsRow mount 2188 2205 5000
DetailsRowFast mount 2217 2233 5000
DetailsRowNoStyles mount 1994 2038 5000
Dialog mount 2783 2784 1000
DocumentCardTitle mount 234 230 1000
Dropdown mount 1967 1987 5000
FocusTrapZone mount 1137 1116 5000
FocusZone mount 1081 1063 5000
GroupedList mount 41397 41748 2
GroupedList virtual-rerender 20156 19965 2
GroupedList virtual-rerender-with-unmount 50887 50750 2
GroupedListV2 mount 235 230 2
GroupedListV2 virtual-rerender 215 210 2
GroupedListV2 virtual-rerender-with-unmount 234 223 2
IconButton mount 1114 1086 5000
Label mount 329 330 5000
Layer mount 2747 2719 5000
Link mount 385 411 5000
MenuButton mount 939 950 5000
MessageBar mount 21305 21348 5000
Nav mount 1941 1975 1000
OverflowSet mount 783 734 5000
Panel mount 1850 1788 1000
Persona mount 747 755 1000
Pivot mount 883 896 1000
PrimaryButton mount 827 838 5000
Rating mount 4623 4630 5000
SearchBox mount 924 925 5000
Shimmer mount 1825 1874 5000
Slider mount 1357 1336 5000
SpinButton mount 2787 2918 5000
Spinner mount 377 380 5000
SplitButton mount 1826 1861 5000
Stack mount 416 396 5000
StackWithIntrinsicChildren mount 823 871 5000
StackWithTextChildren mount 2651 2553 5000
SwatchColorPicker mount 6160 6140 5000
TagPicker mount 1411 1429 5000
Text mount 369 368 5000
TextField mount 929 946 5000
ThemeProvider mount 825 826 5000
ThemeProvider virtual-rerender 584 594 5000
ThemeProvider virtual-rerender-with-unmount 1305 1245 5000
Toggle mount 595 606 5000
buttonNative mount 200 196 5000

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@Hotell Hotell merged commit 01a8b69 into microsoft:master Nov 6, 2023
@Hotell Hotell deleted the build/ci/migrate-devcontainer-to-node-18 branch November 6, 2023 16:23
TristanWatanabe pushed a commit to TristanWatanabe/fluentui that referenced this pull request Dec 7, 2023
TristanWatanabe added a commit that referenced this pull request Dec 13, 2023
* chore: migrate to node 18 (#29598)

* chore: migrate to node 18

* chore: bump eslint-plugin-jsdoc which support node 18

* generate changefile

* chore: ignore plugin-jsdoc from syncpack

* chore(utilities): use Timers types based on environment to avoid TS failures introduced with node 18 types

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* generate changefiles

* restrict node version

* update yarn.lock

* ci: bump devcontainer to node 18 (#29759)

* deduplicate semver

* theme designers: changes based on dan and daisy's feedback (#24038)

* for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu.

* suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input

* remove teams theme

* capitalize for consistency

* custom theme now applies to sidebar per dan's request

* uppercase consistency

* revert sidebar change

* theme designer: make name editable (#24098)

* add dropdown

* Update yarn.lock

* cleanup dropdown use

* lock update

* remove unread values

* use dropdown + add avatar

* add editable name

* palette change

* force alphanumeric

* filter input name string

* update name

* revert palette change

Co-authored-by: Micah Godbolt <[email protected]>

* Theme designer: Move colors to local files (#27191)

* move colors code locally to allow for customization

* clean up files

* deduplicate prettier

* fix: UseNode@1 instead of NodeTool

* format files

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* update yarn.lock

* chore: comment out unused codeblock to fix TS transpile errors

---------

Co-authored-by: Martin Hochel <[email protected]>
Co-authored-by: Emma Jiang <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
chrisdholt pushed a commit that referenced this pull request Apr 29, 2024
* chore: migrate to node 18 (#29598)

* chore: migrate to node 18

* chore: bump eslint-plugin-jsdoc which support node 18

* generate changefile

* chore: ignore plugin-jsdoc from syncpack

* chore(utilities): use Timers types based on environment to avoid TS failures introduced with node 18 types

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* generate changefiles

* restrict node version

* update yarn.lock

* ci: bump devcontainer to node 18 (#29759)

* deduplicate semver

* theme designers: changes based on dan and daisy's feedback (#24038)

* for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu.

* suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input

* remove teams theme

* capitalize for consistency

* custom theme now applies to sidebar per dan's request

* uppercase consistency

* revert sidebar change

* theme designer: make name editable (#24098)

* add dropdown

* Update yarn.lock

* cleanup dropdown use

* lock update

* remove unread values

* use dropdown + add avatar

* add editable name

* palette change

* force alphanumeric

* filter input name string

* update name

* revert palette change

Co-authored-by: Micah Godbolt <[email protected]>

* Theme designer: Move colors to local files (#27191)

* move colors code locally to allow for customization

* clean up files

* deduplicate prettier

* fix: UseNode@1 instead of NodeTool

* format files

* chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox

* update yarn.lock

* chore: comment out unused codeblock to fix TS transpile errors

---------

Co-authored-by: Martin Hochel <[email protected]>
Co-authored-by: Emma Jiang <[email protected]>
Co-authored-by: Micah Godbolt <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants