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(UIComponent): deprecate className prop #12702

Merged
merged 15 commits into from
Apr 15, 2020
Merged

chore(UIComponent): deprecate className prop #12702

merged 15 commits into from
Apr 15, 2020

Conversation

mnajdova
Copy link
Contributor

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

BREAKING CHANGES

This PR deprecates the className static prop on all Fluent components. This PR is just renaming it from className to deprecated_className.

Migration path: replace ComponentName.className usages with ComponentName.deprecated_className.

// Before
console.log(Button.className)
// After
console.log(Button.deprecated_className)

Next steps will be

  • export className consts for all components
  • replace all deprecated_className usages with the new const class names
  • remove the deprecated_className props in the functional components (we will still need them for some time in the class components)

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 15, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 15, 2020 •
edited

Asset size changes

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

Baseline commit: 4af11560b068114f178564c29dfcb7d3ecfb2519 (build)

@msft-github-bot
Copy link
Contributor

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

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 841 877 5000
Checkbox 1789 1819 5000
CheckboxBase 1427 1406 5000
ChoiceGroup 5324 5280 5000
ComboBox 943 921 1000
CommandBar 7094 6810 1000
DefaultButton 1124 1045 5000
DetailsRow 3247 3411 5000
DetailsRow (fast icons) 3307 3304 5000
DetailsRow without styles 3025 3098 5000
Dialog 1438 1471 1000
DocumentCardTitle with truncation 1497 1430 1000
Dropdown 2875 2897 5000
FocusZone 1536 1519 5000
IconButton 1695 1916 5000
Label 529 520 5000
Link 422 463 5000
MenuButton 1432 1429 5000
Nav 3053 3215 1000
Panel 1384 1269 1000
Persona 779 785 1000
Pivot 1267 1295 1000
PrimaryButton 1211 1234 5000
SearchBox 1436 1540 5000
Slider 1865 1886 5000
Spinner 369 376 5000
SplitButton 3137 3050 5000
Stack 471 457 5000
Stack with Intrinsic children 1126 1058 5000
Stack with Text children 4150 4072 5000
TagPicker 2690 2693 5000
Text 348 355 5000
TextField 1778 1724 5000
Toggle 848 864 5000
button 57 49 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.47 1:1 2000 942
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 525
🔧 Checkbox.Fluent 0.61 0.38 1.61:1 1000 608
🔧 Dialog.Fluent 0.34 0.2 1.7:1 5000 1700
🔧 Dropdown.Fluent 2.96 0.48 6.17:1 1000 2955
🔧 Icon.Fluent 0.15 0.05 3:1 5000 754
🎯 Image.Fluent 0.09 0.1 0.9:1 5000 435
🔧 Slider.Fluent 1.26 0.39 3.23:1 1000 1263
🔧 Text.Fluent 0.08 0.02 4:1 5000 378
🦄 Tooltip.Fluent 0.08 15.21 0.01:1 5000 405

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 159 135 1.18:1
HeaderMinimalPerf.default 533 486 1.1:1
DividerMinimalPerf.default 739 685 1.08:1
ImageMinimalPerf.default 405 376 1.08:1
LayoutMinimalPerf.default 606 562 1.08:1
PopupMinimalPerf.default 244 225 1.08:1
ButtonMinimalPerf.default 163 152 1.07:1
LoaderMinimalPerf.default 782 731 1.07:1
TextMinimalPerf.default 380 354 1.07:1
Icon.Fluent 754 706 1.07:1
LabelMinimalPerf.default 471 443 1.06:1
RadioGroupMinimalPerf.default 592 556 1.06:1
RefMinimalPerf.default 186 176 1.06:1
Image.Fluent 435 409 1.06:1
ChatMinimalPerf.default 643 613 1.05:1
InputMinimalPerf.default 964 919 1.05:1
ProviderMinimalPerf.default 638 606 1.05:1
SplitButtonMinimalPerf.default 3777 3614 1.05:1
Avatar.Fluent 942 900 1.05:1
TreeWith60ListItems.default 213 204 1.04:1
BoxMinimalPerf.default 350 340 1.03:1
ListWith60ListItems.default 1159 1122 1.03:1
ProviderMergeThemesPerf.default 1563 1516 1.03:1
VideoMinimalPerf.default 817 790 1.03:1
Button.Fluent 525 512 1.03:1
Text.Fluent 378 366 1.03:1
ButtonSlotsPerf.default 587 574 1.02:1
FormMinimalPerf.default 770 753 1.02:1
SegmentMinimalPerf.default 932 910 1.02:1
StatusMinimalPerf.default 724 708 1.02:1
AnimationMinimalPerf.default 654 650 1.01:1
AvatarMinimalPerf.default 514 510 1.01:1
FlexMinimalPerf.default 312 309 1.01:1
HeaderSlotsPerf.default 1493 1473 1.01:1
TableMinimalPerf.default 581 574 1.01:1
Dialog.Fluent 1700 1685 1.01:1
CardMinimalPerf.default 413 415 1:1
DropdownManyItemsPerf.default 1283 1278 1:1
EmbedMinimalPerf.default 4068 4084 1:1
ListNestedPerf.default 878 882 1:1
ReactionMinimalPerf.default 1792 1794 1:1
ToolbarMinimalPerf.default 1016 1014 1:1
TooltipMinimalPerf.default 716 719 1:1
TreeMinimalPerf.default 1183 1181 1:1
Checkbox.Fluent 608 611 1:1
CarouselMinimalPerf.default 555 559 0.99:1
CheckboxMinimalPerf.default 2781 2810 0.99:1
DropdownMinimalPerf.default 3107 3138 0.99:1
HierarchicalTreeMinimalPerf.default 987 992 0.99:1
MenuMinimalPerf.default 1823 1849 0.99:1
CustomToolbarPrototype.default 3342 3384 0.99:1
Dropdown.Fluent 2955 2995 0.99:1
Slider.Fluent 1263 1278 0.99:1
AccordionMinimalPerf.default 208 212 0.98:1
AlertMinimalPerf.default 509 518 0.98:1
ChatDuplicateMessagesPerf.default 380 386 0.98:1
GridMinimalPerf.default 708 721 0.98:1
ItemLayoutMinimalPerf.default 1698 1727 0.98:1
ListCommonPerf.default 988 1006 0.98:1
ListMinimalPerf.default 491 501 0.98:1
TextAreaMinimalPerf.default 2524 2587 0.98:1
MenuButtonMinimalPerf.default 1560 1616 0.97:1
SliderMinimalPerf.default 1320 1363 0.97:1
IconMinimalPerf.default 678 697 0.97:1
ChatWithPopoverPerf.default 538 560 0.96:1
DialogMinimalPerf.default 1696 1764 0.96:1
PortalMinimalPerf.default 307 321 0.96:1
AttachmentSlotsPerf.default 1077 1142 0.94:1
Tooltip.Fluent 405 439 0.92:1

@mnajdova mnajdova merged commit 7422b59 into microsoft:master Apr 15, 2020
@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-compose@v0.2.6 has been released which incorporates this pull request.:tada:

Handy links:

DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
@mnajdova @DuanShaolong
chore(UIComponent): deprecate className prop (microsoft#12702)
f7405c0 
* wip

* wip

* -fixes ts issues

* -fixes ts issues

* -fixed isConformant

* -updated compose API

* -fixed unit and e2e tests

* Change files

* -fixed test
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

@pompomon pompomon Awaiting requested review from pompomon

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