fix(Slider): add validation when entering number via input (#8018)

* fix(Slider): add validation when entering number via input * test(Slider): update tests to check for valid/invalid numbers Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 12, 2021 · 6ddad7e · 6ddad7e
1 parent 279ce00
commit 6ddad7e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 41 deletions.
diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
@@ -143,7 +143,7 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: rem(64px);
+    width: auto;
     height: rem(40px);
     text-align: center;
     -moz-appearance: textfield;

diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
@@ -13,9 +13,6 @@ import { InlineNotification } from '../Notification';
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-**Table of Contents** _generated with
-[DocToc](https://github.com/thlorenz/doctoc)_
-
 - [Modal](#modal)
   - [Overview](#overview)
   - [Component API](#component-api)

diff --git a/packages/react/src/components/Slider/Slider-story.js b/packages/react/src/components/Slider/Slider-story.js
@@ -54,18 +54,24 @@ export default {
   },
 };
 
-export const Default = () => <Slider required id="slider" {...props()} />;
-
-Default.storyName = 'default';
+export const Default = () => (
+  <Slider
+    labelText="Slider Label"
+    value={50}
+    min={0}
+    max={100}
+    step={1}
+    stepMultiplier={10}
+    novalidate
+  />
+);
 
-Default.parameters = {
-  info: {
-    text: `
-            Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.
-          `,
-  },
+Default.story = {
+  name: 'Slider',
 };
 
+export const Playground = () => <Slider id="slider" {...props()} />;
+
 export const ControlledSlider = () => {
   const [val, setVal] = useState(87);
   return (
@@ -86,26 +92,4 @@ export const ControlledSlider = () => {
   );
 };
 
-ControlledSlider.storyName = 'controlled slider';
-
-export const Skeleton = () => (
-  <div
-    style={{ marginTop: '2rem' }}
-    aria-label="loading slider"
-    aria-live="assertive"
-    role="status"
-    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-  >
-    <SliderSkeleton />
-  </div>
-);
-
-Skeleton.storyName = 'skeleton';
-
-Skeleton.parameters = {
-  info: {
-    text: `
-        Placeholder skeleton state to use when content is loading.
-      `,
-  },
-};
+export const Skeleton = () => <SliderSkeleton />;
diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js
@@ -224,15 +224,30 @@ describe('Slider', () => {
       });
     });
 
-    it('sets correct state when typing in input field', () => {
+    it('does not set incorrect state when typing a invalid value in input field', () => {
       const evt = {
         target: {
           value: '999',
+          checkValidity: () => false,
         },
       };
+
+      wrapper.instance().onChange(evt);
+      expect(wrapper.state().value).toEqual(100);
+      expect(handleChange).lastCalledWith({ value: 100 });
+    });
+
+    it('sets correct state when typing a valid value in input field', () => {
+      const evt = {
+        target: {
+          value: '12',
+          checkValidity: () => true,
+        },
+      };
+
       wrapper.instance().onChange(evt);
-      expect(wrapper.state().value).toEqual(999);
-      expect(handleChange).lastCalledWith({ value: 999 });
+      expect(wrapper.state().value).toEqual(12);
+      expect(handleChange).lastCalledWith({ value: 12 });
     });
   });
 

diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js
@@ -399,11 +399,16 @@ export default class Slider extends PureComponent {
 
     let targetValue = Number.parseFloat(evt.target.value);
 
-    // Avoid calling calcValue for invaid numbers, but still update the state
+    // Avoid calling calcValue for invalid numbers, but still update the state
     if (isNaN(targetValue)) {
       this.setState({ value: evt.target.value });
     } else {
       // Recalculate the state's value and update the Slider
+      // if it is a valid number
+      if (evt.target.checkValidity() === false) {
+        return;
+      }
+
       const { value, left } = this.calcValue({
         value: targetValue,
         useRawValue: true,

diff --git a/packages/react/src/components/Slider/Slider.mdx b/packages/react/src/components/Slider/Slider.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
 
 # Slider
 
@@ -10,8 +10,20 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Table of Contents
 
+- [Slider](#slider)
+  - [Overview](#overview)
+  - [Component API](#component-api)
+  - [Feedback](#feedback)
+
 ## Overview
 
+Sliders provide a visual indication of adjustable content, where the user can
+increase or decrease the value by moving the handle along a horizontal track.
+
+<Preview>
+  <Story id="components-slider--default" />
+</Preview>
+
 ## Component API
 
 <Props />