Skip to content

Text implementation#18590

Merged
theerebuss merged 33 commits intomicrosoft:masterfrom
theerebuss:text-implementation
Jul 2, 2021
Merged

Text implementation#18590
theerebuss merged 33 commits intomicrosoft:masterfrom
theerebuss:text-implementation

Conversation

@theerebuss
Copy link
Copy Markdown
Contributor

@theerebuss theerebuss commented Jun 16, 2021 •
edited
Loading

Pull request checklist

- [ ] Include a change request file using $ yarn change Package not published

Description of changes

Implementation of the Text component

André Dias and others added 5 commits June 15, 2021 16:30
@tringakrasniqi
Regenerate package
1b8191b 
Remove existing implementation

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Change files
ce22d98
Migrate package to new converged DX
617dc75
Make package private
21b7d69
@tringakrasniqi
Add Text component
2da22fc 
Add Text default styles

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@theerebuss theerebuss added this to the June Project Cycle Q2 2021 milestone Jun 16, 2021
@theerebuss theerebuss mentioned this pull request Jun 16, 2021
Closed
44 tasks
@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Jun 18, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 3812a10a4152a2e27ac89b16259e312f42469570 (build)

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Jun 18, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 780 816 5000
BaseButton mount 897 920 5000
Breadcrumb mount 2606 2591 1000
ButtonNext mount 515 517 5000
Checkbox mount 1506 1479 5000
CheckboxBase mount 1291 1308 5000
ChoiceGroup mount 4724 4680 5000
ComboBox mount 978 968 1000
CommandBar mount 10062 10167 1000
ContextualMenu mount 6271 6172 1000
DefaultButton mount 1135 1110 5000
DetailsRow mount 3717 3663 5000
DetailsRowFast mount 3690 3715 5000
DetailsRowNoStyles mount 3523 3567 5000
Dialog mount 2153 2118 1000
DocumentCardTitle mount 136 142 1000
Dropdown mount 3238 3323 5000
FluentProviderNext mount 7336 7382 5000
FocusTrapZone mount 1781 1768 5000
FocusZone mount 1831 1839 5000
IconButton mount 1768 1731 5000
Label mount 324 326 5000
Layer mount 1756 1806 5000
Link mount 455 457 5000
MakeStyles mount 1807 1865 50000
MenuButton mount 1513 1449 5000
MessageBar mount 2010 2005 5000
Nav mount 3287 3203 1000
OverflowSet mount 1053 1030 5000
Panel mount 2138 2074 1000
Persona mount 805 820 1000
Pivot mount 1442 1388 1000
PrimaryButton mount 1296 1294 5000
Rating mount 7654 7571 5000
SearchBox mount 1322 1281 5000
Shimmer mount 2533 2548 5000
Slider mount 1974 1980 5000
SpinButton mount 5073 4961 5000
Spinner mount 409 424 5000
SplitButton mount 3178 3172 5000
Stack mount 507 503 5000
StackWithIntrinsicChildren mount 1538 1510 5000
StackWithTextChildren mount 4493 4483 5000
SwatchColorPicker mount 10293 10235 5000
Tabs mount 1407 1408 1000
TagPicker mount 2414 2407 5000
TeachingBubble mount 11857 11948 5000
Text mount 410 418 5000
TextField mount 1369 1339 5000
ThemeProvider mount 1183 1158 5000
ThemeProvider virtual-rerender 603 619 5000
Toggle mount 793 812 5000
buttonNative mount 111 125 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
TextMinimalPerf.default 337 338 1:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
LayoutMinimalPerf.default 379 352 1.08:1
AttachmentMinimalPerf.default 165 156 1.06:1
PortalMinimalPerf.default 184 174 1.06:1
TreeWith60ListItems.default 183 173 1.06:1
PopupMinimalPerf.default 583 557 1.05:1
IconMinimalPerf.default 613 584 1.05:1
AttachmentSlotsPerf.default 1113 1074 1.04:1
AvatarMinimalPerf.default 195 187 1.04:1
BoxMinimalPerf.default 360 345 1.04:1
HeaderMinimalPerf.default 372 356 1.04:1
ListWith60ListItems.default 615 593 1.04:1
ToolbarMinimalPerf.default 940 903 1.04:1
TooltipMinimalPerf.default 992 954 1.04:1
ButtonSlotsPerf.default 551 533 1.03:1
RefMinimalPerf.default 234 227 1.03:1
ChatDuplicateMessagesPerf.default 295 288 1.02:1
CheckboxMinimalPerf.default 2845 2785 1.02:1
DatepickerMinimalPerf.default 5750 5654 1.02:1
DropdownMinimalPerf.default 3153 3082 1.02:1
FlexMinimalPerf.default 291 286 1.02:1
ReactionMinimalPerf.default 374 366 1.02:1
SkeletonMinimalPerf.default 351 344 1.02:1
DialogMinimalPerf.default 766 757 1.01:1
DividerMinimalPerf.default 356 353 1.01:1
LabelMinimalPerf.default 386 382 1.01:1
ListNestedPerf.default 550 545 1.01:1
ProviderMinimalPerf.default 985 980 1.01:1
SegmentMinimalPerf.default 346 343 1.01:1
TextAreaMinimalPerf.default 500 497 1.01:1
CustomToolbarPrototype.default 3809 3767 1.01:1
VideoMinimalPerf.default 628 619 1.01:1
ButtonOverridesMissPerf.default 1717 1709 1:1
ChatMinimalPerf.default 669 671 1:1
EmbedMinimalPerf.default 4176 4160 1:1
FormMinimalPerf.default 403 403 1:1
MenuButtonMinimalPerf.default 1562 1568 1:1
ProviderMergeThemesPerf.default 1653 1661 1:1
RadioGroupMinimalPerf.default 452 453 1:1
SliderMinimalPerf.default 1565 1572 1:1
SplitButtonMinimalPerf.default 3677 3686 1:1
TableMinimalPerf.default 400 400 1:1
AlertMinimalPerf.default 271 275 0.99:1
AnimationMinimalPerf.default 408 411 0.99:1
ButtonMinimalPerf.default 168 170 0.99:1
DropdownManyItemsPerf.default 671 680 0.99:1
InputMinimalPerf.default 1245 1254 0.99:1
ItemLayoutMinimalPerf.default 1187 1204 0.99:1
ListMinimalPerf.default 509 513 0.99:1
StatusMinimalPerf.default 670 676 0.99:1
TreeMinimalPerf.default 799 805 0.99:1
ImageMinimalPerf.default 359 367 0.98:1
ListCommonPerf.default 609 619 0.98:1
TableManyItemsPerf.default 1852 1893 0.98:1
CardMinimalPerf.default 544 560 0.97:1
CarouselMinimalPerf.default 464 477 0.97:1
ChatWithPopoverPerf.default 371 382 0.97:1
HeaderSlotsPerf.default 748 774 0.97:1
RosterPerf.default 1143 1180 0.97:1
LoaderMinimalPerf.default 681 707 0.96:1
GridMinimalPerf.default 326 342 0.95:1
AccordionMinimalPerf.default 154 163 0.94:1
MenuMinimalPerf.default 837 936 0.89:1

André Dias and others added 15 commits June 18, 2021 17:54
@tringakrasniqi
Add as, wrap and truncate tests
9f35426 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Added block styling prop
d97b9e8
@tringakrasniqi
Added italic style prop
f415622
@tringakrasniqi
Added underline style prop
c0a327d
@tringakrasniqi
Added strikethrough style prop
19fd891
@tringakrasniqi
Added test for multiple style props
c4fe9d9
@tringakrasniqi
Add strikethrough + underline styling
817d4ee 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Add size prop
01a372a 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Add font prop
89d134a 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Add font prop
ac4226a 
Add weight prop

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Add align prop
d2d9d91 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Update types
80e440b 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Fix base story
d57740d
@tringakrasniqi
Added storybook stories for Text props
79c469d
@tringakrasniqi
Changed storybook story with arg controls
1c85eba
André Dias and others added 2 commits June 29, 2021 17:47
@tringakrasniqi
Add documentation for props
f73f6c0 
Fix stories

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Limit as prop to specific semantic elements
31b5d3c
@theerebuss theerebuss marked this pull request as ready for review June 29, 2021 19:49
@theerebuss theerebuss requested review from a team June 30, 2021 12:07
layershifter
layershifter reviewed Jul 1, 2021
View reviewed changes
Comment thread packages/react-text/src/components/Text/useTextStyles.ts Outdated
Comment thread packages/react-text/src/components/Text/Text.test.tsx
Comment thread packages/react-text/src/components/Text/Text.tsx Outdated
Comment thread packages/react-text/src/components/Text/Text.test.tsx Outdated
André Dias and others added 3 commits July 1, 2021 14:56
@tringakrasniqi
Move default of as prop to the hook
30b790e 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Remove as prop test
549cd3a 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@layershifter
Update packages/react-text/src/components/Text/useTextStyles.ts
0d871f0 
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
ling1726
ling1726 reviewed Jul 1, 2021
View reviewed changes
Comment thread packages/react-text/src/components/Text/Text.stories.tsx
};

TextStory.argTypes = {
wrap: {
Copy link
Copy Markdown
Contributor

@ling1726 ling1726 Jul 1, 2021

Choose a reason for hiding this comment

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

the controls should be generated from types, or did I not understand smth @Hotell ?

Copy link
Copy Markdown
Contributor Author

@theerebuss theerebuss Jul 1, 2021

Choose a reason for hiding this comment

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

AFAIK this needs to be duplicated for compatibility reasons.

ling1726
ling1726 reviewed Jul 1, 2021
View reviewed changes
Comment thread packages/react-text/src/components/Text/Text.types.ts Outdated
ling1726
ling1726 reviewed Jul 1, 2021
View reviewed changes
Comment thread packages/react-text/src/components/Text/useTextStyles.ts Outdated
André Dias and others added 3 commits July 1, 2021 17:25
@tringakrasniqi
Update API docs
f059503 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Remove as prop test
e6d24b0 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@tringakrasniqi
Remove useless comments
94c2c1c 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Jul 1, 2021 •
edited
Loading

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 2f5cd4e:

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

@microsoft microsoft deleted a comment from azure-pipelines Bot Jul 1, 2021
André Dias and others added 2 commits July 2, 2021 11:56
@tringakrasniqi
Fix API docs (again)
85dac23 
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Merge branch 'master' into text-implementation
2f5cd4e
@theerebuss theerebuss merged commit bf0ded4 into microsoft:master Jul 2, 2021
@theerebuss theerebuss deleted the text-implementation branch July 2, 2021 10:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hotell Hotell Hotell approved these changes

@layershifter layershifter layershifter approved these changes

+1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@tringakrasniqi tringakrasniqi

@theerebuss theerebuss

Labels

Component: Text

Projects

None yet

Milestone

June Project Cycle Q2 2021

Development

Successfully merging this pull request may close these issues.

7 participants

@theerebuss @fabricteam @Hotell @layershifter @ling1726 @miroslavstastny @tringakrasniqi