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(Card):Refactor expanding card using styles #13092

Merged
merged 4 commits into from
May 18, 2020
Merged

feat(Card):Refactor expanding card using styles #13092

merged 4 commits into from
May 18, 2020

Conversation

pompomon
Copy link
Contributor

@pompomon pompomon commented May 11, 2020 •
edited by msft-github-bot

Pull request checklist

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

Description of changes

Card can be expandable using a props, styles definition, example update

Microsoft Reviewers: Open in CodeFlow

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

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

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 738 760 5000
Checkbox 1469 1459 5000
CheckboxBase 1212 1215 5000
CheckboxNext 1489 1497 5000
ChoiceGroup 4656 4586 5000
ComboBox 882 881 1000
CommandBar 7377 7430 1000
ContextualMenu 15535 14992 1000
DefaultButton 986 959 5000
DetailsRow 3168 3146 5000
DetailsRow (fast icons) 3130 3245 5000
DetailsRow without styles 3031 3019 5000
Dialog 1370 1380 1000
DocumentCardTitle with truncation 1592 1567 1000
Dropdown 2260 2171 5000
FocusZone 1527 1574 5000
IconButton 1582 1571 5000
Label 283 289 5000
Link 422 430 5000
LinkNext 407 421 5000
MenuButton 1299 1304 5000
Nav 2985 2938 1000
Panel 1351 1361 1000
Persona 773 781 1000
Pivot 1207 1232 1000
PrimaryButton 1137 1099 5000
SearchBox 1140 1143 5000
Slider 1330 1355 5000
Spinner 373 342 5000
SplitButton 2832 2864 5000
Stack 417 420 5000
Stack with Intrinsic children 1042 1033 5000
Stack with Text children 3716 3811 5000
TagPicker 2498 2511 5000
Text 349 354 5000
TextField 1258 1298 5000
Toggle 824 823 5000
button 51 68 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.45 0.44 1.02:1 2000 905
🦄 Button.Fluent 0.1 0.18 0.56:1 5000 481
🔧 Checkbox.Fluent 0.63 0.32 1.97:1 1000 628
🔧 Dialog.Fluent 0.34 0.19 1.79:1 5000 1685
🔧 Dropdown.Fluent 3.21 0.41 7.83:1 1000 3214
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 650
🎯 Image.Fluent 0.07 0.09 0.78:1 5000 354
🔧 Slider.Fluent 1.33 0.35 3.8:1 1000 1325
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 327
🦄 Tooltip.Fluent 0.09 19.62 0:1 5000 443

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
Image.Fluent 354 312 1.13:1
ReactionMinimalPerf.default 355 327 1.09:1
AlertMinimalPerf.default 290 270 1.07:1
EmbedMinimalPerf.default 1973 1848 1.07:1
ProviderMinimalPerf.default 686 639 1.07:1
SegmentMinimalPerf.default 325 303 1.07:1
Text.Fluent 327 307 1.07:1
ChatMinimalPerf.default 597 565 1.06:1
ListMinimalPerf.default 448 424 1.06:1
Checkbox.Fluent 628 592 1.06:1
AnimationMinimalPerf.default 596 567 1.05:1
BoxMinimalPerf.default 307 291 1.05:1
HeaderMinimalPerf.default 467 445 1.05:1
RadioGroupMinimalPerf.default 534 507 1.05:1
RefMinimalPerf.default 205 198 1.04:1
TreeMinimalPerf.default 1185 1134 1.04:1
ButtonMinimalPerf.default 152 148 1.03:1
ChatDuplicateMessagesPerf.default 394 381 1.03:1
DividerMinimalPerf.default 315 306 1.03:1
FlexMinimalPerf.default 270 261 1.03:1
CustomToolbarPrototype.default 3661 3545 1.03:1
Dropdown.Fluent 3214 3125 1.03:1
Icon.Fluent 650 634 1.03:1
ChatWithPopoverPerf.default 550 538 1.02:1
DialogMinimalPerf.default 1655 1618 1.02:1
FormMinimalPerf.default 670 658 1.02:1
HeaderSlotsPerf.default 1357 1328 1.02:1
TextAreaMinimalPerf.default 428 421 1.02:1
TreeWith60ListItems.default 210 205 1.02:1
AttachmentMinimalPerf.default 139 138 1.01:1
AttachmentSlotsPerf.default 1080 1065 1.01:1
ButtonSlotsPerf.default 597 590 1.01:1
DropdownMinimalPerf.default 3173 3139 1.01:1
ItemLayoutMinimalPerf.default 1596 1577 1.01:1
LoaderMinimalPerf.default 762 752 1.01:1
PortalMinimalPerf.default 285 282 1.01:1
ProviderMergeThemesPerf.default 1621 1611 1.01:1
IconMinimalPerf.default 628 622 1.01:1
Button.Fluent 481 475 1.01:1
Dialog.Fluent 1685 1676 1.01:1
Tooltip.Fluent 443 439 1.01:1
CardMinimalPerf.default 528 526 1:1
DropdownManyItemsPerf.default 1287 1283 1:1
InputMinimalPerf.default 931 927 1:1
LayoutMinimalPerf.default 496 498 1:1
ListCommonPerf.default 923 926 1:1
MenuMinimalPerf.default 633 635 1:1
TableMinimalPerf.default 349 349 1:1
TextMinimalPerf.default 323 324 1:1
ToolbarMinimalPerf.default 779 778 1:1
VideoMinimalPerf.default 583 582 1:1
Avatar.Fluent 905 901 1:1
HierarchicalTreeMinimalPerf.default 905 918 0.99:1
LabelMinimalPerf.default 355 360 0.99:1
StatusMinimalPerf.default 601 609 0.99:1
CarouselMinimalPerf.default 437 448 0.98:1
CheckboxMinimalPerf.default 2787 2848 0.98:1
PopupMinimalPerf.default 249 253 0.98:1
SliderMinimalPerf.default 1357 1382 0.98:1
SplitButtonMinimalPerf.default 3263 3327 0.98:1
TooltipMinimalPerf.default 697 710 0.98:1
Slider.Fluent 1325 1348 0.98:1
GridMinimalPerf.default 608 627 0.97:1
ImageMinimalPerf.default 318 329 0.97:1
ListNestedPerf.default 836 865 0.97:1
ListWith60ListItems.default 1074 1119 0.96:1
MenuButtonMinimalPerf.default 1446 1510 0.96:1
AccordionMinimalPerf.default 132 139 0.95:1
AvatarMinimalPerf.default 483 509 0.95:1

@size-auditor
Copy link

size-auditor bot commented May 11, 2020 •
edited

Asset size changes

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

Baseline commit: 6b7c58a25198edfd6102437b52f34c5873a83bb2 (build)

layershifter
layershifter approved these changes May 18, 2020
View reviewed changes
Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

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

I don't like the idea of having a separate component there 😿 Other than that I don't have any comments

@pompomon pompomon merged commit 446bf39 into microsoft:master May 18, 2020
miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
@pompomon @miroslavstastny
feat(Card):Refactor expanding card using styles (microsoft#13092)
a9d1491 
* Refactor expanding card using styles

* Use compose for ExpandableBox + isConformant test

* Update changelog

* Fix Changelog after master rebase
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@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
4 participants
@pompomon @msft-github-bot @layershifter @ecraig12345