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

feat: add color recipes to web component packages #16755

Merged
merged 8 commits into from
Feb 2, 2021
Merged

feat: add color recipes to web component packages #16755

merged 8 commits into from
Feb 2, 2021

Conversation

chrisdholt
Copy link
Member

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

This PR removes a dependency on a deprecated package and adds color recipes for Fluent Web Components directly to this package.

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Feb 2, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 2, 2021 •
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 5f36f19:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Feb 2, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 497df475f694d09d328fda3f02cee3bfe50c3e93 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 2, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 813 843 5000
BaseButtonCompat mount 914 892 5000
Breadcrumb mount 43252 44010 5000
Checkbox mount 1464 1446 5000
CheckboxBase mount 1233 1264 5000
ChoiceGroup mount 4759 4689 5000
ComboBox mount 990 993 1000
CommandBar mount 10190 10002 1000
ContextualMenu mount 6122 6172 1000
DefaultButtonCompat mount 1145 1131 5000
DetailsRow mount 3514 3553 5000
DetailsRowFast mount 3720 3598 5000
DetailsRowNoStyles mount 3377 3393 5000
Dialog mount 1439 1431 1000
DocumentCardTitle mount 1813 1835 1000
Dropdown mount 3228 3292 5000
FocusTrapZone mount 1750 1787 5000
FocusZone mount 1787 1791 5000
IconButtonCompat mount 1778 1722 5000
Label mount 333 319 5000
Layer mount 1765 1758 5000
Link mount 465 474 5000
MakeStyles mount 1918 1948 50000
MenuButtonCompat mount 1466 1454 5000
MessageBar mount 1983 1998 5000
Nav mount 3200 3247 1000
OverflowSet mount 1025 1026 5000
Panel mount 1428 1415 1000
Persona mount 836 845 1000
Pivot mount 1401 1411 1000
PrimaryButtonCompat mount 1297 1259 5000
Rating mount 7399 7372 5000
SearchBox mount 1306 1310 5000
Shimmer mount 2574 2524 5000
Slider mount 1883 1834 5000
SpinButton mount 5214 4961 5000
Spinner mount 407 409 5000
SplitButtonCompat mount 3131 3188 5000
Stack mount 489 492 5000
StackWithIntrinsicChildren mount 1517 1547 5000
StackWithTextChildren mount 4322 4419 5000
SwatchColorPicker mount 10153 10151 5000
Tabs mount 1410 1387 1000
TagPicker mount 2788 2732 5000
TeachingBubble mount 11592 11499 5000
Text mount 403 414 5000
TextField mount 1367 1346 5000
ThemeProvider mount 1414 1415 5000
ThemeProvider virtual-rerender 603 593 5000
ThemeProviderNext mount 2126 2148 5000
Toggle mount 791 785 5000
button mount 690 652 5000
buttonNative mount 102 109 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.52 0.33:1 2000 338
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 605
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 652
🎯 Dialog.Fluent 0.17 0.21 0.81:1 5000 844
🔧 Dropdown.Fluent 3.12 0.4 7.8:1 1000 3120
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 688
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 394
🔧 Slider.Fluent 1.67 0.44 3.8:1 1000 1669
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 377
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 582

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 187 168 1.11:1
AnimationMinimalPerf.default 448 418 1.07:1
FlexMinimalPerf.default 335 314 1.07:1
Button.Fluent 605 568 1.07:1
ButtonMinimalPerf.default 189 179 1.06:1
PopupMinimalPerf.default 750 708 1.06:1
Dialog.Fluent 844 796 1.06:1
ButtonUseCssPerf.default 877 838 1.05:1
HeaderSlotsPerf.default 832 796 1.05:1
ListNestedPerf.default 607 580 1.05:1
AvatarMinimalPerf.default 220 211 1.04:1
ButtonSlotsPerf.default 602 579 1.04:1
ChatDuplicateMessagesPerf.default 400 385 1.04:1
Slider.Fluent 1669 1611 1.04:1
DividerMinimalPerf.default 401 391 1.03:1
ImageMinimalPerf.default 414 403 1.03:1
InputMinimalPerf.default 1339 1302 1.03:1
RadioGroupMinimalPerf.default 482 467 1.03:1
ReactionMinimalPerf.default 447 434 1.03:1
IconMinimalPerf.default 699 678 1.03:1
ButtonOverridesMissPerf.default 1730 1703 1.02:1
DatepickerMinimalPerf.default 49110 48097 1.02:1
DialogMinimalPerf.default 833 818 1.02:1
LabelMinimalPerf.default 443 436 1.02:1
TableMinimalPerf.default 448 440 1.02:1
ToolbarMinimalPerf.default 993 969 1.02:1
Avatar.Fluent 338 332 1.02:1
Checkbox.Fluent 652 638 1.02:1
AttachmentSlotsPerf.default 1252 1239 1.01:1
CardMinimalPerf.default 579 574 1.01:1
ChatWithPopoverPerf.default 457 451 1.01:1
DropdownManyItemsPerf.default 735 728 1.01:1
DropdownMinimalPerf.default 3165 3119 1.01:1
EmbedMinimalPerf.default 4298 4270 1.01:1
ItemLayoutMinimalPerf.default 1227 1218 1.01:1
LayoutMinimalPerf.default 427 422 1.01:1
ListMinimalPerf.default 510 503 1.01:1
MenuButtonMinimalPerf.default 1606 1597 1.01:1
ProviderMergeThemesPerf.default 1633 1612 1.01:1
SegmentMinimalPerf.default 379 374 1.01:1
SplitButtonMinimalPerf.default 3831 3790 1.01:1
Icon.Fluent 688 683 1.01:1
CheckboxMinimalPerf.default 2876 2872 1:1
FormMinimalPerf.default 436 438 1:1
GridMinimalPerf.default 353 354 1:1
ListCommonPerf.default 656 657 1:1
LoaderMinimalPerf.default 743 744 1:1
MenuMinimalPerf.default 884 884 1:1
SkeletonMinimalPerf.default 386 385 1:1
SliderMinimalPerf.default 1632 1633 1:1
TextMinimalPerf.default 385 384 1:1
TreeMinimalPerf.default 813 811 1:1
AccordionMinimalPerf.default 167 169 0.99:1
CarouselMinimalPerf.default 492 498 0.99:1
ChatMinimalPerf.default 643 652 0.99:1
ProviderMinimalPerf.default 967 974 0.99:1
TableManyItemsPerf.default 2024 2042 0.99:1
Dropdown.Fluent 3120 3163 0.99:1
Text.Fluent 377 382 0.99:1
CustomToolbarPrototype.default 3778 3856 0.98:1
TooltipMinimalPerf.default 833 848 0.98:1
Image.Fluent 394 404 0.98:1
Tooltip.Fluent 582 595 0.98:1
ButtonUseCssNestingPerf.default 1081 1117 0.97:1
ListWith60ListItems.default 608 627 0.97:1
TreeWith60ListItems.default 189 195 0.97:1
VideoMinimalPerf.default 669 687 0.97:1
PortalMinimalPerf.default 172 179 0.96:1
StatusMinimalPerf.default 728 756 0.96:1
BoxMinimalPerf.default 369 392 0.94:1
RosterPerf.default 1169 1246 0.94:1
TextAreaMinimalPerf.default 494 525 0.94:1
HeaderMinimalPerf.default 371 400 0.93:1
RefMinimalPerf.default 245 265 0.92:1
AlertMinimalPerf.default 287 314 0.91:1

@chrisdholt chrisdholt force-pushed the users/chhol/add-color-recipes-to-wc-package branch from c2650be to fb1689f Compare February 2, 2021 18:12
@chrisdholt chrisdholt force-pushed the users/chhol/add-color-recipes-to-wc-package branch from fa6ff35 to 19c1a28 Compare February 2, 2021 19:12
@chrisdholt chrisdholt force-pushed the users/chhol/add-color-recipes-to-wc-package branch from 19c1a28 to ce248f2 Compare February 2, 2021 19:31
@chrisdholt chrisdholt force-pushed the users/chhol/add-color-recipes-to-wc-package branch from 284b0a8 to 6fb5c18 Compare February 2, 2021 21:17
@chrisdholt chrisdholt force-pushed the users/chhol/add-color-recipes-to-wc-package branch from 6fb5c18 to 5f36f19 Compare February 2, 2021 22:01
@chrisdholt chrisdholt merged commit e4079ad into microsoft:master Feb 2, 2021
@chrisdholt chrisdholt deleted the users/chhol/add-color-recipes-to-wc-package branch February 2, 2021 22:47
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.12.0 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
Reviewers

@bheston bheston bheston approved these changes

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@dzearing dzearing Awaiting requested review from dzearing

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

@xugao xugao Awaiting requested review from xugao

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@chrisdholt @fabricteam @msft-fluent-ui-bot @EisenbergEffect @bheston