feat(slider, tooltip): add static classes by layershifter · Pull Request #20455 · microsoft/fluentui

layershifter · 2021-11-02T15:31:16Z

Pull request checklist

Addresses an existing issue: Related to v9: Each component should have classname? #19937
Include a change request file using $ yarn change

Description of changes

✅ Extracted from #20383, these changes passed conformance test on that PR

This PR adds static classes to components @fluentui/react-slider & @fluentui/react-tooltip.

All classes follow fui-ComponentName
All classes are publicly exported as componentNameClassName
Snapshots were updated

layershifter · 2021-11-02T15:33:59Z

 import * as React_2 from 'react';

-// @public (undocumented)
-export const lowerThumbClassName: string;


I removed this export until we will agree on classes for slots

fabricteam · 2021-11-02T15:43:06Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-slider` RangedSlider	`41.432 kB` `11.976 kB`	`41.5 kB` `11.961 kB`	`68 B` `-15 B`
`react-slider` Slider	`34.81 kB` `10.862 kB`	`34.86 kB` `10.872 kB`	`50 B` `10 B`
`react-tooltip` Tooltip	`45.556 kB` `15.549 kB`	`45.57 kB` `15.554 kB`	`14 B` `5 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`169.727 kB` `48.148 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.208 kB` `10.672 kB`

_{🤖 This report was generated against 9186578324773f95f4d61be3d70e67752159d843}

size-auditor · 2021-11-02T15:44:51Z

Asset size changes

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

Baseline commit: 9186578324773f95f4d61be3d70e67752159d843 (build)

codesandbox-ci · 2021-11-02T16:05:46Z

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

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2021-11-02T16:06:05Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1085	1036	5000
BaseButton	mount	1076	1045	5000
Breadcrumb	mount	2922	2882	1000
ButtonNext	mount	593	584	5000
Checkbox	mount	1843	1805	5000
CheckboxBase	mount	1488	1498	5000
ChoiceGroup	mount	5557	5465	5000
ComboBox	mount	1092	1117	1000
CommandBar	mount	11411	11436	1000
ContextualMenu	mount	7176	7297	1000
DefaultButton	mount	1307	1328	5000
DetailsRow	mount	4293	4325	5000
DetailsRowFast	mount	4304	4290	5000
DetailsRowNoStyles	mount	4163	4113	5000
Dialog	mount	2897	2945	1000
DocumentCardTitle	mount	209	184	1000
Dropdown	mount	3714	3731	5000
FluentProviderNext	mount	3484	3633	5000
FluentProviderWithTheme	mount	224	214	10
FluentProviderWithTheme	virtual-rerender	101	108	10
FluentProviderWithTheme	virtual-rerender-with-unmount	257	263	10
FocusTrapZone	mount	2032	1985	5000
FocusZone	mount	1994	1963	5000
IconButton	mount	2043	2064	5000
Label	mount	422	391	5000
Layer	mount	3457	3556	5000
Link	mount	537	556	5000
MakeStyles	mount	1998	2067	50000
MenuButton	mount	1728	1737	5000
MessageBar	mount	2224	2239	5000
Nav	mount	3799	3822	1000
OverflowSet	mount	1253	1249	5000
Panel	mount	2753	2805	1000
Persona	mount	970	968	1000
Pivot	mount	1647	1649	1000
PrimaryButton	mount	1509	1462	5000
Rating	mount	9152	9182	5000
SearchBox	mount	1575	1541	5000
Shimmer	mount	2999	2992	5000
Slider	mount	2308	2210	5000
SpinButton	mount	5636	5731	5000
Spinner	mount	489	486	5000
SplitButton	mount	3624	3610	5000
Stack	mount	608	630	5000
StackWithIntrinsicChildren	mount	1975	2053	5000
StackWithTextChildren	mount	5414	5457	5000
SwatchColorPicker	mount	11933	12034	5000
TagPicker	mount	3020	3058	5000
TeachingBubble	mount	14455	14597	5000
Text	mount	504	486	5000
TextField	mount	1668	1611	5000
ThemeProvider	mount	1343	1383	5000
ThemeProvider	virtual-rerender	675	681	5000
ThemeProvider	virtual-rerender-with-unmount	2157	2166	5000
Toggle	mount	957	930	5000
buttonNative	mount	165	151	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	219	176	1.24:1
DialogMinimalPerf.default	931	840	1.11:1
GridMinimalPerf.default	425	386	1.1:1
TextAreaMinimalPerf.default	630	574	1.1:1
AvatarMinimalPerf.default	248	228	1.09:1
LoaderMinimalPerf.default	844	776	1.09:1
SegmentMinimalPerf.default	441	404	1.09:1
ListMinimalPerf.default	609	564	1.08:1
BoxMinimalPerf.default	425	397	1.07:1
SkeletonMinimalPerf.default	446	420	1.06:1
AlertMinimalPerf.default	345	330	1.05:1
DividerMinimalPerf.default	424	404	1.05:1
HeaderSlotsPerf.default	920	877	1.05:1
RosterPerf.default	1439	1374	1.05:1
PortalMinimalPerf.default	198	188	1.05:1
AnimationMinimalPerf.default	507	489	1.04:1
AttachmentMinimalPerf.default	200	192	1.04:1
CarouselMinimalPerf.default	547	526	1.04:1
LabelMinimalPerf.default	456	437	1.04:1
LayoutMinimalPerf.default	430	415	1.04:1
StatusMinimalPerf.default	796	767	1.04:1
TextMinimalPerf.default	417	400	1.04:1
AttachmentSlotsPerf.default	1260	1219	1.03:1
RadioGroupMinimalPerf.default	538	521	1.03:1
ReactionMinimalPerf.default	469	454	1.03:1
VideoMinimalPerf.default	773	753	1.03:1
ButtonMinimalPerf.default	207	203	1.02:1
DatepickerMinimalPerf.default	6305	6210	1.02:1
ImageMinimalPerf.default	435	428	1.02:1
MenuMinimalPerf.default	986	969	1.02:1
MenuButtonMinimalPerf.default	1936	1906	1.02:1
SplitButtonMinimalPerf.default	5010	4933	1.02:1
IconMinimalPerf.default	722	707	1.02:1
ToolbarMinimalPerf.default	1107	1085	1.02:1
CheckboxMinimalPerf.default	3043	3009	1.01:1
DropdownMinimalPerf.default	3568	3518	1.01:1
EmbedMinimalPerf.default	4936	4908	1.01:1
PopupMinimalPerf.default	667	658	1.01:1
TableManyItemsPerf.default	2257	2244	1.01:1
ButtonSlotsPerf.default	636	635	1:1
CardMinimalPerf.default	656	659	1:1
ChatDuplicateMessagesPerf.default	352	353	1:1
ChatMinimalPerf.default	767	769	1:1
ChatWithPopoverPerf.default	438	439	1:1
TooltipMinimalPerf.default	1195	1194	1:1
TreeMinimalPerf.default	926	929	1:1
DropdownManyItemsPerf.default	797	808	0.99:1
InputMinimalPerf.default	1490	1504	0.99:1
ListCommonPerf.default	735	745	0.99:1
RefMinimalPerf.default	268	272	0.99:1
SliderMinimalPerf.default	1972	1991	0.99:1
CustomToolbarPrototype.default	4624	4652	0.99:1
FlexMinimalPerf.default	325	330	0.98:1
FormMinimalPerf.default	486	495	0.98:1
ItemLayoutMinimalPerf.default	1425	1465	0.97:1
ListNestedPerf.default	652	670	0.97:1
ListWith60ListItems.default	734	757	0.97:1
ProviderMinimalPerf.default	1303	1345	0.97:1
TableMinimalPerf.default	465	478	0.97:1
ButtonOverridesMissPerf.default	1992	2071	0.96:1
ProviderMergeThemesPerf.default	1888	1958	0.96:1
TreeWith60ListItems.default	214	226	0.95:1
HeaderMinimalPerf.default	419	445	0.94:1

Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

…eat/classnames-p7

layershifter · 2021-11-03T16:26:12Z

-export const markClassName = 'ms-Slider-mark';
-export const markLabelClassName = 'ms-Slider-label';
+// These should be imported directly from useSliderStyles(), but currently it causes build issues
+// https://github.com/microsoft/fluentui/issues/20480


I reported the problem to Linaria repo, once it will be fixed - we will remove duplication.

* feat(slider, tooltip): add static classes * Update packages/react-slider/src/components/RangedSlider/Spec.md Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> * Update packages/react-slider/src/components/Slider/Spec.md Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com> * use star export * fix VR regressions * fix imports Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

feat(slider, tooltip): add static classes

383a078

layershifter added the Fluent UI react-components (v9) label Nov 2, 2021

layershifter requested review from a team, behowell, ecraig12345 and khmakoto as code owners November 2, 2021 15:31

msft-fluent-ui-bot assigned khmakoto Nov 2, 2021

layershifter commented Nov 2, 2021

View reviewed changes

layershifter marked this pull request as draft November 2, 2021 16:11

khmakoto reviewed Nov 2, 2021

View reviewed changes

Comment thread packages/react-slider/src/components/RangedSlider/Spec.md Outdated

Comment thread packages/react-slider/src/components/Slider/Spec.md Outdated

Comment thread packages/react-tooltip/src/components/Tooltip/index.ts Outdated

layershifter and others added 4 commits November 3, 2021 12:13

Update packages/react-slider/src/components/RangedSlider/Spec.md

bc8a604

Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

Update packages/react-slider/src/components/Slider/Spec.md

88a9981

Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

4b5f0e0

…eat/classnames-p7

use star export

c5b65ba

This was referenced Nov 3, 2021

@linaria/shaker: exports/object issue with TS callstack/linaria#861

Closed

bump @linaria/sharer once bug is fixed #20480

Closed

fix VR regressions

fe64b02

layershifter commented Nov 3, 2021

View reviewed changes

fix imports

e406cce

layershifter marked this pull request as ready for review November 3, 2021 17:57

khmakoto approved these changes Nov 3, 2021

View reviewed changes

layershifter merged commit f078af7 into master Nov 4, 2021

layershifter deleted the feat/classnames-p7 branch November 4, 2021 09:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(slider, tooltip): add static classes - #20455

feat(slider, tooltip): add static classes#20455
layershifter merged 7 commits into
masterfrom
feat/classnames-p7

layershifter commented Nov 2, 2021

Uh oh!

layershifter Nov 2, 2021 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2021 •

edited

Loading

Uh oh!

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Nov 2, 2021 •

edited

Loading

Uh oh!

fabricteam commented Nov 2, 2021 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

layershifter Nov 3, 2021 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

layershifter commented Nov 2, 2021

Pull request checklist

Description of changes

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor Bot commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci Bot commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Nov 2, 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!

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

layershifter Nov 2, 2021 •

edited

Loading

fabricteam commented Nov 2, 2021 •

edited

Loading

size-auditor Bot commented Nov 2, 2021 •

edited

Loading

codesandbox-ci Bot commented Nov 2, 2021 •

edited

Loading

fabricteam commented Nov 2, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

layershifter Nov 3, 2021 •

edited

Loading