Adds Slider as a web component #27165

procload · 2023-03-10T20:30:52Z

Adds the Fluent Slider web component

fabricteam · 2023-03-10T20:40:17Z

📊 Bundle size report

_{🤖 This report was generated against 91c21378cefc198a8e719663cd1603b86e3edcf7}

size-auditor · 2023-03-10T20:46:40Z

Asset size changes

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

Baseline commit: 91c21378cefc198a8e719663cd1603b86e3edcf7 (build)

codesandbox-ci · 2023-03-10T20:47:23Z

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 575bb52:

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

…s we don't need it

packages/web-components/src/slider/slider.spec.md

packages/web-components/src/slider/slider.styles.ts

packages/web-components/src/progress-bar/progress-bar.styles.ts

chrisdholt

Looks good overall, a few things I think we need to clean up/fix. Also, remember to export from the package.json

packages/web-components/src/slider/slider.stories.ts

packages/web-components/src/slider/slider.styles.ts

packages/web-components/src/slider/slider.ts

packages/web-components/src/slider/slider.options.ts

…rate-code update slider step rate code

procload · 2023-03-21T18:43:37Z

@chrisdholt or @eljefe223 I merged in Chris' Slider code and resolved the previous comments. When you have a chance (I know it might be slow, you're busy), can you take another look?

jpaims · 2023-03-21T22:49:41Z

Design review:

#	Issue	Category
1	Check focus border style. There should be an additional inner 1px stroke (--colorStrokeFocus1)	Accessibility
2	Focus border seems to appear on any mouse interaction but should only appear on keyboard tabbing	Accessibility
3	In vertical orientation, steps don't seem to quite match the slider thumb position	Styling

Will there be a property for showing min and max values or input fields on the ends of the slider?

chrisdholt · 2023-03-21T23:28:36Z

Design review:

Issue Category

1 Check focus border style. There should be an additional inner 1px stroke (--colorStrokeFocus1) Accessibility
2 Focus border seems to appear on any mouse interaction but should only appear on keyboard tabbing Accessibility
3 In vertical orientation, steps don't seem to quite match the slider thumb position Styling
Will there be a property for showing min and max values or input fields on the ends of the slider?

Where do min and max values get shown? As for input fields, that would be an a11y issue as part of this component. The root element here has a role of slider and nested interactive controls would not be navigable or accessible to assistive technologies.

procload · 2023-03-22T22:18:13Z

@eljefe223 Not a big rush, but can you take a look when you get a chance? I made some minor design updates per @jpaims after Chris approved.

…ent' of https://github.com/procload/fluentui into users/procload/add-slider-and-sliderlabel-as-web-component

* Initial commit of styles and markup for slider * Cleans up some styles and adds Stories for states * More Slider styles and stories * Adds stripes to slider for vertical/horizontal. Deletes SliderLabel as we don't need it * Fixes silly math * Cleans up CSS * Cleans up CSS and Stories for Slider * Initial commit of styles and markup for slider * More Slider styles and stories * Adds stripes to slider for vertical/horizontal. Deletes SliderLabel as we don't need it * Fixes silly math * Fixes some styles on checkmarks * Adds check to see if Step was set * Generates API report * Removes some duplicate CSS and cleans up spec * Adds slider to index.ts and package.json * Addresses initial round of feedback to PR * Renames sizeChanged to stepChanged. Duh. * Adds JSDOC comments * update slider step rate code * Adds export to SliderOrientation * Adds new focus style and fixes overflow visual bug * Fixes build errors * Adds export to SliderOrientation * Adds new focus style and fixes overflow visual bug * Fixes build errors * Runs API report --------- Co-authored-by: Chris Holt <chhol@microsoft.com>

procload changed the base branch from master to web-components-v3 March 10, 2023 20:31

msft-fluent-ui-bot assigned tomi-msft Mar 10, 2023

procload added 14 commits March 14, 2023 13:59

Initial commit of styles and markup for slider

b8d3f0f

Cleans up some styles and adds Stories for states

563e392

More Slider styles and stories

94138aa

Adds stripes to slider for vertical/horizontal. Deletes SliderLabel a…

cba445a

…s we don't need it

Fixes silly math

36bd6fc

Cleans up CSS

830c803

Cleans up CSS and Stories for Slider

d5b8b8a

Initial commit of styles and markup for slider

814e3a5

More Slider styles and stories

278d1f2

Adds stripes to slider for vertical/horizontal. Deletes SliderLabel a…

5b90af1

…s we don't need it

Fixes silly math

cfbec7b

Fixes some styles on checkmarks

f5be020

Adds check to see if Step was set

fcf6d60

Generates API report

63072e5

procload force-pushed the users/procload/add-slider-and-sliderlabel-as-web-component branch from 038880b to 63072e5 Compare March 14, 2023 18:07

procload marked this pull request as ready for review March 14, 2023 18:13

procload requested a review from a team as a code owner March 14, 2023 18:13

procload requested review from miroslavstastny, chrisdholt and eljefe223 March 14, 2023 18:13

bearcat-msft reviewed Mar 14, 2023

View reviewed changes

Removes some duplicate CSS and cleans up spec

6810bee

chrisdholt reviewed Mar 15, 2023

View reviewed changes

packages/web-components/src/progress-bar/progress-bar.styles.ts Show resolved Hide resolved

chrisdholt requested changes Mar 15, 2023

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Mar 15, 2023

chrisdholt and others added 3 commits March 20, 2023 20:38

update slider step rate code

40e4807

Merge pull request #1 from chrisdholt/users/chhol/update-slider-step-…

af05433

…rate-code update slider step rate code

Adds export to SliderOrientation

53ff7d5

chrisdholt approved these changes Mar 21, 2023

View reviewed changes

Adds new focus style and fixes overflow visual bug

c6b24d2

procload added 6 commits March 23, 2023 13:19

Fixes build errors

d14c0e1

Adds export to SliderOrientation

8a5e30b

Adds new focus style and fixes overflow visual bug

37ad17f

Fixes build errors

5e2b6f2

Runs API report

76f1a6d

Merge branch 'users/procload/add-slider-and-sliderlabel-as-web-compon…

575bb52

…ent' of https://github.com/procload/fluentui into users/procload/add-slider-and-sliderlabel-as-web-component

procload merged commit d637794 into microsoft:web-components-v3 Mar 27, 2023

procload deleted the users/procload/add-slider-and-sliderlabel-as-web-component branch March 27, 2023 15:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Slider as a web component #27165

Adds Slider as a web component #27165

procload commented Mar 10, 2023

fabricteam commented Mar 10, 2023 •

edited

Loading

size-auditor bot commented Mar 10, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 10, 2023 •

edited

Loading

chrisdholt left a comment

procload commented Mar 21, 2023

jpaims commented Mar 21, 2023

chrisdholt commented Mar 21, 2023

Issue Category

procload commented Mar 22, 2023

Adds Slider as a web component #27165

Adds Slider as a web component #27165

Conversation

procload commented Mar 10, 2023

fabricteam commented Mar 10, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Mar 10, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Mar 10, 2023 • edited Loading

chrisdholt left a comment

Choose a reason for hiding this comment

procload commented Mar 21, 2023

jpaims commented Mar 21, 2023

chrisdholt commented Mar 21, 2023

Issue Category

procload commented Mar 22, 2023

fabricteam commented Mar 10, 2023 •

edited

Loading

size-auditor bot commented Mar 10, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 10, 2023 •

edited

Loading