feat: Input.Textarea support size props (#27110)

* feat: Input.Textarea add size props

* update snapshot

* update snapshot

* add case

* fix code

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -14628,7 +14628,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
     class="config-input-textarea"
   >
     <textarea
-      class="config-input"
+      class="config-input config-input-lg"
     />
   </div>
 </div>

components/config-provider/demo/size.md

@@ -49,6 +49,9 @@ const FormSizeDemo = () => {
         <div className="example">
           <Input.Search allowClear />
         </div>
+        <div className="example">
+          <Input.TextArea allowClear />
+        </div>
         <div className="example">
           <Select defaultValue="demo" options={[{ value: 'demo' }]} />
         </div>

components/input/TextArea.tsx

@@ -4,6 +4,7 @@ import omit from 'omit.js';
 import classNames from 'classnames';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { fixControlledValue, resolveOnChange } from './Input';
 
 export interface TextAreaProps extends RcTextAreaProps {
@@ -11,6 +12,7 @@ export interface TextAreaProps extends RcTextAreaProps {
   bordered?: boolean;
   showCount?: boolean;
   maxLength?: number;
+  size?: SizeType;
 }
 
 export interface TextAreaState {
@@ -76,13 +78,16 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
     resolveOnChange(this.resizableTextArea.textArea, e, this.props.onChange);
   };
 
-  renderTextArea = (prefixCls: string, bordered: boolean) => {
+  renderTextArea = (prefixCls: string, bordered: boolean, size?: SizeType) => {
+    const { size: customizeSize } = this.props;
     return (
       <RcTextArea
-        {...omit(this.props, ['allowClear', 'bordered', 'showCount'])}
+        {...omit(this.props, ['allowClear', 'bordered', 'showCount', 'size'])}
         className={classNames(
           {
             [`${prefixCls}-borderless`]: !bordered,
+            [`${prefixCls}-sm`]: size === 'small' || customizeSize === 'small',
+            [`${prefixCls}-lg`]: size === 'large' || customizeSize === 'large',
           },
           this.props.className,
         )}
@@ -108,25 +113,30 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
     const dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
 
     return (
-      <div
-        className={classNames(`${prefixCls}-textarea`, {
-          [`${prefixCls}-textarea-show-count`]: showCount,
-        })}
-        {...(showCount ? { 'data-count': dataCount } : {})}
-      >
-        <ClearableLabeledInput
-          {...this.props}
-          prefixCls={prefixCls}
-          direction={direction}
-          inputType="text"
-          value={value}
-          element={this.renderTextArea(prefixCls, bordered)}
-          handleReset={this.handleReset}
-          ref={this.saveClearableInput}
-          triggerFocus={this.focus}
-          bordered={bordered}
-        />
-      </div>
+      <SizeContext.Consumer>
+        {size => (
+          <div
+            className={classNames(`${prefixCls}-textarea`, {
+              [`${prefixCls}-textarea-show-count`]: showCount,
+            })}
+            {...(showCount ? { 'data-count': dataCount } : {})}
+          >
+            <ClearableLabeledInput
+              size={size}
+              {...this.props}
+              prefixCls={prefixCls}
+              direction={direction}
+              inputType="text"
+              value={value}
+              element={this.renderTextArea(prefixCls, bordered, size)}
+              handleReset={this.handleReset}
+              ref={this.saveClearableInput}
+              triggerFocus={this.focus}
+              bordered={bordered}
+            />
+          </div>
+        )}
+      </SizeContext.Consumer>
     );
   };
 

components/input/__tests__/__snapshots__/textarea.test.js.snap

@@ -303,3 +303,13 @@ exports[`TextArea should support maxLength 1`] = `
   />
 </div>
 `;
+
+exports[`TextArea should support size 1`] = `
+<div
+  class="ant-input-textarea"
+>
+  <textarea
+    class="ant-input ant-input-lg"
+  />
+</div>
+`;

components/input/__tests__/textarea.test.js

@@ -139,6 +139,12 @@ describe('TextArea', () => {
     expect(wrapper.find('textarea').prop('value')).toBe('12345');
     expect(textarea.prop('data-count')).toBe('5 / 5');
   });
+
+  it('should support size', async () => {
+    const wrapper = mount(<TextArea size="large" />);
+    expect(wrapper.find('textarea').hasClass('ant-input-lg')).toBe(true);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
 
 describe('TextArea allowClear', () => {