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): Adding new props and styles #13163

Merged
merged 5 commits into from
May 18, 2020
Merged

feat(Card): Adding new props and styles #13163

merged 5 commits into from
May 18, 2020

Conversation

pompomon
Copy link
Contributor

@pompomon pompomon commented May 14, 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

Add elevated, inverted and quiet props and styles for the Card

image
image
image

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 14, 2020
@msft-github-bot
Copy link
Contributor

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

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 731 723 5000
Checkbox 1422 1464 5000
CheckboxBase 1105 1133 5000
CheckboxNext 1368 1393 5000
ChoiceGroup 4465 4375 5000
ComboBox 829 840 1000
CommandBar 7231 7121 1000
ContextualMenu 13905 14297 1000
DefaultButton 936 938 5000
DetailsRow 3084 3067 5000
DetailsRow (fast icons) 3067 3022 5000
DetailsRow without styles 2865 2886 5000
Dialog 1347 1321 1000
DocumentCardTitle with truncation 1527 1545 1000
Dropdown 2118 2143 5000
FocusZone 1434 1465 5000
IconButton 1480 1510 5000
Label 269 290 5000
Link 412 417 5000
LinkNext 413 385 5000
MenuButton 1252 1286 5000
Nav 2860 2902 1000
Panel 1289 1334 1000
Persona 739 773 1000
Pivot 1182 1178 1000
PrimaryButton 1100 1061 5000
SearchBox 1126 1123 5000
Slider 1366 1344 5000
Spinner 359 353 5000
SplitButton 2731 2724 5000
Stack 430 434 5000
Stack with Intrinsic children 1004 1020 5000
Stack with Text children 3655 3678 5000
TagPicker 2470 2460 5000
Text 352 332 5000
TextField 1244 1248 5000
Toggle 812 788 5000
button 60 64 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.42 0.43 0.98:1 2000 843
🦄 Button.Fluent 0.09 0.17 0.53:1 5000 451
🔧 Checkbox.Fluent 0.63 0.31 2.03:1 1000 625
🔧 Dialog.Fluent 0.31 0.18 1.72:1 5000 1526
🔧 Dropdown.Fluent 3.06 0.4 7.65:1 1000 3059
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 625
🦄 Image.Fluent 0.06 0.09 0.67:1 5000 323
🔧 Slider.Fluent 1.29 0.34 3.79:1 1000 1289
🔧 Text.Fluent 0.06 0.02 3:1 5000 283
🦄 Tooltip.Fluent 0.08 16.86 0:1 5000 412

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 264 239 1.1:1
Checkbox.Fluent 625 580 1.08:1
ButtonSlotsPerf.default 583 543 1.07:1
CarouselMinimalPerf.default 433 410 1.06:1
DialogMinimalPerf.default 1635 1537 1.06:1
HierarchicalTreeMinimalPerf.default 907 866 1.05:1
AnimationMinimalPerf.default 565 541 1.04:1
AttachmentMinimalPerf.default 132 127 1.04:1
LoaderMinimalPerf.default 708 684 1.04:1
PopupMinimalPerf.default 245 236 1.04:1
ProviderMinimalPerf.default 654 628 1.04:1
SegmentMinimalPerf.default 306 294 1.04:1
Tooltip.Fluent 412 397 1.04:1
AlertMinimalPerf.default 276 269 1.03:1
ButtonMinimalPerf.default 150 146 1.03:1
DividerMinimalPerf.default 331 320 1.03:1
DropdownManyItemsPerf.default 1273 1232 1.03:1
DropdownMinimalPerf.default 3172 3071 1.03:1
GridMinimalPerf.default 631 613 1.03:1
Icon.Fluent 625 608 1.03:1
AccordionMinimalPerf.default 133 130 1.02:1
AttachmentSlotsPerf.default 999 980 1.02:1
HeaderMinimalPerf.default 447 440 1.02:1
ImageMinimalPerf.default 336 330 1.02:1
StatusMinimalPerf.default 596 582 1.02:1
TextMinimalPerf.default 306 299 1.02:1
ToolbarMinimalPerf.default 758 746 1.02:1
TreeMinimalPerf.default 1076 1053 1.02:1
Image.Fluent 323 316 1.02:1
ChatMinimalPerf.default 573 567 1.01:1
HeaderSlotsPerf.default 1284 1271 1.01:1
ListWith60ListItems.default 1060 1046 1.01:1
MenuMinimalPerf.default 608 602 1.01:1
ProviderMergeThemesPerf.default 1773 1751 1.01:1
ReactionMinimalPerf.default 328 324 1.01:1
CustomToolbarPrototype.default 3444 3426 1.01:1
CheckboxMinimalPerf.default 2703 2706 1:1
ListNestedPerf.default 797 799 1:1
MenuButtonMinimalPerf.default 1394 1396 1:1
RefMinimalPerf.default 182 182 1:1
IconMinimalPerf.default 597 600 1:1
TextAreaMinimalPerf.default 403 404 1:1
ChatDuplicateMessagesPerf.default 384 389 0.99:1
ChatWithPopoverPerf.default 474 481 0.99:1
InputMinimalPerf.default 906 911 0.99:1
ListMinimalPerf.default 410 416 0.99:1
PortalMinimalPerf.default 268 271 0.99:1
RadioGroupMinimalPerf.default 507 511 0.99:1
SliderMinimalPerf.default 1303 1319 0.99:1
TooltipMinimalPerf.default 663 670 0.99:1
TreeWith60ListItems.default 192 193 0.99:1
BoxMinimalPerf.default 299 305 0.98:1
ItemLayoutMinimalPerf.default 1459 1485 0.98:1
ListCommonPerf.default 859 880 0.98:1
Button.Fluent 451 462 0.98:1
Dropdown.Fluent 3059 3133 0.98:1
Slider.Fluent 1289 1310 0.98:1
LayoutMinimalPerf.default 478 492 0.97:1
EmbedMinimalPerf.default 1781 1848 0.96:1
SplitButtonMinimalPerf.default 3025 3135 0.96:1
Dialog.Fluent 1526 1597 0.96:1
Text.Fluent 283 298 0.95:1
TableMinimalPerf.default 335 356 0.94:1
Avatar.Fluent 843 897 0.94:1
LabelMinimalPerf.default 349 376 0.93:1
AvatarMinimalPerf.default 449 488 0.92:1
CardMinimalPerf.default 474 526 0.9:1
FormMinimalPerf.default 322 361 0.89:1
VideoMinimalPerf.default 520 602 0.86:1

@size-auditor
Copy link

size-auditor bot commented May 14, 2020 •
edited

Asset size changes

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

Baseline commit: d8c9366bfd9ea973eaf71ae9bcb7a4fe6e43b945 (build)

@pompomon pompomon force-pushed the chore/card-style-update branch 2 times, most recently from a5a22b6 to 81266d8 Compare May 18, 2020 11:25
@msft-github-bot
Copy link
Contributor

Hello @pompomon!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit 186644a 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): Adding new props and styles (microsoft#13163)
c653a46 
#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

Add `elevated`, `inverted` and `quiet` props and styles for the `Card`

![image](https://user-images.githubusercontent.com/2802155/81939686-f0a41500-95f6-11ea-9a72-3534601abf44.png)
![image](https://user-images.githubusercontent.com/2802155/81939701-f4d03280-95f6-11ea-8955-4412b3e4cbce.png)
![image](https://user-images.githubusercontent.com/2802155/81939713-f994e680-95f6-11ea-9371-5b466eab62aa.png)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mnajdova mnajdova mnajdova approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@layershifter layershifter Awaiting requested review from layershifter

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

Assignees

@ecraig12345 ecraig12345

Labels
AutoMerge 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 @mnajdova @ecraig12345