feat: config-provider support Input className and style properties (#43227)

* feat: config-provider support Input className and style properties

* feat: config-provider support Form className and style properties

* Revert "feat: config-provider support Form className and style properties"

This reverts commit 183010d40a.

* feat: support styles & classNames

* test: optimize test

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

@@ -9,6 +9,7 @@ import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Empty from '../../empty';
 import Image from '../../image';
+import Input from '../../input';
 import Mentions from '../../mentions';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
@@ -256,6 +257,43 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Input className & style & classNames & styles works', () => {
+    const { container } = render(
+      <ConfigProvider
+        input={{
+          className: 'cp-input',
+          style: { backgroundColor: 'red' },
+          classNames: {
+            input: 'cp-classNames-input',
+            prefix: 'cp-classNames-prefix',
+          },
+          styles: {
+            input: {
+              color: 'blue',
+            },
+            prefix: {
+              color: 'black',
+            },
+          },
+        }}
+      >
+        <Input placeholder="Basic usage" prefix="￥" />
+      </ConfigProvider>,
+    );
+
+    const wrapperElement = container.querySelector<HTMLDivElement>('.ant-input-affix-wrapper');
+    expect(wrapperElement).toHaveClass('cp-input');
+    expect(wrapperElement).toHaveStyle({ backgroundColor: 'red' });
+
+    const prefixElement = container.querySelector<HTMLDivElement>('.ant-input-prefix');
+    expect(prefixElement).toHaveClass('cp-classNames-prefix');
+    expect(prefixElement).toHaveStyle({ color: 'black' });
+
+    const inputElement = container.querySelector<HTMLDivElement>('.ant-input');
+    expect(inputElement).toHaveClass('cp-classNames-input');
+    expect(inputElement).toHaveStyle({ color: 'blue' });
+  });
+
   it('Should Mentions className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
 import type { ButtonProps } from '../button';
 import type { RequiredMark } from '../form/Form';
+import type { InputProps } from '../input';
 import type { Locale } from '../locale';
 import type { SpaceProps } from '../space';
 import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface';
@@ -57,8 +58,10 @@ export interface ConfigConsumerProps {
   renderEmpty?: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
-  input?: {
+  input?: ComponentStyleConfig & {
     autoComplete?: string;
+    classNames?: InputProps['classNames'];
+    styles?: InputProps['styles'];
   };
   pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
   locale?: Locale;

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

@@ -111,14 +111,14 @@ const {
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | 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 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - |  |
+| 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 |
 | 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 |

components/config-provider/index.tsx

@@ -9,6 +9,7 @@ import type { Options } from 'scroll-into-view-if-needed';
 import warning from '../_util/warning';
 import type { RequiredMark } from '../form/Form';
 import ValidateMessagesContext from '../form/validateMessagesContext';
+import type { InputProps } from '../input';
 import type { Locale } from '../locale';
 import LocaleProvider, { ANT_MARK } from '../locale';
 import type { LocaleContextProps } from '../locale/context';
@@ -107,7 +108,9 @@ export interface ConfigProviderProps {
     colon?: boolean;
     scrollToFirstError?: Options | boolean;
   };
-  input?: {
+  input?: ComponentStyleConfig & {
+    classNames?: InputProps['classNames'];
+    styles?: InputProps['styles'];
     autoComplete?: string;
   };
   select?: ComponentStyleConfig & {
@@ -255,6 +258,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     slider,
     breadcrumb,
     pagination,
+    input,
     empty,
     radio,
   } = props;
@@ -318,6 +322,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     divider,
     steps,
     image,
+    input,
     mentions,
     modal,
     result,

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

@@ -113,14 +113,14 @@ const {
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { 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 } | - |  |
+| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
 | 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 |

components/input/Input.tsx

@@ -80,6 +80,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     addonAfter,
     addonBefore,
     className,
+    style,
+    styles,
     rootClassName,
     onChange,
     classNames: classes,
@@ -163,9 +165,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       disabled={mergedDisabled}
       onBlur={handleBlur}
       onFocus={handleFocus}
+      style={{ ...input?.style, ...style }}
+      styles={{ ...input?.styles, ...styles }}
       suffix={suffixNode}
       allowClear={mergedAllowClear}
-      className={classNames(className, rootClassName, compactItemClassnames)}
+      className={classNames(className, rootClassName, compactItemClassnames, input?.className)}
       onChange={handleChange}
       addonAfter={
         addonAfter && (
@@ -187,6 +191,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       }
       classNames={{
         ...classes,
+        ...input?.classNames,
         input: classNames(
           {
             [`${prefixCls}-sm`]: mergedSize === 'small',
@@ -196,6 +201,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           },
           !inputHasPrefixSuffix && getStatusClassNames(prefixCls, mergedStatus),
           classes?.input,
+          input?.classNames?.input,
           hashId,
         ),
       }}