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): Add background and border styles #12790

Merged
merged 6 commits into from
Apr 21, 2020
Merged

feat(Card): Add background and border styles #12790

merged 6 commits into from
Apr 21, 2020

Conversation

pompomon
Copy link
Contributor

@pompomon pompomon commented Apr 21, 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 default background and border styles for the Card component

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 Apr 21, 2020
silviuaavram
silviuaavram approved these changes Apr 21, 2020
View reviewed changes
Copy link
Contributor

@silviuaavram silviuaavram left a comment

Choose a reason for hiding this comment

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

just a question

packages/fluentui/react-northstar/src/themes/teams/components/Card/cardStyles.ts Outdated Show resolved Hide resolved
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 21, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 735 791 5000
Checkbox 1404 1411 5000
CheckboxBase 1118 1272 5000
ChoiceGroup 4282 4182 5000
ComboBox 802 758 1000
CommandBar 6052 6138 1000
ContextualMenu 10038 10196 1000
DefaultButton 920 890 5000
DetailsRow 3061 2957 5000
DetailsRow (fast icons) 2878 2946 5000
DetailsRow without styles 2746 2856 5000
Dialog 1211 1298 1000
DocumentCardTitle with truncation 1277 1361 1000
Dropdown 2154 2056 5000
FocusZone 1325 1302 5000
IconButton 1489 1492 5000
Label 253 242 5000
Link 384 374 5000
MenuButton 1260 1211 5000
Nav 2632 2721 1000
Panel 1199 1227 1000
Persona 685 736 1000
Pivot 1107 1044 1000
PrimaryButton 1044 1042 5000
SearchBox 1082 1183 5000
Slider 1273 1286 5000
Spinner 314 314 5000
SplitButton 2535 2607 5000
Stack 404 409 5000
Stack with Intrinsic children 948 925 5000
Stack with Text children 3609 3699 5000
TagPicker 2362 2319 5000
Text 293 298 5000
TextField 1174 1179 5000
Toggle 780 754 5000
button 52 56 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.43 1.09:1 2000 946
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 480
🔧 Checkbox.Fluent 0.59 0.31 1.9:1 1000 587
🔧 Dialog.Fluent 0.32 0.19 1.68:1 5000 1581
🔧 Dropdown.Fluent 2.83 0.4 7.08:1 1000 2830
🔧 Icon.Fluent 0.14 0.04 3.5:1 5000 703
🎯 Image.Fluent 0.07 0.09 0.78:1 5000 347
🔧 Slider.Fluent 1.18 0.31 3.81:1 1000 1176
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 349
🦄 Tooltip.Fluent 0.08 12.27 0.01:1 5000 385

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 401 335 1.2:1
Icon.Fluent 703 604 1.16:1
ChatDuplicateMessagesPerf.default 403 355 1.14:1
FlexMinimalPerf.default 302 268 1.13:1
FormMinimalPerf.default 751 667 1.13:1
ButtonMinimalPerf.default 146 131 1.11:1
ButtonSlotsPerf.default 556 506 1.1:1
TreeWith60ListItems.default 192 177 1.08:1
Avatar.Fluent 946 876 1.08:1
ListCommonPerf.default 914 852 1.07:1
PopupMinimalPerf.default 225 210 1.07:1
Text.Fluent 349 327 1.07:1
AttachmentMinimalPerf.default 131 124 1.06:1
ProviderMinimalPerf.default 579 546 1.06:1
StatusMinimalPerf.default 674 638 1.06:1
ChatMinimalPerf.default 600 571 1.05:1
LayoutMinimalPerf.default 526 501 1.05:1
TextAreaMinimalPerf.default 2463 2346 1.05:1
HeaderSlotsPerf.default 1374 1324 1.04:1
InputMinimalPerf.default 835 801 1.04:1
ListMinimalPerf.default 428 412 1.04:1
ListNestedPerf.default 840 806 1.04:1
ListWith60ListItems.default 1045 1008 1.04:1
MenuButtonMinimalPerf.default 1408 1357 1.04:1
ProviderMergeThemesPerf.default 1350 1296 1.04:1
SliderMinimalPerf.default 1185 1144 1.04:1
CustomToolbarPrototype.default 3084 2977 1.04:1
CardMinimalPerf.default 547 531 1.03:1
CarouselMinimalPerf.default 540 522 1.03:1
ChatWithPopoverPerf.default 507 491 1.03:1
DividerMinimalPerf.default 660 641 1.03:1
TableMinimalPerf.default 507 491 1.03:1
Checkbox.Fluent 587 571 1.03:1
DropdownManyItemsPerf.default 1205 1177 1.02:1
SplitButtonMinimalPerf.default 3259 3210 1.02:1
AccordionMinimalPerf.default 178 177 1.01:1
AvatarMinimalPerf.default 452 449 1.01:1
DropdownMinimalPerf.default 2859 2837 1.01:1
MenuMinimalPerf.default 1634 1614 1.01:1
TextMinimalPerf.default 336 332 1.01:1
AnimationMinimalPerf.default 597 596 1:1
EmbedMinimalPerf.default 3557 3546 1:1
HeaderMinimalPerf.default 444 444 1:1
LoaderMinimalPerf.default 668 670 1:1
RadioGroupMinimalPerf.default 527 529 1:1
IconMinimalPerf.default 590 591 1:1
Dialog.Fluent 1581 1585 1:1
Dropdown.Fluent 2830 2826 1:1
Slider.Fluent 1176 1179 1:1
GridMinimalPerf.default 586 589 0.99:1
CheckboxMinimalPerf.default 2449 2507 0.98:1
DialogMinimalPerf.default 1503 1541 0.98:1
ToolbarMinimalPerf.default 902 920 0.98:1
TreeMinimalPerf.default 1093 1110 0.98:1
Button.Fluent 480 491 0.98:1
ItemLayoutMinimalPerf.default 1487 1533 0.97:1
PortalMinimalPerf.default 279 288 0.97:1
ReactionMinimalPerf.default 1634 1693 0.97:1
SegmentMinimalPerf.default 840 870 0.97:1
TooltipMinimalPerf.default 598 618 0.97:1
AlertMinimalPerf.default 260 270 0.96:1
Tooltip.Fluent 385 403 0.96:1
AttachmentSlotsPerf.default 965 1020 0.95:1
RefMinimalPerf.default 162 170 0.95:1
VideoMinimalPerf.default 697 730 0.95:1
Image.Fluent 347 373 0.93:1
BoxMinimalPerf.default 294 321 0.92:1
HierarchicalTreeMinimalPerf.default 893 971 0.92:1
LabelMinimalPerf.default 358 394 0.91:1

@size-auditor
Copy link

size-auditor bot commented Apr 21, 2020 •
edited

Asset size changes

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

Baseline commit: 779eac3a0a2e0cd6a9d99875f91a6cfe640c967c (build)

pompomon and others added 2 commits April 21, 2020 13:25
@pompomon pompomon merged commit 3938068 into microsoft:master Apr 21, 2020
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
@pompomon @mnajdova @DuanShaolong
feat(Card): Add background and border styles (microsoft#12790)
110ffea 
* Add background styles

* Add border color styles

* Update Changelog

* Remove unnecessary styles

* Update packages/fluentui/CHANGELOG.md

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>

* Change border to be theme-switch safe

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
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

@silviuaavram silviuaavram silviuaavram 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

@joschect joschect

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 @mnajdova @silviuaavram @joschect