fix input with addon(in form) vertical align issue (ant-design#8325)

synsuman · Nov 29, 2017 · 91fc059 · 91fc059
1 parent c08e486
commit 91fc059
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1421,7 +1421,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
         class="ant-form-item-control "
       >
         <span
-          class="ant-input-group-wrapper"
+          class="ant-input-group-wrapper ant-input-group-wrapper-lg"
           style="width:100%;"
         >
           <span

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -252,6 +252,20 @@ form {
       display: inline-block;
     }
   }
+
+  // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
+  .@{ant-prefix}-input-group-wrapper {
+    position: relative;
+    top: (@input-height-lg - @input-height-base) / 2;
+
+    &.@{ant-prefix}-input-group-wrapper-lg {
+      top: 0;
+    }
+
+    &.@{ant-prefix}-input-group-wrapper-sm {
+      top: (@input-height-lg - @input-height-sm) / 2;
+    }
+  }
 }
 
 // Input combined with select

diff --git a/components/input/Input.tsx b/components/input/Input.tsx
@@ -136,12 +136,17 @@ export default class Input extends Component<InputProps, any> {
       [wrapperClassName]: (addonBefore || addonAfter),
     });
 
+    const groupClassName = classNames(`${props.prefixCls}-group-wrapper`, {
+      [`${props.prefixCls}-group-wrapper-sm`]: props.size === 'small',
+      [`${props.prefixCls}-group-wrapper-lg`]: props.size === 'large',
+    });
+
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
     if (addonBefore || addonAfter) {
       return (
         <span
-          className={`${props.prefixCls}-group-wrapper`}
+          className={groupClassName}
           style={props.style}
         >
           <span className={className}>