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: convert card to be design system provider #15068

Merged
merged 2 commits into from
Sep 17, 2020
Merged

Feat: convert card to be design system provider #15068

merged 2 commits into from
Sep 17, 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

This change changes the fluent-card to extend the DesignSystemProvider allowing each card to have their own design system context. This allows any controls placed inside the acrd to have the proper design system context.

Example of new card with custom background and controls respecting that background:
image

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 853 830 5000
ButtonNext mount 550 548 5000
Checkbox mount 1440 1440 5000
CheckboxBase mount 1239 1297 5000
CheckboxNext mount 1439 1424 5000
ChoiceGroup mount 4700 4617 5000
ChoiceGroupNext mount 4672 4617 5000
ComboBox mount 863 876 1000
CommandBar mount 7247 7203 1000
ContextualMenu mount 12420 12434 1000
DefaultButton mount 1049 1044 5000
DetailsRow mount 3325 3318 5000
DetailsRowFast mount 3303 3341 5000
DetailsRowNoStyles mount 3138 3127 5000
Dialog mount 1396 1406 1000
DocumentCardTitle mount 1722 1717 1000
Dropdown mount 2436 2391 5000
FocusZone mount 1741 1765 5000
IconButton mount 1636 1630 5000
Label mount 306 313 5000
Link mount 421 429 5000
LinkNext mount 439 426 5000
MenuButton mount 1342 1345 5000
MessageBar mount 1957 1975 5000
MessageBarNext mount 1913 1930 5000
Nav mount 3070 3037 1000
OverflowSet mount 1319 1313 5000
OverflowSetNext mount 981 969 5000
Panel mount 1361 1392 1000
Persona mount 802 781 1000
Pivot mount 1321 1310 1000
PivotNext mount 1314 1321 1000
PrimaryButton mount 1187 1193 5000
Rating mount 7150 7084 5000
RatingNext mount 7015 7017 5000
SearchBox mount 1179 1192 5000
SearchBoxNext mount 1232 1230 5000
Shimmer mount 2445 2398 5000
ShimmerNext mount 2391 2350 5000
Slider mount 1401 1425 5000
SliderNext mount 1804 1769 5000
SpinButton mount 4651 4572 5000
SpinButtonNext mount 5137 4779 5000
Spinner mount 404 413 5000
SplitButton mount 2931 2979 5000
Stack mount 512 491 5000
StackWithIntrinsicChildren mount 1758 1778 5000
StackWithTextChildren mount 4653 4686 5000
SwatchColorPicker mount 9573 9586 5000
SwatchColorPickerNext mount 9548 9554 5000
TagPicker mount 2577 2569 5000
TeachingBubble mount 47764 47992 5000
TeachingBubbleNext mount 47685 47879 5000
Text mount 401 394 5000
TextField mount 1289 1297 5000
ThemeProvider mount 4653 4622 5000
ThemeProvider virtual-rerender 508 484 5000
Toggle mount 791 790 5000
ToggleNext mount 740 750 5000
button mount 102 110 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 1619 42 38.55:1 analysis
ButtonUseCssNestingPerf.default 1017 41 24.8:1 analysis
ButtonUseCssPerf.default 785 41 19.15:1 analysis
ChatWithPopoverPerf.default 440 425 1.04:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.42 0.44 0.95:1 2000 834
🦄 Button.Fluent 0.11 0.18 0.61:1 5000 535
🔧 Checkbox.Fluent 0.61 0.34 1.79:1 1000 605
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 755
🔧 Dropdown.Fluent 2.77 0.43 6.44:1 1000 2767
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 689
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 378
🔧 Slider.Fluent 1.51 0.34 4.44:1 1000 1508
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 353
🦄 Tooltip.Fluent 0.11 15.13 0.01:1 5000 555

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 158 113 1.4:1
FlexMinimalPerf.default 304 241 1.26:1
AttachmentMinimalPerf.default 174 143 1.22:1
AccordionMinimalPerf.default 159 131 1.21:1
ButtonMinimalPerf.default 181 151 1.2:1
DividerMinimalPerf.default 376 313 1.2:1
GridMinimalPerf.default 351 293 1.2:1
RefMinimalPerf.default 231 192 1.2:1
SegmentMinimalPerf.default 365 305 1.2:1
TextMinimalPerf.default 353 296 1.19:1
LayoutMinimalPerf.default 414 352 1.18:1
ReactionMinimalPerf.default 397 337 1.18:1
Tooltip.Fluent 555 472 1.18:1
Text.Fluent 353 303 1.17:1
ImageMinimalPerf.default 377 325 1.16:1
LabelMinimalPerf.default 420 361 1.16:1
FormMinimalPerf.default 401 349 1.15:1
AnimationMinimalPerf.default 399 349 1.14:1
BoxMinimalPerf.default 363 319 1.14:1
StatusMinimalPerf.default 708 620 1.14:1
SkeletonMinimalPerf.default 404 358 1.13:1
Image.Fluent 378 335 1.13:1
HeaderMinimalPerf.default 359 324 1.11:1
ListMinimalPerf.default 481 432 1.11:1
RadioGroupMinimalPerf.default 428 387 1.11:1
IconMinimalPerf.default 666 598 1.11:1
VideoMinimalPerf.default 610 552 1.11:1
MenuMinimalPerf.default 841 763 1.1:1
TableMinimalPerf.default 394 360 1.09:1
TooltipMinimalPerf.default 783 720 1.09:1
TreeMinimalPerf.default 844 773 1.09:1
Icon.Fluent 689 632 1.09:1
CardMinimalPerf.default 537 498 1.08:1
HeaderSlotsPerf.default 760 702 1.08:1
ProviderMinimalPerf.default 901 835 1.08:1
TextAreaMinimalPerf.default 462 426 1.08:1
Button.Fluent 535 494 1.08:1
Dialog.Fluent 755 698 1.08:1
AlertMinimalPerf.default 292 272 1.07:1
AvatarMinimalPerf.default 465 433 1.07:1
CarouselMinimalPerf.default 433 408 1.06:1
ItemLayoutMinimalPerf.default 1222 1150 1.06:1
PopupMinimalPerf.default 659 619 1.06:1
ToolbarMinimalPerf.default 903 850 1.06:1
ButtonSlotsPerf.default 578 551 1.05:1
ChatMinimalPerf.default 585 556 1.05:1
DialogMinimalPerf.default 742 708 1.05:1
TreeWith60ListItems.default 204 195 1.05:1
Avatar.Fluent 834 794 1.05:1
DropdownManyItemsPerf.default 727 702 1.04:1
MenuButtonMinimalPerf.default 1467 1411 1.04:1
ProviderMergeThemesPerf.default 1870 1802 1.04:1
CheckboxMinimalPerf.default 2726 2647 1.03:1
SplitButtonMinimalPerf.default 3558 3463 1.03:1
CustomToolbarPrototype.default 3589 3471 1.03:1
Checkbox.Fluent 605 589 1.03:1
EmbedMinimalPerf.default 1800 1768 1.02:1
InputMinimalPerf.default 1241 1216 1.02:1
LoaderMinimalPerf.default 698 685 1.02:1
Slider.Fluent 1508 1478 1.02:1
ChatDuplicateMessagesPerf.default 394 392 1.01:1
DropdownMinimalPerf.default 2789 2773 1.01:1
TableManyItemsPerf.default 2030 2014 1.01:1
Dropdown.Fluent 2767 2776 1:1
AttachmentSlotsPerf.default 1081 1097 0.99:1
SliderMinimalPerf.default 1468 1488 0.99:1
ListWith60ListItems.default 882 1015 0.87:1
ListCommonPerf.default 620 879 0.71:1
ListNestedPerf.default 556 793 0.7:1

@size-auditor
Copy link

size-auditor bot commented Sep 16, 2020

Asset size changes

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

Baseline commit: 9fc63458ca996b94803cbf8a2fd84955820a2a14 (build)

@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 786893e:

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

@chrisdholt chrisdholt merged commit 7ea84b6 into microsoft:master Sep 17, 2020
@msft-github-bot
Copy link
Contributor

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

@chrisdholt chrisdholt chrisdholt 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.
4 participants
@eljefe223 @msft-github-bot @chrisdholt @bheston