Merge branch '1.x-stable'

components/form/FormItem.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import Row from '../row';
+import Col from '../col';
 import { FIELD_META_PROP } from './constants';
 
 export default class FormItem extends React.Component {
@@ -31,16 +33,6 @@ export default class FormItem extends React.Component {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
 
-  getLayoutClass(colDef) {
-    if (!colDef) {
-      return '';
-    }
-    const { span, offset } = colDef;
-    const col = span ? `ant-col-${span}` : '';
-    const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
-    return col + offsetCol;
-  }
-
   getHelpMsg() {
     const context = this.context;
     const props = this.props;
@@ -134,9 +126,9 @@ export default class FormItem extends React.Component {
   renderWrapper(children) {
     const wrapperCol = this.props.wrapperCol;
     return (
-      <div className={this.getLayoutClass(wrapperCol)} key="wrapper">
+      <Col {...wrapperCol} key="wrapper">
         {children}
-      </div>
+      </Col>
     );
   }
 
@@ -160,7 +152,6 @@ export default class FormItem extends React.Component {
       props.required;
 
     const className = classNames({
-      [this.getLayoutClass(labelCol)]: true,
       [`${props.prefixCls}-item-required`]: required,
     });
 
@@ -171,9 +162,11 @@ export default class FormItem extends React.Component {
     }
 
     return props.label ? (
-      <label htmlFor={props.id || this.getId()} className={className} key="label">
-        {label}
-      </label>
+      <Col {...labelCol}>
+        <label htmlFor={props.id || this.getId()} className={className} key="label">
+          {label}
+        </label>
+      </Col>
     ) : null;
   }
 
@@ -202,7 +195,6 @@ export default class FormItem extends React.Component {
     const prefixCls = props.prefixCls;
     const style = props.style;
     const itemClassName = {
-      'ant-row': true,
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
       [`${prefixCls}-no-colon`]: !this.props.colon,
@@ -210,9 +202,9 @@ export default class FormItem extends React.Component {
     };
 
     return (
-      <div className={classNames(itemClassName)} style={style}>
+      <Row className={classNames(itemClassName)} style={style}>
         {children}
-      </div>
+      </Row>
     );
   }
 

components/form/style/index.less

@@ -80,17 +80,20 @@ input[type="checkbox"] {
     margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
   }
 
-  > label {
-    color: @label-color;
+  > div:first-child {
     text-align: right;
     vertical-align: middle;
     padding: 7px 0;
 
-    &:after {
-      content: ":";
-      margin: 0 8px 0 2px;
-      position: relative;
-      top: -0.5px;
+    label {
+      color: @label-color;
+
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
     }
   }