chore(slider): update storybook and tests (#12591)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/Slider/Slider-test.js

@@ -6,9 +6,8 @@
  */
 
 import React from 'react';
-import Slider from '../Slider';
-import SliderSkeleton from '../Slider/Slider.Skeleton';
-import { mount, shallow } from 'enzyme';
+import Slider from './Slider';
+import { mount } from 'enzyme';
 import 'requestanimationframe';
 import throttle from 'lodash.throttle';
 
@@ -440,15 +439,3 @@ describe('Slider', () => {
     });
   });
 });
-
-describe('SliderSkeleton', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<SliderSkeleton />);
-
-    const slider = wrapper.find(`.${prefix}--slider-container`);
-
-    it('Has the expected classes', () => {
-      expect(slider.hasClass(`${prefix}--skeleton`)).toEqual(true);
-    });
-  });
-});

packages/react/src/components/Slider/Slider.mdx

@@ -21,11 +21,24 @@ 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" />
+  <Story id="components-slider--playground" />
 </Preview>
 
 ## Component API
 
+###
+
+### `step` Prop
+
+If a `step` value other than `1` is provided, any number entered into the text
+input must adhere to the step value. For example, if the `step` is `5`, with a
+range of values from `0-100`, `40` would be valid, and `42` would be considered
+`invalid`.
+
+<Preview>
+  <Story id="components-slider--playground" />
+</Preview>
+
 <Props />
 
 ## Feedback

packages/react/src/components/Slider/next/Slider.stories.js → packages/react/src/components/Slider/Slider.stories.js

@@ -6,9 +6,9 @@
  */
 
 import React, { useState } from 'react';
-import { SliderSkeleton } from '../../Slider';
-import Slider from '../Slider';
-import { Layer } from '../../Layer';
+import { SliderSkeleton } from '.';
+import Slider from './Slider';
+import { Layer } from '../Layer';
 import mdx from './Slider.mdx';
 
 export default {
@@ -17,58 +17,15 @@ export default {
   subcomponents: {
     SliderSkeleton,
   },
-  argTypes: {
-    light: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    labelText: {
-      control: { type: 'string' },
-      defaultValue: 'Slider (must be an increment of 5)',
-    },
-    min: {
-      control: { type: 'number' },
-      defaultValue: 0,
-    },
-    max: {
-      control: { type: 'number' },
-      defaultValue: 100,
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    step: {
-      control: { type: 'number' },
-      defaultValue: 5,
-    },
-    stepMultiplier: {
-      control: { type: 'number' },
-      defaultValue: 5,
-    },
-    value: {
-      control: { type: 'number' },
-      defaultValue: 50,
-    },
-  },
   parameters: {
     docs: {
       page: mdx,
     },
   },
 };
 
-export const Default = (args) => (
+export const Default = () => (
   <Slider
-    {...args}
     labelText="Slider Label"
     value={50}
     min={0}
@@ -79,13 +36,6 @@ export const Default = (args) => (
   />
 );
 
-export const Playground = (args) => (
-  <Slider
-    {...args}
-    labelText={`Slider (must be an increment of ${args.step})`}
-  />
-);
-
 export const ControlledSlider = () => {
   const [val, setVal] = useState(87);
   return (
@@ -193,3 +143,84 @@ export const ControlledSliderWithLayer = () => {
 };
 
 export const Skeleton = () => <SliderSkeleton />;
+
+export const Playground = (args) => (
+  <Slider
+    {...args}
+    labelText={`Slider (must be an increment of ${args.step})`}
+  />
+);
+
+Playground.argTypes = {
+  light: {
+    table: {
+      disable: true,
+    },
+  },
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  disabled: {
+    control: { type: 'boolean' },
+  },
+  formatLabel: {
+    table: {
+      disable: true,
+    },
+  },
+  labelText: {
+    table: {
+      disable: true,
+    },
+  },
+  min: {
+    control: { type: 'number' },
+    defaultValue: 0,
+  },
+  max: {
+    control: { type: 'number' },
+    defaultValue: 100,
+  },
+  required: {
+    control: { type: 'boolean' },
+  },
+  step: {
+    control: { type: 'number' },
+    defaultValue: 5,
+  },
+  stepMultiplier: {
+    control: { type: 'number' },
+    defaultValue: 5,
+  },
+  value: {
+    control: { type: 'number' },
+    defaultValue: 50,
+  },
+  onBlur: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    table: {
+      disable: true,
+    },
+  },
+  onInputKeyUp: {
+    table: {
+      disable: true,
+    },
+  },
+  onRelease: {
+    table: {
+      disable: true,
+    },
+  },
+};

packages/react/src/components/Slider/index.js

@@ -5,12 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
 import Slider from './Slider';
 import { createClassWrapper } from '../../internal/createClassWrapper';
 
 export { default as SliderSkeleton } from './Slider.Skeleton';
-
-export default FeatureFlags.enabled('enable-v11-release')
-  ? createClassWrapper(Slider)
-  : Slider;
+export default createClassWrapper(Slider);