Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-swatch-picker): release SwatchPicker as 9.0.0 stable #31389

Conversation

ValentinaKozlova
Copy link
Contributor

Release SwatchPicker to stable

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.14 MB
275.513 kB
1.162 MB
279.076 kB
22.265 kB
3.563 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
0 B
0 B
109.642 kB
30.569 kB
🆕 New entry
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
priority-overflow
createOverflowManager
4.457 kB
1.856 kB
react
ActivityItem
71.019 kB
23.288 kB
react
Announced
38.291 kB
13.239 kB
react
Autofill
15.365 kB
4.743 kB
react
Breadcrumb
201.796 kB
60.267 kB
react
Button
195.26 kB
56.471 kB
react
ButtonGrid
180.207 kB
54.515 kB
react
Calendar
121.542 kB
36.943 kB
react
Callout
84.108 kB
27.552 kB
react
Check
52.963 kB
17.773 kB
react
Checkbox
59.751 kB
19.806 kB
react
ChoiceGroup
65.276 kB
21.438 kB
react
ChoiceGroupOption
58.531 kB
19.309 kB
react
Coachmark
92.937 kB
29.356 kB
react
Color
7.737 kB
3.106 kB
react
ColorPicker
132.985 kB
41.502 kB
react
ComboBox
251.561 kB
72.081 kB
react
CommandBar
202.829 kB
59.975 kB
react
ContextualMenu
154.789 kB
48.068 kB
react
DatePicker
183.939 kB
56.079 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.317 kB
65.63 kB
react
Dialog
211.12 kB
62.982 kB
react
Divider
19.399 kB
6.798 kB
react
DocumentCard
216.805 kB
64.269 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.109 kB
11.448 kB
react
Dropdown
233.726 kB
68.456 kB
react
ExtendedPicker
96.565 kB
27.809 kB
react
Fabric
41.537 kB
14.283 kB
react
Facepile
210.377 kB
63.035 kB
react
FloatingPicker
241.851 kB
68.827 kB
react
FocusTrapZone
16.975 kB
5.917 kB
react
FocusZone
54.844 kB
17.402 kB
react
Grid
180.207 kB
54.515 kB
react
GroupedList
134.634 kB
40.596 kB
react
GroupedListV2
122.251 kB
37.703 kB
react
HoverCard
96.969 kB
30.741 kB
react
Icon
51.644 kB
17.197 kB
react
Icons
66.305 kB
24.379 kB
react
Image
46.701 kB
15.646 kB
react
Keytip
81.482 kB
26.712 kB
react
KeytipData
13.969 kB
4.57 kB
react
KeytipLayer
103.278 kB
31.961 kB
react
Keytips
106.046 kB
32.966 kB
react
Label
38.134 kB
13.207 kB
react
Layer
47.887 kB
16.295 kB
react
Link
39.488 kB
13.614 kB
react
List
39.176 kB
12.384 kB
react
MarqueeSelection
74.321 kB
22.385 kB
react
MessageBar
190.311 kB
56.941 kB
react
Modal
93.44 kB
30.18 kB
react
Nav
187.789 kB
56.378 kB
react
OverflowSet
33.191 kB
11.252 kB
react
Overlay
40.694 kB
14.023 kB
react
Panel
200.831 kB
59.888 kB
react
Persona
114.617 kB
36.442 kB
react
PersonaCoin
114.617 kB
36.442 kB
react
PersonaPresence
57.833 kB
19.303 kB
react
Pickers
293.537 kB
82.173 kB
react
Pivot
188.703 kB
57.114 kB
react
Popup
12.242 kB
4.181 kB
react
Positioning
22.608 kB
7.63 kB
react
PositioningContainer
73.643 kB
23.706 kB
react
ProgressIndicator
39.286 kB
13.482 kB
react
Rating
81.762 kB
26.057 kB
react
Fluent UI React (entire library)
1.013 MB
281.289 kB
react
ResizeGroup
13.286 kB
4.365 kB
react
ResponsiveMode
8.078 kB
2.95 kB
react
ScrollablePane
55.325 kB
17.669 kB
react
SearchBox
188.586 kB
56.544 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
232.346 kB
67.779 kB
react
Selection
42.252 kB
12.203 kB
react
Separator
35.183 kB
12.088 kB
react
Shimmer
49.049 kB
16.206 kB
react
ShimmeredDetailsList
240.092 kB
68.397 kB
react
Slider
57.449 kB
19.143 kB
react
SpinButton
192.314 kB
57.665 kB
react
Spinner
41.481 kB
14.412 kB
react
Stack
41.547 kB
14.233 kB
react
Sticky
32.541 kB
10.49 kB
react
Styling
45.853 kB
15.082 kB
react
SwatchColorPicker
190.533 kB
57.999 kB
react
TeachingBubble
205.586 kB
60.896 kB
react
Text
36.723 kB
12.763 kB
react
TextField
80.555 kB
25.262 kB
react
Theme
43.321 kB
14.129 kB
react
ThemeGenerator
12.34 kB
4.106 kB
react
TimePicker
241.365 kB
69.856 kB
react
Toggle
46.02 kB
15.903 kB
react
Tooltip
87.136 kB
28.164 kB
react
Utilities
82.495 kB
25.047 kB
react
Viewport
23.703 kB
7.589 kB
react
WeeklyDayPicker
101.682 kB
31.738 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
101.386 kB
30.643 kB
react-alert
Alert
83.737 kB
23.475 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.702 kB
7.794 kB
react-avatar
AvatarGroupItem
64.829 kB
20.272 kB
react-badge
Badge
26.905 kB
8.73 kB
react-badge
CounterBadge
27.806 kB
9.025 kB
react-badge
PresenceBadge
25.311 kB
9.307 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
117.263 kB
32.241 kB
react-button
Button
39.513 kB
11.17 kB
react-button
CompoundButton
46.874 kB
12.662 kB
react-button
MenuButton
44.292 kB
12.544 kB
react-button
SplitButton
52.306 kB
14.135 kB
react-button
ToggleButton
56.558 kB
13.068 kB
react-calendar-compat
Calendar Compat
154.469 kB
40.161 kB
react-card
Card - All
104.438 kB
29.41 kB
react-card
Card
97.449 kB
27.681 kB
react-card
CardFooter
13.971 kB
5.626 kB
react-card
CardHeader
16.214 kB
6.386 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-checkbox
Checkbox
36.102 kB
12.131 kB
react-combobox
Combobox (including child components)
105.628 kB
33.907 kB
react-combobox
Dropdown (including child components)
107.043 kB
33.877 kB
react-components
react-components: Button, FluentProvider & webLightTheme
71.55 kB
20.584 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
221.825 kB
62.568 kB
react-components
react-components: FluentProvider & webLightTheme
44.037 kB
14.418 kB
react-datepicker-compat
DatePicker Compat
228.584 kB
63.546 kB
react-dialog
Dialog (including children components)
100.192 kB
29.884 kB
react-divider
Divider
20.922 kB
7.791 kB
react-field
Field
22.976 kB
8.722 kB
react-image
Image
15.745 kB
6.231 kB
react-input
Input
28.122 kB
9.36 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.266 kB
5.829 kB
react-link
Link
17.082 kB
6.911 kB
react-menu
Menu (including children components)
154.383 kB
46.161 kB
react-menu
Menu (including selectable components)
157.069 kB
46.71 kB
react-message-bar
MessageBar (all components)
24.204 kB
8.983 kB
react-northstar
Accordion
85.392 kB
26.518 kB
react-northstar
Alert
87.45 kB
26.902 kB
react-northstar
Animation
55.34 kB
17.829 kB
react-northstar
Attachment
86.844 kB
26.692 kB
react-northstar
Avatar
80.279 kB
24.629 kB
react-northstar
Box
75.248 kB
23.806 kB
react-northstar
Breadcrumb
79.92 kB
24.709 kB
react-northstar
Button
83.16 kB
25.947 kB
react-northstar
Card
82.705 kB
25.023 kB
react-northstar
Carousel
105.182 kB
31.871 kB
react-northstar
Chat
152.378 kB
45.964 kB
react-northstar
Checkbox
79.807 kB
25.078 kB
react-northstar
Datepicker
184.939 kB
56.194 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.058 kB
33.615 kB
react-northstar
Divider
76.619 kB
24.129 kB
react-northstar
Dropdown
196.499 kB
59.455 kB
react-northstar
Embed
81.477 kB
25.417 kB
react-northstar
Flex
47.728 kB
15.438 kB
react-northstar
Form
92.527 kB
28.879 kB
react-northstar
Grid
70.584 kB
22.278 kB
react-northstar
Header
74.756 kB
23.461 kB
react-northstar
Image
73.591 kB
23.329 kB
react-northstar
Input
88.346 kB
27.78 kB
react-northstar
ItemLayout
78.231 kB
24.454 kB
react-northstar
Label
77.92 kB
24.41 kB
react-northstar
Layout
75.393 kB
23.798 kB
react-northstar
List
88.493 kB
27.547 kB
react-northstar
Loader
78.616 kB
24.729 kB
react-northstar
Menu
126.89 kB
39.872 kB
react-northstar
MenuButton
161.296 kB
48.883 kB
react-northstar
Pill
83.722 kB
26.069 kB
react-northstar
Popup
133.604 kB
41.483 kB
react-northstar
Portal
58.338 kB
18.852 kB
react-northstar
Provider
93.138 kB
29.63 kB
react-northstar
RadioGroup
83.282 kB
26.053 kB
react-northstar
Reaction
77.28 kB
24.122 kB
react-northstar
Segment
76.209 kB
23.892 kB
react-northstar
Skeleton
77.765 kB
24.2 kB
react-northstar
Slider
84.27 kB
26.737 kB
react-northstar
SplitButton
176.534 kB
52.63 kB
react-northstar
Status
76.272 kB
24.05 kB
react-northstar
SvgIcon
36.823 kB
11.743 kB
react-northstar
Table
80.796 kB
25.154 kB
react-northstar
Text
74.114 kB
23.507 kB
react-northstar
TextArea
74.248 kB
23.492 kB
react-northstar
Toolbar
173.345 kB
52.08 kB
react-northstar
Tooltip
108.261 kB
34.482 kB
react-northstar
Tree
87.855 kB
27.217 kB
react-northstar
Video
75.411 kB
23.799 kB
react-overflow
hooks only
12.87 kB
4.83 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
128.669 kB
40.26 kB
react-portal
Portal
14.163 kB
4.948 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
26.489 kB
9.552 kB
react-progress
ProgressBar
17.428 kB
6.899 kB
react-provider
FluentProvider
24.211 kB
8.721 kB
react-radio
Radio
33.396 kB
10.316 kB
react-radio
RadioGroup
15.354 kB
6.265 kB
react-select
Select
28.609 kB
10.204 kB
react-slider
Slider
40.395 kB
13.024 kB
react-spinbutton
SpinButton
36.78 kB
11.789 kB
react-spinner
Spinner
24.729 kB
8.348 kB
react-switch
Switch
36.04 kB
11.305 kB
react-table
DataGrid
169.274 kB
46.907 kB
react-table
Table (Primitives only)
45.77 kB
14.174 kB
react-table
Table as DataGrid
138.358 kB
37.213 kB
react-table
Table (Selection only)
76.774 kB
20.602 kB
react-table
Table (Sort only)
75.417 kB
20.205 kB
react-tag-picker
@fluentui/react-tag-picker - package
188.833 kB
55.784 kB
react-tags
InteractionTag
15.299 kB
6.08 kB
react-tags
Tag
29.092 kB
9.418 kB
react-tags
TagGroup
82.49 kB
24.46 kB
react-text
Text - Default
16.705 kB
6.57 kB
react-text
Text - Wrappers
19.878 kB
6.897 kB
react-textarea
Textarea
30.947 kB
10.477 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.666 kB
7.453 kB
react-theme
Teams: Light theme
19.642 kB
5.549 kB
react-timepicker-compat
TimePicker
107.646 kB
35.281 kB
react-toast
Toast (including Toaster)
99.113 kB
29.844 kB
react-tooltip
Tooltip
55.201 kB
19.285 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 63f830ae8a96fb2e0f2fef653aaef317081da235

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 78 79 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 599 642 5000
Button mount 308 294 5000
Field mount 1138 1135 5000
FluentProvider mount 699 690 5000
FluentProviderWithTheme mount 83 83 10
FluentProviderWithTheme virtual-rerender 31 38 10
FluentProviderWithTheme virtual-rerender-with-unmount 78 79 10 Possible regression
MakeStyles mount 846 849 50000
Persona mount 1794 1714 5000
SpinButton mount 1393 1381 5000
SwatchPicker mount 1516 1562 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 88 75 1.17:1
CardMinimalPerf.default 325 279 1.16:1
LoaderMinimalPerf.default 205 179 1.15:1
TableMinimalPerf.default 255 225 1.13:1
AnimationMinimalPerf.default 321 291 1.1:1
ProviderMinimalPerf.default 210 192 1.09:1
FlexMinimalPerf.default 168 156 1.08:1
GridMinimalPerf.default 194 179 1.08:1
TreeMinimalPerf.default 476 446 1.07:1
AttachmentMinimalPerf.default 87 82 1.06:1
ButtonSlotsPerf.default 322 305 1.06:1
PortalMinimalPerf.default 84 79 1.06:1
RefMinimalPerf.default 114 108 1.06:1
AttachmentSlotsPerf.default 651 618 1.05:1
HeaderSlotsPerf.default 464 444 1.05:1
ItemLayoutMinimalPerf.default 714 682 1.05:1
LayoutMinimalPerf.default 196 187 1.05:1
ChatMinimalPerf.default 425 407 1.04:1
DropdownManyItemsPerf.default 394 379 1.04:1
ReactionMinimalPerf.default 208 200 1.04:1
HeaderMinimalPerf.default 204 198 1.03:1
ListWith60ListItems.default 359 348 1.03:1
SplitButtonMinimalPerf.default 2221 2166 1.03:1
ToolbarMinimalPerf.default 546 531 1.03:1
VideoMinimalPerf.default 440 426 1.03:1
AvatarMinimalPerf.default 110 108 1.02:1
ButtonMinimalPerf.default 86 84 1.02:1
ChatDuplicateMessagesPerf.default 147 144 1.02:1
EmbedMinimalPerf.default 1855 1814 1.02:1
InputMinimalPerf.default 538 525 1.02:1
ListNestedPerf.default 318 312 1.02:1
MenuButtonMinimalPerf.default 937 919 1.02:1
StatusMinimalPerf.default 394 385 1.02:1
IconMinimalPerf.default 377 369 1.02:1
AlertMinimalPerf.default 159 158 1.01:1
DropdownMinimalPerf.default 1411 1397 1.01:1
MenuMinimalPerf.default 493 488 1.01:1
TextMinimalPerf.default 185 183 1.01:1
BoxMinimalPerf.default 192 192 1:1
CarouselMinimalPerf.default 250 250 1:1
CheckboxMinimalPerf.default 1103 1106 1:1
DatepickerMinimalPerf.default 3445 3433 1:1
DialogMinimalPerf.default 430 428 1:1
ProviderMergeThemesPerf.default 631 631 1:1
RadioGroupMinimalPerf.default 261 261 1:1
CustomToolbarPrototype.default 1418 1425 1:1
FormMinimalPerf.default 222 225 0.99:1
TableManyItemsPerf.default 1082 1094 0.99:1
ButtonOverridesMissPerf.default 631 645 0.98:1
ChatWithPopoverPerf.default 184 188 0.98:1
ListCommonPerf.default 367 373 0.98:1
PopupMinimalPerf.default 334 342 0.98:1
SliderMinimalPerf.default 717 730 0.98:1
ListMinimalPerf.default 306 314 0.97:1
LabelMinimalPerf.default 217 225 0.96:1
RosterPerf.default 1501 1563 0.96:1
SegmentMinimalPerf.default 189 197 0.96:1
ImageMinimalPerf.default 213 225 0.95:1
SkeletonMinimalPerf.default 183 192 0.95:1
TooltipMinimalPerf.default 1226 1284 0.95:1
TreeWith60ListItems.default 84 88 0.95:1
TextAreaMinimalPerf.default 273 294 0.93:1
DividerMinimalPerf.default 201 235 0.86:1

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 16, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 616 642 5000
Breadcrumb mount 1680 1692 1000
Checkbox mount 1706 1709 5000
CheckboxBase mount 1476 1480 5000
ChoiceGroup mount 2935 2908 5000
ComboBox mount 694 687 1000
CommandBar mount 6460 6524 1000
ContextualMenu mount 12194 12541 1000
DefaultButton mount 766 770 5000
DetailsRow mount 2158 2227 5000
DetailsRowFast mount 2176 2178 5000
DetailsRowNoStyles mount 2001 2060 5000
Dialog mount 2652 2848 1000
DocumentCardTitle mount 231 229 1000
Dropdown mount 1998 2004 5000
FocusTrapZone mount 1147 1139 5000
FocusZone mount 1074 1075 5000
GroupedList mount 37746 42368 2
GroupedList virtual-rerender 17990 20290 2
GroupedList virtual-rerender-with-unmount 51063 50852 2
GroupedListV2 mount 226 220 2
GroupedListV2 virtual-rerender 215 210 2
GroupedListV2 virtual-rerender-with-unmount 237 230 2
IconButton mount 1110 1164 5000
Label mount 344 344 5000
Layer mount 2767 2707 5000
Link mount 401 401 5000
MenuButton mount 993 978 5000
MessageBar mount 21469 21436 5000
Nav mount 2003 2000 1000
OverflowSet mount 776 791 5000
Panel mount 1892 1836 1000
Persona mount 740 750 1000
Pivot mount 923 882 1000
PrimaryButton mount 926 936 5000
Rating mount 4664 4659 5000
SearchBox mount 939 906 5000
Shimmer mount 1893 1909 5000
Slider mount 1318 1304 5000
SpinButton mount 2941 2910 5000
Spinner mount 387 400 5000
SplitButton mount 1854 1824 5000
Stack mount 424 406 5000
StackWithIntrinsicChildren mount 852 867 5000
StackWithTextChildren mount 2682 2694 5000
SwatchColorPicker mount 6315 6367 5000
TagPicker mount 1459 1443 5000
Text mount 386 376 5000
TextField mount 906 947 5000
ThemeProvider mount 852 858 5000
ThemeProvider virtual-rerender 596 581 5000
ThemeProvider virtual-rerender-with-unmount 1285 1294 5000
Toggle mount 620 622 5000
buttonNative mount 192 188 5000

@ValentinaKozlova ValentinaKozlova force-pushed the feat/swatch-picker-stable-release branch from 5fa6af1 to a65e9f0 Compare May 16, 2024 11:29
@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review May 16, 2024 11:31
Copy link

codesandbox-ci bot commented May 16, 2024

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.

@ValentinaKozlova ValentinaKozlova mentioned this pull request May 16, 2024
28 tasks
@ValentinaKozlova ValentinaKozlova force-pushed the feat/swatch-picker-stable-release branch 2 times, most recently from cb4d9b5 to d0ba2ec Compare May 16, 2024 13:02
@ValentinaKozlova ValentinaKozlova force-pushed the feat/swatch-picker-stable-release branch from d0ba2ec to 623e057 Compare May 16, 2024 14:32
Copy link
Collaborator

@JustSlone JustSlone left a comment

Choose a reason for hiding this comment

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

🎉

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@ValentinaKozlova ValentinaKozlova merged commit cafe42c into microsoft:master May 16, 2024
22 checks passed
@ValentinaKozlova ValentinaKozlova deleted the feat/swatch-picker-stable-release branch May 16, 2024 19:18
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
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.

5 participants