fix: FormItem should support long help message #785

components/form/FormItem.jsx

@@ -108,6 +108,7 @@ class FormItem extends React.Component {
     const itemClassName = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-compact`]: this._isCompact(props.children),
+      [`${prefixCls}-item-with-help`]: !!props.help,
     };
 
     return (

components/form/demo/mix.md

@@ -120,13 +120,13 @@ const Demo = React.createClass({
         <FormItem
           label="logo图："
           labelCol={{span: 8}}
-          wrapperCol={{span: 16}}>
+          wrapperCol={{span: 16}}
+          help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长">
           <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
             <Button type="ghost">
               <Icon type="upload" /> 点击上传
             </Button>
           </Upload>
-          <p>仅支持上传一张。</p>
         </FormItem>
         <Row>
           <Col span="16" offset="8">

style/components/form.less

@@ -71,6 +71,10 @@ input[type="checkbox"] {
   margin-bottom: @form-item-margin-bottom;
   color: #666;
 
+  &.@{css-prefix}form-item-with-help {
+    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+  }
+
   > label {
     color: @label-color;
     text-align: right;
@@ -104,10 +108,7 @@ input[type="checkbox"] {
 }
 
 .@{css-prefix}form-explain {
-  position: absolute;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  bottom: -@line-height-computed;
+  float: left;
 }