Review fix (#8125)

* Fix style

* Fix style

* fix lint

* Fix more styles

* Fix more styles

* update snap

components/anchor/style/index.less

@@ -1,9 +1,12 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
+@anchor-border-width: 2px;
+
 .@{ant-prefix}-anchor {
   .reset-component;
   position: relative;
+  padding-left: @anchor-border-width;
   &-wrapper {
     background-color: @component-background;
   }
@@ -16,7 +19,7 @@
     &:before {
       content: ' ';
       position: relative;
-      width: 2px;
+      width: @anchor-border-width;
       height: 100%;
       display: block;
       background-color: @border-color-split;
@@ -44,7 +47,7 @@
   }
 
   &-link {
-    padding: 8px 0 8px 18px;
+    padding: 8px 0 8px 16px;
     line-height: 1;
 
     &-title {

components/button/button.tsx

@@ -155,7 +155,7 @@ export default class Button extends React.Component<ButtonProps, any> {
     const iconType = loading ? 'loading' : icon;
     const iconNode = iconType ? <Icon type={iconType} /> : null;
     const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading');
-    const kids = React.Children.map(children, child => insertSpace(child, needInserted));
+    const kids = children ? React.Children.map(children, child => insertSpace(child, needInserted)) : null;
 
     return (
       <button

components/button/style/index.less

@@ -115,8 +115,8 @@
   }
 
   &:not(&-circle):not(&-circle-outline)&-icon-only {
-    padding-left: 8px;
+    padding-left: 6px;
-    padding-right: 8px;
+    padding-right: 6px;
   }
 
   // http://stackoverflow.com/a/21281554/3040605

components/cascader/style/index.less

@@ -90,10 +90,9 @@
       height: 12px;
       margin-top: -6px;
       line-height: 12px;
-      color: @text-color-secondary;
+      color: @disabled-color;
-      .iconfont-size-under-12px(9px);
       &:before {
-        transition: transform 0.2s ease;
+        transition: transform .2s;
       }
       &&-expand {
         &:before {

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

@@ -880,7 +880,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
           >
             <i
               class="anticon anticon-user"
-              style="font-size:13px"
+              style="color:rgba(0,0,0,.25)"
             />
           </span>
           <input
@@ -913,7 +913,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
           >
             <i
               class="anticon anticon-lock"
-              style="font-size:13px"
+              style="color:rgba(0,0,0,.25)"
             />
           </span>
           <input
@@ -1137,7 +1137,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           >
             <i
               class="anticon anticon-user"
-              style="font-size:13px"
+              style="color:rgba(0,0,0,.25)"
             />
           </span>
           <input
@@ -1170,7 +1170,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
           >
             <i
               class="anticon anticon-lock"
-              style="font-size:13px"
+              style="color:rgba(0,0,0,.25)"
             />
           </span>
           <input
@@ -1636,7 +1636,6 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
   </div>
   <div
     class="ant-row ant-form-item"
-    style="margin-bottom:8px"
   >
     <div
       class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"

components/form/demo/horizontal-login.md

@@ -49,7 +49,7 @@ class HorizontalLoginForm extends React.Component {
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
-            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
+            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
           )}
         </FormItem>
         <FormItem
@@ -59,7 +59,7 @@ class HorizontalLoginForm extends React.Component {
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }],
           })(
-            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
           )}
         </FormItem>
         <FormItem>

components/form/demo/normal-login.md

@@ -34,14 +34,14 @@ class NormalLoginForm extends React.Component {
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
-            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
+            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
           )}
         </FormItem>
         <FormItem>
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }],
           })(
-            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
           )}
         </FormItem>
         <FormItem>

components/form/demo/register.md

@@ -245,7 +245,7 @@ class RegistrationForm extends React.Component {
             </Col>
           </Row>
         </FormItem>
-        <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}>
+        <FormItem {...tailFormItemLayout}>
           {getFieldDecorator('agreement', {
             valuePropName: 'checked',
           })(

components/form/style/index.less

@@ -553,12 +553,7 @@ form {
 
 .@{ant-prefix}-advanced-search-form {
   .@{form-prefix-cls}-item {
-    margin-bottom: 16px;
+    margin-bottom: 24px;
-  }
-  .@{ant-prefix}-input,
-  .@{ant-prefix}-input-group .@{ant-prefix}-input,
-  .@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
-    height: @input-height-base;
   }
 }
 

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

@@ -43,7 +43,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
         >
           <div
             class="ant-select ant-select-enabled"
-            style="width:80px"
+            style="width:90px"
           >
             <div
               aria-autocomplete="list"
@@ -85,7 +85,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
         >
           <div
             class="ant-select ant-select-enabled"
-            style="width:70px"
+            style="width:80px"
           >
             <div
               aria-autocomplete="list"
@@ -655,6 +655,7 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
   >
     <i
       class="anticon anticon-user"
+      style="color:rgba(0,0,0,.25)"
     />
   </span>
   <input

components/input/demo/addon.md

@@ -18,13 +18,13 @@ import { Input, Select, Icon } from 'antd';
 const Option = Select.Option;
 
 const selectBefore = (
-  <Select defaultValue="Http://" style={{ width: 80 }}>
+  <Select defaultValue="Http://" style={{ width: 90 }}>
     <Option value="Http://">Http://</Option>
     <Option value="Https://">Https://</Option>
   </Select>
 );
 const selectAfter = (
-  <Select defaultValue=".com" style={{ width: 70 }}>
+  <Select defaultValue=".com" style={{ width: 80 }}>
     <Option value=".com">.com</Option>
     <Option value=".jp">.jp</Option>
     <Option value=".cn">.cn</Option>

components/input/demo/presuffix.md

@@ -36,7 +36,7 @@ class App extends React.Component {
     return (
       <Input
         placeholder="Enter your username"
-        prefix={<Icon type="user" />}
+        prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
         suffix={suffix}
         value={userName}
         onChange={this.onChangeUserName}

components/input/style/mixin.less

@@ -1,7 +1,7 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@input-affix-width: 17px;
+@input-affix-width: 19px;
 
 // size mixins for input
 .input-lg() {
@@ -72,6 +72,7 @@
     height: auto;
     vertical-align: bottom;
     transition: all .3s, height 0s;
+    min-height: @input-height-base;
   }
 
   // Size

components/input/style/search-input.less

@@ -18,6 +18,9 @@
   > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    > .@{iconfont-css-prefix}-search {
+      font-size: @font-size-lg;
+    }
   }
 
   &.@{search-prefix}-enter-button > .@{ant-prefix}-input {

components/list/demo/infinite-load.md

@@ -105,7 +105,7 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
   border: 1px solid #e8e8e8;
   border-radius: 4px;
   overflow: auto;
-  padding: 8px 16px;
+  padding: 8px 24px;
   height: 300px;
 }
 .demo-loading {

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

@@ -379,26 +379,22 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
           class="ant-transfer-operation"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
-            <span>
             <i
               class="anticon anticon-left"
             />
-            </span>
           </button>
           <button
-            class="ant-btn ant-btn-primary ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
-            <span>
             <i
               class="anticon anticon-right"
             />
-            </span>
           </button>
         </div>
         <div

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

@@ -286,26 +286,22 @@ exports[`Locale Provider should display the text as locale changed 1`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -1724,26 +1720,22 @@ exports[`Locale Provider should display the text as locale changed 2`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -3162,26 +3154,22 @@ exports[`Locale Provider should display the text as locale changed 3`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -4600,26 +4588,22 @@ exports[`Locale Provider should display the text as locale changed 4`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -6038,26 +6022,22 @@ exports[`Locale Provider should display the text as locale changed 5`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -7476,26 +7456,22 @@ exports[`Locale Provider should display the text as locale changed 6`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -8914,26 +8890,22 @@ exports[`Locale Provider should display the text as locale changed 7`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -10352,26 +10324,22 @@ exports[`Locale Provider should display the text as locale changed 8`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -11790,26 +11758,22 @@ exports[`Locale Provider should display the text as locale changed 9`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -13228,26 +13192,22 @@ exports[`Locale Provider should display the text as locale changed 10`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -14666,26 +14626,22 @@ exports[`Locale Provider should display the text as locale changed 11`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -16104,26 +16060,22 @@ exports[`Locale Provider should display the text as locale changed 12`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -17542,26 +17494,22 @@ exports[`Locale Provider should display the text as locale changed 13`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -18980,26 +18928,22 @@ exports[`Locale Provider should display the text as locale changed 14`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -20418,26 +20362,22 @@ exports[`Locale Provider should display the text as locale changed 15`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -21856,26 +21796,22 @@ exports[`Locale Provider should display the text as locale changed 16`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -23294,26 +23230,22 @@ exports[`Locale Provider should display the text as locale changed 17`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -24732,26 +24664,22 @@ exports[`Locale Provider should display the text as locale changed 18`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -26170,26 +26098,22 @@ exports[`Locale Provider should display the text as locale changed 19`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -27608,26 +27532,22 @@ exports[`Locale Provider should display the text as locale changed 20`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -29046,26 +28966,22 @@ exports[`Locale Provider should display the text as locale changed 21`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -30484,26 +30400,22 @@ exports[`Locale Provider should display the text as locale changed 22`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -31922,26 +31834,22 @@ exports[`Locale Provider should display the text as locale changed 23`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -33360,26 +33268,22 @@ exports[`Locale Provider should display the text as locale changed 24`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -34798,26 +34702,22 @@ exports[`Locale Provider should display the text as locale changed 25`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -36236,26 +36136,22 @@ exports[`Locale Provider should display the text as locale changed 26`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -37674,26 +37570,22 @@ exports[`Locale Provider should display the text as locale changed 27`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -39112,26 +39004,22 @@ exports[`Locale Provider should display the text as locale changed 28`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -40550,26 +40438,22 @@ exports[`Locale Provider should display the text as locale changed 29`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -41988,26 +41872,22 @@ exports[`Locale Provider should display the text as locale changed 30`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -43426,26 +43306,22 @@ exports[`Locale Provider should display the text as locale changed 31`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div
@@ -44864,26 +44740,22 @@ exports[`Locale Provider should display the text as locale changed 32`] = `
       class="ant-transfer-operation"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-left"
         />
-        </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-sm"
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
         disabled=""
         type="button"
       >
-        <span>
         <i
           class="anticon anticon-right"
         />
-        </span>
       </button>
     </div>
     <div

components/mention/demo/avatar.md

@@ -13,10 +13,10 @@ title:
 
 ## en-US
 
-Customize suggestions
+Customize suggestions.
 
 ````jsx
-import { Mention } from 'antd';
+import { Mention, Avatar } from 'antd';
 const Nav = Mention.Nav;
 
 const webFrameworks = [
@@ -41,10 +41,12 @@ class CustomNavMention extends React.Component {
         data={suggestion}
         disabled={suggestion.disabled}
       >
-        <span>
+        <Avatar
-          <img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5, float: 'left' }} src={suggestion.icon} />
+          src={suggestion.icon}
+          size="small"
+          style={{ width: 14, height: 14, marginRight: 8, top: 2, position: 'relative' }}
+        />
         {suggestion.name} - {suggestion.type}
-        </span>
       </Nav>
     ));
     this.setState({ suggestions });

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

@@ -69,7 +69,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
   aria-activedescendant=""
   class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
   role="menu"
-  style="width:240px"
+  style="width:256px"
   tabindex="0"
 >
   <li
@@ -213,7 +213,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
 
 exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
 <div
-  style="width:240px"
+  style="width:256px"
 >
   <button
     class="ant-btn ant-btn-primary"
@@ -363,7 +363,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
   aria-activedescendant=""
   class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
   role="menu"
-  style="width:240px"
+  style="width:256px"
   tabindex="0"
 >
   <li
@@ -507,7 +507,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
     aria-activedescendant=""
     class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
     role="menu"
-    style="width:240px"
+    style="width:256px"
     tabindex="0"
   >
     <li
@@ -641,7 +641,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
     aria-activedescendant=""
     class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
     role="menu"
-    style="width:240px"
+    style="width:256px"
     tabindex="0"
   >
     <li
@@ -761,7 +761,7 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
   aria-activedescendant=""
   class="ant-menu ant-menu-vertical ant-menu-light ant-menu-root"
   role="menu"
-  style="width:240px"
+  style="width:256px"
   tabindex="0"
 >
   <li

components/menu/demo/inline-collapsed.md

@@ -32,7 +32,7 @@ class App extends React.Component {
   }
   render() {
     return (
-      <div style={{ width: 240 }}>
+      <div style={{ width: 256 }}>
         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
           <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
         </Button>

components/menu/demo/inline.md

@@ -26,7 +26,7 @@ class Sider extends React.Component {
     return (
       <Menu
         onClick={this.handleClick}
-        style={{ width: 240 }}
+        style={{ width: 256 }}
         defaultSelectedKeys={['1']}
         defaultOpenKeys={['sub1']}
         mode="inline"

components/menu/demo/sider-current.md

@@ -39,7 +39,7 @@ class Sider extends React.Component {
         mode="inline"
         openKeys={this.state.openKeys}
         onOpenChange={this.onOpenChange}
-        style={{ width: 240 }}
+        style={{ width: 256 }}
       >
         <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
           <Menu.Item key="1">Option 1</Menu.Item>

components/menu/demo/switch-mode.md

@@ -41,7 +41,7 @@ class Sider extends React.Component {
         <br />
         <br />
         <Menu
-          style={{ width: 240 }}
+          style={{ width: 256 }}
           defaultSelectedKeys={['1']}
           defaultOpenKeys={['sub1']}
           mode={this.state.mode}

components/menu/demo/theme.md

@@ -47,7 +47,7 @@ class Sider extends React.Component {
         <Menu
           theme={this.state.theme}
           onClick={this.handleClick}
-          style={{ width: 240 }}
+          style={{ width: 256 }}
           defaultOpenKeys={['sub1']}
           selectedKeys={[this.state.current]}
           mode="inline"

components/menu/demo/vertical.md

@@ -23,7 +23,7 @@ function handleClick(e) {
 }
 
 ReactDOM.render(
-  <Menu onClick={handleClick} style={{ width: 240 }} mode="vertical">
+  <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
     <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
       <MenuItemGroup title="Item 1">
         <Menu.Item key="1">Option 1</Menu.Item>

components/menu/style/index.less

@@ -198,7 +198,7 @@
     white-space: nowrap;
     .@{iconfont-css-prefix} {
       min-width: 14px;
-      margin-right: 8px;
+      margin-right: 10px;
       transition: font-size .15s @ease-out, margin .3s @ease-in-out;
       + span {
         transition: opacity .3s @ease-in-out, width .3s @ease-in-out;

components/modal/style/confirm.less

@@ -12,7 +12,7 @@
   }
 
   .@{ant-prefix}-modal-body {
-    padding: 24px;
+    padding: 32px 32px 24px;
   }
 
   &-body-wrapper {
@@ -27,16 +27,16 @@
     }
 
     .@{confirm-prefix-cls}-content {
-      margin-left: 42px;
+      margin-left: 38px;
       font-size: @font-size-base;
       color: @text-color;
       margin-top: 8px;
     }
 
     > .@{iconfont-css-prefix} {
-      font-size: 24px;
+      font-size: 22px;
       margin-right: 16px;
-      padding: 0 1px;
+      margin-top: 1px;
       float: left;
     }
   }

components/modal/style/modal.less

@@ -60,9 +60,9 @@
       text-align: center;
       text-transform: none;
       text-rendering: auto;
-      width: 48px;
+      width: 56px;
-      height: 48px;
+      height: 56px;
-      line-height: 48px;
+      line-height: 56px;
       font-size: @font-size-lg;
 
       &:before {
@@ -80,7 +80,7 @@
   }
 
   &-header {
-    padding: 13px 24px;
+    padding: 16px 24px;
     border-radius: @border-radius-base @border-radius-base 0 0;
     background: @component-background;
     color: @text-color;

components/notification/style/index.less

@@ -109,7 +109,11 @@
       top: 16px;
       color: @text-color-secondary;
       outline: none;
+
+      a&:focus {
         text-decoration: none;
+      }
+
       &:hover {
         color: #404040;
       }

components/pagination/style/index.less

@@ -318,7 +318,7 @@
   }
 
   &.mini &-options {
-    margin-left: 8px;
+    margin-left: 2px;
     &-quick-jumper {
       height: @pagination-item-size-sm;
       line-height: @pagination-item-size-sm;

components/popover/style/index.less

@@ -73,7 +73,7 @@
   }
 
   &-message {
-    padding: 8px 0 @padding-md;
+    padding: 4px 0 12px;
     font-size: @font-size-base;
     color: @popover-color;
     > .@{iconfont-css-prefix} {
@@ -88,7 +88,7 @@
 
   &-buttons {
     text-align: right;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
     button {
       margin-left: 8px;
     }

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

@@ -32,7 +32,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
           stroke="#108ee9"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -72,7 +72,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
           stroke="#ff5500"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -114,7 +114,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
           stroke="#87d068"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -161,7 +161,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
           stroke="#108ee9"
           stroke-linecap="round"
           stroke-width="0"
-          style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -226,7 +226,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
           stroke="#108ee9"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -266,7 +266,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
           stroke="#ff5500"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -308,7 +308,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
           stroke="#87d068"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -354,7 +354,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
         stroke="#108ee9"
         stroke-linecap="round"
         stroke-width="6"
-        style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+        style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
       />
     </svg>
     <span
@@ -446,7 +446,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
           stroke="#108ee9"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span
@@ -486,7 +486,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
           stroke="#87d068"
           stroke-linecap="round"
           stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
+          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
         />
       </svg>
       <span

components/progress/style/index.less

@@ -24,8 +24,8 @@
     margin-right: 0;
     padding-right: 0;
     .@{progress-prefix-cls}-show-info & {
-      padding-right: 2.75em;
+      padding-right: ~"calc(2em + 8px)";
-      margin-right: -2.75em;
+      margin-right: ~"calc(-2em - 8px)";
     }
   }
 
@@ -57,10 +57,11 @@
     width: 2em;
     text-align: left;
     font-size: 1em;
-    margin-left: 0.75em;
+    margin-left: 8px;
     vertical-align: middle;
     display: inline-block;
     color: @text-color-secondary;
+    line-height: 1;
     .@{iconfont-css-prefix} {
       font-size: @font-size-base;
     }
@@ -128,27 +129,18 @@
     }
   }
 
-  &-circle &-status-exception {
+  &-circle&-status-exception {
     .@{progress-prefix-cls}-text {
       color: @error-color;
     }
   }
-  &-circle &-status-success {
+  &-circle&-status-success {
     .@{progress-prefix-cls}-text {
       color: @success-color;
     }
   }
 }
 
-@keyframes ~"@{ant-prefix}-progress-appear" {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes ~"@{ant-prefix}-progress-active" {
   0% {
     opacity: 0.1;

components/select/style/index.less

@@ -109,7 +109,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 100%;
-      padding-right: 14px;
+      padding-right: 20px;
     }
   }
 

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

@@ -152,7 +152,8 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
   class="icon-wrapper"
 >
   <i
-    class="anticon anticon-frown-o anticon-highlight"
+    class="anticon anticon-frown-o"
+    style="color:rgba(0, 0, 0, .45)"
   />
   <div
     class="ant-slider"
@@ -183,6 +184,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
   </div>
   <i
     class="anticon anticon-smile-o"
+    style="color:"
   />
 </div>
 `;

components/slider/demo/icon-slider.md

@@ -17,36 +17,29 @@ You can add an icon beside the slider to make it meaningful.
 import { Slider, Icon } from 'antd';
 
 class IconSlider extends React.Component {
-  constructor(props) {
+  state = {
-    super(props);
+    value: 0,
-    const { max, min } = props;
-    const mid = ((max - min) / 2).toFixed(5);
-    this.state = {
-      preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
-      nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
-      mid,
-      sliderValue: this.props.value,
-    };
   }
-  handleChange = (v) => {
+  handleChange = (value) => {
-    this.setState({
+    this.setState({ value });
-      preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
-      nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
-      sliderValue: v,
-    });
   }
   render() {
+    const { max, min } = this.props;
+    const { value } = this.state;
+    const mid = ((max - min) / 2).toFixed(5);
+    const preColor = value >= mid ? '' : 'rgba(0, 0, 0, .45)';
+    const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
     return (
       <div className="icon-wrapper">
-        <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
+        <Icon style={{ color: preColor }} type="frown-o" />
-        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
+        <Slider {...this.props} onChange={this.handleChange} value={value} />
-        <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
+        <Icon style={{ color: nextColor }} type="smile-o" />
       </div>
     );
   }
 }
 
-ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-o']} />, mountNode);
+ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
 ````
 
 ````css
@@ -57,12 +50,12 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
 
 .icon-wrapper .anticon {
   position: absolute;
-  top: -3px;
+  top: -2px;
   width: 16px;
   height: 16px;
   line-height: 1;
   font-size: 16px;
-  color: @disabled-color;
+  color: rgba(0, 0, 0, .25);
 }
 
 .icon-wrapper .anticon:first-child {
@@ -72,8 +65,4 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
 .icon-wrapper .anticon:last-child {
   right: 0;
 }
-
-.anticon.anticon-highlight {
-  color: #666;
-}
 ````

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

@@ -16,22 +16,13 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
-<div>
+<div
-  <div
   class="ant-spin ant-spin-spinning"
-  >
+>
   <i
-      class="anticon anticon-spin anticon-loading-3-quarters"
+    class="anticon anticon-spin anticon-loading"
     style="font-size:24px"
   />
-  </div>
-  <div
-    class="ant-spin ant-spin-spinning"
-  >
-    <div
-      class="square-loader"
-    />
-  </div>
 </div>
 `;
 
@@ -46,7 +37,6 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
       <div
         class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
         data-show="true"
-        style="margin-bottom:16px"
       >
         <span
           class="ant-alert-message"
@@ -61,6 +51,9 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    style="margin-top:16px"
+  >
     Loading state：
     <span
       class="ant-switch"
@@ -70,6 +63,7 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
         class="ant-switch-inner"
       />
     </span>
+  </div>
 </div>
 `;
 

components/spin/demo/custom-indicator.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 6
 title:
   zh-CN: 自定义指示符
   en-US: Custom spinning indicator
@@ -16,41 +16,7 @@ Use custom loading indicator.
 ````jsx
 import { Spin, Icon } from 'antd';
 
-const antIcon = <Icon type="loading-3-quarters" style={{ fontSize: 24 }} spin />;
+const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
-const squareLoader = <div className="square-loader" />;
 
-ReactDOM.render(
+ReactDOM.render(<Spin indicator={antIcon} />, mountNode);
-  <div>
-    <Spin indicator={antIcon} />
-    <Spin indicator={squareLoader} />
-  </div>, mountNode);
 ````
-
-```css
-.square-loader {
-  width: 24px;
-  height: 24px;
-  background-color: #108ee9;
-  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
-  animation: sk-rotateplane 1.2s infinite ease-in-out;
-}
-
-@-webkit-keyframes sk-rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
-}
-
-@keyframes sk-rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-  } 50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-  } 100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
-}
-```

components/spin/demo/delayAndDebounce.md

@@ -27,14 +27,15 @@ class Card extends React.Component {
         message="Alert message title"
         description="Further details about the context of this alert."
         type="info"
-        style={{ marginBottom: 16 }}
       />
     );
     return (
       <div>
         <Spin spinning={this.state.loading} delay={500} >{container}</Spin>
+        <div style={{ marginTop: 16 }}>
           Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
         </div>
+      </div>
     );
   }
 }

components/spin/style/index.less

@@ -42,6 +42,7 @@
         top: 50%;
         width: 100%;
         padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
+        text-shadow: 0 1px 2px #fff;
       }
       &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
         margin-top: -@spin-dot-size / 2 - 10px;

components/steps/style/vertical.less

@@ -26,7 +26,7 @@
     top: 0;
     height: 100%;
     width: 1px;
-    padding: 36px 0 4px;
+    padding: @steps-icon-size + 6px 0 6px;
     &:after {
       height: 100%;
       width: 1px;
@@ -48,7 +48,7 @@
       position: absolute;
       left: 12px;
       top: 0;
-      padding: 28px 0 4px;
+      padding: @steps-small-icon-size + 6px 0 6px;
     }
     .@{steps-prefix-cls}-item-title {
       line-height: @steps-small-icon-size;

components/style/mixins/iconfont.less

@@ -32,6 +32,6 @@
   font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
   transform: scale(@font-scale) rotate(@rotate);
   :root & {
-    font-size: @font-size-base; // reset IE9 and above
+    font-size: @font-size-sm; // reset IE9 and above
   }
 }

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

@@ -294,7 +294,10 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
     <span
       class="ant-tag-text"
     >
-      + New Tag
+      <i
+        class="anticon anticon-plus"
+      />
+       New Tag
     </span>
   </div>
 </div>

components/tag/demo/control.md

@@ -15,7 +15,7 @@ Generating a set of Tags by array, you can add and remove dynamically.
 It's based on `afterClose` event, which will be triggered while the close animation end.
 
 ````jsx
-import { Tag, Input, Tooltip } from 'antd';
+import { Tag, Input, Tooltip, Icon } from 'antd';
 
 class EditableTagGroup extends React.Component {
   state = {
@@ -85,7 +85,7 @@ class EditableTagGroup extends React.Component {
             onClick={this.showInput}
             style={{ background: '#fff', borderStyle: 'dashed' }}
           >
-            + New Tag
+            <Icon type="plus" /> New Tag
           </Tag>
         )}
       </div>

components/tag/style/index.less

@@ -39,11 +39,11 @@
 
   .@{iconfont-css-prefix}-cross {
     .iconfont-size-under-12px(10px);
-    position: relative;
-    top: 1px;
     cursor: pointer;
     margin-left: 3px;
-    transition: all 0.3s @ease-out;
+    transition: all .3s;
+    color: @text-color-secondary;
+    font-weight: bold;
 
     &:hover {
       color: @heading-color;

components/timeline/style/index.less

@@ -61,12 +61,13 @@
       border-radius: 0;
       padding: 3px 0;
       transform: translate(-50%, -50%);
-      left: 6px;
+      top: 5px;
+      left: 5px;
       width: auto;
     }
 
     &-content {
-      padding: 0 0 0 24px;
+      padding: 0 0 0 18px;
       position: relative;
       top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
     }

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

@@ -90,10 +90,10 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
+      <span>
         to left
       </span>
     </button>
@@ -102,11 +102,11 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
       disabled=""
       type="button"
     >
-      <span>
-        to right
       <i
         class="anticon anticon-right"
       />
+      <span>
+        to right
       </span>
     </button>
   </div>
@@ -303,26 +303,22 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div
@@ -454,26 +450,22 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div
@@ -578,26 +570,22 @@ exports[`renders ./components/transfer/demo/large-data.md correctly 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div
@@ -720,26 +708,22 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div

components/transfer/__tests__/__snapshots__/index.test.js.snap

@@ -97,25 +97,21 @@ exports[`Transfer should render correctly 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div
@@ -264,26 +260,22 @@ exports[`Transfer should show sorted targetkey 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-left"
       />
-      </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
-      <span>
       <i
         class="anticon anticon-right"
       />
-      </span>
     </button>
   </div>
   <div

components/transfer/operation.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Button from '../button';
-import Icon from '../icon';
 
 function noop() {
 }
@@ -15,40 +14,37 @@ export interface TransferOperationProps {
   rightActive?: boolean;
 }
 
-export default class TransferOperation extends React.Component<TransferOperationProps, any> {
+export default (props: TransferOperationProps) => {
-  static defaultProps = {
-    leftArrowText: '',
-    rightArrowText: '',
-    moveToLeft: noop,
-    moveToRight: noop,
-  };
-
-  render() {
   const {
-      moveToLeft,
+    moveToLeft = noop,
-      moveToRight,
+    moveToRight = noop,
-      leftArrowText,
+    leftArrowText = '',
-      rightArrowText,
+    rightArrowText = '',
     leftActive,
     rightActive,
     className,
-    } = this.props;
+  } = props;
 
-    const moveToLeftButton = (
-      <Button type="primary" size="small" disabled={!leftActive} onClick={moveToLeft}>
-        {<span><Icon type="left" />{leftArrowText}</span>}
-      </Button>
-    );
-    const moveToRightButton = (
-      <Button type="primary" size="small" disabled={!rightActive} onClick={moveToRight}>
-        {<span>{rightArrowText}<Icon type="right" /></span>}
-      </Button>
-    );
   return (
     <div className={className}>
-        {moveToLeftButton}
+      <Button
-        {moveToRightButton}
+        type="primary"
+        size="small"
+        disabled={!leftActive}
+        onClick={moveToLeft}
+        icon="left"
+      >
+        {leftArrowText}
+      </Button>
+      <Button
+        type="primary"
+        size="small"
+        disabled={!rightActive}
+        onClick={moveToRight}
+        icon="right"
+      >
+        {rightArrowText}
+      </Button>
     </div>
   );
-  }
+};
-}

components/transfer/style/index.less

@@ -154,7 +154,7 @@
       }
 
       .@{iconfont-css-prefix} {
-        .iconfont-size-under-12px(10px);
+        font-size: 12px;
       }
     }
   }

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

@@ -158,7 +158,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
                 class="ant-tree-title"
               >
                 <span
-                  style="color:#08c"
+                  style="color:#1890ff"
                 >
                   sss
                 </span>

components/tree/demo/basic.md

@@ -40,7 +40,7 @@ class Demo extends React.Component {
             <TreeNode title="leaf" key="0-0-0-1" />
           </TreeNode>
           <TreeNode title="parent 1-1" key="0-0-1">
-            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
+            <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
           </TreeNode>
         </TreeNode>
       </Tree>

components/tree/style/index.less

@@ -108,7 +108,7 @@
         transition: all .3s;
         &:after {
           display: inline-block;
-          .iconfont-font("\e6ae");
+          .iconfont-font("\E64D");
           animation: loadingCircle 1s infinite linear;
           color: @primary-color;
         }

site/theme/static/demo.less

@@ -67,7 +67,7 @@
 
   &-demo {
     border-bottom: 1px solid @border-color-split;
-    padding: 42px 20px 50px;
+    padding: 42px 24px 50px;
   }
 
   iframe {