(react-slider) - Adding snapping behavior #19330

czearing · 2021-08-09T22:52:44Z

Pull request checklist

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

Description of changes

This PR introduces new behavior to the snap functionality of the Slider component.

Old Behavior

Previously when selecting a value in between steps, the closest value would be approximated and jumped to:

New Behavior

With the new behavior, the controlled value is separated from the rendered position allowing for:

Consistent step increments without snapping (step = 1 no longer returns a position related decimal on change)
Smooth gliding on custom steps increments.
A transition in-between steps rather than a sudden jump.

Here is the new behavior when selecting in between steps:

Behavior

This snap behavior is enabled when:

The user provides any step value including 1.

fabricteam · 2021-08-09T22:55:37Z

📊 Bundle size report

_{🤖 This report was generated against b94c509dfdb919a254199db9cdb7cdaeb01026df}

codesandbox-ci · 2021-08-09T23:05:13Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-08-09T23:07:09Z

Asset size changes

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

Baseline commit: b94c509dfdb919a254199db9cdb7cdaeb01026df (build)

fabricteam · 2021-08-09T23:22:42Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	993	1015	5000
BaseButton	mount	1013	1055	5000
Breadcrumb	mount	2766	2757	1000
ButtonNext	mount	476	478	5000
Checkbox	mount	1633	1663	5000
CheckboxBase	mount	1430	1402	5000
ChoiceGroup	mount	5147	5046	5000
ComboBox	mount	1019	1021	1000
CommandBar	mount	10555	10339	1000
ContextualMenu	mount	6316	6454	1000
DefaultButton	mount	1161	1203	5000
DetailsRow	mount	3971	3960	5000
DetailsRowFast	mount	3929	4021	5000
DetailsRowNoStyles	mount	3671	3745	5000
Dialog	mount	2204	2231	1000
DocumentCardTitle	mount	153	161	1000
Dropdown	mount	3408	3489	5000
FluentProviderNext	mount	7059	7207	5000
FocusTrapZone	mount	1864	1832	5000
FocusZone	mount	1806	1783	5000
IconButton	mount	1871	1850	5000
Label	mount	384	347	5000
Layer	mount	1968	1969	5000
Link	mount	491	509	5000
MakeStyles	mount	1806	1799	50000
MenuButton	mount	1591	1561	5000
MessageBar	mount	2064	2099	5000
Nav	mount	3449	3413	1000
OverflowSet	mount	1127	1156	5000
Panel	mount	2152	2130	1000
Persona	mount	865	866	1000
Pivot	mount	1447	1442	1000
PrimaryButton	mount	1359	1302	5000
Rating	mount	8445	8392	5000
SearchBox	mount	1443	1458	5000
Shimmer	mount	2741	2765	5000
Slider	mount	2047	2092	5000
SpinButton	mount	5258	5521	5000
Spinner	mount	437	451	5000
SplitButton	mount	3344	3302	5000
Stack	mount	527	530	5000
StackWithIntrinsicChildren	mount	1703	1658	5000
StackWithTextChildren	mount	5156	5061	5000
SwatchColorPicker	mount	10709	10845	5000
Tabs	mount	1472	1500	1000
TagPicker	mount	2753	2738	5000
TeachingBubble	mount	12721	12215	5000
Text	mount	492	477	5000
TextField	mount	1534	1630	5000
ThemeProvider	mount	1265	1287	5000
ThemeProvider	virtual-rerender	637	632	5000
Toggle	mount	894	865	5000
buttonNative	mount	113	133	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	179	162	1.1:1
RefMinimalPerf.default	244	225	1.08:1
GridMinimalPerf.default	391	367	1.07:1
TreeWith60ListItems.default	201	188	1.07:1
ListWith60ListItems.default	690	654	1.06:1
RadioGroupMinimalPerf.default	490	464	1.06:1
AvatarMinimalPerf.default	208	198	1.05:1
ButtonMinimalPerf.default	185	176	1.05:1
ButtonSlotsPerf.default	596	567	1.05:1
ImageMinimalPerf.default	418	397	1.05:1
FlexMinimalPerf.default	311	298	1.04:1
ListCommonPerf.default	719	691	1.04:1
MenuMinimalPerf.default	926	891	1.04:1
PopupMinimalPerf.default	630	604	1.04:1
IconMinimalPerf.default	657	634	1.04:1
ToolbarMinimalPerf.default	1016	980	1.04:1
LayoutMinimalPerf.default	405	395	1.03:1
TextAreaMinimalPerf.default	566	549	1.03:1
AlertMinimalPerf.default	293	286	1.02:1
AnimationMinimalPerf.default	428	418	1.02:1
BoxMinimalPerf.default	389	380	1.02:1
CarouselMinimalPerf.default	501	493	1.02:1
ChatWithPopoverPerf.default	394	385	1.02:1
DividerMinimalPerf.default	400	393	1.02:1
HeaderMinimalPerf.default	405	396	1.02:1
ListNestedPerf.default	607	594	1.02:1
ReactionMinimalPerf.default	416	409	1.02:1
TooltipMinimalPerf.default	1108	1090	1.02:1
AccordionMinimalPerf.default	157	155	1.01:1
AttachmentMinimalPerf.default	171	169	1.01:1
CheckboxMinimalPerf.default	2851	2828	1.01:1
DropdownMinimalPerf.default	3152	3113	1.01:1
ItemLayoutMinimalPerf.default	1356	1337	1.01:1
ListMinimalPerf.default	565	561	1.01:1
LoaderMinimalPerf.default	715	705	1.01:1
MenuButtonMinimalPerf.default	1716	1694	1.01:1
CustomToolbarPrototype.default	4082	4027	1.01:1
DatepickerMinimalPerf.default	5569	5567	1:1
DialogMinimalPerf.default	776	779	1:1
EmbedMinimalPerf.default	4423	4431	1:1
HeaderSlotsPerf.default	837	839	1:1
ProviderMinimalPerf.default	1087	1085	1:1
SkeletonMinimalPerf.default	382	381	1:1
SplitButtonMinimalPerf.default	4021	4014	1:1
TableManyItemsPerf.default	2034	2042	1:1
TableMinimalPerf.default	421	422	1:1
TreeMinimalPerf.default	853	857	1:1
VideoMinimalPerf.default	676	677	1:1
AttachmentSlotsPerf.default	1125	1137	0.99:1
CardMinimalPerf.default	605	611	0.99:1
ChatMinimalPerf.default	708	713	0.99:1
FormMinimalPerf.default	457	462	0.99:1
LabelMinimalPerf.default	426	430	0.99:1
SliderMinimalPerf.default	1647	1656	0.99:1
StatusMinimalPerf.default	713	722	0.99:1
InputMinimalPerf.default	1330	1354	0.98:1
ProviderMergeThemesPerf.default	1659	1693	0.98:1
SegmentMinimalPerf.default	368	374	0.98:1
TextMinimalPerf.default	365	374	0.98:1
ButtonOverridesMissPerf.default	1780	1839	0.97:1
DropdownManyItemsPerf.default	714	735	0.97:1
RosterPerf.default	1262	1303	0.97:1
ChatDuplicateMessagesPerf.default	314	327	0.96:1

…eat/slider-step-change

…eat/slider-step-change # Conflicts: # packages/react-slider/src/components/Slider/useSliderState.tsx

packages/react-slider/src/components/Slider/Slider.types.ts

packages/react-slider/src/components/Slider/useSliderState.tsx

…eat/slider-step-change # Conflicts: # packages/react-slider/src/Slider.stories.tsx # packages/react-slider/src/components/Slider/__snapshots__/Slider.test.tsx.snap # packages/react-slider/src/components/Slider/useSliderState.tsx

packages/react-slider/src/Slider.stories.tsx

packages/react-slider/src/components/Slider/Slider.types.ts

…eat/slider-step-change

…eat/slider-step-change # Conflicts: # packages/react-slider/src/components/Slider/Slider.test.tsx # packages/react-slider/src/components/Slider/useSliderState.tsx

czearing added 3 commits August 9, 2021 15:19

Updating spec, types, stories, and logic.

6d1bbac

Updating stories

8ffb7b0

Updating snapshots

21c64c9

czearing requested a review from a team as a code owner August 9, 2021 22:52

msft-fluent-ui-bot added the Component: Slider label Aug 9, 2021

msft-fluent-ui-bot assigned smhigley Aug 9, 2021

Updating deps

0876959

czearing added 2 commits August 10, 2021 09:24

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

d6edfa4

…eat/slider-step-change

Removing snap.

1b97c72

czearing changed the title ~~(react-slider) - Adding snap prop~~ (react-slider) - Adding snapping behavior Aug 10, 2021

Updating API

62753c2

czearing closed this Aug 10, 2021

czearing reopened this Aug 10, 2021

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

5ed2d39

…eat/slider-step-change # Conflicts: # packages/react-slider/src/components/Slider/useSliderState.tsx

khmakoto reviewed Aug 11, 2021

View reviewed changes

packages/react-slider/src/components/Slider/Slider.types.ts Outdated Show resolved Hide resolved

packages/react-slider/src/components/Slider/useSliderState.tsx Outdated Show resolved Hide resolved

czearing added 4 commits August 11, 2021 15:38

PR feedback

58a7b6a

Updating step functionality and introducing keyIncrement

f513007

Updating tests to work with the new min and max default values.

da53033

khmakoto reviewed Aug 13, 2021

View reviewed changes

packages/react-slider/src/Slider.stories.tsx Show resolved Hide resolved

packages/react-slider/src/components/Slider/Slider.types.ts Outdated Show resolved Hide resolved

czearing added 6 commits August 13, 2021 09:16

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

0ce5ecb

…eat/slider-step-change

PR feedback

76956d1

Updating API

b1e894c

Fixing a transition bug for snapping origin

572a579

Quick fix

270fb3f

Updating stories

afa5259

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

d9d2ea2

…eat/slider-step-change # Conflicts: # packages/react-slider/src/components/Slider/Slider.test.tsx # packages/react-slider/src/components/Slider/useSliderState.tsx

khmakoto approved these changes Aug 20, 2021

View reviewed changes

czearing merged commit 8ddf44d into microsoft:master Aug 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(react-slider) - Adding snapping behavior #19330

(react-slider) - Adding snapping behavior #19330

czearing commented Aug 9, 2021 •

edited

Loading

fabricteam commented Aug 9, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 9, 2021 •

edited

Loading

size-auditor bot commented Aug 9, 2021 •

edited

Loading

fabricteam commented Aug 9, 2021 •

edited

Loading

(react-slider) - Adding snapping behavior #19330

(react-slider) - Adding snapping behavior #19330

Conversation

czearing commented Aug 9, 2021 • edited Loading

Pull request checklist

Description of changes

Old Behavior

New Behavior

Behavior

fabricteam commented Aug 9, 2021 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Aug 9, 2021 • edited Loading

size-auditor bot commented Aug 9, 2021 • edited Loading

Asset size changes

fabricteam commented Aug 9, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

czearing commented Aug 9, 2021 •

edited

Loading

fabricteam commented Aug 9, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 9, 2021 •

edited

Loading

size-auditor bot commented Aug 9, 2021 •

edited

Loading

fabricteam commented Aug 9, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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