(react-slider) - Adding vertical prop #19323

czearing · 2021-08-09T16:47:23Z

Pull request checklist

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

Description of changes

Implementing the vertical prop to the Slider component:

…eat/converging-basic-slider # Conflicts: # packages/react-slider/package.json

…eat/converging-basic-slider # Conflicts: # packages/react-slider/etc/react-slider.api.md # packages/react-slider/src/components/Slider/Slider.types.ts # packages/react-slider/src/components/Slider/renderSlider.tsx

…led values.

…eat/converging-basic-slider # Conflicts: # packages/react-slider/package.json

2. Updating the styles to add a round focus border during mobile selection.

…eat/slider-vertical # Conflicts: # packages/react-slider/src/Slider.stories.tsx # packages/react-slider/src/components/Slider/Slider.types.ts # packages/react-slider/src/components/Slider/useSliderState.tsx # packages/react-slider/src/components/Slider/useSliderStyles.ts

fabricteam · 2021-08-09T16:55:13Z

📊 Bundle size report

_{🤖 This report was generated against e963d1b2e3d820f74c5efaffd5f1c9771ee978df}

codesandbox-ci · 2021-08-09T16:58:53Z

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 66387cf:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-08-09T17:08:14Z

Asset size changes

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

Baseline commit: e963d1b2e3d820f74c5efaffd5f1c9771ee978df (build)

fabricteam · 2021-08-09T17:25:35Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	992	1037	5000
BaseButton	mount	1007	993	5000
Breadcrumb	mount	2703	2727	1000
ButtonNext	mount	451	491	5000
Checkbox	mount	1652	1639	5000
CheckboxBase	mount	1424	1427	5000
ChoiceGroup	mount	5082	5091	5000
ComboBox	mount	997	1011	1000
CommandBar	mount	10475	10343	1000
ContextualMenu	mount	6266	6460	1000
DefaultButton	mount	1230	1251	5000
DetailsRow	mount	3982	4029	5000
DetailsRowFast	mount	4032	4029	5000
DetailsRowNoStyles	mount	3844	3843	5000
Dialog	mount	2281	2275	1000
DocumentCardTitle	mount	160	159	1000
Dropdown	mount	3570	3542	5000
FluentProviderNext	mount	7456	7430	5000
FocusTrapZone	mount	1886	1921	5000
FocusZone	mount	1942	1876	5000
IconButton	mount	1973	1930	5000
Label	mount	358	360	5000
Layer	mount	1959	1929	5000
Link	mount	526	511	5000
MakeStyles	mount	1882	1934	50000
MenuButton	mount	1647	1641	5000
MessageBar	mount	2101	2114	5000
Nav	mount	3551	3534	1000
OverflowSet	mount	1133	1122	5000
Panel	mount	2225	2220	1000
Persona	mount	873	894	1000
Pivot	mount	1536	1528	1000
PrimaryButton	mount	1406	1423	5000
Rating	mount	8636	8517	5000
SearchBox	mount	1490	1433	5000
Shimmer	mount	2772	2844	5000
Slider	mount	2102	2115	5000
SpinButton	mount	5203	5330	5000
Spinner	mount	430	420	5000
SplitButton	mount	3487	3444	5000
Stack	mount	563	557	5000
StackWithIntrinsicChildren	mount	1741	1778	5000
StackWithTextChildren	mount	5112	5263	5000
SwatchColorPicker	mount	10808	10704	5000
Tabs	mount	1497	1472	1000
TagPicker	mount	2738	2746	5000
TeachingBubble	mount	12240	12263	5000
Text	mount	453	460	5000
TextField	mount	1422	1460	5000
ThemeProvider	mount	1250	1258	5000
ThemeProvider	virtual-rerender	642	660	5000
Toggle	mount	841	882	5000
buttonNative	mount	112	125	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	189	169	1.12:1
RefMinimalPerf.default	249	225	1.11:1
PortalMinimalPerf.default	183	166	1.1:1
ChatDuplicateMessagesPerf.default	323	297	1.09:1
DividerMinimalPerf.default	411	384	1.07:1
HeaderMinimalPerf.default	388	364	1.07:1
TableMinimalPerf.default	448	417	1.07:1
AvatarMinimalPerf.default	214	202	1.06:1
SkeletonMinimalPerf.default	385	363	1.06:1
VideoMinimalPerf.default	707	668	1.06:1
AlertMinimalPerf.default	298	284	1.05:1
ButtonSlotsPerf.default	615	585	1.05:1
ChatWithPopoverPerf.default	382	364	1.05:1
TextAreaMinimalPerf.default	573	544	1.05:1
TreeMinimalPerf.default	870	826	1.05:1
ImageMinimalPerf.default	403	387	1.04:1
ListNestedPerf.default	602	577	1.04:1
MenuMinimalPerf.default	906	875	1.04:1
SegmentMinimalPerf.default	365	352	1.04:1
ChatMinimalPerf.default	698	678	1.03:1
FormMinimalPerf.default	459	444	1.03:1
GridMinimalPerf.default	362	351	1.03:1
ItemLayoutMinimalPerf.default	1299	1267	1.03:1
ListMinimalPerf.default	551	533	1.03:1
IconMinimalPerf.default	682	663	1.03:1
ToolbarMinimalPerf.default	1004	977	1.03:1
AttachmentSlotsPerf.default	1142	1121	1.02:1
ButtonOverridesMissPerf.default	1804	1769	1.02:1
CarouselMinimalPerf.default	495	486	1.02:1
CheckboxMinimalPerf.default	2832	2771	1.02:1
DropdownMinimalPerf.default	3138	3088	1.02:1
FlexMinimalPerf.default	299	293	1.02:1
RadioGroupMinimalPerf.default	491	481	1.02:1
TextMinimalPerf.default	381	374	1.02:1
CustomToolbarPrototype.default	3994	3932	1.02:1
AccordionMinimalPerf.default	157	156	1.01:1
AnimationMinimalPerf.default	447	444	1.01:1
DropdownManyItemsPerf.default	734	724	1.01:1
EmbedMinimalPerf.default	4262	4226	1.01:1
LabelMinimalPerf.default	410	406	1.01:1
LayoutMinimalPerf.default	384	381	1.01:1
ReactionMinimalPerf.default	408	402	1.01:1
DatepickerMinimalPerf.default	5561	5572	1:1
HeaderSlotsPerf.default	803	804	1:1
LoaderMinimalPerf.default	732	729	1:1
PopupMinimalPerf.default	620	619	1:1
SliderMinimalPerf.default	1589	1582	1:1
SplitButtonMinimalPerf.default	4012	3994	1:1
TooltipMinimalPerf.default	1061	1065	1:1
ButtonMinimalPerf.default	186	187	0.99:1
CardMinimalPerf.default	583	588	0.99:1
RosterPerf.default	1289	1307	0.99:1
ProviderMergeThemesPerf.default	1634	1650	0.99:1
StatusMinimalPerf.default	740	747	0.99:1
DialogMinimalPerf.default	796	812	0.98:1
MenuButtonMinimalPerf.default	1747	1778	0.98:1
AttachmentMinimalPerf.default	168	173	0.97:1
BoxMinimalPerf.default	360	373	0.97:1
InputMinimalPerf.default	1269	1310	0.97:1
ProviderMinimalPerf.default	1012	1043	0.97:1
TableManyItemsPerf.default	2039	2105	0.97:1
ListWith60ListItems.default	644	673	0.96:1
ListCommonPerf.default	660	692	0.95:1

czearing added 30 commits July 21, 2021 16:46

Implementing a basic Slider component.

9db7987

Adding stories and a few fixes.

f3e8e86

Adding test file.

b72d223

Adding more tests

14b26a4

Updating a test

af1a167

More tests

3fc639e

More tests

ead8011

Adding stories and accessibility tests

8720d5d

Switching left to translateX and adding a container around the Thumb.

c2ad495

Styling update

53402a6

bug fix

18926bd

Fixing a bug in preventDefault and stopPropagation.

dea1e64

Updating the Slider component.

a145390

Adding translateX to the track.

f54682f

Cleaning up styling

2b61641

Cleaning up render.

6daad9a

Removing unused utility methods.

6d02e4b

Styling fix and updating stories.

0be101a

Adding the snap feature.

cb64baf

Updating tests

11b3a49

Updating the API and cleaning up stories.

7f41276

Switching to pointer events

6b35cee

Updating stories and fixing a styling bug in the minWidth for the track.

7ef7707

High Contrast styling update.

39f6317

Adding transition var to styles

ce59174

Adding public api

4475e43

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

25a2478

…eat/converging-basic-slider # Conflicts: # packages/react-slider/package.json

Updating the API

c4a1550

Updating deps

afa3de0

Fixing a event bug.

2185f93

czearing added 18 commits August 5, 2021 11:17

Updating Slider design

9934dc8

Adding a linear gradient border to the thumb.

b5187f4

Updating drop shadow radius to match design spec

e7eb28c

Styling fix

3e239df

Adding a test for controlled out of bonds values.

35aa098

Updating styles and adding a production warning for unclamped control…

85702b2

…led values.

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

6eb568e

…eat/converging-basic-slider # Conflicts: # packages/react-slider/package.json

Updating deps

65980f7

1. Changing currentTarget to target to allow for mobile pointer capture.

8f1d0d7

2. Updating the styles to add a round focus border during mobile selection.

Removing snapToStep

094f1f5

Updating the api

244ab93

Removing unused style

ccc003f

Cleaning up styles

32c12c9

Initial changes

703b03d

Adding stories

f95122c

Adding snapshot test for ranged Slider.

f6ad3cd

czearing requested a review from a team as a code owner August 9, 2021 16:47

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

czearing closed this Aug 9, 2021

Cleaning up branch

66387cf

czearing reopened this Aug 9, 2021

czearing closed this Aug 9, 2021

czearing reopened this Aug 9, 2021

czearing closed this Aug 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(react-slider) - Adding vertical prop #19323

(react-slider) - Adding vertical prop #19323

czearing commented Aug 9, 2021

fabricteam commented Aug 9, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 9, 2021

size-auditor bot commented Aug 9, 2021

fabricteam commented Aug 9, 2021

(react-slider) - Adding vertical prop #19323

(react-slider) - Adding vertical prop #19323

Conversation

czearing commented Aug 9, 2021

Pull request checklist

Description of changes

fabricteam commented Aug 9, 2021 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Aug 9, 2021

size-auditor bot commented Aug 9, 2021

Asset size changes

fabricteam commented Aug 9, 2021

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Aug 9, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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