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

docs(Card): Add best practices #13315

Merged
merged 4 commits into from
May 26, 2020
Merged

docs(Card): Add best practices #13315

merged 4 commits into from
May 26, 2020

Conversation

pompomon
Copy link
Contributor

Pull request checklist

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

Description of changes

Adding Dos and Don'ts to Card

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label May 26, 2020
@msft-github-bot
Copy link
Contributor

msft-github-bot commented May 26, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 883 837 5000
Checkbox 1676 1690 5000
CheckboxBase 1410 1362 5000
CheckboxNext 1637 1710 5000
ChoiceGroup 5408 5331 5000
ComboBox 1011 979 1000
CommandBar 8590 8546 1000
ContextualMenu 16319 15866 1000
DefaultButton 1114 1150 5000
DetailsRow 3701 3725 5000
DetailsRow (fast icons) 3723 3723 5000
DetailsRow without styles 3474 3502 5000
Dialog 1628 1627 1000
DocumentCardTitle with truncation 2073 2109 1000
Dropdown 2535 2567 5000
FocusZone 1860 1814 5000
IconButton 1828 1972 5000
Label 340 318 5000
Link 485 498 5000
LinkNext 479 474 5000
MenuButton 1487 1509 5000
Nav 3440 3443 1000
Panel 1583 1534 1000
Persona 871 916 1000
Pivot 1472 1467 1000
PrimaryButton 1295 1318 5000
SearchBox 1310 1324 5000
Slider 1589 1555 5000
SliderNext 1594 1572 5000
Spinner 434 418 5000
SplitButton 3270 3279 5000
Stack 485 489 5000
Stack with Intrinsic children 1976 2044 5000
Stack with Text children 5239 5265 5000
TagPicker 2929 2907 5000
Text 407 420 5000
TextField 1460 1439 5000
Toggle 961 925 5000
ToggleNext 925 933 5000
button 87 91 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.74 0.51 1.45:1 2000 1470
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 567
🔧 Checkbox.Fluent 1.16 0.37 3.14:1 1000 1157
🔧 Dialog.Fluent 0.6 0.23 2.61:1 5000 3024
🔧 Dropdown.Fluent 6.86 0.45 15.24:1 1000 6860
🔧 Icon.Fluent 0.15 0.05 3:1 5000 737
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 377
🔧 Slider.Fluent 3.12 0.38 8.21:1 1000 3121
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 374
🦄 Tooltip.Fluent 0.11 20.98 0.01:1 5000 534

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 370 343 1.08:1
AttachmentMinimalPerf.default 171 160 1.07:1
ImageMinimalPerf.default 407 384 1.06:1
Tooltip.Fluent 534 505 1.06:1
FlexMinimalPerf.default 312 296 1.05:1
ItemLayoutMinimalPerf.default 2874 2732 1.05:1
AlertMinimalPerf.default 352 339 1.04:1
BoxMinimalPerf.default 347 333 1.04:1
ButtonMinimalPerf.default 188 181 1.04:1
DialogMinimalPerf.default 3090 2969 1.04:1
LayoutMinimalPerf.default 896 859 1.04:1
RefMinimalPerf.default 222 213 1.04:1
Button.Fluent 567 547 1.04:1
Image.Fluent 377 362 1.04:1
CarouselMinimalPerf.default 551 536 1.03:1
LabelMinimalPerf.default 423 410 1.03:1
PopupMinimalPerf.default 276 269 1.03:1
RadioGroupMinimalPerf.default 604 589 1.03:1
SegmentMinimalPerf.default 356 346 1.03:1
Text.Fluent 374 364 1.03:1
CardMinimalPerf.default 589 577 1.02:1
ChatMinimalPerf.default 616 605 1.02:1
ListCommonPerf.default 1209 1181 1.02:1
SplitButtonMinimalPerf.default 4207 4118 1.02:1
Dialog.Fluent 3024 2970 1.02:1
AnimationMinimalPerf.default 764 755 1.01:1
ButtonSlotsPerf.default 803 794 1.01:1
CheckboxMinimalPerf.default 5472 5407 1.01:1
ListMinimalPerf.default 480 474 1.01:1
LoaderMinimalPerf.default 1190 1182 1.01:1
MenuButtonMinimalPerf.default 1782 1770 1.01:1
ReactionMinimalPerf.default 380 378 1.01:1
SliderMinimalPerf.default 3004 2968 1.01:1
TableMinimalPerf.default 386 382 1.01:1
TextAreaMinimalPerf.default 479 476 1.01:1
Avatar.Fluent 1470 1453 1.01:1
Dropdown.Fluent 6860 6803 1.01:1
DropdownManyItemsPerf.default 2297 2298 1:1
ListNestedPerf.default 1142 1137 1:1
ProviderMergeThemesPerf.default 1905 1900 1:1
CustomToolbarPrototype.default 5142 5159 1:1
ToolbarMinimalPerf.default 815 812 1:1
TooltipMinimalPerf.default 777 780 1:1
Icon.Fluent 737 739 1:1
AttachmentSlotsPerf.default 1282 1298 0.99:1
DropdownMinimalPerf.default 6760 6818 0.99:1
EmbedMinimalPerf.default 3628 3661 0.99:1
StatusMinimalPerf.default 682 690 0.99:1
Checkbox.Fluent 1157 1169 0.99:1
HeaderSlotsPerf.default 803 816 0.98:1
InputMinimalPerf.default 1676 1709 0.98:1
MenuMinimalPerf.default 824 844 0.98:1
PortalMinimalPerf.default 124 126 0.98:1
IconMinimalPerf.default 657 670 0.98:1
Slider.Fluent 3121 3198 0.98:1
DividerMinimalPerf.default 346 356 0.97:1
HierarchicalTreeMinimalPerf.default 412 423 0.97:1
TreeMinimalPerf.default 1363 1402 0.97:1
VideoMinimalPerf.default 609 627 0.97:1
AvatarMinimalPerf.default 753 785 0.96:1
FormMinimalPerf.default 382 400 0.96:1
GridMinimalPerf.default 1370 1431 0.96:1
ProviderMinimalPerf.default 853 885 0.96:1
TextMinimalPerf.default 351 365 0.96:1
TreeWith60ListItems.default 291 306 0.95:1
ChatWithPopoverPerf.default 696 744 0.94:1
ListWith60ListItems.default 1590 1683 0.94:1
ChatDuplicateMessagesPerf.default 542 589 0.92:1
AccordionMinimalPerf.default 135 156 0.87:1

@size-auditor
Copy link

size-auditor bot commented May 26, 2020 •
edited

Asset size changes

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

Baseline commit: b72ef4c92db4c3f239d2ee35dee36234a9776bf3 (build)

@pompomon pompomon merged commit 09afc54 into microsoft:master May 26, 2020
@pompomon pompomon deleted the docs/card-bestpractices branch May 26, 2020 13:01
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
@pompomon @miroslavstastny
docs(Card): Add best practices (microsoft#13315)
358405f 
* Add best practices to Car

* Update changelog

* PR review comments

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

@jurokapsiar jurokapsiar jurokapsiar left review comments

@layershifter layershifter layershifter approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@mnajdova mnajdova Awaiting requested review from mnajdova

Assignees

@ecraig12345 ecraig12345

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@pompomon @msft-github-bot @jurokapsiar @layershifter @ecraig12345