fix #1927 addon support Select (#2070)

components/form/demo/input-group.md

@@ -11,6 +11,13 @@ const FormItem = Form.Item;
 const InputGroup = Input.Group;
 const Option = Select.Option;
 
+const selectAfter = (<Select defaultValue=".com" style={{ width: 70 }}>
+  <Option value=".com">.com</Option>
+  <Option value=".jp">.jp</Option>
+  <Option value=".cn">.cn</Option>
+  <Option value=".org">.org</Option>
+</Select>);
+
 ReactDOM.render(
   <Form horizontal>
     <FormItem
@@ -35,17 +42,7 @@ ReactDOM.render(
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}
     >
-      <InputGroup>
-        <Input id="site4" placeholder="www.mysite" />
-        <div className="ant-input-group-wrap">
-          <Select defaultValue=".com" style={{ width: 70 }}>
-            <Option value=".com">.com</Option>
-            <Option value=".jp">.jp</Option>
-            <Option value=".cn">.cn</Option>
-            <Option value=".org">.org</Option>
-          </Select>
-        </div>
-      </InputGroup>
+      <Input addonAfter={selectAfter} placeholder="www.mysite" id="site4" />
     </FormItem>
 
     <FormItem

components/input/demo/add-on.md

@@ -6,10 +6,27 @@ title: 前置/后置标签
 用于配置一些固定组合。
 
 ````jsx
-import { Input } from 'antd';
+import { Input, Select } from 'antd';
+const Option = Select.Option;
+
+const selectBefore = (<Select defaultValue="Http://" style={{ width: 80 }}>
+  <Option value="Http://">Http://</Option>
+  <Option value="Https://">Https://</Option>
+</Select>);
+const selectAfter = (<Select defaultValue=".com" style={{ width: 70 }}>
+  <Option value=".com">.com</Option>
+  <Option value=".jp">.jp</Option>
+  <Option value=".cn">.cn</Option>
+  <Option value=".org">.org</Option>
+</Select>);
 
 ReactDOM.render(
-  <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+  <div>
+    <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
+    <div style={{ marginTop: 8 }}>
+      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
+    </div>
+  </div>
 , mountNode);
 ````
 

components/input/demo/group.md

@@ -3,27 +3,15 @@ order: 3
 title: 输入框组合
 ---
 
-各类输入框的组合展现。
+输入框的组合展现。
 
 ````jsx
-import { Input, Select, Col } from 'antd';
+import { Input, Col } from 'antd';
 const InputGroup = Input.Group;
-const Option = Select.Option;
 
 ReactDOM.render(
   <div>
     <InputGroup size="large">
-      <Input placeholder="www.mysite" />
-      <div className="ant-input-group-wrap">
-        <Select defaultValue=".com" style={{ width: 70 }}>
-          <Option value=".com">.com</Option>
-          <Option value=".jp">.jp</Option>
-          <Option value=".cn">.cn</Option>
-          <Option value=".org">.org</Option>
-        </Select>
-      </div>
-    </InputGroup>
-    <InputGroup size="large" style={{ marginTop: 8 }}>
       <Col span="4">
         <Input defaultValue="0571" />
       </Col>

components/input/style/mixin.less

@@ -158,6 +158,16 @@
     background-color: #eee;
     border: 1px solid @input-border-color;
     border-radius: @border-radius-base;
+
+    // Reset Select's style in addon
+    .ant-select {
+      margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
+
+      .ant-select-selection {
+        background-color: inherit;
+        border: 0;
+      }
+    }
   }
 
   // Reset rounded corners
@@ -166,6 +176,12 @@
   &-addon:first-child {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
+
+    // Reset Select's style in addon
+    .ant-select .ant-select-selection {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
   }
 
   &-addon:first-child {
@@ -179,6 +195,12 @@
   &-addon:last-child {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
+
+    // Reset Select's style in addon
+    .ant-select .ant-select-selection {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
   }
 
   // Sizing options