Text - Typography wrappers #18956

theerebuss · 2021-07-15T15:42:52Z

Pull request checklist

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

Description of changes

Implementation of the remaining typography wrappers:
- LargeTitle
- Title1
- Title2
- Title3
- Headline
- Subheadline
- Body
- Caption
Bundle-size fixtures

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Change lib to ES2015 Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com> Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Implement new prop merging * Change files * Update packages/react-utilities/src/compose/getSlots.test.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com> * Update packages/react-utilities/src/compose/getSlots.test.tsx Co-authored-by: ling1726 <lingfangao@hotmail.com> Co-authored-by: ling1726 <lingfangao@hotmail.com>

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

fabricteam · 2021-07-15T15:48:51Z

📊 Bundle size report

_{🤖 This report was generated against 400040ac767e7660922ac19c11955f02ce53a0bd}

codesandbox-ci · 2021-07-15T16:01:36Z

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 7ece1f8:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-07-15T16:06:41Z

Asset size changes

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

Baseline commit: 400040ac767e7660922ac19c11955f02ce53a0bd (build)

fabricteam · 2021-07-15T16:23:32Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	770	766	5000
BaseButton	mount	853	852	5000
Breadcrumb	mount	2509	2492	1000
ButtonNext	mount	521	501	5000
Checkbox	mount	1446	1440	5000
CheckboxBase	mount	1251	1282	5000
ChoiceGroup	mount	4442	4502	5000
ComboBox	mount	921	928	1000
CommandBar	mount	9664	9651	1000
ContextualMenu	mount	6014	6098	1000
DefaultButton	mount	1082	1076	5000
DetailsRow	mount	3536	3590	5000
DetailsRowFast	mount	3665	3579	5000
DetailsRowNoStyles	mount	3429	3476	5000
Dialog	mount	2079	2065	1000
DocumentCardTitle	mount	146	141	1000
Dropdown	mount	3042	3130	5000
FluentProviderNext	mount	6930	6985	5000
FocusTrapZone	mount	1713	1699	5000
FocusZone	mount	1707	1754	5000
IconButton	mount	1645	1661	5000
Label	mount	325	318	5000
Layer	mount	1708	1693	5000
Link	mount	443	429	5000
MakeStyles	mount	1742	1744	50000
MenuButton	mount	1403	1408	5000
MessageBar	mount	1889	1916	5000
Nav	mount	3064	3081	1000
OverflowSet	mount	966	978	5000
Panel	mount	1981	1989	1000
Persona	mount	782	778	1000
Pivot	mount	1387	1331	1000
PrimaryButton	mount	1244	1216	5000
Rating	mount	7185	7261	5000
SearchBox	mount	1244	1255	5000
Shimmer	mount	2405	2424	5000
Slider	mount	1859	1869	5000
SpinButton	mount	4922	4861	5000
Spinner	mount	411	407	5000
SplitButton	mount	3009	3044	5000
Stack	mount	492	464	5000
StackWithIntrinsicChildren	mount	1481	1460	5000
StackWithTextChildren	mount	4246	4290	5000
SwatchColorPicker	mount	9650	9799	5000
Tabs	mount	1346	1309	1000
TagPicker	mount	2318	2281	5000
TeachingBubble	mount	11427	11385	5000
Text	mount	391	389	5000
TextField	mount	1310	1370	5000
ThemeProvider	mount	1127	1133	5000
ThemeProvider	virtual-rerender	592	604	5000
Toggle	mount	789	767	5000
buttonNative	mount	96	113	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatMinimalPerf.default	660	607	1.09:1
LayoutMinimalPerf.default	364	341	1.07:1
ListWith60ListItems.default	636	596	1.07:1
TreeWith60ListItems.default	173	161	1.07:1
DropdownManyItemsPerf.default	670	634	1.06:1
ChatDuplicateMessagesPerf.default	284	273	1.04:1
FlexMinimalPerf.default	272	262	1.04:1
HeaderSlotsPerf.default	747	719	1.04:1
LabelMinimalPerf.default	373	360	1.04:1
StatusMinimalPerf.default	666	639	1.04:1
GridMinimalPerf.default	326	318	1.03:1
InputMinimalPerf.default	1214	1178	1.03:1
ReactionMinimalPerf.default	358	349	1.03:1
SkeletonMinimalPerf.default	338	327	1.03:1
SplitButtonMinimalPerf.default	3694	3589	1.03:1
TextMinimalPerf.default	334	325	1.03:1
EmbedMinimalPerf.default	3992	3904	1.02:1
HeaderMinimalPerf.default	351	344	1.02:1
ListCommonPerf.default	593	580	1.02:1
ListNestedPerf.default	512	501	1.02:1
PopupMinimalPerf.default	571	560	1.02:1
TableManyItemsPerf.default	1823	1788	1.02:1
AvatarMinimalPerf.default	184	182	1.01:1
CarouselMinimalPerf.default	436	433	1.01:1
DatepickerMinimalPerf.default	5154	5086	1.01:1
DividerMinimalPerf.default	328	325	1.01:1
ImageMinimalPerf.default	348	345	1.01:1
MenuMinimalPerf.default	803	794	1.01:1
ProviderMinimalPerf.default	929	924	1.01:1
RadioGroupMinimalPerf.default	428	423	1.01:1
SegmentMinimalPerf.default	334	332	1.01:1
IconMinimalPerf.default	606	600	1.01:1
TableMinimalPerf.default	394	391	1.01:1
AlertMinimalPerf.default	250	251	1:1
AnimationMinimalPerf.default	385	386	1:1
AttachmentSlotsPerf.default	1015	1011	1:1
ButtonMinimalPerf.default	154	154	1:1
DropdownMinimalPerf.default	2998	3013	1:1
SliderMinimalPerf.default	1492	1486	1:1
CustomToolbarPrototype.default	3643	3641	1:1
TooltipMinimalPerf.default	955	954	1:1
VideoMinimalPerf.default	574	576	1:1
ButtonOverridesMissPerf.default	1622	1642	0.99:1
ListMinimalPerf.default	495	500	0.99:1
LoaderMinimalPerf.default	669	677	0.99:1
MenuButtonMinimalPerf.default	1577	1595	0.99:1
ProviderMergeThemesPerf.default	1574	1591	0.99:1
TextAreaMinimalPerf.default	455	458	0.99:1
TreeMinimalPerf.default	748	754	0.99:1
AttachmentMinimalPerf.default	142	145	0.98:1
CheckboxMinimalPerf.default	2599	2651	0.98:1
DialogMinimalPerf.default	708	723	0.98:1
FormMinimalPerf.default	368	376	0.98:1
ToolbarMinimalPerf.default	885	906	0.98:1
ButtonSlotsPerf.default	503	520	0.97:1
CardMinimalPerf.default	516	530	0.97:1
ItemLayoutMinimalPerf.default	1137	1173	0.97:1
ChatWithPopoverPerf.default	334	354	0.94:1
RosterPerf.default	1106	1173	0.94:1
PortalMinimalPerf.default	164	175	0.94:1
AccordionMinimalPerf.default	135	145	0.93:1
BoxMinimalPerf.default	321	345	0.93:1
RefMinimalPerf.default	223	244	0.91:1

packages/react-text/src/components/Headline/Headline.tsx

packages/react-text/src/components/Title3/Title3.tsx

Co-authored-by: Martin Hochel <Hotell@users.noreply.github.com>

Hotell

😍 less code, happy maintainers! thx!

layershifter · 2021-07-20T16:58:49Z

@andrefcdias please add bundle-size command to package.json of react-text to run measurements on CI:

  "scripts": {
    "build": "just-scripts build",
+   "bundle-size": "bundle-size measure",

theerebuss · 2021-07-20T17:07:45Z

@andrefcdias please add bundle-size command to package.json of react-text to run measurements on CI:
  "scripts": {
    "build": "just-scripts build",
+   "bundle-size": "bundle-size measure",

@layershifter Should I run the migration generator for that?

layershifter · 2021-07-20T20:16:12Z

@layershifter Should I run the migration generator for that?

No, it's not related to migration. You should have this command to let lage know that it should be executed, #18970 (comment).

That's why a report on this PR is empty: there is no such command => nothing was built 😥

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com> Co-authored-by: Martin Hochel <Hotell@users.noreply.github.com>

André Dias and others added 30 commits June 30, 2021 17:03

Raw double implementation for testing

9a3985d

Remove alternative implementation

e37e97c

Ammend spec

8bd9d24

Move typographyStyles to root folder

e2bcf19

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Fix imports

d210fff

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add docs for typographyStyles

c9cbeb1

Change lib to ES2015 Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Merge branch 'master' into typography-hook-implementation

bc2106c

Text implementation (#18590)

160dc1d

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com> Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Add Display wrapper component

095feba

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Merge branch 'master' into text-wrappers

d1c1931

Undo formatting

3023c7b

Separate typographyStyles into multiple exports

1ee3883

Use hooks approach for wrapper

4cf68ec

Merge branch 'master' into typography-hook-implementation

dcc054a

Fix test import

76ca9bd

Implement temporary alternative until #18906 is fixed

75755f2

Merge branch 'master' into typography-hook-implementation

1cb1549

Update API

e0220ee

Cleanup test

9e4e616

Merge branch 'typography-hook-implementation' into text-wrappers

4f98d8d

Add LargeTitle wrapper

a84d61f

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Title1 wrapper

0cd0a13

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Title2 wrapper

08b8d79

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Title3 wrapper

e069ea6

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Headline wrapper

bc77315

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Subheadline wrapper

4ebac67

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Body wrapper

f9de72a

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Add Caption wrapper

55d5d5e

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

Update API

b07dcc5

Add bundle-size fixtures

cda24b6

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

theerebuss added the Component: Text label Jul 15, 2021

theerebuss added this to the July Project Cycle Q2 2021 milestone Jul 15, 2021

theerebuss requested review from a team July 15, 2021 15:42

theerebuss assigned tringakrasniqi and theerebuss Jul 15, 2021

theerebuss marked this pull request as draft July 15, 2021 15:43

Merge branch 'master' into text-wrappers-remaining

4ab2aba

Update API

278d19b

theerebuss marked this pull request as ready for review July 15, 2021 15:51

Add missing imports for stories

618b63c

Hotell reviewed Jul 16, 2021

View reviewed changes

packages/react-text/src/components/Headline/Headline.tsx Outdated Show resolved Hide resolved

packages/react-text/src/components/Title3/Title3.tsx Outdated Show resolved Hide resolved

tringakrasniqi and others added 2 commits July 20, 2021 13:55

Changed to the createWrapper approach

7494f86

Co-authored-by: Martin Hochel <Hotell@users.noreply.github.com>

Removed unnecessary displayname for Title3

7ece1f8

theerebuss mentioned this pull request Jul 20, 2021

Text Convergence #16847

Closed

44 tasks

theerebuss requested a review from Hotell July 20, 2021 14:48

Hotell approved these changes Jul 20, 2021

View reviewed changes

theerebuss merged commit 8811684 into microsoft:master Jul 20, 2021

theerebuss deleted the text-wrappers-remaining branch July 21, 2021 13:24

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021

Text - Typography wrappers (microsoft#18956)

8d2c0a6

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com> Co-authored-by: Martin Hochel <Hotell@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Text - Typography wrappers #18956

Text - Typography wrappers #18956

Uh oh!

theerebuss commented Jul 15, 2021

Uh oh!

fabricteam commented Jul 15, 2021 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jul 15, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Jul 15, 2021 •

edited

Loading

Uh oh!

fabricteam commented Jul 15, 2021 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Hotell left a comment

Uh oh!

layershifter commented Jul 20, 2021

Uh oh!

theerebuss commented Jul 20, 2021 •

edited

Loading

Uh oh!

layershifter commented Jul 20, 2021 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Text - Typography wrappers #18956

Text - Typography wrappers #18956

Uh oh!

Conversation

theerebuss commented Jul 15, 2021

Pull request checklist

Description of changes

Uh oh!

fabricteam commented Jul 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Jul 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Jul 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Jul 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

layershifter commented Jul 20, 2021

Uh oh!

theerebuss commented Jul 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

layershifter commented Jul 20, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

fabricteam commented Jul 15, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 15, 2021 •

edited

Loading

size-auditor bot commented Jul 15, 2021 •

edited

Loading

fabricteam commented Jul 15, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)

theerebuss commented Jul 20, 2021 •

edited

Loading

layershifter commented Jul 20, 2021 •

edited

Loading