(react-slider) - Adding RangedSlider spec #19776

czearing · 2021-09-13T19:18:48Z

Pull request checklist

Addresses an existing issue: Slider Convergence #18886
Include a change request file using $ yarn change

Description of changes

Adding the converged RangedSlider component spec to the react-slider package.

fabricteam · 2021-09-13T19:24:36Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-slider` Slider	`32.056 kB` `10.087 kB`

_{🤖 This report was generated against 0ab982739510f2095afc1b817aca94cb1c9e44a9}

codesandbox-ci · 2021-09-13T19:27:41Z

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 6d40031:

Sandbox	Source
@fluentui/react 8 starter	Configuration

size-auditor · 2021-09-13T19:29:00Z

Asset size changes

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

Baseline commit: 0ab982739510f2095afc1b817aca94cb1c9e44a9 (build)

…eact-ranged-slider-spec

fabricteam · 2021-09-13T20:14:11Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	973	967	5000
BaseButton	mount	1046	1061	5000
Breadcrumb	mount	2710	2751	1000
ButtonNext	mount	506	487	5000
Checkbox	mount	1689	1784	5000
CheckboxBase	mount	1455	1435	5000
ChoiceGroup	mount	5335	5247	5000
ComboBox	mount	1145	1110	1000
CommandBar	mount	11152	11184	1000
ContextualMenu	mount	7104	7137	1000
DefaultButton	mount	1292	1245	5000
DetailsRow	mount	4101	4054	5000
DetailsRowFast	mount	4135	4105	5000
DetailsRowNoStyles	mount	3908	3893	5000
Dialog	mount	2689	2600	1000
DocumentCardTitle	mount	154	162	1000
Dropdown	mount	3646	3615	5000
FluentProviderNext	mount	7632	7504	5000
FluentProviderWithTheme	mount	368	369	10
FluentProviderWithTheme	virtual-rerender	105	113	10
FluentProviderWithTheme	virtual-rerender-with-unmount	519	521	10
FocusTrapZone	mount	1950	1962	5000
FocusZone	mount	1987	2016	5000
IconButton	mount	2012	1975	5000
Label	mount	366	373	5000
Layer	mount	3353	3403	5000
Link	mount	541	553	5000
MakeStyles	mount	1994	2035	50000
MenuButton	mount	1647	1663	5000
MessageBar	mount	2198	2210	5000
Nav	mount	3648	3594	1000
OverflowSet	mount	1216	1199	5000
Panel	mount	2545	2551	1000
Persona	mount	929	935	1000
Pivot	mount	1607	1584	1000
PrimaryButton	mount	1457	1487	5000
Rating	mount	8768	8734	5000
SearchBox	mount	1581	1548	5000
Shimmer	mount	2892	2852	5000
Slider	mount	2188	2158	5000
SpinButton	mount	5524	5519	5000
Spinner	mount	468	468	5000
SplitButton	mount	3537	3540	5000
Stack	mount	520	561	5000
StackWithIntrinsicChildren	mount	1721	1746	5000
StackWithTextChildren	mount	5199	5151	5000
SwatchColorPicker	mount	11261	11256	5000
Tabs	mount	1533	1550	1000
TagPicker	mount	2818	2826	5000
TeachingBubble	mount	14188	14127	5000
Text	mount	488	465	5000
TextField	mount	1526	1514	5000
ThemeProvider	mount	1230	1252	5000
ThemeProvider	virtual-rerender	635	631	5000
ThemeProvider	virtual-rerender-with-unmount	2025	2059	5000
Toggle	mount	928	882	5000
buttonNative	mount	117	123	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	197	177	1.11:1
TableMinimalPerf.default	484	436	1.11:1
ChatMinimalPerf.default	783	715	1.1:1
ButtonMinimalPerf.default	214	196	1.09:1
LayoutMinimalPerf.default	456	420	1.09:1
PortalMinimalPerf.default	205	188	1.09:1
ButtonSlotsPerf.default	674	625	1.08:1
FormMinimalPerf.default	504	471	1.07:1
StatusMinimalPerf.default	815	763	1.07:1
TextMinimalPerf.default	412	385	1.07:1
FlexMinimalPerf.default	333	314	1.06:1
TextAreaMinimalPerf.default	618	582	1.06:1
HeaderMinimalPerf.default	422	403	1.05:1
ListWith60ListItems.default	750	717	1.05:1
MenuMinimalPerf.default	1002	958	1.05:1
AnimationMinimalPerf.default	477	459	1.04:1
ChatWithPopoverPerf.default	430	413	1.04:1
DialogMinimalPerf.default	874	839	1.04:1
HeaderSlotsPerf.default	900	868	1.04:1
PopupMinimalPerf.default	685	661	1.04:1
RefMinimalPerf.default	265	255	1.04:1
BoxMinimalPerf.default	405	395	1.03:1
ChatDuplicateMessagesPerf.default	345	334	1.03:1
CheckboxMinimalPerf.default	3141	3063	1.03:1
DividerMinimalPerf.default	431	420	1.03:1
InputMinimalPerf.default	1427	1391	1.03:1
LabelMinimalPerf.default	451	436	1.03:1
RadioGroupMinimalPerf.default	523	507	1.03:1
TableManyItemsPerf.default	2274	2215	1.03:1
ToolbarMinimalPerf.default	1096	1065	1.03:1
TreeMinimalPerf.default	934	907	1.03:1
DropdownManyItemsPerf.default	809	795	1.02:1
ImageMinimalPerf.default	443	434	1.02:1
TooltipMinimalPerf.default	1196	1173	1.02:1
CarouselMinimalPerf.default	521	516	1.01:1
DropdownMinimalPerf.default	3431	3410	1.01:1
GridMinimalPerf.default	394	391	1.01:1
ListMinimalPerf.default	585	578	1.01:1
SegmentMinimalPerf.default	404	399	1.01:1
SliderMinimalPerf.default	1766	1753	1.01:1
VideoMinimalPerf.default	739	734	1.01:1
AvatarMinimalPerf.default	242	241	1:1
CardMinimalPerf.default	666	664	1:1
ListCommonPerf.default	740	740	1:1
LoaderMinimalPerf.default	785	786	1:1
MenuButtonMinimalPerf.default	1905	1896	1:1
ProviderMinimalPerf.default	1132	1134	1:1
SplitButtonMinimalPerf.default	4723	4718	1:1
IconMinimalPerf.default	743	740	1:1
CustomToolbarPrototype.default	4345	4344	1:1
TreeWith60ListItems.default	197	197	1:1
ButtonOverridesMissPerf.default	1923	1938	0.99:1
DatepickerMinimalPerf.default	6021	6097	0.99:1
EmbedMinimalPerf.default	4669	4733	0.99:1
ListNestedPerf.default	657	664	0.99:1
ProviderMergeThemesPerf.default	1831	1845	0.99:1
ItemLayoutMinimalPerf.default	1412	1442	0.98:1
RosterPerf.default	1283	1309	0.98:1
AccordionMinimalPerf.default	171	176	0.97:1
AttachmentSlotsPerf.default	1247	1280	0.97:1
ReactionMinimalPerf.default	424	438	0.97:1
SkeletonMinimalPerf.default	401	413	0.97:1
AlertMinimalPerf.default	313	330	0.95:1

…eact-ranged-slider-spec # Conflicts: # packages/react-slider/etc/react-slider.api.md

…eact-ranged-slider-spec

khmakoto

Left a couple of comments but they are non-blocking, so otherwise approving!

packages/react-slider/Spec.md

…eact-ranged-slider-spec # Conflicts: # packages/react-slider/etc/react-slider.api.md

* Adding RangedSlider spec * Quick fix to spec * Quick fix * Change files * Cleaning up the API * Updating Spec structure section. * Moving lowerThumb position due to focus * Switching value to a tuple * Adding the IntrinsicShorthandProps fix to Slider.tsx * Moving RangedSlider spec section to RangedSlider folder * Moving Spec.md to Slider * Fixing a typo in the RangedSlider public structure example

czearing added 3 commits September 13, 2021 12:13

Adding RangedSlider spec

fed58c6

Quick fix to spec

519165f

Quick fix

93c448c

czearing added the Component: Slider label Sep 13, 2021

czearing requested a review from khmakoto September 13, 2021 19:18

czearing requested a review from a team as a code owner September 13, 2021 19:18

msft-fluent-ui-bot assigned GeoffCoxMSFT Sep 13, 2021

czearing added 3 commits September 13, 2021 12:44

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

2f18223

…eact-ranged-slider-spec

Change files

2de78e9

Cleaning up the API

07eb143

czearing added 6 commits September 13, 2021 16:30

Updating Spec structure section.

ea87ced

Moving lowerThumb position due to focus

17ee1c6

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

dafca36

…eact-ranged-slider-spec # Conflicts: # packages/react-slider/etc/react-slider.api.md

Switching value to a tuple

c720c79

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

22f6190

…eact-ranged-slider-spec

Adding the IntrinsicShorthandProps fix to Slider.tsx

33f0f34

khmakoto approved these changes Sep 21, 2021

View reviewed changes

packages/react-slider/Spec.md Outdated Show resolved Hide resolved

packages/react-slider/Spec.md Outdated Show resolved Hide resolved

czearing added 4 commits September 20, 2021 19:21

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

64907c4

…eact-ranged-slider-spec # Conflicts: # packages/react-slider/etc/react-slider.api.md

Moving RangedSlider spec section to RangedSlider folder

8b54e9e

Moving Spec.md to Slider

ad1e584

Fixing a typo in the RangedSlider public structure example

6d40031

czearing merged commit ae43b36 into microsoft:master Sep 21, 2021

JustSlone added the Type: Spec Component spec PR label Nov 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(react-slider) - Adding RangedSlider spec #19776

(react-slider) - Adding RangedSlider spec #19776

czearing commented Sep 13, 2021

fabricteam commented Sep 13, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 13, 2021 •

edited

Loading

size-auditor bot commented Sep 13, 2021 •

edited

Loading

fabricteam commented Sep 13, 2021 •

edited

Loading

khmakoto left a comment

(react-slider) - Adding RangedSlider spec #19776

(react-slider) - Adding RangedSlider spec #19776

Conversation

czearing commented Sep 13, 2021

Pull request checklist

Description of changes

fabricteam commented Sep 13, 2021 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Sep 13, 2021 • edited Loading

size-auditor bot commented Sep 13, 2021 • edited Loading

Asset size changes

fabricteam commented Sep 13, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

khmakoto left a comment

Choose a reason for hiding this comment

fabricteam commented Sep 13, 2021 •

edited

Loading

codesandbox-ci bot commented Sep 13, 2021 •

edited

Loading

size-auditor bot commented Sep 13, 2021 •

edited

Loading

fabricteam commented Sep 13, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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