From cc43bd3f124abc495abc93cac2efcfcb065dfec6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 4 Dec 2017 10:47:01 +0800
Subject: [PATCH] Improve advanced form style, close #8339

---
 .../__tests__/__snapshots__/demo.test.js.snap | 62 +++++++++----------
 components/form/demo/advanced-search.md       | 18 +++---
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 0e5ecb7820..c0f910877a 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -7,17 +7,17 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
   >
     <div
       class="ant-row"
-      style="margin-left:-20px;margin-right:-20px"
+      style="margin-left:-12px;margin-right:-12px"
     >
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -28,7 +28,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -48,13 +48,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -65,7 +65,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -85,13 +85,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -102,7 +102,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -122,13 +122,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -139,7 +139,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -159,13 +159,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -176,7 +176,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -196,13 +196,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:block"
+        style="padding-left:12px;padding-right:12px;display:block"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -213,7 +213,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -233,13 +233,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:none"
+        style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -250,7 +250,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -270,13 +270,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:none"
+        style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -287,7 +287,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -307,13 +307,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:none"
+        style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -324,7 +324,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
@@ -344,13 +344,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
       </div>
       <div
         class="ant-col-8"
-        style="padding-left:20px;padding-right:20px;display:none"
+        style="padding-left:12px;padding-right:12px;display:none"
       >
         <div
           class="ant-row ant-form-item"
         >
           <div
-            class="ant-col-5 ant-form-item-label"
+            class="ant-form-item-label"
           >
             <label
               class=""
@@ -361,7 +361,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
             </label>
           </div>
           <div
-            class="ant-col-19 ant-form-item-control-wrapper"
+            class="ant-form-item-control-wrapper"
           >
             <div
               class="ant-form-item-control "
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index 4af19ba4b1..b199e6ead8 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -47,15 +47,11 @@ class AdvancedSearchForm extends React.Component {
   getFields() {
     const count = this.state.expand ? 10 : 6;
     const { getFieldDecorator } = this.props.form;
-    const formItemLayout = {
-      labelCol: { span: 5 },
-      wrapperCol: { span: 19 },
-    };
     const children = [];
     for (let i = 0; i < 10; i++) {
       children.push(
         <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
-          <FormItem {...formItemLayout} label={`Field ${i}`}>
+          <FormItem label={`Field ${i}`}>
             {getFieldDecorator(`field-${i}`)(
               <Input placeholder="placeholder" />
             )}
@@ -72,7 +68,7 @@ class AdvancedSearchForm extends React.Component {
         className="ant-advanced-search-form"
         onSubmit={this.handleSearch}
       >
-        <Row gutter={40}>{this.getFields()}</Row>
+        <Row gutter={24}>{this.getFields()}</Row>
         <Row>
           <Col span={24} style={{ textAlign: 'right' }}>
             <Button type="primary" htmlType="submit">Search</Button>
@@ -100,12 +96,20 @@ ReactDOM.render(
 ````
 
 ````css
-#components-form-demo-advanced-search .ant-advanced-search-form {
+.ant-advanced-search-form {
   padding: 24px;
   background: #fbfbfb;
   border: 1px solid #d9d9d9;
   border-radius: 6px;
 }
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-label {
+  overflow: visible;
+}
 ````
 
 <style>