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

fix(playground): fix Loader page & improve Card's playground #12417

Merged
merged 4 commits into from
Mar 26, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Mar 25, 2020

Pull request checklist

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

Description of changes

This PR:

  • fixes Loader documentation page:
    image
  • improve playground for Card component:
    image
Microsoft Reviewers: Open in CodeFlow

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Mar 25, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Status
BaseButton 718 746
BaseButton (experiments) 851 823
DefaultButton 964 969
DefaultButton (experiments) 1727 1683
DetailsRow 3129 3119
DetailsRow (fast icons) 3129 3125
DetailsRow without styles 2950 2975
DocumentCardTitle with truncation 1561 1556
MenuButton 1277 1259
MenuButton (experiments) 3318 3262
PrimaryButton 1145 1133
PrimaryButton (experiments) 1811 1795
SplitButton 2779 2828
SplitButton (experiments) 6417 6519
Stack 432 419
Stack with Intrinsic children 999 1018
Stack with Text children 3742 3698
Text 337 333
Toggle 788 796
Toggle (experiments) 2014 2025
button 63 63

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.51 0.47 1.09:1 2000 1022
🦄 Button.Fluent 0.09 0.17 0.53:1 5000 446
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 695
🔧 Dialog.Fluent 0.4 0.19 2.11:1 5000 1986
🔧 Dropdown.Fluent 3.65 0.47 7.77:1 1000 3649
🔧 Icon.Fluent 0.16 0.05 3.2:1 5000 794
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 328
🔧 Slider.Fluent 1.54 0.41 3.76:1 1000 1542
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 365
🦄 Tooltip.Fluent 0.12 18.9 0.01:1 5000 590

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 164 150 1.09:1
ListMinimalPerf.default 446 413 1.08:1
PortalMinimalPerf.default 306 284 1.08:1
PopupMinimalPerf.default 259 241 1.07:1
StatusMinimalPerf.default 609 568 1.07:1
TextMinimalPerf.default 392 375 1.05:1
AnimationMinimalPerf.default 634 608 1.04:1
AvatarMinimalPerf.default 566 542 1.04:1
GridMinimalPerf.default 861 825 1.04:1
ListCommonPerf.default 1046 1001 1.04:1
RadioGroupMinimalPerf.default 534 514 1.04:1
TableMinimalPerf.default 656 628 1.04:1
ImageMinimalPerf.default 343 334 1.03:1
InputMinimalPerf.default 1082 1051 1.03:1
ListNestedPerf.default 955 926 1.03:1
SegmentMinimalPerf.default 1091 1055 1.03:1
Button.Fluent 446 435 1.03:1
EmbedMinimalPerf.default 5679 5567 1.02:1
CardMinimalPerf.default 356 354 1.01:1
DialogMinimalPerf.default 1960 1942 1.01:1
ItemLayoutMinimalPerf.default 2071 2053 1.01:1
MenuMinimalPerf.default 2046 2017 1.01:1
TextAreaMinimalPerf.default 3162 3144 1.01:1
CustomToolbarPrototype.default 3793 3738 1.01:1
ToolbarMinimalPerf.default 1097 1086 1.01:1
TreeMinimalPerf.default 1170 1154 1.01:1
Dialog.Fluent 1986 1967 1.01:1
AttachmentSlotsPerf.default 3711 3694 1:1
ChatWithPopoverPerf.default 621 621 1:1
DropdownManyItemsPerf.default 1489 1495 1:1
LabelMinimalPerf.default 363 362 1:1
MenuButtonMinimalPerf.default 1521 1521 1:1
ProviderMergeThemesPerf.default 1425 1431 1:1
SliderMinimalPerf.default 1550 1550 1:1
SplitButtonMinimalPerf.default 12471 12449 1:1
TooltipMinimalPerf.default 837 835 1:1
TreeWith60ListItems.default 228 229 1:1
Avatar.Fluent 1022 1025 1:1
Dropdown.Fluent 3649 3659 1:1
AlertMinimalPerf.default 579 586 0.99:1
BoxMinimalPerf.default 345 348 0.99:1
CarouselMinimalPerf.default 2091 2121 0.99:1
CheckboxMinimalPerf.default 3317 3366 0.99:1
DropdownMinimalPerf.default 3616 3640 0.99:1
HeaderSlotsPerf.default 1636 1655 0.99:1
HierarchicalTreeMinimalPerf.default 972 979 0.99:1
IconMinimalPerf.default 407 412 0.99:1
ProviderMinimalPerf.default 692 702 0.99:1
ReactionMinimalPerf.default 2434 2453 0.99:1
Icon.Fluent 794 798 0.99:1
Image.Fluent 328 332 0.99:1
Text.Fluent 365 370 0.99:1
ChatMinimalPerf.default 549 562 0.98:1
DividerMinimalPerf.default 932 953 0.98:1
FormMinimalPerf.default 886 900 0.98:1
LayoutMinimalPerf.default 638 654 0.98:1
VideoMinimalPerf.default 900 917 0.98:1
Slider.Fluent 1542 1569 0.98:1
Tooltip.Fluent 590 600 0.98:1
HeaderMinimalPerf.default 532 548 0.97:1
ListWith60ListItems.default 1202 1236 0.97:1
Checkbox.Fluent 695 713 0.97:1
AccordionMinimalPerf.default 224 233 0.96:1
ButtonSlotsPerf.default 615 640 0.96:1
ChatDuplicateMessagesPerf.default 438 455 0.96:1
FlexMinimalPerf.default 259 271 0.96:1
RefMinimalPerf.default 193 202 0.96:1
AttachmentMinimalPerf.default 924 974 0.95:1
LoaderMinimalPerf.default 1080 1144 0.94:1

@@ -20,12 +20,15 @@ import CardFooter from './CardFooter';
import CardTopControls from './CardTopControls';
import CardColumn from './CardColumn';

export interface CardProps extends UIComponentProps, ChildrenComponentProps {
export interface CardProps extends UIComponentProps {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export interface CardProps extends UIComponentProps {
export interface CardProps extends UIComponentProps, ChildrenComponentProps<React.ReactNode> {

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not this?

…com/OfficeDev/office-ui-fabric-react into fix/playground-props

� Conflicts:
�	packages/fluentui/CHANGELOG.md
@layershifter layershifter merged commit e67befb into master Mar 26, 2020
@layershifter layershifter deleted the fix/playground-props branch March 26, 2020 12:29
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
…ft#12417)

* fix(playground): fix Loader page & improve Card's playground

* add changelog entry

* update changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants