feat: ConfigProvider support classNames and styles for slider (#52185)

* draft

* fix

components/config-provider/context.ts

@@ -38,6 +38,7 @@ import type { TooltipProps } from '../tooltip';
 import type { PopoverProps } from '../popover';
 import type { PopconfirmProps } from '../popconfirm';
 import type { DescriptionsProps } from '../descriptions';
+import type { SliderProps } from '../slider';
 
 export const defaultPrefixCls = 'ant';
 export const defaultIconPrefixCls = 'anticon';
@@ -192,6 +193,8 @@ export type PopconfirmConfig = Pick<
   'className' | 'style' | 'styles' | 'classNames'
 >;
 
+export type SliderConfig = ComponentStyleConfig & Pick<SliderProps, 'styles' | 'classNames'>;
+
 export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
 
 export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
@@ -285,7 +288,7 @@ export interface ConfigConsumerProps {
   modal?: ModalConfig;
   progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
-  slider?: ComponentStyleConfig;
+  slider?: SliderConfig;
   breadcrumb?: ComponentStyleConfig;
   menu?: MenuConfig;
   checkbox?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -149,7 +149,7 @@ const {
 | skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
-| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| slider | Set Slider common props | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider#api), styles?: [SliderProps\["styles"\]](/components/slider#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
 | switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
 | splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |

components/config-provider/index.zh-CN.md

@@ -151,7 +151,7 @@ const {
 | skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
-| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider-cn#api), styles?: [SliderProps\["styles"\]](/components/slider-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
 | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
 | splitter | 设置 Splitter 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |

components/slider/__tests__/index.test.tsx

@@ -225,4 +225,51 @@ describe('Slider', () => {
 
     errSpy.mockRestore();
   });
+  it('should apply custom styles to Descriptions', () => {
+    const customClassNames = {
+      root: 'custom-root',
+      track: 'custom-track',
+      tracks: 'custom-tracks',
+      rail: 'custom-rail',
+      handle: 'custom-handle',
+    };
+
+    const customStyles = {
+      root: { backgroundColor: 'red' },
+      track: { backgroundColor: 'black' },
+      tracks: { backgroundColor: 'yellow' },
+      rail: { backgroundColor: 'purple' },
+      handle: { backgroundColor: 'blue' },
+    };
+
+    const { container } = render(
+      <Slider
+        range
+        defaultValue={[20, 30, 50]}
+        style={{ width: '100%' }}
+        classNames={customClassNames}
+        styles={customStyles}
+      />,
+    );
+
+    const rootElement = container.querySelector('.ant-slider') as HTMLElement;
+    const trackElement = container.querySelector('.ant-slider-track') as HTMLElement;
+    const tracksElement = container.querySelector('.ant-slider-tracks') as HTMLElement;
+    const railElement = container.querySelector('.ant-slider-rail') as HTMLElement;
+    const handleElement = container.querySelector('.ant-slider-handle') as HTMLElement;
+
+    // check classNames
+    expect(rootElement.classList).toContain('custom-root');
+    expect(trackElement.classList).toContain('custom-track');
+    expect(tracksElement.classList).toContain('custom-tracks');
+    expect(railElement.classList).toContain('custom-rail');
+    expect(handleElement.classList).toContain('custom-handle');
+
+    // check styles
+    expect(rootElement.style.backgroundColor).toBe('red');
+    expect(trackElement.style.backgroundColor).toBe('black');
+    expect(tracksElement.style.backgroundColor).toBe('yellow');
+    expect(railElement.style.backgroundColor).toBe('purple');
+    expect(handleElement.style.backgroundColor).toBe('blue');
+  });
 });

components/slider/demo/_semantic.tsx

@@ -6,12 +6,14 @@ import useLocale from '../../../.dumi/hooks/useLocale';
 
 const locales = {
   cn: {
+    root: '根元素',
     track: '范围选择下，点和点之间单个选取条',
     tracks: '范围选择下，整个范围选取条',
     rail: '背景条元素',
     handle: '抓取点元素',
   },
   en: {
+    root: 'Root element',
     track: 'The selection bar between points and points under the range selection',
     tracks: 'The entire range selection bar under the range selection',
     rail: 'Background rail element',
@@ -24,6 +26,7 @@ const App: React.FC = () => {
   return (
     <SemanticPreview
       semantics={[
+        { name: 'root', desc: locale.root, version: '5.23.0' },
         { name: 'track', desc: locale.track, version: '5.10.0' },
         { name: 'tracks', desc: locale.tracks, version: '5.10.0' },
         { name: 'rail', desc: locale.rail, version: '5.10.0' },

components/slider/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';
-import type { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
+import type { SliderRef } from 'rc-slider/lib/Slider';
 import raf from 'rc-util/lib/raf';
 
 import type { GetProp } from '../_util/type';
@@ -17,6 +17,14 @@ import useRafLock from './useRafLock';
 
 export type SliderMarks = RcSliderProps['marks'];
 
+export type SemanticName = 'root' | 'tracks' | 'track' | 'rail' | 'handle';
+export type SliderClassNames = Partial<Record<SemanticName, string>>;
+export type SliderStyles = Partial<Record<SemanticName, React.CSSProperties>>;
+export interface SliderProps extends RcSliderProps {
+  classNames?: SliderClassNames;
+  styles?: SliderStyles;
+}
+
 interface HandleGeneratorInfo {
   value?: number;
   dragging?: boolean;
@@ -59,8 +67,8 @@ export interface SliderBaseProps {
   tooltip?: SliderTooltipProps;
   autoFocus?: boolean;
 
-  styles?: RcSliderProps['styles'];
-  classNames?: RcSliderProps['classNames'];
+  styles?: SliderProps['styles'];
+  classNames?: SliderProps['classNames'];
   onFocus?: React.FocusEventHandler<HTMLDivElement>;
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
 
@@ -142,6 +150,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     tooltipPlacement: legacyTooltipPlacement,
     tooltip = {},
     onChangeComplete,
+    classNames: sliderClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -207,9 +217,11 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
-  const cls = classNames(
+  const rootClassNames = classNames(
     className,
     slider?.className,
+    slider?.classNames?.root,
+    sliderClassNames?.root,
     rootClassName,
     {
       [`${prefixCls}-rtl`]: isRTL,
@@ -363,16 +375,49 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     : undefined;
 
   // ============================== Render ==============================
-  const mergedStyle: React.CSSProperties = { ...slider?.style, ...style };
+  const rootStyle: React.CSSProperties = {
+    ...slider?.styles?.root,
+    ...slider?.style,
+    ...styles?.root,
+    ...style,
+  };
+
+  const mergedTracks = {
+    ...slider?.styles?.tracks,
+    ...styles?.tracks,
+  };
+
+  const mergedTracksClassNames = classNames(slider?.classNames?.tracks, sliderClassNames?.tracks);
 
   return wrapCSSVar(
     // @ts-ignore
     <RcSlider
       {...restProps}
+      classNames={{
+        handle: classNames(slider?.classNames?.handle, sliderClassNames?.handle),
+        rail: classNames(slider?.classNames?.rail, sliderClassNames?.rail),
+        track: classNames(slider?.classNames?.track, sliderClassNames?.track),
+        ...(mergedTracksClassNames ? { tracks: mergedTracksClassNames } : {}),
+      }}
+      styles={{
+        handle: {
+          ...slider?.styles?.handle,
+          ...styles?.handle,
+        },
+        rail: {
+          ...slider?.styles?.rail,
+          ...styles?.rail,
+        },
+        track: {
+          ...slider?.styles?.track,
+          ...styles?.track,
+        },
+        ...(Object.keys(mergedTracks).length ? { tracks: mergedTracks } : {}),
+      }}
       step={restProps.step}
       range={range}
-      className={cls}
-      style={mergedStyle}
+      className={rootClassNames}
+      style={rootStyle}
       disabled={mergedDisabled}
       ref={ref}
       prefixCls={prefixCls}