Add range slider support for 7.0 #17913

rockcs1992 · 2021-04-22T02:31:41Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

Description of changes

Add range slider support for 7.0. The work for v8 is already done here: #16854.
There has been asks inside Azure teams that we need this feature in V7, so this PR fulfills that.

msft-fluent-ui-bot

It looks like this change to the 7.0 branch may not have been submitted to master yet. Now that version 8 has released, all changes must be submitted to the master branch first (except in emergencies or if the change is irrelevant to version 8).

Please do one of the following:

If you've already created a PR to master, add a link to it
If the change is irrelevant to version 8, add a comment explaining why
Otherwise, create a PR to master with this same change, and add a link to it

After that, you can dismiss this review and remove the "needs cherry-pick" label (or ask a team member to help do so).

Want to avoid this in the future? Include text like "Cherry-pick of ####" in the PR description (where #### is the real master PR number).

codesandbox-ci · 2021-04-22T02:38: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 cf7d19e:

Sandbox	Source
Fluent UI Button	Configuration

size-auditor · 2021-04-22T02:39:42Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	office-ui-fabric-react-Slider	56.431 kB	59.032 kB	2.601 kB

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: ac2f319d76db747f0d0b1d76cbf4d63ae8864794 (build)

fabricteam · 2021-04-22T02:54:58Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations
BaseButton	mount	979	991	5000
Breadcrumb	mount	44841	44527	5000
Checkbox	mount	1741	1736	5000
CheckboxBase	mount	1471	1464	5000
ChoiceGroup	mount	5565	5678	5000
ComboBox	mount	986	1023	1000
CommandBar	mount	8162	8334	1000
ContextualMenu	mount	15333	15421	1000
DefaultButton	mount	1232	1269	5000
DetailsRow	mount	4036	4125	5000
DetailsRowFast	mount	4112	4048	5000
DetailsRowNoStyles	mount	3925	3935	5000
Dialog	mount	1780	1915	1000
DocumentCardTitle	mount	1934	1933	1000
Dropdown	mount	2846	2836	5000
FocusTrapZone	mount	1908	1936	5000
FocusZone	mount	2058	1975	5000
IconButton	mount	1984	1958	5000
Label	mount	347	373	5000
Layer	mount	2113	2202	5000
Link	mount	510	502	5000
MenuButton	mount	1618	1673	5000
MessageBar	mount	2244	2282	5000
Nav	mount	3628	3720	1000
OverflowSet	mount	1516	1573	5000
Panel	mount	1607	1580	1000
Persona	mount	865	894	1000
Pivot	mount	1566	1601	1000
PrimaryButton	mount	1437	1491	5000
Rating	mount	8659	8845	5000
SearchBox	mount	1442	1452	5000
Shimmer	mount	2962	2857	5000
Slider	mount	1593	1741	5000
SpinButton	mount	5566	5644	5000
Spinner	mount	468	433	5000
SplitButton	mount	3520	3496	5000
Stack	mount	588	556	5000
StackWithIntrinsicChildren	mount	1750	1775	5000
StackWithTextChildren	mount	5450	5404	5000
SwatchColorPicker	mount	11302	11606	5000
TagPicker	mount	3133	3100	5000
TeachingBubble	mount	53947	54075	5000
Text	mount	469	471	5000
TextField	mount	1481	1609	5000
Toggle	mount	879	959	5000
button	mount	115	106	5000

behowell

Looks good, but we want to be sure that existing, non-ranged sliders render the same as they did before this change. I added a few comments in places that appear different, but there are probably other places that need a ranged check. There shouldn't be changes to test snapshots for unrelated components.

...ages/react-examples/src/office-ui-fabric-react/__snapshots__/Facepile.Basic.Example.tsx.shot

packages/office-ui-fabric-react/src/components/Slider/Slider.base.tsx

wrong

…ase.tsx Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

…uentui into shiche/rangeSlider

packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts

behowell

Looks good! Thanks for making the changes to clean up the snapshots.

rockcs1992 · 2021-04-28T14:27:59Z

Looks good! Thanks for making the changes to clean up the snapshots.

Thanks for approval! Do you know how would we merge it though since it doesn't pass the size auditor check?

msft-fluent-ui-bot · 2021-04-30T12:27:23Z

🎉office-ui-fabric-react@v7.169.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:26Z

🎉@uifabric/tsx-editor@v0.14.36 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:29Z

🎉@uifabric/theme-samples@v7.2.35 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:32Z

🎉@uifabric/react-cards@v0.115.47 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:35Z

🎉@uifabric/mdl2-theme@v0.4.35 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:38Z

🎉@uifabric/fluent-theme@v7.4.35 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:41Z

🎉@uifabric/fabric-website@v7.16.64 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:44Z

🎉@uifabric/fabric-website-resources@v7.9.63 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:47Z

🎉@uifabric/experiments@v7.39.26 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:50Z

🎉@uifabric/example-app-base@v7.19.10 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:27:53Z

🎉@uifabric/date-time@v7.19.41 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:28:00Z

🎉@uifabric/azure-themes@v7.7.33 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:28:03Z

🎉@uifabric/api-docs@v7.6.38 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:28:05Z

🎉@fluentui/storybook@v0.6.43 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:28:08Z

🎉@fluentui/react@v7.169.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-30T12:28:14Z

🎉@fluentui/react-examples@v0.13.0 has been released which incorporates this pull request.:tada:

Handy links:

Add support for range slider

065b031

rockcs1992 requested a review from joschect as a code owner April 22, 2021 02:31

msft-fluent-ui-bot added Fabric 7 Component: Slider PR: API Modified labels Apr 22, 2021

msft-fluent-ui-bot assigned tomi-msft Apr 22, 2021

msft-fluent-ui-bot added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Apr 22, 2021

msft-fluent-ui-bot previously requested changes Apr 22, 2021

View reviewed changes

Shi Cheng added 6 commits April 22, 2021 11:42

change member method ordering to satisfy linter

7876c00

update snapshots

dc1b728

Fix slider vertical label bug

d72164d

tiny fix for a comment

284388d

tiny fix for comments

08d7c40

update snapshot

317cc2d

behowell requested review from ecraig12345 and behowell April 22, 2021 18:58

behowell requested changes Apr 22, 2021

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Apr 22, 2021

Update packages/office-ui-fabric-react/src/components/Slider/Slider.b…

a4673cb

…ase.tsx Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>

msft-fluent-ui-bot removed the Needs: Author Feedback label Apr 23, 2021

Shi Cheng added 2 commits April 23, 2021 12:41

Add ranged check for thumb styling

d00bcdf

Merge branch 'shiche/rangeSlider' of https://github.com/rockcs1992/fl…

b158348

…uentui into shiche/rangeSlider

rockcs1992 commented Apr 23, 2021

View reviewed changes

packages/office-ui-fabric-react/src/components/Slider/Slider.styles.ts Outdated Show resolved Hide resolved

Shi Cheng added 3 commits April 23, 2021 16:54

Merge branch '7.0' into shiche/rangeSlider

ac3f758

Apply thumb focusStyles only for rangeSlider

dd2cdc8

remove unnecessary spans for normal slider

58ab2b0

update snapshots

cf7d19e

rockcs1992 requested review from behowell and removed request for joschect April 27, 2021 20:20

behowell approved these changes Apr 28, 2021

View reviewed changes

rockcs1992 enabled auto-merge (squash) April 28, 2021 18:51

dzearing disabled auto-merge April 29, 2021 17:14

dzearing merged commit 2967383 into microsoft:7.0 Apr 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add range slider support for 7.0 #17913

Add range slider support for 7.0 #17913

rockcs1992 commented Apr 22, 2021

msft-fluent-ui-bot left a comment

codesandbox-ci bot commented Apr 22, 2021 •

edited

size-auditor bot commented Apr 22, 2021 •

edited

fabricteam commented Apr 22, 2021 •

edited

behowell left a comment

behowell left a comment

rockcs1992 commented Apr 28, 2021 •

edited

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

Add range slider support for 7.0 #17913

Add range slider support for 7.0 #17913

Conversation

rockcs1992 commented Apr 22, 2021

Pull request checklist

Description of changes

msft-fluent-ui-bot left a comment

Choose a reason for hiding this comment

codesandbox-ci bot commented Apr 22, 2021 • edited

size-auditor bot commented Apr 22, 2021 • edited

Asset size changes

fabricteam commented Apr 22, 2021 • edited

Perf Analysis

behowell left a comment

Choose a reason for hiding this comment

behowell left a comment

Choose a reason for hiding this comment

rockcs1992 commented Apr 28, 2021 • edited

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

msft-fluent-ui-bot commented Apr 30, 2021

codesandbox-ci bot commented Apr 22, 2021 •

edited

size-auditor bot commented Apr 22, 2021 •

edited

fabricteam commented Apr 22, 2021 •

edited

rockcs1992 commented Apr 28, 2021 •

edited