feat: slider add tooltipVisible and optimize experience

Author: tangjinzhou

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -2,14 +2,14 @@
 
 exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
 <div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider" id="test">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
     <div class="ant-slider-step"></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
     <div class="ant-slider-mark"></div>
   </div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
     <div class="ant-slider-step"></div>
@@ -23,14 +23,14 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/slider/demo/event.md correctly 1`] = `
 <div class="code-box-demo">
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
     <div class="ant-slider-step"></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
     <div class="ant-slider-mark"></div>
   </div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
     <div class="ant-slider-step"></div>
@@ -45,14 +45,14 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
 <div class="icon-wrapper"><i class="anticon anticon-frown-o" style="color: rgba(0, 0, 0, 0.45);"><svg viewBox="64 64 896 896" data-icon="frown" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
       <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path>
     </svg></i>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
     <div class="ant-slider-step"></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
     <div class="ant-slider-mark"></div>
   </div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
     <div class="ant-slider-step"></div>
@@ -68,7 +68,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
 <div>
   <div class="ant-row">
     <div class="ant-col-12">
-      <div class="ant-slider">
+      <div tabindex="-1" class="ant-slider">
         <div class="ant-slider-rail"></div>
         <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
         <div class="ant-slider-step"></div>
@@ -85,7 +85,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
   </div>
   <div class="ant-row">
     <div class="ant-col-12">
-      <div class="ant-slider">
+      <div tabindex="-1" class="ant-slider">
         <div class="ant-slider-rail"></div>
         <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
         <div class="ant-slider-step"></div>
@@ -106,14 +106,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
 exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
 <div id="components-slider-demo-mark">
   <h4>included=true</h4>
-  <div class="ant-slider ant-slider-with-marks">
+  <div tabindex="-1" class="ant-slider ant-slider-with-marks">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
     <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
     <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
   </div>
-  <div class="ant-slider ant-slider-with-marks">
+  <div tabindex="-1" class="ant-slider ant-slider-with-marks">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track ant-slider-track-1" style="left: 26%; width: 11%;"></div>
     <div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@@ -122,23 +122,23 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
     <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
   </div>
   <h4>included=false</h4>
-  <div class="ant-slider ant-slider-with-marks">
+  <div tabindex="-1" class="ant-slider ant-slider-with-marks">
     <div class="ant-slider-rail"></div>
     <!---->
     <div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
     <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
   </div>
   <h4>marks &amp; step</h4>
-  <div class="ant-slider ant-slider-with-marks">
+  <div tabindex="-1" class="ant-slider ant-slider-with-marks">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
     <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
     <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
   </div>
   <h4>step=null</h4>
-  <div class="ant-slider ant-slider-with-marks">
+  <div tabindex="-1" class="ant-slider ant-slider-with-marks">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
     <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@@ -148,16 +148,26 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
+<div tabindex="-1" class="ant-slider">
+  <div class="ant-slider-rail"></div>
+  <div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
+  <div class="ant-slider-step"></div>
+  <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle ant-tooltip-open" style="left: 30%;"></div>
+  <div class="ant-slider-mark"></div>
+</div>
+`;
+
 exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
 <div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
     <div class="ant-slider-step"></div>
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
     <div class="ant-slider-mark"></div>
   </div>
-  <div class="ant-slider">
+  <div tabindex="-1" class="ant-slider">
     <div class="ant-slider-rail"></div>
     <div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
     <div class="ant-slider-step"></div>
@@ -170,7 +180,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
 exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
 <div style="height: 300px;">
   <div style="float: left; height: 300px; margin-left: 70px;">
-    <div class="ant-slider ant-slider-vertical">
+    <div tabindex="-1" class="ant-slider ant-slider-vertical">
       <div class="ant-slider-rail"></div>
       <div class="ant-slider-track" style="bottom: 0%; height: 30%;"></div>
       <div class="ant-slider-step"></div>
@@ -179,7 +189,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div style="float: left; height: 300px; margin-left: 70px;">
-    <div class="ant-slider ant-slider-vertical">
+    <div tabindex="-1" class="ant-slider ant-slider-vertical">
       <div class="ant-slider-rail"></div>
       <div class="ant-slider-track ant-slider-track-1" style="bottom: 20%; height: 30%;"></div>
       <div class="ant-slider-step"></div>
@@ -189,7 +199,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
     </div>
   </div>
   <div style="float: left; height: 300px; margin-left: 70px;">
-    <div class="ant-slider ant-slider-with-marks ant-slider-vertical">
+    <div tabindex="-1" class="ant-slider ant-slider-with-marks ant-slider-vertical">
       <div class="ant-slider-rail"></div>
       <div class="ant-slider-track ant-slider-track-1" style="bottom: 26%; height: 11%;"></div>
       <div class="ant-slider-step"><span class="ant-slider-dot" style="bottom: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 37%;"></span><span class="ant-slider-dot" style="bottom: 100%;"></span></div>

components/slider/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest'
 
-demoTest('slider')
+demoTest('slider', { skip: process.env.LIB_DIR === 'dist' && ['show-tooltip.md'] })

components/slider/demo/basic.md

@@ -11,7 +11,7 @@ Basic slider. When `range` is `true`, display as dual thumb mode. When `disable`
 ```html
 <template>
   <div>
-    <a-slider :defaultValue="30" :disabled="disabled" />
+    <a-slider id="test" :defaultValue="30" :disabled="disabled" />
     <a-slider range :defaultValue="[20, 50]" :disabled="disabled" />
     Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange" />
   </div>

components/slider/demo/index.vue

@@ -6,6 +6,7 @@ import TipFormatter from './tip-formatter.md'
 import Event from './event.md'
 import Mark from './mark.md'
 import Vertical from './vertical.md'
+import ShowTooltip from './show-tooltip.md'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 
@@ -31,21 +32,14 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us}/>
-        <br/>
         <Basic />
-        <br />
         <InputNumber />
-        <br />
         <IconSlider />
-        <br />
         <TipFormatter />
-        <br />
         <Event />
-        <br />
         <Mark />
-        <br />
         <Vertical />
-        <br />
+        <ShowTooltip />
         <api>
           <template slot='cn'>
             <CN/>

components/slider/demo/show-tooltip.md

@@ -0,0 +1,15 @@
+<cn>
+#### 控制 ToolTip 的显示
+当 `tooltipVisible` 为 `true` 时，将始终显示ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
+</cn>
+
+<us>
+#### Control visible of ToolTip
+When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
+</us>
+
+```html
+<template>
+  <a-slider :defaultValue="30" :tooltipVisible="true" />
+</template>
+```

components/slider/index.en-US.md

@@ -15,6 +15,7 @@
 | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
 | value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] |  |
 | vertical | If true, the slider will be vertical. | Boolean | false |
+| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | |
 
 
 ### events

components/slider/index.jsx

@@ -41,7 +41,7 @@ export const SliderProps = () => ({
     PropTypes.func,
     PropTypes.object,
   ]),
-  id: PropTypes.string,
+  tooltipVisible: PropTypes.bool,
 })
 
 const Slider = {
@@ -74,11 +74,11 @@ const Slider = {
         },
       }))
     },
-    handleWithTooltip ({ value, dragging, index, ref, ...restProps }) {
-      const { tooltipPrefixCls, tipFormatter } = this.$props
+    handleWithTooltip ({ value, dragging, index, directives, on, ...restProps }) {
+      const { tooltipPrefixCls, tipFormatter, tooltipVisible } = this.$props
       const { visibles } = this
-      const visible = tipFormatter ? (visibles[index] || dragging) : false
-
+      const isTipFormatter = tipFormatter ? visibles[index] || dragging : false
+      const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter)
       const tooltipProps = {
         props: {
           prefixCls: tooltipPrefixCls,
@@ -94,8 +94,9 @@ const Slider = {
           value,
           ...restProps,
         },
-        ref,
+        directives,
         on: {
+          ...on,
           mouseenter: () => this.toggleTooltipVisible(index, true),
           mouseleave: () => this.toggleTooltipVisible(index, false),
         },
@@ -114,7 +115,7 @@ const Slider = {
       this.$refs.sliderRef.focus()
     },
     blur () {
-      this.$refs.sliderRef.focus()
+      this.$refs.sliderRef.blur()
     },
   },
   render () {

components/slider/index.zh-CN.md

@@ -15,6 +15,7 @@
 | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
 | value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] |  |
 | vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
+| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |