Text implementation

[andrefcdias]

Pull request checklist

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

Description of changes

Implementation of the Text component

[size-auditor]

Asset size changes

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

Baseline commit: 3812a10a4152a2e27ac89b16259e312f42469570 (build)

[fabricteam]

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

[ling1726]

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

[andrefcdias]

AFAIK this needs to be duplicated for compatibility reasons.

[codesandbox-ci]

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