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

Remove hard coded Card background color in favor of Design System paint API #17070

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 change removes a hard coded background for the color and instead relies on existing API's to draw the background by default with an option to not paint. This may be helpful in scenarios where the context needs to update but the background needs to be handled separately. With the current implementation that's not as easily achieved.

Focus areas to test

(optional)

@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 a07a5e1:

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

@size-auditor
Copy link

size-auditor bot commented Feb 19, 2021

Asset size changes

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

Baseline commit: 4011be1f093c7263b7d451bf4b4881e0cc926c85 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1150 1117 5000
BaseButton mount 950 911 5000
Breadcrumb mount 41599 42092 5000
ButtonNext mount 706 721 5000
Checkbox mount 1556 1535 5000
CheckboxBase mount 1313 1321 5000
ChoiceGroup mount 4944 4993 5000
ComboBox mount 1061 971 1000
CommandBar mount 9942 9966 1000
ContextualMenu mount 6068 6102 1000
DefaultButton mount 1169 1156 5000
DetailsRow mount 3774 3815 5000
DetailsRowFast mount 3717 3797 5000
DetailsRowNoStyles mount 3534 3519 5000
Dialog mount 1526 1466 1000
DocumentCardTitle mount 1828 1822 1000
Dropdown mount 3474 3485 5000
FocusTrapZone mount 1847 1839 5000
FocusZone mount 1877 1756 5000
IconButton mount 1855 1822 5000
Label mount 332 330 5000
Layer mount 1823 1842 5000
Link mount 466 479 5000
MakeStyles mount 2020 2050 50000
MenuButton mount 1528 1575 5000
MessageBar mount 1982 2013 5000
Nav mount 3323 3356 1000
OverflowSet mount 1074 1088 5000
Panel mount 1452 1418 1000
Persona mount 846 856 1000
Pivot mount 1426 1433 1000
PrimaryButton mount 1362 1321 5000
Rating mount 7984 7933 5000
SearchBox mount 1372 1384 5000
Shimmer mount 2714 2699 5000
Slider mount 1959 2015 5000
SpinButton mount 5127 5173 5000
Spinner mount 411 419 5000
SplitButton mount 3171 3239 5000
Stack mount 527 511 5000
StackWithIntrinsicChildren mount 1631 1654 5000
StackWithTextChildren mount 4790 4887 5000
SwatchColorPicker mount 10636 10440 5000
Tabs mount 1435 1460 1000
TagPicker mount 2919 2899 5000
TeachingBubble mount 11683 11729 5000
Text mount 443 452 5000
TextField mount 1447 1396 5000
ThemeProvider mount 1196 1202 5000
ThemeProvider virtual-rerender 595 605 5000
ThemeProviderNext mount 1988 1969 5000
Toggle mount 832 822 5000
buttonNative mount 105 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.49 0.39:1 2000 376
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 670
🔧 Checkbox.Fluent 0.69 0.38 1.82:1 1000 687
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 842
🔧 Dropdown.Fluent 3.11 0.41 7.59:1 1000 3109
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 748
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 453
🔧 Slider.Fluent 1.62 0.45 3.6:1 1000 1623
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 409
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 595

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
Button.Fluent 670 622 1.08:1
StatusMinimalPerf.default 862 809 1.07:1
ListWith60ListItems.default 701 662 1.06:1
PortalMinimalPerf.default 175 165 1.06:1
SegmentMinimalPerf.default 404 382 1.06:1
IconMinimalPerf.default 765 722 1.06:1
MenuButtonMinimalPerf.default 1765 1686 1.05:1
TextMinimalPerf.default 414 393 1.05:1
CustomToolbarPrototype.default 3939 3759 1.05:1
Image.Fluent 453 433 1.05:1
CarouselMinimalPerf.default 539 520 1.04:1
DialogMinimalPerf.default 885 850 1.04:1
DropdownManyItemsPerf.default 823 793 1.04:1
LabelMinimalPerf.default 491 470 1.04:1
TableManyItemsPerf.default 2297 2218 1.04:1
TreeWith60ListItems.default 204 196 1.04:1
Avatar.Fluent 376 363 1.04:1
AttachmentMinimalPerf.default 191 186 1.03:1
ChatDuplicateMessagesPerf.default 405 394 1.03:1
ItemLayoutMinimalPerf.default 1355 1319 1.03:1
RefMinimalPerf.default 251 243 1.03:1
TextAreaMinimalPerf.default 560 545 1.03:1
TooltipMinimalPerf.default 877 849 1.03:1
Checkbox.Fluent 687 665 1.03:1
Dialog.Fluent 842 814 1.03:1
ButtonOverridesMissPerf.default 1819 1777 1.02:1
ButtonSlotsPerf.default 626 612 1.02:1
ButtonUseCssPerf.default 896 879 1.02:1
ListMinimalPerf.default 580 566 1.02:1
PopupMinimalPerf.default 749 734 1.02:1
RadioGroupMinimalPerf.default 508 498 1.02:1
TreeMinimalPerf.default 844 827 1.02:1
Icon.Fluent 748 731 1.02:1
Text.Fluent 409 401 1.02:1
Tooltip.Fluent 595 586 1.02:1
AttachmentSlotsPerf.default 1274 1260 1.01:1
AvatarMinimalPerf.default 227 225 1.01:1
CardMinimalPerf.default 622 618 1.01:1
ChatMinimalPerf.default 694 685 1.01:1
DropdownMinimalPerf.default 3137 3105 1.01:1
EmbedMinimalPerf.default 4446 4381 1.01:1
ImageMinimalPerf.default 429 423 1.01:1
MenuMinimalPerf.default 964 950 1.01:1
AnimationMinimalPerf.default 435 436 1:1
BoxMinimalPerf.default 413 415 1:1
ButtonUseCssNestingPerf.default 1132 1135 1:1
CheckboxMinimalPerf.default 2932 2936 1:1
DatepickerMinimalPerf.default 48812 48596 1:1
FlexMinimalPerf.default 344 343 1:1
GridMinimalPerf.default 400 400 1:1
LoaderMinimalPerf.default 779 780 1:1
ProviderMinimalPerf.default 992 992 1:1
SkeletonMinimalPerf.default 404 402 1:1
Dropdown.Fluent 3109 3120 1:1
AccordionMinimalPerf.default 180 181 0.99:1
AlertMinimalPerf.default 326 328 0.99:1
ChatWithPopoverPerf.default 466 469 0.99:1
DividerMinimalPerf.default 430 433 0.99:1
HeaderSlotsPerf.default 850 858 0.99:1
InputMinimalPerf.default 1324 1335 0.99:1
LayoutMinimalPerf.default 459 462 0.99:1
ListNestedPerf.default 641 647 0.99:1
TableMinimalPerf.default 475 482 0.99:1
VideoMinimalPerf.default 719 729 0.99:1
Slider.Fluent 1623 1647 0.99:1
ButtonMinimalPerf.default 206 210 0.98:1
FormMinimalPerf.default 476 484 0.98:1
HeaderMinimalPerf.default 418 427 0.98:1
ProviderMergeThemesPerf.default 1577 1606 0.98:1
ReactionMinimalPerf.default 439 446 0.98:1
SliderMinimalPerf.default 1585 1611 0.98:1
SplitButtonMinimalPerf.default 4018 4093 0.98:1
ListCommonPerf.default 721 743 0.97:1
ToolbarMinimalPerf.default 1019 1058 0.96:1
RosterPerf.default 1243 1336 0.93:1

@chrisdholt chrisdholt merged commit 0f7fa18 into microsoft:master Feb 19, 2021
@chrisdholt chrisdholt deleted the users/chhol/remove-hard-coded-background-color-in-favor-of-no-paint branch February 19, 2021 04:12
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.14.1 has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Feb 25, 2021
…nt API (microsoft#17070)

* remove hard coded background color in favor of default design system behavior

* Change files
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