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

chore: export consts for className and slotClassNames and replace static usages part 2 #12731

Merged
merged 4 commits into from
Apr 16, 2020
Merged

chore: export consts for className and slotClassNames and replace static usages part 2 #12731

merged 4 commits into from
Apr 16, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Apr 16, 2020 •
edited by layershifter

Added const for className and slotClassNames inside Box, Button* and Card* components.

BREAKING CHANGE

Removed Card.slotClassNames as there are already dedicated components for each different type of Card* component. Replace Card.slotNames.componentName usage with the accordin const componentNameClassName. For example

// Before
import  { Card } from '@fluentui/react-northstar';
console.log(Card.slotClassNames.body)

// After
import  { cardBodyClassName } from '@fluentui/react-northstar';
console.log(cardBodyClassName);

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 16, 2020
@mnajdova mnajdova changed the title chore(Box|Button|Card): export consts for className and slotClassNames and replace static usages chore: export consts for className and slotClassNames and replace static usages part 2 Apr 16, 2020
mnajdova
mnajdova commented Apr 16, 2020
View reviewed changes
packages/fluentui/react-northstar/src/components/Card/Card.tsx
@@ -129,15 +121,7 @@ const Card: React.FC<WithAsProp<CardProps>> &
};

Card.displayName = 'Card';
Card.deprecated_className = 'ui-card';

Card.slotClassNames = {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

No need for this, as there are already dedicated Card components for each slot.

@size-auditor
Copy link

size-auditor bot commented Apr 16, 2020

Asset size changes

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

Baseline commit: ac4cfe80d65beab97575bf1f3d84c5c04eaf8bfa (build)

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 730 717 5000
Checkbox 1686 1670 5000
CheckboxBase 1346 1349 5000
ChoiceGroup 4824 4981 5000
ComboBox 859 893 1000
CommandBar 7038 6896 1000
DefaultButton 948 959 5000
DetailsRow 3125 3021 5000
DetailsRow (fast icons) 3141 3138 5000
DetailsRow without styles 2930 2858 5000
Dialog 1380 1352 1000
DocumentCardTitle with truncation 1528 1526 1000
Dropdown 2637 2688 5000
FocusZone 1506 1497 5000
IconButton 1593 1552 5000
Label 431 429 5000
Link 402 415 5000
MenuButton 1250 1308 5000
Nav 3161 2848 1000
Panel 1306 1375 1000
Persona 766 722 1000
Pivot 1226 1171 1000
PrimaryButton 1074 1068 5000
SearchBox 1365 1367 5000
Slider 1681 1739 5000
Spinner 349 358 5000
SplitButton 2806 3050 5000
Stack 418 409 5000
Stack with Intrinsic children 1004 1074 5000
Stack with Text children 3682 3762 5000
TagPicker 2594 2464 5000
Text 320 323 5000
TextField 1569 1606 5000
Toggle 836 809 5000
button 57 61 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.47 0.94:1 2000 888
🦄 Button.Fluent 0.09 0.17 0.53:1 5000 454
🔧 Checkbox.Fluent 0.62 0.37 1.68:1 1000 622
🔧 Dialog.Fluent 0.32 0.18 1.78:1 5000 1594
🔧 Dropdown.Fluent 3.03 0.44 6.89:1 1000 3032
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 674
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 331
🔧 Slider.Fluent 1.29 0.41 3.15:1 1000 1293
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 350
🦄 Tooltip.Fluent 0.09 16.97 0.01:1 5000 435

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
CardMinimalPerf.default 391 363 1.08:1
ChatMinimalPerf.default 614 575 1.07:1
ImageMinimalPerf.default 355 331 1.07:1
PopupMinimalPerf.default 257 240 1.07:1
Text.Fluent 350 326 1.07:1
AvatarMinimalPerf.default 475 450 1.06:1
ListMinimalPerf.default 462 436 1.06:1
VideoMinimalPerf.default 708 668 1.06:1
EmbedMinimalPerf.default 4155 3966 1.05:1
ListWith60ListItems.default 1128 1072 1.05:1
Checkbox.Fluent 622 590 1.05:1
AttachmentMinimalPerf.default 133 128 1.04:1
ButtonMinimalPerf.default 151 145 1.04:1
InputMinimalPerf.default 935 902 1.04:1
LayoutMinimalPerf.default 511 492 1.04:1
ProviderMinimalPerf.default 639 614 1.04:1
TextMinimalPerf.default 351 339 1.04:1
ButtonSlotsPerf.default 571 556 1.03:1
ChatDuplicateMessagesPerf.default 416 404 1.03:1
CheckboxMinimalPerf.default 2814 2719 1.03:1
DividerMinimalPerf.default 660 643 1.03:1
DropdownMinimalPerf.default 3154 3060 1.03:1
FormMinimalPerf.default 679 658 1.03:1
HeaderMinimalPerf.default 465 450 1.03:1
SegmentMinimalPerf.default 867 843 1.03:1
SplitButtonMinimalPerf.default 3521 3409 1.03:1
AttachmentSlotsPerf.default 1023 1004 1.02:1
FlexMinimalPerf.default 284 278 1.02:1
LabelMinimalPerf.default 371 365 1.02:1
MenuMinimalPerf.default 1690 1659 1.02:1
TreeWith60ListItems.default 204 200 1.02:1
AlertMinimalPerf.default 470 465 1.01:1
DialogMinimalPerf.default 1613 1590 1.01:1
LoaderMinimalPerf.default 738 732 1.01:1
ToolbarMinimalPerf.default 903 897 1.01:1
Dialog.Fluent 1594 1576 1.01:1
Icon.Fluent 674 666 1.01:1
Tooltip.Fluent 435 430 1.01:1
BoxMinimalPerf.default 306 307 1:1
DropdownManyItemsPerf.default 1242 1241 1:1
HierarchicalTreeMinimalPerf.default 892 891 1:1
ItemLayoutMinimalPerf.default 1550 1551 1:1
ListCommonPerf.default 924 924 1:1
ProviderMergeThemesPerf.default 1518 1522 1:1
ReactionMinimalPerf.default 1772 1769 1:1
SliderMinimalPerf.default 1332 1333 1:1
TextAreaMinimalPerf.default 2522 2523 1:1
CustomToolbarPrototype.default 3441 3456 1:1
TooltipMinimalPerf.default 674 671 1:1
Avatar.Fluent 888 888 1:1
Slider.Fluent 1293 1298 1:1
ListNestedPerf.default 822 832 0.99:1
MenuButtonMinimalPerf.default 1440 1453 0.99:1
TreeMinimalPerf.default 1041 1053 0.99:1
Button.Fluent 454 458 0.99:1
AnimationMinimalPerf.default 561 575 0.98:1
ChatWithPopoverPerf.default 537 549 0.98:1
RefMinimalPerf.default 195 199 0.98:1
Dropdown.Fluent 3032 3089 0.98:1
RadioGroupMinimalPerf.default 505 519 0.97:1
IconMinimalPerf.default 617 637 0.97:1
TableMinimalPerf.default 467 479 0.97:1
GridMinimalPerf.default 596 624 0.96:1
PortalMinimalPerf.default 273 284 0.96:1
AccordionMinimalPerf.default 167 178 0.94:1
CarouselMinimalPerf.default 549 583 0.94:1
HeaderSlotsPerf.default 1360 1470 0.93:1
StatusMinimalPerf.default 596 658 0.91:1
Image.Fluent 331 366 0.9:1

@mnajdova mnajdova merged commit 3d2de0d into microsoft:master Apr 16, 2020
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
@mnajdova @DuanShaolong
chore: export consts for className and slotClassNames and replace sta…
8e024de 
…tic usages part 2 (microsoft#12731)

* -converted Box and Button components

* -converted Card* components

* -added changelog

* -added breaking change changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pompomon pompomon pompomon approved these changes

@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

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
@mnajdova @msft-github-bot @pompomon @layershifter @joschect