Slider refactor (#20657)

* init refactor of slider * start bringing marks back in * story cleanup * cleanup * update spec * Change files * update api * Apply suggestions from code review Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: ling1726 <[email protected]> * move stateful styles into css variables * add slider to react-components main export * cleanup and add ticks * change var name * cleanup snaps * remove ranged fixture * fix package version * fix prettier * add primary slot * api update * react components api * revert react components to remove slider * merge conflicts * update api md * Delete @fluentui-react-components-2b36a74e-2147-4df0-a4f2-ab6c12c56033.json * cleanup testing * slider types * simplify onChange prop * update api * move back to onChange with data * remove unused stuff * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Elizabeth Craig <[email protected]> * refactor css variables * api update fix build * fix RTL issues * remove utils, cleanup tests, update ids * remove unnecessary code * new snaps * fixed thumb alignment, moved input to bottom of DOM stack * Update packages/react-slider/src/components/Slider/Slider.test.tsx Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-slider/src/components/Slider/Slider.types.ts Co-authored-by: Makoto Morimoto <[email protected]> * updated stories with descriptions, fixed stateful bug * updated tests * fixed pretty * api * remove old snaps * snaps * update snaps * test clean up * remove unused methods * change private to true * add outline for HC * cleanup linting * snaps Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Elizabeth Craig <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]>
microsoft · Jan 5, 2022 · 32a7d06 · 32a7d06
1 parent d892c7f
commit 32a7d06
Show file tree

Hide file tree

Showing 46 changed files with 580 additions and 5,493 deletions.
diff --git a/apps/vr-tests/src/stories/RangedSliderConverged.stories.tsx b/apps/vr-tests/src/stories/RangedSliderConverged.stories.tsx
diff --git a/apps/vr-tests/src/stories/SliderConverged.stories.tsx b/apps/vr-tests/src/stories/SliderConverged.stories.tsx
@@ -3,18 +3,6 @@ import Screener, { Steps } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { Slider } from '@fluentui/react-slider';
 
-const LabelComponent = () => <div style={{ width: '30px', height: '30px', background: 'green' }} />;
-
-const MarkComponent = () => (
-  <div
-    style={{
-      width: '10px',
-      height: '10px',
-      background: 'red',
-    }}
-  />
-);
-
 storiesOf('Slider Converged', module)
   .addDecorator(story => (
     <Screener
@@ -56,180 +44,4 @@ storiesOf('Slider Converged', module)
   .addStory('Origin (max)', () => <Slider className="test-class" max={10} origin={10} />)
   .addStory('Origin Vertical (max)', () => (
     <Slider className="test-class" min={10} vertical origin={10} />
-  ))
-  .addStory('Marks', () => <Slider className="test-class" max={10} defaultValue={3} marks />, {
-    includeRtl: true,
-    includeHighContrast: true,
-    includeDarkMode: true,
-  })
-  .addStory(
-    'Marks Vertical',
-    () => <Slider className="test-class" vertical max={10} defaultValue={3} marks />,
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Marks Custom Value',
-    () => <Slider className="test-class" max={10} defaultValue={3} marks={[0, 1, 5, 8, 10]} />,
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Marks Custom Value Vertical',
-    () => (
-      <Slider className="test-class" vertical max={10} defaultValue={3} marks={[0, 1, 5, 8, 10]} />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Marks Label Value',
-    () => (
-      <Slider
-        className="test-class"
-        max={10}
-        defaultValue={3}
-        marks={[
-          0,
-          { value: 1, label: 'hello world' },
-          { value: 2, label: 'hello' },
-          8,
-          { value: 10, label: '10' },
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Marks Label Vertical',
-    () => (
-      <Slider
-        className="test-class"
-        vertical
-        max={10}
-        defaultValue={3}
-        marks={[
-          0,
-          { value: 1, label: 'hello world' },
-          { value: 2, label: 'hello' },
-          8,
-          { value: 10, label: '10' },
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory('Marks Label Disabled', () => (
-    <Slider
-      className="test-class"
-      disabled
-      max={10}
-      defaultValue={7}
-      marks={[
-        0,
-        { value: 1, label: 'hello world' },
-        { value: 2, label: 'hello' },
-        8,
-        { value: 10, label: '10' },
-      ]}
-    />
-  ))
-  .addStory(
-    'Marks Custom Label Value',
-    () => (
-      <Slider
-        className="test-class"
-        max={10}
-        defaultValue={6}
-        marks={[
-          1,
-          {
-            value: 3,
-            label: <LabelComponent />,
-          },
-          { value: 4, label: 'world' },
-          8,
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Marks Custom Label Vertical',
-    () => (
-      <Slider
-        className="test-class"
-        vertical
-        max={10}
-        defaultValue={6}
-        marks={[
-          1,
-          {
-            value: 3,
-            label: <LabelComponent />,
-          },
-          { value: 4, label: 'world' },
-          8,
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Custom Marks',
-    () => (
-      <Slider
-        className="test-class"
-        max={10}
-        defaultValue={6}
-        marks={[
-          1,
-          {
-            value: 3,
-            label: <LabelComponent />,
-            mark: <MarkComponent />,
-          },
-          { value: 4, label: 'world' },
-          8,
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Custom Marks Vertical',
-    () => (
-      <Slider
-        className="test-class"
-        vertical
-        max={10}
-        defaultValue={6}
-        marks={[
-          1,
-          {
-            value: 3,
-            label: <LabelComponent />,
-            mark: <MarkComponent />,
-          },
-          { value: 4, label: 'world' },
-          8,
-        ]}
-      />
-    ),
-    {
-      includeRtl: true,
-    },
-  );
+  ));
diff --git a/change/@fluentui-react-slider-03252d64-5321-44f5-a760-9bbdadf077a3.json b/change/@fluentui-react-slider-03252d64-5321-44f5-a760-9bbdadf077a3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Refactor slider component: removed marks support, RangedSlider is removed",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}