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.

Sign up for GitHub

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

Jump to bottom

chore: Create react-colorpicker-compat package #28050

Merged
merged 7 commits into from
May 31, 2023
Merged

chore: Create react-colorpicker-compat package #28050

merged 7 commits into from
May 31, 2023

Conversation

sopranopillow
Copy link
Contributor

@sopranopillow sopranopillow commented May 30, 2023 •
edited
Loading

This PR creates the package react-colorpicker-compat package to start work on its convergence.

Related Issue(s)

@sopranopillow sopranopillow self-assigned this May 30, 2023
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 30, 2023 •
edited
Loading

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

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

@size-auditor
Copy link

size-auditor bot commented May 30, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 17ca96c6b7f684f36a5c63e40e78b4986a86c713 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 590 578 5000
Button mount 294 293 5000
Field mount 1027 1032 5000
FluentProvider mount 651 643 5000
FluentProviderWithTheme mount 72 76 10
FluentProviderWithTheme virtual-rerender 61 66 10
FluentProviderWithTheme virtual-rerender-with-unmount 74 76 10
InfoButton mount 15 12 5000
MakeStyles mount 840 847 50000
Persona mount 1598 1569 5000
SpinButton mount 1245 1282 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

⚠️ 2 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AccordionMinimalPerf.default 83 81 1.02:1 analysis
PortalMinimalPerf.default 91 90 1.01:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 164 146 1.12:1
TreeWith60ListItems.default 90 82 1.1:1
BoxMinimalPerf.default 206 190 1.08:1
CardMinimalPerf.default 321 301 1.07:1
MenuButtonMinimalPerf.default 997 945 1.06:1
IconMinimalPerf.default 396 373 1.06:1
ChatWithPopoverPerf.default 201 191 1.05:1
SegmentMinimalPerf.default 203 193 1.05:1
TextMinimalPerf.default 198 189 1.05:1
CarouselMinimalPerf.default 269 258 1.04:1
DropdownManyItemsPerf.default 397 382 1.04:1
HeaderMinimalPerf.default 210 201 1.04:1
PopupMinimalPerf.default 370 356 1.04:1
TextAreaMinimalPerf.default 296 284 1.04:1
TooltipMinimalPerf.default 1281 1236 1.04:1
ButtonOverridesMissPerf.default 655 639 1.03:1
DividerMinimalPerf.default 215 209 1.03:1
ListWith60ListItems.default 377 367 1.03:1
LoaderMinimalPerf.default 194 188 1.03:1
ProviderMinimalPerf.default 204 198 1.03:1
DatepickerMinimalPerf.default 3734 3678 1.02:1
LayoutMinimalPerf.default 213 208 1.02:1
SkeletonMinimalPerf.default 199 195 1.02:1
SliderMinimalPerf.default 714 703 1.02:1
StatusMinimalPerf.default 411 402 1.02:1
TableManyItemsPerf.default 1126 1103 1.02:1
DropdownMinimalPerf.default 1438 1422 1.01:1
ImageMinimalPerf.default 220 217 1.01:1
InputMinimalPerf.default 534 529 1.01:1
ReactionMinimalPerf.default 213 210 1.01:1
TreeMinimalPerf.default 487 483 1.01:1
AttachmentSlotsPerf.default 656 655 1:1
ChatMinimalPerf.default 432 430 1:1
CheckboxMinimalPerf.default 1138 1136 1:1
DialogMinimalPerf.default 456 455 1:1
GridMinimalPerf.default 198 198 1:1
SplitButtonMinimalPerf.default 2295 2287 1:1
TableMinimalPerf.default 239 240 1:1
AnimationMinimalPerf.default 292 295 0.99:1
EmbedMinimalPerf.default 1730 1739 0.99:1
RosterPerf.default 1566 1581 0.99:1
RadioGroupMinimalPerf.default 259 262 0.99:1
RefMinimalPerf.default 105 106 0.99:1
CustomToolbarPrototype.default 1439 1452 0.99:1
VideoMinimalPerf.default 418 423 0.99:1
ButtonSlotsPerf.default 314 319 0.98:1
ItemLayoutMinimalPerf.default 716 729 0.98:1
ListMinimalPerf.default 308 313 0.98:1
ListNestedPerf.default 321 327 0.98:1
MenuMinimalPerf.default 509 522 0.98:1
ProviderMergeThemesPerf.default 656 669 0.98:1
AvatarMinimalPerf.default 107 110 0.97:1
HeaderSlotsPerf.default 472 489 0.97:1
ListCommonPerf.default 380 392 0.97:1
ToolbarMinimalPerf.default 532 548 0.97:1
AttachmentMinimalPerf.default 76 79 0.96:1
AlertMinimalPerf.default 155 163 0.95:1
ChatDuplicateMessagesPerf.default 148 156 0.95:1
FormMinimalPerf.default 216 229 0.94:1
LabelMinimalPerf.default 213 227 0.94:1
ButtonMinimalPerf.default 90 97 0.93:1

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

📊 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		 3.194 kB
1.315 kB
react-accordion
Accordion (including children components)		 88.516 kB
26.795 kB
react-alert
Alert		 93.549 kB
22.537 kB
react-avatar
Avatar		 57.797 kB
15.091 kB
react-avatar
AvatarGroup		 15.646 kB
6.298 kB
react-avatar
AvatarGroupItem		 73.973 kB
19.582 kB
react-badge
Badge		 23.555 kB
7.256 kB
react-badge
CounterBadge		 24.457 kB
7.559 kB
react-badge
PresenceBadge		 32.135 kB
8.423 kB
react-button
Button		 36.742 kB
9.5 kB
react-button
CompoundButton		 43.896 kB
10.98 kB
react-button
MenuButton		 41.427 kB
10.836 kB
react-button
SplitButton		 49.649 kB
12.42 kB
react-button
ToggleButton		 55.024 kB
11.436 kB
react-card
Card - All		 88.716 kB
25.114 kB
react-card
Card		 83.651 kB
23.658 kB
react-card
CardFooter		 9.193 kB
3.892 kB
react-card
CardHeader		 11.089 kB
4.588 kB
react-card
CardPreview		 9.998 kB
4.24 kB
react-checkbox
Checkbox		 34.5 kB
10.878 kB
react-combobox
Combobox (including child components)		 87.735 kB
28.243 kB
react-combobox
Dropdown (including child components)		 86.074 kB
27.848 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 64.899 kB
17.91 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 206.425 kB
57.914 kB
react-components
react-components: FluentProvider & webLightTheme		 36.132 kB
11.954 kB
react-datepicker-compat
DatePicker Compat		 222.56 kB
59.204 kB
react-dialog
Dialog (including children components)		 92.076 kB
27.492 kB
react-divider
Divider		 17.441 kB
6.349 kB
react-field
Field		 18.9 kB
7.083 kB
react-image
Image		 11.514 kB
4.619 kB
react-infobutton
InfoButton		 130.121 kB
39.785 kB
react-infobutton
InfoLabel		 133.586 kB
40.852 kB
react-input
Input		 24.183 kB
7.772 kB
react-label
Label		 10.139 kB
4.231 kB
react-link
Link		 12.339 kB
5.105 kB
react-menu
Menu (including children components)		 130.848 kB
39.946 kB
react-menu
Menu (including selectable components)		 133.832 kB
40.479 kB
react-overflow
hooks only		 11.206 kB
4.266 kB
react-persona
Persona		 64.718 kB
17.012 kB
react-popover
Popover		 117.083 kB
36.122 kB
react-portal
Portal		 11.676 kB
4.31 kB
react-portal-compat
PortalCompatProvider		 6.473 kB
2.196 kB
react-positioning
usePositioning		 24.249 kB
8.856 kB
react-progress
ProgressBar		 13.891 kB
5.482 kB
react-provider
FluentProvider		 18.079 kB
6.713 kB
react-radio
Radio		 27.404 kB
8.722 kB
react-radio
RadioGroup		 11.326 kB
4.743 kB
react-select
Select		 25.373 kB
8.826 kB
react-slider
Slider		 34.322 kB
11.099 kB
react-spinbutton
SpinButton		 34.121 kB
10.421 kB
react-spinner
Spinner		 21.327 kB
7.015 kB
react-switch
Switch		 29.924 kB
9.342 kB
react-table
DataGrid		 150.868 kB
41.518 kB
react-table
Table (Primitives only)		 45.111 kB
12.567 kB
react-table
Table as DataGrid		 133.356 kB
34.002 kB
react-table
Table (Selection only)		 79.125 kB
19.379 kB
react-table
Table (Sort only)		 78.455 kB
19.187 kB
react-tags
Tag		 22.004 kB
7.93 kB
react-text
Text - Default		 12.527 kB
4.963 kB
react-text
Text - Wrappers		 15.677 kB
5.284 kB
react-textarea
Textarea		 27.686 kB
9.126 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		 47.119 kB
16.528 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 17ca96c6b7f684f36a5c63e40e78b4986a86c713

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

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

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented May 30, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 650 635 5000
Breadcrumb mount 1710 1693 1000
Checkbox mount 1700 1714 5000
CheckboxBase mount 1496 1484 5000
ChoiceGroup mount 2923 2977 5000
ComboBox mount 648 660 1000
CommandBar mount 6359 6323 1000
ContextualMenu mount 14906 15299 1000
DefaultButton mount 743 725 5000
DetailsRow mount 2179 2199 5000
DetailsRowFast mount 2185 2142 5000
DetailsRowNoStyles mount 2037 2032 5000
Dialog mount 2772 2658 1000
DocumentCardTitle mount 227 231 1000
Dropdown mount 1983 1986 5000
FocusTrapZone mount 1139 1144 5000
FocusZone mount 1006 1077 5000
GroupedList mount 41589 41470 2
GroupedList virtual-rerender 19750 19853 2
GroupedList virtual-rerender-with-unmount 50410 50532 2
GroupedListV2 mount 219 232 2
GroupedListV2 virtual-rerender 200 223 2
GroupedListV2 virtual-rerender-with-unmount 231 216 2
IconButton mount 1065 1112 5000
Label mount 328 341 5000
Layer mount 2703 2675 5000
Link mount 383 404 5000
MenuButton mount 938 914 5000
MessageBar mount 21621 21469 5000
Nav mount 1948 1908 1000
OverflowSet mount 792 778 5000
Panel mount 1767 1762 1000
Persona mount 751 750 1000
Pivot mount 892 854 1000
PrimaryButton mount 854 850 5000
Rating mount 4638 4639 5000
SearchBox mount 934 903 5000
Shimmer mount 1844 1873 5000
Slider mount 1338 1301 5000
SpinButton mount 2811 2881 5000
Spinner mount 384 406 5000
SplitButton mount 1813 1848 5000
Stack mount 411 416 5000
StackWithIntrinsicChildren mount 854 861 5000
StackWithTextChildren mount 2627 2649 5000
SwatchColorPicker mount 6089 6067 5000
TagPicker mount 1459 1444 5000
Text mount 374 371 5000
TextField mount 940 929 5000
ThemeProvider mount 838 825 5000
ThemeProvider virtual-rerender 600 601 5000
ThemeProvider virtual-rerender-with-unmount 1281 1280 5000
Toggle mount 624 618 5000
buttonNative mount 187 189 5000

@sopranopillow sopranopillow marked this pull request as ready for review May 30, 2023 20:39
@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@khmakoto khmakoto changed the title chore: Create react-colorpicker-compat package. chore: Create react-colorpicker-compat package May 30, 2023
@sopranopillow sopranopillow merged commit 43b8c27 into microsoft:master May 31, 2023
@sopranopillow sopranopillow deleted the colorpicker-compat/package-scaffold branch May 31, 2023 20:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khmakoto khmakoto khmakoto approved these changes

@JustSlone JustSlone JustSlone approved these changes

@tudorpopams tudorpopams tudorpopams approved these changes

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

Assignees

@sopranopillow sopranopillow

Labels
Area: Components Component: ColorPickerCompat ColorPicker compat component
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

ColorPicker: Scaffold package
6 participants
@sopranopillow @fabricteam @khmakoto @JustSlone @tudorpopams @msft-fluent-ui-bot