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: rework Text to use makeStyles() #17160

Merged
merged 10 commits into from
Feb 24, 2021
Merged

chore: rework Text to use makeStyles() #17160

merged 10 commits into from
Feb 24, 2021

Conversation

layershifter
Copy link
Member

Pull request checklist

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

Description of changes

Related #17056. Cleanups @fluentui/react-text to use makeStyles() instead of /compat styling system.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 24, 2021 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 92c39f0:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Feb 24, 2021 •
edited

Asset size changes

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

Baseline commit: eac75641c15f760208c0b01b379ac22a6ef4df2a (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1101 1126 5000
BaseButton mount 863 871 5000
Breadcrumb mount 42322 42738 5000
ButtonNext mount 659 699 5000
Checkbox mount 1440 1483 5000
CheckboxBase mount 1212 1221 5000
ChoiceGroup mount 4602 4543 5000
ComboBox mount 964 947 1000
CommandBar mount 9841 9908 1000
ContextualMenu mount 5954 5949 1000
DefaultButton mount 1103 1064 5000
DetailsRow mount 3616 3554 5000
DetailsRowFast mount 3545 3484 5000
DetailsRowNoStyles mount 3327 3409 5000
Dialog mount 1440 1434 1000
DocumentCardTitle mount 1796 1789 1000
Dropdown mount 3205 3166 5000
FocusTrapZone mount 1710 1726 5000
FocusZone mount 1733 1710 5000
IconButton mount 1709 1692 5000
Label mount 337 339 5000
Layer mount 1732 1716 5000
Link mount 455 449 5000
MakeStyles mount 1953 1970 50000
MenuButton mount 1479 1412 5000
MessageBar mount 1963 1950 5000
Nav mount 3172 3137 1000
OverflowSet mount 1007 998 5000
Panel mount 1402 1370 1000
Persona mount 788 801 1000
Pivot mount 1376 1379 1000
PrimaryButton mount 1242 1236 5000
Rating mount 7228 7380 5000
SearchBox mount 1250 1285 5000
Shimmer mount 2450 2465 5000
Slider mount 1908 1917 5000
SpinButton mount 4864 4912 5000
Spinner mount 402 411 5000
SplitButton mount 3123 3078 5000
Stack mount 478 487 5000
StackWithIntrinsicChildren mount 1482 1472 5000
StackWithTextChildren mount 4299 4329 5000
SwatchColorPicker mount 9857 9906 5000
Tabs mount 1354 1381 1000
TagPicker mount 2664 2726 5000
TeachingBubble mount 11225 11334 5000
Text mount 398 397 5000
TextField mount 1344 1350 5000
ThemeProvider mount 1141 1159 5000
ThemeProvider virtual-rerender 581 566 5000
ThemeProviderNext mount 1920 1953 5000
Toggle mount 778 792 5000
buttonNative mount 99 109 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.46 0.39:1 2000 353
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 587
🔧 Checkbox.Fluent 0.64 0.33 1.94:1 1000 639
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 773
🔧 Dropdown.Fluent 3.06 0.4 7.65:1 1000 3064
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 693
🦄 Image.Fluent 0.07 0.13 0.54:1 5000 366
🔧 Slider.Fluent 1.54 0.44 3.5:1 1000 1537
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 372
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 578

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ReactionMinimalPerf.default 435 402 1.08:1
RefMinimalPerf.default 254 235 1.08:1
ButtonMinimalPerf.default 185 175 1.06:1
Tooltip.Fluent 578 545 1.06:1
BoxMinimalPerf.default 386 368 1.05:1
Avatar.Fluent 353 337 1.05:1
Icon.Fluent 693 657 1.05:1
AlertMinimalPerf.default 312 301 1.04:1
AnimationMinimalPerf.default 436 420 1.04:1
Button.Fluent 587 562 1.04:1
AccordionMinimalPerf.default 162 158 1.03:1
PortalMinimalPerf.default 172 167 1.03:1
CarouselMinimalPerf.default 488 478 1.02:1
DropdownManyItemsPerf.default 731 715 1.02:1
FormMinimalPerf.default 440 430 1.02:1
HeaderSlotsPerf.default 801 786 1.02:1
ImageMinimalPerf.default 393 386 1.02:1
MenuButtonMinimalPerf.default 1600 1574 1.02:1
TextMinimalPerf.default 367 360 1.02:1
TreeMinimalPerf.default 781 769 1.02:1
ButtonUseCssPerf.default 813 806 1.01:1
ButtonUseCssNestingPerf.default 1052 1045 1.01:1
ChatDuplicateMessagesPerf.default 374 371 1.01:1
CheckboxMinimalPerf.default 2860 2827 1.01:1
DialogMinimalPerf.default 773 769 1.01:1
ItemLayoutMinimalPerf.default 1234 1216 1.01:1
LayoutMinimalPerf.default 416 413 1.01:1
LoaderMinimalPerf.default 739 732 1.01:1
PopupMinimalPerf.default 699 689 1.01:1
RadioGroupMinimalPerf.default 463 460 1.01:1
SegmentMinimalPerf.default 373 368 1.01:1
TooltipMinimalPerf.default 825 815 1.01:1
ButtonOverridesMissPerf.default 1665 1668 1:1
ChatMinimalPerf.default 634 637 1:1
EmbedMinimalPerf.default 4221 4216 1:1
ProviderMinimalPerf.default 958 962 1:1
SkeletonMinimalPerf.default 378 378 1:1
TableManyItemsPerf.default 2049 2039 1:1
TableMinimalPerf.default 420 419 1:1
ToolbarMinimalPerf.default 957 955 1:1
Checkbox.Fluent 639 639 1:1
Dropdown.Fluent 3064 3066 1:1
Slider.Fluent 1537 1532 1:1
Text.Fluent 372 373 1:1
CardMinimalPerf.default 548 552 0.99:1
DatepickerMinimalPerf.default 45287 45883 0.99:1
FlexMinimalPerf.default 302 305 0.99:1
GridMinimalPerf.default 354 359 0.99:1
HeaderMinimalPerf.default 377 379 0.99:1
ListCommonPerf.default 648 655 0.99:1
MenuMinimalPerf.default 896 906 0.99:1
ProviderMergeThemesPerf.default 1589 1599 0.99:1
SplitButtonMinimalPerf.default 3679 3704 0.99:1
StatusMinimalPerf.default 720 728 0.99:1
IconMinimalPerf.default 690 698 0.99:1
AvatarMinimalPerf.default 203 208 0.98:1
DividerMinimalPerf.default 373 381 0.98:1
DropdownMinimalPerf.default 3029 3086 0.98:1
InputMinimalPerf.default 1247 1276 0.98:1
ListMinimalPerf.default 505 515 0.98:1
ListWith60ListItems.default 665 681 0.98:1
CustomToolbarPrototype.default 3664 3722 0.98:1
TreeWith60ListItems.default 185 188 0.98:1
VideoMinimalPerf.default 635 649 0.98:1
Image.Fluent 366 374 0.98:1
ListNestedPerf.default 569 584 0.97:1
SliderMinimalPerf.default 1541 1583 0.97:1
TextAreaMinimalPerf.default 472 488 0.97:1
AttachmentMinimalPerf.default 159 166 0.96:1
AttachmentSlotsPerf.default 1186 1230 0.96:1
ButtonSlotsPerf.default 570 592 0.96:1
ChatWithPopoverPerf.default 426 445 0.96:1
LabelMinimalPerf.default 415 431 0.96:1
RosterPerf.default 1156 1222 0.95:1
Dialog.Fluent 773 811 0.95:1

@layershifter layershifter merged commit 167f9c3 into master Feb 24, 2021
@layershifter layershifter deleted the chore/rtext-to-makestyles branch February 24, 2021 18:32
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v8.0.0-beta.9 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@layershifter @joshualamusga1
chore: rework Text to use makeStyles() (microsoft#17160)
947b5b5 
* chore: rework Text to use makeStyles()

* cleanup deps

* Change files

* fix provider usage

* Change files

* fix UT

* fix useText()

* remove obsolete change file

* fix API

* fix API & export
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ling1726 ling1726 ling1726 approved these changes

@dzearing dzearing Awaiting requested review from dzearing

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

@xugao xugao Awaiting requested review from xugao

Assignees

@joschect joschect

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@layershifter @fabricteam @msft-fluent-ui-bot @ling1726 @joschect