feat(slider): v1

[bmdalex]

feat(slider): v1

Closes #1539

Description

This PR consists of the first version of the Slider component. It incorporates:

1. Functionality (demo below):

2. Styling (according to design files and redlines for all themes):

Theme Name	Slider flavor
Base
Teams
Teams Dark
Teams HC

3. Accessibility:

• leverages native keyboard navigation
• adds correct accessibility attributes via the sliderBehavior

4. Doc examples and a few visual tests

API

export interface SliderProps {
  /**
   * Accessibility behavior if overridden by the user.
   * @default sliderBehavior
   */
  accessibility?: Accessibility

  /** The default value of the slider. */
  defaultValue?: SupportedIntrinsicInputProps['defaultValue'] // TODO 'value' type is React.ReactText but it doesn't work for 'defaultValue'

  /**
   * A slider can be read-only and unable to change states.
   * @default false
   */
  disabled?: SupportedIntrinsicInputProps['disabled']

  /**
   * A slider can take the width of its container.
   * @default false
   */
  fluid?: boolean

  /**
   * Callback that creates custom accessibility message a screen reader narrates when the value changes.
   * @param {SliderProps} props - Slider props.
   */
  getA11yValueMessageOnChange?: (props: SliderProps) => string

  /** Shorthand for the input component. */
  input?: ShorthandValue

  /** Ref for input DOM node. */
  inputRef?: React.Ref<HTMLElement>

  /**
   * The minimum value of the slider
   * @default 0
   */
  min?: SupportedIntrinsicInputProps['min']

  /**
   * The maximum value of the slider.
   * @default 100
   */
  max?: SupportedIntrinsicInputProps['max']

  /**
   * Called after item checked state is changed.
   * @param {SyntheticEvent} event - React's original SyntheticEvent.
   * @param {object} data - All props.
   */
  onChange?: ComponentEventHandler<SliderProps>

  /**
   * A number that specifies the granularity that the value must adhere to, or the special value 'any'.
   * A string value of any means that no stepping is implied, and any value is allowed
   * (barring other constraints, such as min and max).
   * @default 1
   */
  step?: SupportedIntrinsicInputProps['step']

  /** The value of the slider. */
  value?: React.ReactText

  /**
   * A slider can be displayed vertically.
   * @default false
   */
  vertical?: boolean
}

TODO

• Focus borders: still didn't find a way to add double borders to the slider's thumb
• Remove slider marks in IE
• Improve perf for recalculating props (accessibility props, styling props, etc) with every change of the slider's value
• Add more visual tests

[layershifter]

Oops, CI fails and also there is warning somewhere is examples:

[bmdalex]

Oops, CI fails and also there is warning somewhere is examples:

@layershifter fixed...but it wasn't clear at all how to do this so I created #1571 to address that; pls provide your feedback

[codecov]

Codecov Report

Merging #1559 into master will decrease coverage by 0.21%.
The diff coverage is 51.94%.

@@            Coverage Diff             @@
##           master    #1559      +/-   ##
==========================================
- Coverage   71.46%   71.24%   -0.22%     
==========================================
  Files         845      851       +6     
  Lines        6945     7021      +76     
  Branches     1981     2020      +39     
==========================================
+ Hits         4963     5002      +39     
- Misses       1976     2013      +37     
  Partials        6        6

Impacted Files	Coverage Δ
packages/react/src/index.ts	100% <ø> (ø)	⬆️
packages/react/src/lib/htmlPropsUtils.tsx	100% <ø> (ø)	⬆️
...ackages/react/src/components/Checkbox/Checkbox.tsx	80% <ø> (ø)	⬆️
...c/themes/base/components/Slider/sliderVariables.ts	0% <0%> (ø)
...ges/react/src/themes/teams/getBorderFocusStyles.ts	15% <0%> (-3.75%)	⬇️
.../themes/teams/components/Slider/sliderVariables.ts	0% <0%> (ø)
packages/react/src/components/Input/Input.tsx	100% <100%> (ø)	⬆️
.../accessibility/Behaviors/Slider/sliderBehavior.tsx	100% <100%> (ø)
.../src/themes/base/components/Slider/sliderStyles.ts	20% <20%> (ø)
...src/themes/teams/components/Slider/sliderStyles.ts	33.33% <33.33%> (ø)
... and 7 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7c194ef...4ea9de6. Read the comment docs.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://stardust-react-git-feat-slider.stardust-ui.now.sh

[bmdalex]

RTL is broken :-(

Both mouse and keyboard.

RTL doesn't seem to work as expected:
LTR:

RTL:

@mnajdova
@miroslavstastny

great catch, thanks! RTL was fixed and I also added an example for it in the docs. Please check again.

[bmdalex]

Disabled slider with icon does not look correct (the icon):

@miroslavstastny I think you were testing an earlier version 😕 removed icon and iconPosition altogether from Slider

[layershifter]

👍