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: adds automatic card background color calculation #15126

Merged
merged 8 commits into from
Sep 23, 2020
Merged

Feat: adds automatic card background color calculation #15126

merged 8 commits into from
Sep 23, 2020

Conversation

eljefe223
Copy link
Contributor

Pull request checklist

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

Description of changes

By default fluent-card now automatically applies neutralFillCard to its background, which that is calculated from its parent design system provider. If a custom background color is desired the attribute card-background-color is now available, this will reset the cards design system to that value.

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

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 18, 2020 •
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 98a2265:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Sep 18, 2020 •
edited
Loading

Asset size changes

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

Baseline commit: d792de036aeb9a703603b76cd81f09462e298633 (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 18, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 936 930 5000
Breadcrumb mount 40917 41219 5000
BreadcrumbNext mount 157864 157104 5000
ButtonNext mount 571 597 5000
Checkbox mount 1626 1603 5000
CheckboxBase mount 1356 1373 5000
CheckboxNext mount 1582 1523 5000
ChoiceGroup mount 5154 5122 5000
ChoiceGroupNext mount 9552 9621 5000
ComboBox mount 934 926 1000
CommandBar mount 7556 7571 1000
ContextualMenu mount 12441 12458 1000
DefaultButton mount 1156 1160 5000
DetailsRow mount 3574 3623 5000
DetailsRowFast mount 3590 3668 5000
DetailsRowNoStyles mount 3453 3461 5000
Dialog mount 1510 1587 1000
DocumentCardTitle mount 1812 1784 1000
Dropdown mount 2655 2707 5000
FocusZone mount 1798 1819 5000
IconButton mount 1866 1892 5000
Label mount 357 356 5000
Layer mount 2040 2009 5000
LayerNext mount 1941 1907 5000
Link mount 443 470 5000
LinkNext mount 480 480 5000
MenuButton mount 1519 1527 5000
MessageBar mount 2095 2074 5000
MessageBarNext mount 2034 2013 5000
Nav mount 3299 3313 1000
OverflowSet mount 1423 1426 5000
OverflowSetNext mount 1041 1077 5000
Panel mount 1431 1463 1000
Persona mount 834 859 1000
Pivot mount 1456 1461 1000
PivotNext mount 1410 1440 1000
PrimaryButton mount 1279 1310 5000
Rating mount 7981 7899 5000
RatingNext mount 7903 7877 5000
SearchBox mount 1391 1348 5000
SearchBoxNext mount 1401 1363 5000
Shimmer mount 2691 2726 5000
ShimmerNext mount 2614 2650 5000
Slider mount 1542 1543 5000
SliderNext mount 1931 1911 5000
SpinButton mount 5089 5077 5000
SpinButtonNext mount 5212 5215 5000
Spinner mount 439 427 5000
SplitButton mount 3199 3262 5000
Stack mount 534 530 5000
StackWithIntrinsicChildren mount 2090 2115 5000
StackWithTextChildren mount 5445 5434 5000
SwatchColorPicker mount 10626 10770 5000
SwatchColorPickerNext mount 10493 10649 5000
TagPicker mount 2809 2808 5000
TeachingBubble mount 50008 50068 5000
TeachingBubbleNext mount 11618 11762 5000
Text mount 438 467 5000
TextField mount 1462 1430 5000
ThemeProvider mount 3131 3121 5000
ThemeProvider virtual-rerender 605 614 5000
Toggle mount 866 889 5000
ToggleNext mount 850 813 5000
button mount 106 122 5000

Perf Analysis (Fluent)

⚠️ 4 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1807 46 39.28:1 analysis
ButtonUseCssNestingPerf.default 1126 46 24.48:1 analysis
ButtonUseCssPerf.default 892 43 20.74:1 analysis
ChatWithPopoverPerf.default 503 486 1.03:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.51 0.9:1 2000 918
🦄 Button.Fluent 0.13 0.2 0.65:1 5000 631
🔧 Checkbox.Fluent 0.67 0.39 1.72:1 1000 667
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 860
🔧 Dropdown.Fluent 2.99 0.49 6.1:1 1000 2991
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 794
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 429
🔧 Slider.Fluent 1.63 0.39 4.18:1 1000 1633
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 398
🦄 Tooltip.Fluent 0.12 14.78 0.01:1 5000 587

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 179 122 1.47:1
RefMinimalPerf.default 250 200 1.25:1
FlexMinimalPerf.default 350 286 1.22:1
DividerMinimalPerf.default 426 352 1.21:1
LabelMinimalPerf.default 475 397 1.2:1
AccordionMinimalPerf.default 174 146 1.19:1
GridMinimalPerf.default 389 331 1.18:1
HeaderMinimalPerf.default 424 358 1.18:1
ReactionMinimalPerf.default 456 386 1.18:1
SegmentMinimalPerf.default 415 351 1.18:1
Tooltip.Fluent 587 497 1.18:1
StatusMinimalPerf.default 788 681 1.16:1
AnimationMinimalPerf.default 447 388 1.15:1
ButtonSlotsPerf.default 653 573 1.14:1
FormMinimalPerf.default 485 425 1.14:1
SkeletonMinimalPerf.default 471 412 1.14:1
TextMinimalPerf.default 379 334 1.13:1
AttachmentMinimalPerf.default 178 159 1.12:1
BoxMinimalPerf.default 402 359 1.12:1
ButtonMinimalPerf.default 209 187 1.12:1
DialogMinimalPerf.default 850 757 1.12:1
ImageMinimalPerf.default 442 393 1.12:1
RadioGroupMinimalPerf.default 476 425 1.12:1
TextAreaMinimalPerf.default 550 490 1.12:1
Button.Fluent 631 562 1.12:1
Image.Fluent 429 382 1.12:1
TableMinimalPerf.default 460 416 1.11:1
AvatarMinimalPerf.default 526 478 1.1:1
CardMinimalPerf.default 624 565 1.1:1
HeaderSlotsPerf.default 893 811 1.1:1
LayoutMinimalPerf.default 442 401 1.1:1
MenuButtonMinimalPerf.default 1705 1550 1.1:1
VideoMinimalPerf.default 685 624 1.1:1
ChatMinimalPerf.default 669 613 1.09:1
ListMinimalPerf.default 519 475 1.09:1
Text.Fluent 398 365 1.09:1
TooltipMinimalPerf.default 845 781 1.08:1
Checkbox.Fluent 667 620 1.08:1
Dialog.Fluent 860 794 1.08:1
PopupMinimalPerf.default 732 681 1.07:1
ProviderMinimalPerf.default 1023 954 1.07:1
IconMinimalPerf.default 714 670 1.07:1
TreeMinimalPerf.default 962 896 1.07:1
DropdownManyItemsPerf.default 796 752 1.06:1
MenuMinimalPerf.default 916 866 1.06:1
ProviderMergeThemesPerf.default 1991 1873 1.06:1
Icon.Fluent 794 750 1.06:1
CarouselMinimalPerf.default 487 468 1.04:1
CheckboxMinimalPerf.default 2917 2818 1.04:1
EmbedMinimalPerf.default 2036 1949 1.04:1
InputMinimalPerf.default 1379 1332 1.04:1
CustomToolbarPrototype.default 3888 3753 1.04:1
ToolbarMinimalPerf.default 1014 971 1.04:1
AlertMinimalPerf.default 333 323 1.03:1
ItemLayoutMinimalPerf.default 1340 1302 1.03:1
LoaderMinimalPerf.default 769 746 1.03:1
TableManyItemsPerf.default 2300 2225 1.03:1
Avatar.Fluent 918 893 1.03:1
SplitButtonMinimalPerf.default 4003 3920 1.02:1
TreeWith60ListItems.default 222 220 1.01:1
SliderMinimalPerf.default 1645 1644 1:1
Dropdown.Fluent 2991 2984 1:1
Slider.Fluent 1633 1637 1:1
AttachmentSlotsPerf.default 1186 1196 0.99:1
ChatDuplicateMessagesPerf.default 437 443 0.99:1
DropdownMinimalPerf.default 2944 2975 0.99:1
ListWith60ListItems.default 976 1098 0.89:1
ListCommonPerf.default 714 966 0.74:1
ListNestedPerf.default 629 880 0.71:1

@eljefe223 eljefe223 force-pushed the users/jes/card-improvements branch from f07d5d5 to d2034bd Compare September 21, 2020 18:05
@eljefe223 eljefe223 force-pushed the users/jes/card-improvements branch from ec88de6 to 45f5fdc Compare September 21, 2020 18:48
@eljefe223 eljefe223 force-pushed the users/jes/card-improvements branch from 45f5fdc to 095e287 Compare September 23, 2020 20:04
@eljefe223 eljefe223 force-pushed the users/jes/card-improvements branch from 1fc6995 to 7125657 Compare September 23, 2020 21:11
@eljefe223 eljefe223 force-pushed the users/jes/card-improvements branch from 7125657 to 98a2265 Compare September 23, 2020 22:59
@chrisdholt chrisdholt merged commit c32b0e3 into microsoft:master Sep 23, 2020
@msft-github-bot
Copy link
Contributor

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

@chrisdholt chrisdholt chrisdholt approved these changes

@nicholasrice nicholasrice nicholasrice approved these changes

Assignees
No one assigned
Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@eljefe223 @msft-github-bot @nicholasrice @chrisdholt @miroslavstastny