Review fix (#8125)

* Fix style * Fix style * fix lint * Fix more styles * Fix more styles * update snap
2024-12-02 12:09:14 +08:00 · 2017-11-06 21:28:51 +08:00 · 2017-11-06 21:28:51 +08:00 · bdceb5f083
commit bdceb5f083
parent 2f0197599f
54 changed files with 498 additions and 702 deletions
--- a/components/anchor/style/index.less
+++ b/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 {
--- a/components/button/button.tsx
+++ b/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
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -115,8 +115,8 @@
  }

  &:not(&-circle):not(&-circle-outline)&-icon-only {
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 6px;
+    padding-right: 6px;
  }

  // http://stackoverflow.com/a/21281554/3040605
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -90,10 +90,9 @@
      height: 12px;
      margin-top: -6px;
      line-height: 12px;
-      color: @text-color-secondary;
-      .iconfont-size-under-12px(9px);
+      color: @disabled-color;
      &:before {
-        transition: transform 0.2s ease;
+        transition: transform .2s;
      }
      &&-expand {
        &:before {
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/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"
--- a/components/form/demo/horizontal-login.md
+++ b/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>
--- a/components/form/demo/normal-login.md
+++ b/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>
--- a/components/form/demo/register.md
+++ b/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',
          })(
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@ -553,12 +553,7 @@ form {

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

--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/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
--- a/components/input/demo/addon.md
+++ b/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>
--- a/components/input/demo/presuffix.md
+++ b/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}
--- a/components/input/style/mixin.less
+++ b/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
--- a/components/input/style/search-input.less
+++ b/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 {
--- a/components/list/demo/infinite-load.md
+++ b/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 {
--- a/components/locale-provider/tests/snapshots/demo.test.js.snap
+++ b/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>
+            <i
+              class="anticon anticon-left"
+            />
          </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>
+            <i
+              class="anticon anticon-right"
+            />
          </button>
        </div>
        <div
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/mention/demo/avatar.md
+++ b/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>
-          <img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5, float: 'left' }} src={suggestion.icon} />
-          {suggestion.name} - {suggestion.type}
-        </span>
+        <Avatar
+          src={suggestion.icon}
+          size="small"
+          style={{ width: 14, height: 14, marginRight: 8, top: 2, position: 'relative' }}
+        />
+        {suggestion.name} - {suggestion.type}
      </Nav>
    ));
    this.setState({ suggestions });
--- a/components/menu/tests/snapshots/demo.test.js.snap
+++ b/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
--- a/components/menu/demo/inline-collapsed.md
+++ b/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>
--- a/components/menu/demo/inline.md
+++ b/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"
--- a/components/menu/demo/sider-current.md
+++ b/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>
--- a/components/menu/demo/switch-mode.md
+++ b/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}
--- a/components/menu/demo/theme.md
+++ b/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"
--- a/components/menu/demo/vertical.md
+++ b/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>
--- a/components/menu/style/index.less
+++ b/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;
--- a/components/modal/style/confirm.less
+++ b/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;
    }
  }
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@ -60,9 +60,9 @@
      text-align: center;
      text-transform: none;
      text-rendering: auto;
-      width: 48px;
-      height: 48px;
-      line-height: 48px;
+      width: 56px;
+      height: 56px;
+      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;
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@ -109,7 +109,11 @@
      top: 16px;
      color: @text-color-secondary;
      outline: none;
-      text-decoration: none;
+
+      a&:focus {
+        text-decoration: none;
+      }
+
      &:hover {
        color: #404040;
      }
--- a/components/pagination/style/index.less
+++ b/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;
--- a/components/popover/style/index.less
+++ b/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;
    }
--- a/components/progress/tests/snapshots/demo.test.js.snap
+++ b/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
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -24,8 +24,8 @@
    margin-right: 0;
    padding-right: 0;
    .@{progress-prefix-cls}-show-info & {
-      padding-right: 2.75em;
-      margin-right: -2.75em;
+      padding-right: ~"calc(2em + 8px)";
+      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;
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -109,7 +109,7 @@
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
-      padding-right: 14px;
+      padding-right: 20px;
    }
  }

--- a/components/slider/tests/snapshots/demo.test.js.snap
+++ b/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>
 `;
--- a/components/slider/demo/icon-slider.md
+++ b/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) {
-    super(props);
-    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,
-    };
+  state = {
+    value: 0,
  }
-  handleChange = (v) => {
-    this.setState({
-      preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
-      nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
-      sliderValue: v,
-    });
+  handleChange = (value) => {
+    this.setState({ value });
  }
  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]} />
-        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
-        <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
+        <Icon style={{ color: preColor }} type="frown-o" />
+        <Slider {...this.props} onChange={this.handleChange} value={value} />
+        <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;
-}
 ````
--- a/components/spin/tests/snapshots/demo.test.js.snap
+++ b/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
-    class="ant-spin ant-spin-spinning"
-  >
-    <i
-      class="anticon anticon-spin anticon-loading-3-quarters"
-      style="font-size:24px"
-    />
-  </div>
-  <div
-    class="ant-spin ant-spin-spinning"
-  >
-    <div
-      class="square-loader"
-    />
-  </div>
+<div
+  class="ant-spin ant-spin-spinning"
+>
+  <i
+    class="anticon anticon-spin anticon-loading"
+    style="font-size:24px"
+  />
 </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,15 +51,19 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
      </div>
    </div>
  </div>
-  Loading state：
-  <span
-    class="ant-switch"
-    tabindex="0"
+  <div
+    style="margin-top:16px"
  >
+    Loading state：
    <span
-      class="ant-switch-inner"
-    />
-  </span>
+      class="ant-switch"
+      tabindex="0"
+    >
+      <span
+        class="ant-switch-inner"
+      />
+    </span>
+  </div>
 </div>
 `;

--- a/components/spin/demo/custom-indicator.md
+++ b/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 squareLoader = <div className="square-loader" />;
+const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

-ReactDOM.render(
-  <div>
-    <Spin indicator={antIcon} />
-    <Spin indicator={squareLoader} />
-  </div>, mountNode);
+ReactDOM.render(<Spin indicator={antIcon} />, 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);
-  }
-}
-```
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@ -27,13 +27,14 @@ 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>
-        Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
+        <div style={{ marginTop: 16 }}>
+          Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
+        </div>
      </div>
    );
  }
--- a/components/spin/style/index.less
+++ b/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;
--- a/components/steps/style/vertical.less
+++ b/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;
--- a/components/style/mixins/iconfont.less
+++ b/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
  }
 }
--- a/components/tag/tests/snapshots/demo.test.js.snap
+++ b/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>
--- a/components/tag/demo/control.md
+++ b/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>
--- a/components/tag/style/index.less
+++ b/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;
--- a/components/timeline/style/index.less
+++ b/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;
    }
--- a/components/transfer/tests/snapshots/demo.test.js.snap
+++ b/components/transfer/tests/snapshots/demo.test.js.snap
@ -90,10 +90,10 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
      disabled=""
      type="button"
    >
+      <i
+        class="anticon anticon-left"
+      />
      <span>
-        <i
-          class="anticon anticon-left"
-        />
        to left
      </span>
    </button>
@ -102,11 +102,11 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
      disabled=""
      type="button"
    >
+      <i
+        class="anticon anticon-right"
+      />
      <span>
        to right
-        <i
-          class="anticon anticon-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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </button>
  </div>
  <div
--- a/components/transfer/tests/snapshots/index.test.js.snap
+++ b/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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </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>
+      <i
+        class="anticon anticon-left"
+      />
    </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>
+      <i
+        class="anticon anticon-right"
+      />
    </button>
  </div>
  <div
--- a/components/transfer/operation.tsx
+++ b/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> {
-  static defaultProps = {
-    leftArrowText: '',
-    rightArrowText: '',
-    moveToLeft: noop,
-    moveToRight: noop,
-  };
+export default (props: TransferOperationProps) => {
+  const {
+    moveToLeft = noop,
+    moveToRight = noop,
+    leftArrowText = '',
+    rightArrowText = '',
+    leftActive,
+    rightActive,
+    className,
+  } = props;

-  render() {
-    const {
-      moveToLeft,
-      moveToRight,
-      leftArrowText,
-      rightArrowText,
-      leftActive,
-      rightActive,
-      className,
-    } = this.props;
-
-    const moveToLeftButton = (
-      <Button type="primary" size="small" disabled={!leftActive} onClick={moveToLeft}>
-        {<span><Icon type="left" />{leftArrowText}</span>}
+  return (
+    <div className={className}>
+      <Button
+        type="primary"
+        size="small"
+        disabled={!leftActive}
+        onClick={moveToLeft}
+        icon="left"
+      >
+        {leftArrowText}
      </Button>
-    );
-    const moveToRightButton = (
-      <Button type="primary" size="small" disabled={!rightActive} onClick={moveToRight}>
-        {<span>{rightArrowText}<Icon type="right" /></span>}
+      <Button
+        type="primary"
+        size="small"
+        disabled={!rightActive}
+        onClick={moveToRight}
+        icon="right"
+      >
+        {rightArrowText}
      </Button>
-    );
-    return (
-      <div className={className}>
-        {moveToLeftButton}
-        {moveToRightButton}
-      </div>
-    );
-  }
-}
+    </div>
+  );
+};
--- a/components/transfer/style/index.less
+++ b/components/transfer/style/index.less
@ -154,7 +154,7 @@
      }

      .@{iconfont-css-prefix} {
-        .iconfont-size-under-12px(10px);
+        font-size: 12px;
      }
    }
  }
--- a/components/tree/tests/snapshots/demo.test.js.snap
+++ b/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>
--- a/components/tree/demo/basic.md
+++ b/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>
--- a/components/tree/style/index.less
+++ b/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;
        }
--- a/site/theme/static/demo.less
+++ b/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 {