Skip to content

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Sep 29, 2020

This PR adds an initial version of Text in @fluentui/react-text.

@msft-github-bot
Copy link
Contributor

Thanks for submitting this change, but due to work currently in progress to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit changes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details. Thank you for your contribution and understanding!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 29, 2020

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 1ceebec:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 29, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 847 850 5000
BaseButton mount 940 948 5000
Breadcrumb mount 38917 39694 5000
ButtonNext mount 555 552 5000
Checkbox mount 1540 1570 5000
CheckboxBase mount 1304 1282 5000
CheckboxNext mount 1540 1583 5000
ChoiceGroup mount 5042 5026 5000
ChoiceGroupNext mount 9410 9318 5000
ComboBox mount 920 894 1000
CommandBar mount 7455 7351 1000
ContextualMenu mount 12420 12389 1000
DefaultButton mount 1150 1138 5000
DetailsRow mount 3661 3779 5000
DetailsRowFast mount 3698 3687 5000
DetailsRowNoStyles mount 3486 3433 5000
Dialog mount 1496 1490 1000
DocumentCardTitle mount 1730 1708 1000
Dropdown mount 2574 2616 5000
FocusTrapZone mount 1664 1697 5000
FocusTrapZoneNext mount 1729 1729 5000
FocusZone mount 1751 1743 5000
IconButton mount 1809 1771 5000
Label mount 342 355 5000
Layer mount 1849 1890 5000
LayerNext mount 1886 1889 5000
Link mount 475 470 5000
LinkNext mount 474 490 5000
MenuButton mount 1487 1517 5000
MessageBar mount 1963 1954 5000
Nav mount 3244 3263 1000
OverflowSet mount 1393 1378 5000
OverflowSetNext mount 1024 1037 5000
Panel mount 1433 1420 1000
Persona mount 870 844 1000
Pivot mount 1403 1411 1000
PivotNext mount 1373 1392 1000
PrimaryButton mount 1292 1298 5000
Rating mount 7691 7784 5000
RatingNext mount 7709 7610 5000
SearchBox mount 1302 1331 5000
SearchBoxNext mount 1342 1359 5000
Shimmer mount 2645 2627 5000
ShimmerNext mount 2617 2545 5000
Slider mount 1884 1928 5000
SliderNext mount 1934 1915 5000
SpinButton mount 5013 5008 5000
SpinButtonNext mount 5128 5149 5000
Spinner mount 422 401 5000
SplitButton mount 3211 3136 5000
Stack mount 519 523 5000
StackWithIntrinsicChildren mount 1831 1853 5000
StackWithTextChildren mount 5037 5010 5000
SwatchColorPicker mount 10214 10023 5000
TagPicker mount 2734 2733 5000
TeachingBubble mount 47294 47216 5000
TeachingBubbleNext mount 11319 11329 5000
Text mount 446 434 5000
TextField mount 1398 1376 5000
ThemeProvider mount 1571 1854 5000
ThemeProvider virtual-rerender 590 600 5000
Toggle mount 814 800 5000
ToggleNext mount 799 799 5000
button mount 116 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.51 0.92:1 2000 939
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 606
🔧 Checkbox.Fluent 0.64 0.33 1.94:1 1000 637
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 827
🔧 Dropdown.Fluent 2.89 0.47 6.15:1 1000 2886
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 755
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 430
🔧 Slider.Fluent 1.53 0.45 3.4:1 1000 1526
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 392
🦄 Tooltip.Fluent 0.11 14.71 0.01:1 5000 557

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 339 311 1.09:1
AttachmentMinimalPerf.default 175 163 1.07:1
HeaderMinimalPerf.default 425 399 1.07:1
TreeWith60ListItems.default 221 207 1.07:1
AttachmentSlotsPerf.default 1214 1150 1.06:1
ImageMinimalPerf.default 439 413 1.06:1
GridMinimalPerf.default 395 377 1.05:1
HeaderSlotsPerf.default 891 852 1.05:1
SegmentMinimalPerf.default 400 381 1.05:1
TextAreaMinimalPerf.default 562 536 1.05:1
CardMinimalPerf.default 615 590 1.04:1
DividerMinimalPerf.default 427 411 1.04:1
LabelMinimalPerf.default 467 447 1.04:1
IconMinimalPerf.default 723 692 1.04:1
ToolbarMinimalPerf.default 1022 981 1.04:1
ButtonMinimalPerf.default 194 189 1.03:1
CarouselMinimalPerf.default 484 470 1.03:1
FormMinimalPerf.default 478 462 1.03:1
PopupMinimalPerf.default 714 692 1.03:1
TableManyItemsPerf.default 2369 2302 1.03:1
TableMinimalPerf.default 455 443 1.03:1
ButtonUseCssPerf.default 844 827 1.02:1
DialogMinimalPerf.default 820 802 1.02:1
ItemLayoutMinimalPerf.default 1345 1323 1.02:1
ListCommonPerf.default 688 677 1.02:1
RefMinimalPerf.default 239 234 1.02:1
SkeletonMinimalPerf.default 467 456 1.02:1
StatusMinimalPerf.default 790 773 1.02:1
TextMinimalPerf.default 396 387 1.02:1
TooltipMinimalPerf.default 834 820 1.02:1
Dropdown.Fluent 2886 2833 1.02:1
BoxMinimalPerf.default 390 385 1.01:1
ButtonOverridesMissPerf.default 1686 1677 1.01:1
ChatDuplicateMessagesPerf.default 421 415 1.01:1
CheckboxMinimalPerf.default 2864 2842 1.01:1
EmbedMinimalPerf.default 2007 1994 1.01:1
ListMinimalPerf.default 524 520 1.01:1
ProviderMergeThemesPerf.default 1976 1953 1.01:1
ProviderMinimalPerf.default 981 968 1.01:1
CustomToolbarPrototype.default 3764 3735 1.01:1
TreeMinimalPerf.default 946 933 1.01:1
Checkbox.Fluent 637 628 1.01:1
Dialog.Fluent 827 822 1.01:1
Image.Fluent 430 426 1.01:1
AnimationMinimalPerf.default 419 419 1:1
AvatarMinimalPerf.default 496 495 1:1
ChatMinimalPerf.default 656 658 1:1
DropdownManyItemsPerf.default 783 782 1:1
DropdownMinimalPerf.default 2857 2850 1:1
InputMinimalPerf.default 1284 1288 1:1
LoaderMinimalPerf.default 757 759 1:1
Avatar.Fluent 939 942 1:1
Slider.Fluent 1526 1520 1:1
ButtonUseCssNestingPerf.default 1083 1098 0.99:1
LayoutMinimalPerf.default 435 440 0.99:1
MenuMinimalPerf.default 897 906 0.99:1
MenuButtonMinimalPerf.default 1616 1639 0.99:1
SliderMinimalPerf.default 1519 1532 0.99:1
Button.Fluent 606 611 0.99:1
Icon.Fluent 755 761 0.99:1
Text.Fluent 392 394 0.99:1
ChatWithPopoverPerf.default 454 461 0.98:1
ListNestedPerf.default 622 635 0.98:1
ReactionMinimalPerf.default 432 440 0.98:1
SplitButtonMinimalPerf.default 3817 3877 0.98:1
AlertMinimalPerf.default 313 322 0.97:1
ButtonSlotsPerf.default 610 629 0.97:1
ListWith60ListItems.default 943 977 0.97:1
RadioGroupMinimalPerf.default 469 482 0.97:1
VideoMinimalPerf.default 674 694 0.97:1
PortalMinimalPerf.default 164 170 0.96:1
Tooltip.Fluent 557 593 0.94:1
AccordionMinimalPerf.default 166 179 0.93:1

@size-auditor
Copy link

size-auditor bot commented Sep 29, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 8827b37

Possible causes

  • The baseline build 8827b37 is broken
  • The Size Auditor run for the baseline build 8827b37 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@layershifter layershifter force-pushed the feat/react-text branch 3 times, most recently from 1d6f58f to 867fa1d Compare October 1, 2020 11:31
@layershifter layershifter requested a review from khmakoto October 1, 2020 15:02
@khmakoto
Copy link
Member

khmakoto commented Oct 5, 2020

Seems like you need to run yarn update-api for the build to pass.

…eat/react-text

� Conflicts:
�	packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap
�	packages/react-theme-provider/src/getTokens.ts
root: 'ms-Text',
};

export const useTextClasses = makeClasses({
Copy link
Member

Choose a reason for hiding this comment

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

this looks great, and also, I just merged makeVariantClasses should we want these to be easily definable and extendable in the theme. Can sync later on this.

Copy link
Member

@dzearing dzearing left a comment

Choose a reason for hiding this comment

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

looks great!

@layershifter layershifter merged commit 5b078c7 into master Oct 7, 2020
@layershifter layershifter deleted the feat/react-text branch October 7, 2020 17:04
@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-theme-provider@v1.0.0-beta.0 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants