fix: Slider disabled status in form (#43142)

* fix slider component disabled status in form * add test case & update demo * fix related test cases
ant-design · Jun 24, 2023 · 5c350a8 · 5c350a8
1 parent 5728abe
commit 5c350a8
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 3 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -25451,7 +25451,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
 
 exports[`ConfigProvider components Slider configProvider componentDisabled 1`] = `
 <div
-  class="config-slider config-slider-horizontal"
+  class="config-slider config-slider-disabled config-slider-horizontal"
 >
   <div
     class="config-slider-rail"
@@ -25464,14 +25464,13 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
     class="config-slider-step"
   />
   <div
-    aria-disabled="false"
+    aria-disabled="true"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
     class="config-slider-handle config-tooltip-open"
     role="slider"
     style="left: 0%; transform: translateX(-50%);"
-    tabindex="0"
   />
   <div
     class="config-tooltip config-zoom-big-fast-appear config-zoom-big-fast-appear-prepare config-zoom-big-fast config-slider-tooltip config-tooltip-placement-top"

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5226,6 +5226,78 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-4 ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Slider"
+          >
+            Slider
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-14 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-disabled ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left: 0%; width: 0%;"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="0"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left: 0%; transform: translateX(-50%);"
+                />
+                <div
+                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                    style="position: absolute; bottom: 0px; left: 0px;"
+                  />
+                  <div
+                    class="ant-tooltip-content"
+                  >
+                    <div
+                      class="ant-tooltip-inner"
+                      role="tooltip"
+                    >
+                      0
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>,
 ]
 `;

diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2719,6 +2719,59 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-4 ant-form-item-label"
+        >
+          <label
+            class=""
+            title="Slider"
+          >
+            Slider
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-14 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-slider ant-slider-disabled ant-slider-horizontal"
+              >
+                <div
+                  class="ant-slider-rail"
+                />
+                <div
+                  class="ant-slider-track"
+                  style="left:0%;width:0%"
+                />
+                <div
+                  class="ant-slider-step"
+                />
+                <div
+                  aria-disabled="true"
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  aria-valuenow="0"
+                  class="ant-slider-handle"
+                  role="slider"
+                  style="left:0%;transform:translateX(-50%)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>,
 ]
 `;

diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -991,6 +991,59 @@ exports[`Form form should support disabled 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Slider"
+        >
+          Slider
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-slider ant-slider-disabled ant-slider-horizontal"
+            >
+              <div
+                class="ant-slider-rail"
+              />
+              <div
+                class="ant-slider-track"
+                style="left: 0%; width: 0%;"
+              />
+              <div
+                class="ant-slider-step"
+              />
+              <div
+                aria-disabled="true"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="0"
+                class="ant-slider-handle"
+                role="slider"
+                style="left: 0%; transform: translateX(-50%);"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </form>
 `;
 

diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
@@ -21,6 +21,7 @@ import zhCN from '../../locale/zh_CN';
 import Modal from '../../modal';
 import Radio from '../../radio';
 import Select from '../../select';
+import Slider from '../../slider';
 import Switch from '../../switch';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
@@ -1160,6 +1161,9 @@ describe('Form', () => {
         <Form.Item label="Button">
           <Button>Button</Button>
         </Form.Item>
+        <Form.Item label="Slider">
+          <Slider />
+        </Form.Item>
       </Form>
     );
     const { container } = render(<App />);

diff --git a/components/form/demo/disabled.tsx b/components/form/demo/disabled.tsx
@@ -9,6 +9,7 @@ import {
   InputNumber,
   Radio,
   Select,
+  Slider,
   Switch,
   TreeSelect,
   Upload,
@@ -109,6 +110,9 @@ const FormDisabledDemo: React.FC = () => {
         <Form.Item label="Button">
           <Button>Button</Button>
         </Form.Item>
+        <Form.Item label="Slider">
+          <Slider />
+        </Form.Item>
       </Form>
     </>
   );

diff --git a/components/slider/index.tsx b/components/slider/index.tsx
@@ -5,6 +5,7 @@ import type { SliderRef } from 'rc-slider/lib/Slider';
 import React from 'react';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import DisabledContext from '../config-provider/DisabledContext';
 import type { TooltipPlacement } from '../tooltip';
 import SliderTooltip from './SliderTooltip';
 import useStyle from './style';
@@ -103,6 +104,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     range,
     className,
     rootClassName,
+    disabled,
     // Deprecated Props
     tooltipPrefixCls: legacyTooltipPrefixCls,
     tipFormatter: legacyTipFormatter,
@@ -114,6 +116,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
   } = props;
 
   const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
+  const contextDisabled = React.useContext(DisabledContext);
+  const mergedDisabled = disabled ?? contextDisabled;
   const [opens, setOpens] = React.useState<Opens>({});
 
   const toggleTooltipOpen = (index: number, open: boolean) => {
@@ -238,6 +242,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       range={mergedRange}
       draggableTrack={draggableTrack}
       className={cls}
+      disabled={mergedDisabled}
       ref={ref}
       prefixCls={prefixCls}
       handleRender={handleRender}