Slider Redesign (uber#3761)

* feat(slider): add support for marks * feat(slider): update scenarios and label styles * feat(slider): fix lint, flow and examples * test(vrt): update visual snapshots for 423ff2e [skip ci] (uber#3762) Co-authored-by: UberOpenSourceBot <[email protected]> * feat(slider): update disabled styles * test(vrt): update visual snapshots for fe4f441 [skip ci] (uber#3764) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]>
refrigeratorstory · Sep 16, 2020 · 2bef0dc · 2bef0dc
1 parent 130570d
commit 2bef0dc
Show file tree

Hide file tree

Showing 41 changed files with 238 additions and 108 deletions.
diff --git a/documentation-site/components/yard/config/slider.ts b/documentation-site/components/yard/config/slider.ts
@@ -77,6 +77,11 @@ const SliderConfig: TConfig = {
       description:
         'The granularity the slider can step through value. Default step is 1.',
     },
+    marks: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: 'Display a mark at each step.',
+    },
     disabled: {
       value: false,
       type: PropTypes.Boolean,
@@ -96,6 +101,7 @@ const SliderConfig: TConfig = {
           'Tick',
           'TickBar',
           'Track',
+          'Mark',
         ],
         sharedProps: {
           $disabled: 'disabled',

diff --git a/documentation-site/examples/slider/custom-ticks.js b/documentation-site/examples/slider/custom-ticks.js
@@ -22,6 +22,12 @@ function CustomTicks() {
         }
       }}
       overrides={{
+        Root: {
+          style: {
+            marginTop: '24px',
+          },
+        },
+        InnerThumb: () => null,
         ThumbValue: ({$value}) => (
           <div
             className={css({

diff --git a/documentation-site/examples/slider/custom-ticks.tsx b/documentation-site/examples/slider/custom-ticks.tsx
@@ -15,6 +15,12 @@ function CustomTicks() {
       step={100}
       onChange={({value}) => setValue(value)}
       overrides={{
+        Root: {
+          style: {
+            marginTop: '24px',
+          },
+        },
+        InnerThumb: () => null,
         ThumbValue: ({$value}) => (
           <div
             className={css({

diff --git a/documentation-site/examples/slider/marks.js b/documentation-site/examples/slider/marks.js
@@ -0,0 +1,15 @@
+// @flow
+import * as React from 'react';
+import {Slider} from 'baseui/slider';
+
+export default () => {
+  const [value, setValue] = React.useState([60]);
+  return (
+    <Slider
+      value={value}
+      step={10}
+      marks
+      onChange={({value}) => value && setValue(value)}
+    />
+  );
+};
diff --git a/documentation-site/examples/slider/marks.tsx b/documentation-site/examples/slider/marks.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {Slider} from 'baseui/slider';
+
+export default () => {
+  const [value, setValue] = React.useState([60]);
+  return (
+    <Slider
+      value={value}
+      step={10}
+      marks
+      onChange={({value}) => value && setValue(value)}
+    />
+  );
+};
diff --git a/documentation-site/pages/components/slider.mdx b/documentation-site/pages/components/slider.mdx
@@ -10,6 +10,7 @@ import Layout from '../../components/layout';
 import Exports from '../../components/exports';
 
 import Basic from 'examples/slider/basic.js';
+import Marks from 'examples/slider/marks.js';
 import Stateful from 'examples/slider/stateful.js';
 import Disabled from 'examples/slider/disabled.js';
 import Range from 'examples/slider/range.js';
@@ -60,6 +61,10 @@ The component is also **optimized for iOS and Android devices**.
   <Basic />
 </Example>
 
+<Example title="Marks" path="slider/marks.js">
+  <Marks />
+</Example>
+
 <Example title="Range" path="slider/range.js">
   <Range />
 </Example>

diff --git a/package.json b/package.json
@@ -206,7 +206,7 @@
     "react-is": "^16.8.6",
     "react-movable": "^2.4.0",
     "react-multi-ref": "^1.0.0",
-    "react-range": "^1.6.3",
+    "react-range": "^1.7.0",
     "react-uid": "^2.3.0",
     "react-virtualized": "^9.21.1",
     "react-virtualized-auto-sizer": "^1.0.2",

diff --git a/src/slider/__tests__/slider-custom-label.scenario.js b/src/slider/__tests__/slider-custom-label.scenario.js
@@ -14,16 +14,18 @@ import {Slider} from '../index.js';
 export default function Scenario() {
   const [rangeValue, setRangeValue] = React.useState([45, 50]);
   return (
-    <Slider
-      value={rangeValue}
-      onChange={({value}) => value && setRangeValue(value)}
-      overrides={{
-        ThumbValue: {
-          props: {
-            valueToLabel: l => l + ':00 AM',
+    <div style={{margin: '64px'}}>
+      <Slider
+        value={rangeValue}
+        onChange={({value}) => value && setRangeValue(value)}
+        overrides={{
+          ThumbValue: {
+            props: {
+              valueToLabel: l => l + ':00 AM',
+            },
           },
-        },
-      }}
-    />
+        }}
+      />
+    </div>
   );
 }
diff --git a/src/slider/__tests__/slider-disabled.scenario.js b/src/slider/__tests__/slider-disabled.scenario.js
@@ -16,6 +16,7 @@ export default function Scenario() {
     <div
       style={{
         maxWidth: '500px',
+        margin: '64px',
       }}
     >
       <StatefulSlider initialState={{value: [50]}} disabled />

diff --git a/src/slider/__tests__/slider-marks.scenario.js b/src/slider/__tests__/slider-marks.scenario.js
@@ -0,0 +1,31 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+/* eslint-disable react/display-name*/
+
+import * as React from 'react';
+
+import {StatefulSlider} from '../index.js';
+
+export default function Scenario() {
+  return (
+    <div
+      style={{
+        maxWidth: '500px',
+        margin: '64px',
+      }}
+    >
+      <StatefulSlider
+        initialState={{value: [20]}}
+        step={10}
+        min={0}
+        max={100}
+        marks
+      />
+    </div>
+  );
+}
diff --git a/src/slider/__tests__/slider-range.scenario.js b/src/slider/__tests__/slider-range.scenario.js
@@ -16,6 +16,7 @@ export default function Scenario() {
     <div
       style={{
         maxWidth: '500px',
+        margin: '64px',
       }}
     >
       <StatefulSlider initialState={{value: [25, 60]}} />

diff --git a/src/slider/__tests__/slider-rtl.scenario.js b/src/slider/__tests__/slider-rtl.scenario.js
@@ -13,7 +13,7 @@ import SliderScenario from './slider.scenario.js';
 export default function Scenario() {
   return (
     <ThemeProvider theme={{...LightTheme, direction: 'rtl'}}>
-      <div dir="rtl">
+      <div dir="rtl" style={{margin: '64px'}}>
         <SliderScenario />
       </div>
     </ThemeProvider>

diff --git a/src/slider/__tests__/slider-step.scenario.js b/src/slider/__tests__/slider-step.scenario.js
@@ -16,6 +16,7 @@ export default function Scenario() {
     <div
       style={{
         maxWidth: '500px',
+        margin: '64px',
       }}
     >
       <StatefulSlider

diff --git a/src/slider/__tests__/slider.scenario.js b/src/slider/__tests__/slider.scenario.js
@@ -15,6 +15,7 @@ export default function Scenario() {
     <div
       style={{
         maxWidth: '500px',
+        margin: '64px',
       }}
     >
       <StatefulSlider />

diff --git a/src/slider/index.d.ts b/src/slider/index.d.ts
@@ -25,6 +25,7 @@ export interface SliderOverrides {
   Thumb?: Override<SharedProps>;
   InnerThumb?: Override<SharedProps>;
   ThumbValue?: Override<SharedProps>;
+  Mark?: Override<SharedProps>;
 }
 
 export interface SliderProps {
@@ -34,6 +35,7 @@ export interface SliderProps {
   step?: number;
   overrides?: SliderOverrides;
   disabled?: boolean;
+  marks?: boolean;
   onChange?: (e: State) => any;
   onFinalChange?: (e: State) => any;
 }
@@ -44,6 +46,7 @@ export interface StatefulSliderProps {
   min?: number;
   max?: number;
   step?: number;
+  marks?: boolean;
   onChange?: (e: State) => any;
   onFinalChange?: (e: State) => any;
 }
@@ -54,6 +57,7 @@ export interface StatefulContainerProps {
   min?: number;
   max?: number;
   step?: number;
+  marks?: boolean;
   initialState?: State;
   stateReducer?: StateReducer;
   onChange?: (e: State) => any;
@@ -67,6 +71,7 @@ export type SharedProps = {
   $min: number;
   $thumbIndex: number;
   $value: Array<number>;
+  $marks: boolean;
 };
 
 export const Slider: React.FC<SliderProps>;
@@ -87,5 +92,6 @@ export const StyledThumb: StyletronComponent<any>;
 export const StyledInnerThumb: StyletronComponent<any>;
 export const StyledTick: StyletronComponent<any>;
 export const StyledTickBar: StyletronComponent<any>;
+export const StyledMark: StyletronComponent<any>;
 
 export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
diff --git a/src/slider/index.js b/src/slider/index.js
@@ -18,5 +18,6 @@ export {
   Tick as StyledTick,
   TickBar as StyledTickBar,
   ThumbValue as StyledThumbValue,
+  Mark as StyledMark,
 } from './styled-components.js';
 export type * from './types.js';