feat(slider): add option to hide slider value (#494)

* feat(slider): hideValue prop added

* test(slider): test added for hideValue prop

docs(slider): add hideValue prop

docs(slider): add hideValue prop for cn docs

feat(slider): ensure the dot stays round when no content

test(slider): update snapshots

components/slider/__tests__/__snapshots__/index.test.tsx.snap

@@ -8,6 +8,57 @@ exports[`Slider should render correctly 1`] = `
           top: 50%;
           transform: translate(-50%, -50%);
           height: 1.25rem;
+          min-width: 1.25rem;
+          line-height: 1.25rem;
+          border-radius: 0.625rem;
+          user-select: none;
+          font-weight: 700;
+          font-size: 0.75rem;
+          z-index: 100;
+          background-color: #0070f3;
+          color: #fff;
+          text-align: center;
+          padding: 0 calc(0.86 * 8pt);
+        }
+
+        .dot.disabled {
+          cursor: not-allowed !important;
+          background-color: #eaeaea;
+          color: #888;
+        }
+
+        .dot.click {
+          transition: all 200ms ease;
+        }
+
+        .dot:hover {
+          cursor: grab;
+        }
+
+        .dot:active {
+          cursor: grabbing;
+        }
+      </style></div><style>
+        .slider {
+          width: 100%;
+          height: 0.5rem;
+          border-radius: 50px;
+          background-color: #111;
+          position: relative;
+          cursor: pointer;
+        }
+      </style></div>"
+`;
+
+exports[`Slider should work with hideValue 1`] = `
+"<div class=\\"slider \\"><div class=\\"dot  \\"><style>
+        .dot {
+          position: absolute;
+          left: 20%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          height: 1.25rem;
+          min-width: 1.25rem;
           line-height: 1.25rem;
           border-radius: 0.625rem;
           user-select: none;
@@ -57,6 +108,7 @@ exports[`Slider should work with markers 1`] = `
           top: 50%;
           transform: translate(-50%, -50%);
           height: 1.25rem;
+          min-width: 1.25rem;
           line-height: 1.25rem;
           border-radius: 0.625rem;
           user-select: none;
@@ -115,6 +167,7 @@ exports[`Slider should work with markers 2`] = `
           top: 50%;
           transform: translate(-50%, -50%);
           height: 1.25rem;
+          min-width: 1.25rem;
           line-height: 1.25rem;
           border-radius: 0.625rem;
           user-select: none;

components/slider/__tests__/index.test.tsx

@@ -133,4 +133,8 @@ describe('Slider', () => {
     wrapper = mount(<Slider step={20} showMarkers />)
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('should work with hideValue', () => {
+    let wrapper = mount(<Slider initialValue={20} hideValue />)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

components/slider/slider-dot.tsx

@@ -35,6 +35,7 @@ const SliderDot = React.forwardRef<
           top: 50%;
           transform: translate(-50%, -50%);
           height: 1.25rem;
+          min-width: 1.25rem;
           line-height: 1.25rem;
           border-radius: 0.625rem;
           user-select: none;

components/slider/slider.tsx

@@ -14,6 +14,7 @@ import SliderDot from './slider-dot'
 import SliderMark from './slider-mark'
 
 interface Props {
+  hideValue?: boolean
   value?: number
   initialValue?: number
   step?: number
@@ -26,6 +27,7 @@ interface Props {
 }
 
 const defaultProps = {
+  hideValue: false,
   initialValue: 0,
   step: 1,
   min: 0,
@@ -63,6 +65,7 @@ const getValue = (
 }
 
 const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
+  hideValue,
   disabled,
   step,
   max,
@@ -151,7 +154,7 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
       ref={sliderRef}
       {...props}>
       <SliderDot disabled={disabled} ref={dotRef} isClick={isClick} left={currentRatio}>
-        {value}
+        {hideValue || value}
       </SliderDot>
       {showMarkers && <SliderMark max={max} min={min} step={step} />}
       <style jsx>{`

pages/en-us/components/slider.mdx

@@ -84,6 +84,7 @@ Display the current value and an inputable range.
 | **min**          | the minimum value of slider                        | `number`                | -                                | 0       |
 | **disabled**     | disable slider interaction                         | `boolean`               | `false`                          |
 | **showMarkers**  | show each marker                                   | `boolean`               | -                                | `false` |
+| **hideValue**    | hide slider value                                  | `boolean`               | -                                | `false` |
 | **onChange**     | called when the value of silder changes            | `(val: number) => void` | -                                | -       |
 | ...              | native props                                       | `HTMLAttributes`        | `'id', 'name', 'className', ...` | -       |
 

pages/zh-cn/components/slider.mdx

@@ -84,6 +84,7 @@ export const meta = {
 | **min**          | 滑块可选的最小值       | `number`                | -                                | 0       |
 | **disabled**     | 禁用所有操作           | `boolean`               | `false`                          |
 | **showMarkers**  | 显示每一个标记         | `boolean`               | -                                | `false` |
+| **hideValue**    | 是否隐藏滑块中的数字   | `boolean`               | -                                | `false` |
 | **onChange**     | 当滑块的值改变时被调用 | `(val: number) => void` | -                                | -       |
 | ...              | 原生属性               | `HTMLAttributes`        | `'id', 'name', 'className', ...` | -       |