diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 05110839bc..ca9e450167 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -263,6 +263,7 @@ class Input extends React.Component { {size => ( - ); + const props = { + ...omit(restProps, ['suffix']), + type: this.state.visible ? 'text' : 'password', + className: inputClassName, + prefixCls: inputPrefixCls, + suffix: suffixIcon, + ref: this.saveInput, + }; + if (size) { + props.size = size; + } + return ; } } diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 63181be156..92322dd54c 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -2042,24 +2042,147 @@ exports[`renders ./components/input/demo/size.md correctly 1`] = `
- - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
`; diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index 673aeaeed3..ad11468044 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -504,6 +504,174 @@ exports[`Input should support maxLength 1`] = ` `; +exports[`Input should support size 1`] = ` + + + } + focused={false} + handleReset={[Function]} + inputType="input" + prefixCls="ant-input" + size="large" + type="text" + value="" + > + + + +`; + +exports[`Input should support size in form 1`] = ` + + + +
+ + +
+ + + +
+
+ + + } + focused={false} + handleReset={[Function]} + inputType="input" + prefixCls="ant-input" + size="large" + type="text" + value="" + > + + + +
+ + + +
+ +
+
+
+
+
+
+
+
+`; + exports[`Input.Search should support suffix 1`] = ` { wrapper.instance().select(); }); + it('should support size', () => { + const wrapper = mount(); + expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true); + expect(wrapper).toMatchSnapshot(); + }); + + it('should support size in form', () => { + const wrapper = mount( +
+ + + +
, + ); + expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true); + expect(wrapper).toMatchSnapshot(); + }); + describe('focus trigger warning', () => { it('not trigger', () => { const wrapper = mount(); diff --git a/components/input/demo/size.md b/components/input/demo/size.md index 09665899c8..ad1faa65bc 100644 --- a/components/input/demo/size.md +++ b/components/input/demo/size.md @@ -15,19 +15,21 @@ There are three sizes of an Input box: `large` (40px), `default` (32px) and `sma ```jsx import { Input } from 'antd'; +import { UserOutlined } from '@ant-design/icons'; ReactDOM.render(
- - - + } /> + } /> + } /> +
, mountNode, ); ``` ```css -.example-input .ant-input { +.example-input > span { width: 200px; margin: 0 8px 8px 0; }