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

[web-components] Update card background color to from view #17162

Merged
merged 2 commits into from
Feb 24, 2021
Merged

[web-components] Update card background color to from view #17162

merged 2 commits into from
Feb 24, 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 change updates the card-background-color attribute to leverage the fromView attr mode. In certain cases where you want to extend the card and set a default value, reflecting the default attribute back to the DOM will cause an additional unnecessary update. By setting the mode to fromView we avoid reflecting the default value unnecessarily.

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Feb 24, 2021
@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 5990613:

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

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1117 1128 5000
BaseButton mount 877 868 5000
Breadcrumb mount 43484 43213 5000
ButtonNext mount 688 687 5000
Checkbox mount 1476 1489 5000
CheckboxBase mount 1276 1282 5000
ChoiceGroup mount 4634 4624 5000
ComboBox mount 962 957 1000
CommandBar mount 10239 10173 1000
ContextualMenu mount 6017 6027 1000
DefaultButton mount 1146 1075 5000
DetailsRow mount 3621 3639 5000
DetailsRowFast mount 3585 3577 5000
DetailsRowNoStyles mount 3463 3378 5000
Dialog mount 1453 1504 1000
DocumentCardTitle mount 1861 1831 1000
Dropdown mount 3258 3264 5000
FocusTrapZone mount 1762 1760 5000
FocusZone mount 1747 1777 5000
IconButton mount 1746 1804 5000
Label mount 333 337 5000
Layer mount 1832 1828 5000
Link mount 475 481 5000
MakeStyles mount 2033 2038 50000
MenuButton mount 1454 1429 5000
MessageBar mount 1960 2021 5000
Nav mount 3271 3248 1000
OverflowSet mount 1018 1061 5000
Panel mount 1416 1401 1000
Persona mount 811 823 1000
Pivot mount 1395 1430 1000
PrimaryButton mount 1241 1256 5000
Rating mount 7288 7487 5000
SearchBox mount 1239 1267 5000
Shimmer mount 2492 2486 5000
Slider mount 1955 1937 5000
SpinButton mount 5011 4885 5000
Spinner mount 428 418 5000
SplitButton mount 3255 3229 5000
Stack mount 508 482 5000
StackWithIntrinsicChildren mount 1558 1562 5000
StackWithTextChildren mount 4448 4498 5000
SwatchColorPicker mount 10213 10111 5000
Tabs mount 1377 1341 1000
TagPicker mount 2777 2881 5000
TeachingBubble mount 11666 11557 5000
Text mount 391 405 5000
TextField mount 1310 1389 5000
ThemeProvider mount 1165 1150 5000
ThemeProvider virtual-rerender 584 580 5000
ThemeProviderNext mount 1960 1972 5000
Toggle mount 778 822 5000
buttonNative mount 109 108 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.47 0.36:1 2000 343
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 593
🔧 Checkbox.Fluent 0.63 0.35 1.8:1 1000 628
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 809
🔧 Dropdown.Fluent 3.24 0.41 7.9:1 1000 3238
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 730
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 415
🔧 Slider.Fluent 1.67 0.5 3.34:1 1000 1672
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 388
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 584

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 184 171 1.08:1
AvatarMinimalPerf.default 224 208 1.08:1
BoxMinimalPerf.default 409 378 1.08:1
TableMinimalPerf.default 458 425 1.08:1
AttachmentSlotsPerf.default 1294 1205 1.07:1
FormMinimalPerf.default 451 423 1.07:1
HeaderMinimalPerf.default 402 375 1.07:1
GridMinimalPerf.default 382 361 1.06:1
RefMinimalPerf.default 260 246 1.06:1
CarouselMinimalPerf.default 517 493 1.05:1
TooltipMinimalPerf.default 877 837 1.05:1
Slider.Fluent 1672 1591 1.05:1
ButtonOverridesMissPerf.default 1821 1755 1.04:1
ChatDuplicateMessagesPerf.default 390 374 1.04:1
ListWith60ListItems.default 686 659 1.04:1
Text.Fluent 388 373 1.04:1
ButtonMinimalPerf.default 195 190 1.03:1
DialogMinimalPerf.default 817 791 1.03:1
ImageMinimalPerf.default 399 388 1.03:1
LabelMinimalPerf.default 455 441 1.03:1
LayoutMinimalPerf.default 434 423 1.03:1
PopupMinimalPerf.default 732 713 1.03:1
PortalMinimalPerf.default 173 168 1.03:1
ReactionMinimalPerf.default 430 419 1.03:1
TableManyItemsPerf.default 2117 2062 1.03:1
Icon.Fluent 730 707 1.03:1
CardMinimalPerf.default 617 607 1.02:1
MenuButtonMinimalPerf.default 1634 1607 1.02:1
ProviderMinimalPerf.default 994 972 1.02:1
Button.Fluent 593 583 1.02:1
Dialog.Fluent 809 795 1.02:1
Dropdown.Fluent 3238 3190 1.02:1
AlertMinimalPerf.default 320 318 1.01:1
ChatMinimalPerf.default 663 654 1.01:1
CheckboxMinimalPerf.default 2945 2926 1.01:1
DatepickerMinimalPerf.default 47608 47322 1.01:1
DropdownManyItemsPerf.default 747 743 1.01:1
ItemLayoutMinimalPerf.default 1234 1221 1.01:1
ProviderMergeThemesPerf.default 1655 1642 1.01:1
SegmentMinimalPerf.default 383 381 1.01:1
ToolbarMinimalPerf.default 996 991 1.01:1
ButtonSlotsPerf.default 620 622 1:1
ButtonUseCssPerf.default 843 839 1:1
DividerMinimalPerf.default 382 383 1:1
EmbedMinimalPerf.default 4383 4378 1:1
HeaderSlotsPerf.default 808 806 1:1
ListNestedPerf.default 588 586 1:1
StatusMinimalPerf.default 745 746 1:1
IconMinimalPerf.default 719 717 1:1
CustomToolbarPrototype.default 3823 3821 1:1
ButtonUseCssNestingPerf.default 1137 1149 0.99:1
DropdownMinimalPerf.default 3119 3161 0.99:1
FlexMinimalPerf.default 301 305 0.99:1
InputMinimalPerf.default 1316 1323 0.99:1
ListCommonPerf.default 662 666 0.99:1
RadioGroupMinimalPerf.default 465 468 0.99:1
SplitButtonMinimalPerf.default 3860 3912 0.99:1
TextMinimalPerf.default 370 375 0.99:1
TreeMinimalPerf.default 813 818 0.99:1
Tooltip.Fluent 584 588 0.99:1
MenuMinimalPerf.default 905 920 0.98:1
SkeletonMinimalPerf.default 381 388 0.98:1
SliderMinimalPerf.default 1620 1655 0.98:1
TreeWith60ListItems.default 191 195 0.98:1
AnimationMinimalPerf.default 431 443 0.97:1
AttachmentMinimalPerf.default 184 189 0.97:1
ListMinimalPerf.default 529 549 0.96:1
LoaderMinimalPerf.default 728 762 0.96:1
Avatar.Fluent 343 357 0.96:1
ChatWithPopoverPerf.default 472 495 0.95:1
TextAreaMinimalPerf.default 515 540 0.95:1
VideoMinimalPerf.default 645 676 0.95:1
Checkbox.Fluent 628 663 0.95:1
Image.Fluent 415 437 0.95:1
RosterPerf.default 1134 1232 0.92:1

@size-auditor
Copy link

size-auditor bot commented Feb 24, 2021

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: eac7564

Possible causes

  • The baseline build eac7564 is broken
  • The Size Auditor run for the baseline build eac7564 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@chrisdholt chrisdholt merged commit d91f140 into microsoft:master Feb 24, 2021
@chrisdholt chrisdholt deleted the users/chhol/update-card-background-color-to-from-view branch February 24, 2021 18:24
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@chrisdholt @joshualamusga1
[web-components] Update card background color to from view (microsoft…
948b63c 
…#17162)

* update card background color attribute to reflect from view

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eljefe223 eljefe223 eljefe223 approved these changes

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

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 @eljefe223