Merge branch 'master' into antd-3.0

components/form/FormItem.tsx

@@ -174,7 +174,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (validateStatus) {
       classes = classNames(
         {
-          'has-feedback': props.hasFeedback,
+          'has-feedback': props.hasFeedback || validateStatus === 'validating',
           'has-success': validateStatus === 'success',
           'has-warning': validateStatus === 'warning',
           'has-error': validateStatus === 'error',

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -2772,8 +2772,185 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+    >
+      <label
+        class=""
+        title="Success"
+      >
+        Success
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+    >
+      <div
+        class="ant-form-item-control has-feedback has-success"
+      >
+        <span
+          class="ant-calendar-picker"
+          style="width:100%;"
+        >
+          <div>
+            <input
+              class="ant-calendar-picker-input ant-input ant-input-lg"
+              placeholder="请选择日期"
+              readonly=""
+              value=""
+            />
+            <span
+              class="ant-calendar-picker-icon"
+            />
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+    >
+      <label
+        class=""
+        title="Warning"
+      >
+        Warning
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+    >
+      <div
+        class="ant-form-item-control has-feedback has-warning"
+      >
+        <span
+          class="ant-time-picker ant-time-picker-large"
+          style="width:100%;"
+        >
+          <input
+            class="ant-time-picker-input"
+            placeholder="请选择时间"
+            readonly=""
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-time-picker-icon"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+    >
+      <label
+        class=""
+        title="Error"
+      >
+        Error
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+    >
+      <div
+        class="ant-form-item-control has-feedback has-error"
+      >
+        <div
+          class="ant-select-lg ant-select ant-select-enabled"
+        >
+          <div
+            aria-autocomplete="list"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="ant-select-selection
+                      ant-select-selection--single"
+            role="combobox"
+            tabindex="0"
+          >
+            <div
+              class="ant-select-selection__rendered"
+            >
+              <div
+                class="ant-select-selection-selected-value"
+                style="display:block;opacity:1;"
+                title="Option 1"
+              >
+                Option 1
+              </div>
+            </div>
+            <span
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none;"
+              unselectable="unselectable"
+            >
+              <b />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-row ant-form-item ant-form-item-with-help"
+  >
+    <div
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+    >
+      <label
+        class=""
+        title="Validating"
+      >
+        Validating
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+    >
+      <div
+        class="ant-form-item-control has-feedback is-validating"
+      >
+        <span
+          class="ant-cascader-picker"
+          tabindex="0"
+        >
+          <span
+            class="ant-cascader-picker-label"
+          />
+          <input
+            autocomplete="off"
+            class="ant-input ant-cascader-input ant-input-lg"
+            readonly=""
+            type="text"
+            value=""
+          />
+          <i
+            class="anticon anticon-cross-circle ant-cascader-picker-clear"
+          />
+          <i
+            class="anticon anticon-down ant-cascader-picker-arrow"
+          />
+        </span>
+        <div
+          class="ant-form-explain"
+        >
+          The information is being validated...
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
   >
     <div
       class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -2786,13 +2963,13 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-19"
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
     >
       <div
         class="ant-form-item-control "
       >
         <div
-          class="ant-col-6"
+          class="ant-col-11"
         >
           <div
             class="ant-row ant-form-item ant-form-item-with-help"
@@ -2828,16 +3005,16 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col-1"
+          class="ant-col-2"
         >
-          <p
+          <span
-            class="ant-form-split"
+            style="display:inline-block;width:100%;text-align:center;"
           >
             -
-          </p>
+          </span>
         </div>
         <div
-          class="ant-col-6"
+          class="ant-col-11"
         >
           <div
             class="ant-row ant-form-item"
@@ -2867,9 +3044,76 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5"
+    >
+      <label
+        class=""
+        title="Success"
+      >
+        Success
+      </label>
+    </div>
+    <div
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12"
+    >
+      <div
+        class="ant-form-item-control has-feedback has-success"
+      >
         <div
-          class="ant-form-explain"
+          class="ant-input-number ant-input-number-lg"
-        />
+          style="width:100%;"
+        >
+          <div
+            class="ant-input-number-handler-wrap"
+          >
+            <span
+              aria-disabled="false"
+              aria-label="Increase Value"
+              class="ant-input-number-handler ant-input-number-handler-up "
+              role="button"
+              unselectable="unselectable"
+            >
+              <span
+                class="ant-input-number-handler-up-inner"
+                unselectable="unselectable"
+              />
+            </span>
+            <span
+              aria-disabled="false"
+              aria-label="Decrease Value"
+              class="ant-input-number-handler ant-input-number-handler-down "
+              role="button"
+              unselectable="unselectable"
+            >
+              <span
+                class="ant-input-number-handler-down-inner"
+                unselectable="unselectable"
+              />
+            </span>
+          </div>
+          <div
+            aria-valuemax="9007199254740991"
+            aria-valuemin="-9007199254740991"
+            class="ant-input-number-input-wrap"
+            role="spinbutton"
+          >
+            <input
+              autocomplete="off"
+              class="ant-input-number-input"
+              max="9007199254740991"
+              min="-9007199254740991"
+              step="1"
+              value=""
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>

components/form/demo/validate-static.md

@@ -22,8 +22,9 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 3. `help`: display validate message.
 
 ````jsx
-import { Form, Input, DatePicker, Col } from 'antd';
+import { Form, Input, DatePicker, Col, TimePicker, Select, Cascader, InputNumber } from 'antd';
 const FormItem = Form.Item;
+const Option = Select.Option;
 
 const formItemLayout = {
   labelCol: {
@@ -94,31 +95,75 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="inline"
+      {...formItemLayout}
-      labelCol={{
+      label="Success"
-        xs: { span: 24 },
+      hasFeedback
-        sm: { span: 5 },
+      validateStatus="success"
-      }}
-      wrapperCol={{
-        xs: { span: 24 },
-        sm: { span: 19 },
-      }}
-      help
     >
-      <Col span={6}>
+      <DatePicker style={{ width: '100%' }} />
+    </FormItem>
+
+    <FormItem
+      {...formItemLayout}
+      label="Warning"
+      hasFeedback
+      validateStatus="warning"
+    >
+      <TimePicker style={{ width: '100%' }} />
+    </FormItem>
+
+    <FormItem
+      {...formItemLayout}
+      label="Error"
+      hasFeedback
+      validateStatus="error"
+    >
+      <Select defaultValue="1">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+        <Option value="3">Option 3</Option>
+      </Select>
+    </FormItem>
+
+    <FormItem
+      {...formItemLayout}
+      label="Validating"
+      hasFeedback
+      validateStatus="validating"
+      help="The information is being validated..."
+    >
+      <Cascader defaultValue={['1']} options={[]} />
+    </FormItem>
+
+    <FormItem
+      label="inline"
+      {...formItemLayout}
+    >
+      <Col span={11}>
         <FormItem validateStatus="error" help="Please select the correct date">
           <DatePicker />
         </FormItem>
       </Col>
-      <Col span={1}>
+      <Col span={2}>
-        <p className="ant-form-split">-</p>
+        <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
+          -
+        </span>
       </Col>
-      <Col span={6}>
+      <Col span={11}>
         <FormItem>
           <DatePicker />
         </FormItem>
       </Col>
     </FormItem>
+
+    <FormItem
+      {...formItemLayout}
+      label="Success"
+      hasFeedback
+      validateStatus="success"
+    >
+      <InputNumber style={{ width: '100%' }} />
+    </FormItem>
   </Form>
 , mountNode);
 ````

components/form/style/index.less

@@ -166,7 +166,7 @@ form {
 
     .@{ant-prefix}-cascader-picker {
       &-arrow {
-        padding-right: 36px;
+        margin-right: 21px;
       }
       &-clear {
         right: 28px;
@@ -174,7 +174,8 @@ form {
     }
 
     // Fix issue: https://github.com/ant-design/ant-design/issues/4783
-    .@{ant-prefix}-calendar-picker {
+    .@{ant-prefix}-calendar-picker,
+    .@{ant-prefix}-time-picker {
       &-icon,
       &-clear {
         right: 28px;
@@ -437,6 +438,7 @@ form {
 
   // arrow and icon
   .@{ant-prefix}-calendar-picker-icon:after,
+  .@{ant-prefix}-time-picker-icon:after,
   .@{ant-prefix}-picker-icon:after,
   .@{ant-prefix}-select-arrow,
   .@{ant-prefix}-cascader-picker-arrow {
@@ -485,6 +487,7 @@ form {
 
   // arrow and icon
   .@{ant-prefix}-calendar-picker-icon:after,
+  .@{ant-prefix}-time-picker-icon:after,
   .@{ant-prefix}-picker-icon:after,
   .@{ant-prefix}-select-arrow,
   .@{ant-prefix}-cascader-picker-arrow {

components/locale-provider/__tests__/__snapshots__/demo.test.js.snap

@@ -127,7 +127,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
             class="ant-pagination-item-link"
           />
         </li>
-        <div
+        <li
           class="ant-pagination-options"
         >
           <div
@@ -162,7 +162,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
               </span>
             </div>
           </div>
-        </div>
+        </li>
       </ul>
     </div>
     <div
@@ -1614,7 +1614,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
         class="ant-pagination-item-link"
       />
     </li>
-    <div
+    <li
       class="ant-pagination-options"
     >
       <div
@@ -1649,7 +1649,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
           </span>
         </div>
       </div>
-    </div>
+    </li>
   </ul>
 </div>
 `;

components/pagination/__tests__/__snapshots__/demo.test.js.snap

@@ -161,7 +161,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
       class="ant-pagination-item-link"
     />
   </li>
-  <div
+  <li
     class="ant-pagination-options"
   >
     <div
@@ -196,7 +196,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
         </span>
       </div>
     </div>
-  </div>
+  </li>
 </ul>
 `;
 
@@ -452,7 +452,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
       class="ant-pagination-item-link"
     />
   </li>
-  <div
+  <li
     class="ant-pagination-options"
   >
     <div
@@ -465,7 +465,7 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
       />
       页
     </div>
-  </div>
+  </li>
 </ul>
 `;
 
@@ -610,7 +610,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
         class="ant-pagination-item-link"
       />
     </li>
-    <div
+    <li
       class="ant-pagination-options"
     >
       <div
@@ -655,7 +655,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
         />
         页
       </div>
-    </div>
+    </li>
   </ul>
   <ul
     class="ant-pagination mini"

components/select/style/index.less

@@ -54,6 +54,7 @@
     right: 8px;
     line-height: 1;
     margin-top: -6px;
+    color: @text-color-secondary;
     .iconfont-size-under-12px(9px);
 
     * {

components/time-picker/style/index.less

@@ -212,7 +212,7 @@
     position: absolute;
     user-select: none;
     transition: all .3s @ease-in-out;
-    width: 12px;
+    width: 14px;
     height: 12px;
     line-height: 12px;
     right: 8px;