feat: CP support Slider className and style (#43092)

* feat: CP support Slider className and style

* Update BrowserMockup.tsx

* Update Reset.tsx

* Update Responsive.tsx

* Update index.en-US.md

components/config-provider/__tests__/style.test.tsx

@@ -5,6 +5,7 @@ import Divider from '../../divider';
 import Image from '../../image';
 import Result from '../../result';
 import Segmented from '../../segmented';
+import Slider from '../../slider';
 import Space from '../../space';
 import Spin from '../../spin';
 import Steps from '../../steps';
@@ -191,4 +192,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-result');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Slider className & style works', () => {
+    const { container } = render(
+      <ConfigProvider slider={{ className: 'cp-slider', style: { backgroundColor: 'red' } }}>
+        <Slider />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-slider');
+    expect(element).toHaveClass('cp-slider');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -113,6 +113,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  slider?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -109,6 +109,7 @@ const {
 | result | Set Result 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 | { showSearch?: boolean } | - |  |
+| slider | Set Slider 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?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -162,6 +162,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  slider?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -256,6 +260,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     result,
+    slider,
   } = props;
 
   // =================================== Warning ===================================
@@ -314,6 +319,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     result,
+    slider,
   };
 
   const config = {

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

@@ -111,6 +111,7 @@ const {
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |
+| slider | 设置 Slider 组件的通用属性 | { 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?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/slider/index.tsx

@@ -104,6 +104,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     range,
     className,
     rootClassName,
+    style,
     disabled,
     // Deprecated Props
     tooltipPrefixCls: legacyTooltipPrefixCls,
@@ -111,11 +112,10 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     tooltipVisible: legacyTooltipVisible,
     getTooltipPopupContainer: legacyGetTooltipPopupContainer,
     tooltipPlacement: legacyTooltipPlacement,
-
     ...restProps
   } = props;
 
-  const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
+  const { direction, slider, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
   const contextDisabled = React.useContext(DisabledContext);
   const mergedDisabled = disabled ?? contextDisabled;
   const [opens, setOpens] = React.useState<Opens>({});
@@ -140,6 +140,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
 
   const cls = classNames(
     className,
+    slider?.className,
     rootClassName,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -235,6 +236,8 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     );
   };
 
+  const mergedStyle: React.CSSProperties = { ...slider?.style, ...style };
+
   return wrapSSR(
     <RcSlider
       {...restProps}
@@ -242,6 +245,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       range={mergedRange}
       draggableTrack={draggableTrack}
       className={cls}
+      style={mergedStyle}
       disabled={mergedDisabled}
       ref={ref}
       prefixCls={prefixCls}