CHANGELOG - v2.6

add attribute compact for InputGroup (#4309 )
* add attribute `compact` for InputGroup * improve
2026-02-15 05:49:19 +08:00 · 2017-01-02 02:14:40 +08:00 · 2017-01-02 00:12:41 +08:00 · 2017-01-01 22:20:06 +08:00 · 2017-01-01 17:39:27 +08:00 · 2017-01-01 17:20:08 +08:00
134 changed files with 4380 additions and 426 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,4 @@ components/**/*.jsx
 /.vscode/
 /coverage
 !components/**/__tests__/*
+yarn.lock
--- a/.hound.yml
+++ b/.hound.yml
@@ -1,3 +0,0 @@
-eslint:
-  enabled: true
-  config_file: .eslintrc.js
--- a/.lesshintrc
+++ b/.lesshintrc
@@ -16,6 +16,7 @@
    "components/style/core/base.less",
    "components/style/core/iconfont.less",
    "components/style/core/normalize.less",
-    "components/style/mixins/compatibility.less"
+    "components/style/mixins/compatibility.less",
+    "components/style/color/*"
  ]
 }
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -9,17 +9,44 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi

 ---

+## 2.6.0
+
+`2017-1-2`
+
+- Brand new color system. [pull/4426](https://github.com/ant-design/ant-design/pull/4426)
+  - Brand new color palattes.
+  - Brand new color algorithm replacing the tint/shade system.
+  - Change default font color.
+- Add Grid playground demo. [commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246)
+- Add Layout component. [#3534](https://github.com/ant-design/ant-design/issues/3534)
+- Input
+  - Support prefix and suffix. [#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi)
+  - InputGroup support compact display mode. [pull/4309](https://github.com/ant-design/ant-design/pull/4309)
+- Spin support delayed display. [#4306](https://github.com/ant-design/ant-design/issues/4306)
+- Fix the dislocation problem of Pagination in low resolution. [#4349](https://github.com/ant-design/ant-design/issues/4349)
+- Fix wrapping display of Dropdown.Button. [pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus)
+- Fix wrong background color of Cascader in disabled status. [#4434](https://github.com/ant-design/ant-design/issues/4434)
+- Fix MonthPicker[monthCellContentRender] doesn't work, and some documentation errors. [#4394](https://github.com/ant-design/ant-design/issues/4394)
+- Fix the extra border of ButtonGroup. [#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi)
+- Fix wrong background color of the Submenu(horizontal mode). [#4414](https://github.com/ant-design/ant-design/issues/4414)
+- Fix overlapping graphics with Select/Cascader in Form.Item with hasFeedback. [#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe)
+- Reset border-radius of the first row in Table without header. [#4373](https://github.com/ant-design/ant-design/issues/4373)
+- Improve the drag performance of Tree. [#4371](https://github.com/ant-design/ant-design/issues/4371)
+- Improve official website and documentation, fix some bugs.
+- Update rc-form to support nested style of getFieldDecorator[id].
+
 ## 2.5.3

 `2016-12-24` 🎄🎄🎄
-* Supports TypeScript@2.1
+
+* Supports TypeScript@2.1. [#4208](https://github.com/ant-design/ant-design/issues/4208)
 * Fix style issue resulting in nested Tabs. [#4317](https://github.com/ant-design/ant-design/issues/4317)
-* Fix `onChange` callback issue resulting in Radio. [4242](https://github.com/ant-design/ant-design/issues/4242)
-* Fix a FormItem mis-aligin bug。 [4271](https://github.com/ant-design/ant-design/issues/4271)
-* Fix background issue resulting in selected element of veritcal Menu.[4253](https://github.com/ant-design/ant-design/issues/4253)
-* Improve arguments of `onVisibleChange` callback of  Dropdown.[4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88)
-* Improve first argument of `onChange` callback of Cascader.[4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88)
-* Improve default width of Datepicker[showTime]. [b912f](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)
+* Fix `onChange` callback issue resulting in Radio. [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi)
+* Fix a FormItem mis-aligin bug。 [#4271](https://github.com/ant-design/ant-design/issues/4271)
+* Fix background issue resulting in selected element of veritcal Menu.[#4253](https://github.com/ant-design/ant-design/issues/4253)
+* Improve arguments type of `onVisibleChange` callback of  Dropdown.[#4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88)
+* Improve first argument type of `onChange` callback of Cascader.[#4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88)
+* Improve default width of Datepicker[showTime]. [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)

 ## 2.5.2

@@ -169,7 +196,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 * Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
 * DatePicker
  * `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now.
-  * Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`.
+  * Add `monthCellContentRender` for `MonthPicker`.
  * `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718)
  * Add czech locale/translations.
 * Badge
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -9,17 +9,44 @@ timeline: true

 ---

+## 2.6.0
+
+`2017-1-2`
+
+- 采用全新的色彩系统。[pull/4426](https://github.com/ant-design/ant-design/pull/4426)
+  - 全新的调色板系统
+  - 使用新的算法函数代替 shade，tint
+  - 调整默认文字颜色
+- 增加 Grid 栅格配置器示例。[commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246)
+- 增加 Layout 布局组件。[#3534](https://github.com/ant-design/ant-design/issues/3534)
+- Input
+  - 增加 prefix 和 suffix 属性，支持前后缀配置。[#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi)
+  - InputGroup 增加 compact 属性，支持紧凑型展示。[pull/4309](https://github.com/ant-design/ant-design/pull/4309)
+- Spin 增加延迟显示属性 delay。[#4306](https://github.com/ant-design/ant-design/issues/4306)
+- 修复 Pagination 在低分辨率下的错位问题。[#4349](https://github.com/ant-design/ant-design/issues/4349)
+- 修复 Dropdown.Button 换行的问题。[pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus)
+- 修复 Cascader disabled 状态底色的问题。[#4434](https://github.com/ant-design/ant-design/issues/4434)
+- 修复 MonthPicker monthCellContentRender 属性无效的问题，并修正了错误的文档。[#4394](https://github.com/ant-design/ant-design/issues/4394)
+- 修复 ButtonGroup 存在多余蓝色边框的问题。[#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi)
+- 修复 Menu horizontal 模式子菜单选择项背景色错误的问题。[#4414](https://github.com/ant-design/ant-design/issues/4414)
+- 修复配置了 hasFeedback 的 Select/Cascader 下拉箭头被遮盖的问题。[#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe)
+- Table 没有 header 时，第一行改为非圆角。[#4373](https://github.com/ant-design/ant-design/issues/4373)
+- 优化 Tree 的拖拽效果。[#4371](https://github.com/ant-design/ant-design/issues/4371)
+- 进行了一些文档或示例优化、文档错误修正以及网站样式问题修复。
+- 升级 rc-form 底层依赖，getFieldDecorator 的 id 支持嵌套式写法。
+
 ## 2.5.3

 `2016-12-24` 🎄🎄🎄
-* 支持 TypeScript@2.1
+
+* 支持 TypeScript@2.1。[#4208](https://github.com/ant-design/ant-design/issues/4208)
 * 修正了 Tabs 嵌套时的样式问题。 [#4317](https://github.com/ant-design/ant-design/issues/4317)
-* 修正了 Radio 在当前项选中时，再次点击仍会触发 onChange 的问题。 [4242](https://github.com/ant-design/ant-design/issues/4242)
-* 修正了 Form 多列栅格式的表单排列方式布局异常。 [4271](https://github.com/ant-design/ant-design/issues/4271)
-* 修正了 Menu 竖直方向的当前选择项的背景问题。[4253](https://github.com/ant-design/ant-design/issues/4253)
-* 优化了 Dropdown 的 onVisibleChange 回调的参数。[4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88)
-* 优化了 Cascader 的 onChange 回调的第一个参数。[4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88)
-* 优化了 Datepicker[showTime] 的默认宽度 [b912f](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)
+* 修正了 Radio 在当前项选中时，再次点击仍会触发 onChange 的问题。 [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi)
+* 修正了 Form 多列栅格式的表单排列方式布局异常。 [#4271](https://github.com/ant-design/ant-design/issues/4271)
+* 修正了 Menu 竖直方向的当前选择项的背景问题。[#4253](https://github.com/ant-design/ant-design/issues/4253)
+* 优化了 Dropdown 的 `onVisibleChange` 回调参数 Type 类型。[#4236](https://github.com/ant-design/ant-design/issues/4236)
+* 优化了 Cascader 的 `onChange` 回调参数的 Type 类型。[#4231](https://github.com/ant-design/ant-design/issues/4231)
+* 优化了 Datepicker[showTime] 的默认宽度 [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)

 ## 2.5.2

@@ -168,7 +195,7 @@ timeline: true
 * 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
 * DatePicker
  * 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。
-  * `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。
+  * `MonthPicker` 增加了 `monthCellContentRender`。
  * `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718)
  * 新增了捷克语的翻译。
 * Badge
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ An enterprise-class UI design language and React-based implementation.
 ## Features

 - An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
+- Graceful UI components out of the box, based on [React Component](http://react-component.github.io/badgeboard/).
 - Written in TypeScript with complete define types.
 - A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.

--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -29,32 +29,32 @@
  }

  &-success {
-    border: 1px solid tint(@success-color, 80%);
-    background-color: tint(@success-color, 90%);
+    border: 1px solid @green-2;
+    background-color: @green-1;
    .@{alert-prefix-cls}-icon {
      color: @success-color;
    }
  }

  &-info {
-    border: 1px solid tint(@primary-color, 80%);
-    background-color: tint(@primary-color, 90%);
+    border: 1px solid @primary-2;
+    background-color: @primary-1;
    .@{alert-prefix-cls}-icon {
      color: @primary-color;
    }
  }

  &-warning {
-    border: 1px solid tint(@warning-color, 80%);
-    background-color: tint(@warning-color, 90%);
+    border: 1px solid @yellow-2;
+    background-color: @yellow-1;
    .@{alert-prefix-cls}-icon {
      color: @warning-color;
    }
  }

  &-error {
-    border: 1px solid tint(@error-color, 80%);
-    background-color: tint(@error-color, 90%);
+    border: 1px solid @red-2;
+    background-color: @red-1;
    .@{alert-prefix-cls}-icon {
      color: @error-color;
    }
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Navigation
+type: Other
 cols: 2
 title: Anchor
 ---
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -2,7 +2,7 @@
 category: Components
 subtitle: 锚点
 cols: 2
-type: Navigation
+type: Other
 title: Anchor
 ---

--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { cloneElement } from 'react';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
+import classNames from 'classnames';

 export interface BreadcrumbProps {
  prefixCls?: string;
@@ -10,6 +11,7 @@ export interface BreadcrumbProps {
  separator?: string | React.ReactNode;
  itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
  style?: React.CSSProperties;
+  className?: string;
 };

 function getBreadcrumbName(route, params) {
@@ -63,7 +65,10 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {

  render() {
    let crumbs;
-    const { separator, prefixCls, routes, params = {}, children, itemRender = defaultItemRender } = this.props;
+    const {
+      separator, prefixCls, style, className, routes, params = {},
+      children, itemRender = defaultItemRender,
+    } = this.props;
    if (routes && routes.length > 0) {
      const paths: string[] = [];
      crumbs = routes.map((route) => {
@@ -93,7 +98,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      });
    }
    return (
-      <div className={prefixCls}>
+      <div className={classNames(className, prefixCls)} style={style}>
        {crumbs}
      </div>
    );
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -10,7 +10,7 @@
    color: @text-color;
    transition: color .3s;
    &:hover {
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
    }
  }

--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -101,8 +101,7 @@ export default class Button extends React.Component<ButtonProps, any> {
  }

  render() {
-    const props = this.props;
-    const { type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ...others } = props;
+    const { type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ...others } = this.props;

    // large => lg
    // small => sm
@@ -120,7 +119,7 @@ export default class Button extends React.Component<ButtonProps, any> {
    }, className);

    const iconType = loading ? 'loading' : icon;
-
+    const iconNode = iconType ? <Icon type={iconType} /> : null;
    const kids = React.Children.map(children, insertSpace);

    return (
@@ -131,7 +130,7 @@ export default class Button extends React.Component<ButtonProps, any> {
        onMouseUp={this.handleMouseUp}
        onClick={this.handleClick}
      >
-        {iconType ? <Icon type={iconType} /> : null}{kids}
+        {iconNode}{kids}
      </button>
    );
  }
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -16,6 +16,10 @@
    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;
+
+      &:disabled {
+        border-color: @btn-default-border;
+      }
    }

    .@{btn-prefix-cls}-group &:first-child {
@@ -28,7 +32,7 @@
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
-    .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
+    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -21,15 +21,14 @@

 .button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
-
  &:hover,
  &:focus {
-    .button-color(@color; tint(@background, 20%); tint(@background, 20%));
+    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  &:active,
  &.active {
-    .button-color(@color; shade(@background, 5%); shade(@background, 5%));
+    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  .button-disabled();
@@ -40,12 +39,12 @@

  &:hover,
  &:focus {
-    .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
+    .button-color(@primary-5; @background; @primary-5);
  }

  &:active,
  &.active {
-    .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
+    .button-color(@primary-7; @background; @primary-7);
  }

  .button-disabled();
@@ -76,12 +75,18 @@
  display: inline-block;
  > .@{btnClassName} {
    position: relative;
+    z-index: 1;
+
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
+
+    &:disabled {
+      z-index: 0;
+    }
  }

  // size
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@@ -98,7 +98,7 @@
    line-height: 22px;

    &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
      cursor: pointer;
    }
  }
@@ -137,7 +137,7 @@

  &-last-month-cell &-value,
  &-next-month-btn-day &-value {
-    color: #ccc;
+    color: @disabled-color;
  }

  &-month-panel-table {
@@ -179,11 +179,11 @@
    color: @text-color;
    height: 116px;
    padding: 4px 8px;
-    border-top: 2px solid #eee;
+    border-top: 2px solid @border-color-split;
    transition: background 0.3s ease;

    &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
      cursor: pointer;
    }
  }
@@ -208,7 +208,7 @@
  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    border-top-color: @primary-color;
-    background-color: tint(@primary-color, 90%);
+    background-color: @primary-1;
    color: @primary-color;
  }
  &-fullscreen &-month-panel-current-cell &-value {
@@ -216,7 +216,7 @@
  }
  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
-    color: #ccc;
+    color: @disabled-color;
  }

  &-fullscreen &-content {
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -16,7 +16,6 @@
    position: relative;
    display: inline-block;
    cursor: pointer;
-    vertical-align: middle;
    font-size: @font-size-base;
    background-color: #fff;
    border-radius: @border-radius-base;
@@ -30,6 +29,7 @@

      .@{cascader-prefix-cls}-input {
        cursor: not-allowed;
+        background: @input-disabled-bg;
      }
    }

@@ -55,7 +55,7 @@
      background: #fff;
      top: 50%;
      font-size: @font-size-base;
-      color: #ccc;
+      color: @disabled-color;
      width: 12px;
      height: 12px;
      margin-top: -6px;
@@ -152,11 +152,11 @@
    white-space: nowrap;
    transition: all 0.3s ease;
    &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
    }
    &-disabled {
      cursor: not-allowed;
-      color: #ccc;
+      color: @disabled-color;
      &:hover {
        background: transparent;
      }
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -101,7 +101,7 @@
    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}:after {
        animation-name: none;
-        border-color: #ccc;
+        border-color: @disabled-color;
      }
    }

@@ -115,7 +115,7 @@
    }

    & + span {
-      color: #ccc;
+      color: @disabled-color;
      cursor: not-allowed;
    }
  }
--- a/components/date-picker/createPicker.tsx
+++ b/components/date-picker/createPicker.tsx
@@ -132,6 +132,7 @@ export default function createPicker(TheCalendar) {
          onOk={props.onOk}
          format={props.format}
          showToday={props.showToday}
+          monthCellContentRender={props.monthCellContentRender}
        />
      );

--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -25,7 +25,7 @@ ReactDOM.render(
  <div>
    <DatePicker onChange={onChange} />
    <br />
-    <MonthPicker onChange={onChange} />
+    <MonthPicker onChange={onChange} monthCellContentRender={() => <span>111</span>} />
    <br />
    <RangePicker onChange={onChange} />
  </div>
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -68,8 +68,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | defaultValue | to set default date       | [moment](http://momentjs.com/)   | -           |
 | format       | to set the date format, refer to [moment.js](http://momentjs.com/) | String   | "YYYY-MM" |
 | onChange     | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | -           |
-| monthCellContentRender | Custom month cell render method | function | 无 |
-| cellContentRender | Custom month cell content render method,the content will be appended to the cell. | function | 无 |
+| monthCellContentRender | Custom month cell content render method | function(date, locale): React.Node | - |

 ### RangePicker

--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -68,9 +68,8 @@ moment.locale('zh-cn');
 | value        | 日期           | [moment](http://momentjs.com/)   | 无           |
 | defaultValue | 默认日期       | [moment](http://momentjs.com/)   | 无           |
 | format       | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string   | "YYYY-MM" |
-| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | 无           |
-| monthCellContentRender | 自定义的月份渲染方法 | function | 无 |
-| cellContentRender | 自定义的月份渲染方法，内容会被附加在月份后面 | function | 无 |
+| onChange     | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | -           |
+| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): React.Node | - |

 ### RangePicker

--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@@ -184,13 +184,13 @@
    }

    &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
      cursor: pointer;
    }

    &:active {
      color: #fff;
-      background: tint(@primary-color, 20%);
+      background: @primary-5;
    }
  }

@@ -202,7 +202,7 @@

  &-last-month-cell &-date,
  &-next-month-btn-day &-date {
-    color: #ccc;
+    color: @disabled-color;
  }

  &-selected-day &-date {
@@ -258,7 +258,7 @@
    text-align: center;
    margin: 0 0 0 8px;
    &-disabled {
-      color: #ccc;
+      color: @disabled-color;
      cursor: not-allowed;
    }
  }
@@ -280,7 +280,7 @@
  .@{calendar-prefix-cls}-clear-btn:after {
    .iconfont-font("\e62e");
    font-size: @font-size-base;
-    color: #ccc;
+    color: @disabled-color;
    display: inline-block;
    line-height: 1;
    width: 20px;
--- a/components/date-picker/style/DecadePanel.less
+++ b/components/date-picker/style/DecadePanel.less
@@ -42,7 +42,7 @@
  transition: background 0.3s ease;

  &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
    cursor: pointer;
  }
 }
--- a/components/date-picker/style/MonthPanel.less
+++ b/components/date-picker/style/MonthPanel.less
@@ -61,7 +61,7 @@
  transition: background 0.3s ease;

  &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
    cursor: pointer;
  }
 }
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@@ -51,7 +51,7 @@
    background: #fff;
    top: 50%;
    font-size: @font-size-base;
-    color: #ccc;
+    color: @disabled-color;
    width: 14px;
    height: 14px;
    margin-top: -7px;
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@@ -130,7 +130,7 @@
    &:before {
      content: '';
      display: block;
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
      border-radius: 0;
      border: 0;
      position: absolute;
--- a/components/date-picker/style/TimePicker.less
+++ b/components/date-picker/style/TimePicker.less
@@ -100,7 +100,7 @@
    }

    li:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
    }

    li&-option-selected {
@@ -152,7 +152,7 @@
      margin-right: 60px;

      &-disabled {
-        color: #ccc;
+        color: @disabled-color;
      }
    }
  }
--- a/components/date-picker/style/YearPanel.less
+++ b/components/date-picker/style/YearPanel.less
@@ -42,7 +42,7 @@
  transition: background 0.3s ease;

  &:hover {
-    background: tint(@primary-color, 90%);
+    background: @primary-1;
    cursor: pointer;
  }
 }
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -68,16 +68,16 @@
      }

      &:hover {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
      }

      &-disabled {
-        color: #ccc;
+        color: @disabled-color;
        cursor: not-allowed;
        pointer-events: none;

        &:hover {
-          color: #ccc;
+          color: @disabled-color;
          background-color: @component-background;
          cursor: not-allowed;
        }
@@ -162,6 +162,8 @@
 }

 .@{dropdown-prefix-cls}-button {
+  white-space: nowrap;
+
  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
    padding-right: 7px;
  }
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/components/form/tests/snapshots/demo.test.js.snap
@@ -376,34 +376,6 @@ exports[`test renders ./components/form/demo/customized-form-controls.md correct
 exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal">
-  <div
-    class="ant-row ant-form-item">
-    <div
-      class="ant-col-4 ant-form-item-label">
-      <label
-        class=""
-        for="names-0">
-        Passengers
-      </label>
-    </div>
-    <div
-      class="ant-col-20">
-      <div
-        class="ant-form-item-control ">
-        <input
-          class="ant-input ant-input-lg"
-          data-__meta="[object Object]"
-          id="names-0"
-          placeholder="passenger name"
-          style="width:60%;margin-right:8px;"
-          type="text"
-          value="" />
-        <i
-          class="anticon anticon-minus-circle-o dynamic-delete-button"
-          disabled="" />
-      </div>
-    </div>
-  </div>
  <div
    class="ant-row ant-form-item">
    <div
@@ -417,7 +389,23 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
          <i
            class="anticon anticon-plus" />
          <span>
-             Add
+             Add field
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item">
+    <div
+      class="ant-col-20 ant-col-offset-4">
+      <div
+        class="ant-form-item-control ">
+        <button
+          class="ant-btn ant-btn-primary ant-btn-lg"
+          type="submit">
+          <span>
+            Submit
          </span>
        </button>
      </div>
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -53,6 +53,15 @@ class DynamicFieldSet extends React.Component {
    });
  }

+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
@@ -62,7 +71,7 @@ class DynamicFieldSet extends React.Component {
    const formItemLayoutWithOutLabel = {
      wrapperCol: { span: 20, offset: 4 },
    };
-
+    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
      return (
@@ -92,13 +101,16 @@ class DynamicFieldSet extends React.Component {
      );
    });
    return (
-      <Form horizontal>
+      <Form onSubmit={this.handleSubmit} horizontal>
        {formItems}
        <FormItem {...formItemLayoutWithOutLabel}>
          <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
-            <Icon type="plus" /> Add
+            <Icon type="plus" /> Add field
          </Button>
        </FormItem>
+        <FormItem {...formItemLayoutWithOutLabel}>
+          <Button type="primary" htmlType="submit" size="large">Submit</Button>
+        </FormItem>
      </Form>
    );
  }
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -51,6 +51,7 @@ const Demo = Form.create()(React.createClass({
        <FormItem
          {...formItemLayout}
          label="Select"
+          hasFeedback
        >
          {getFieldDecorator('select', {
            rules: [
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -65,7 +65,8 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 | getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) |
 | getFieldValue | Get the value of a field. | Function(fieldName: string) |
 | setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]: value } |
-| setFields | Set the value and error of a field. | Function(obj: object) |
+| setFields |  | Function(obj: object) |
+| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
 | validateFields | Validate the specified fields and get theirs values and errors. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
 | getFieldError | Get the error of a field. | Function(name) |
@@ -85,11 +86,11 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu

 If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534

-#### getFieldDecorator's parameters
+#### getFieldDecorator(id, options) parameters

 | Property  | Description                             | Type | Default Value |
 |-----------|-----------------------------------------|------|---------------|
-| options.id | The unique identifier is required. | string | |
+| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | |
 | options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
 | options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
 | options.trigger | When to collect the value of children node | string | 'onChange' |
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -67,7 +67,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) |
 | getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
 | setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]: value } |
-| setFields | 设置一组输入控件的值与 Error | Function(obj: object) |
+| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
 | validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
 | getFieldError | 获取某个输入控件的 Error | Function(name) |
@@ -87,11 +87,11 @@ CustomizedForm = Form.create({})(CustomizedForm);

 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534

-#### getFieldDecorator 参数
+#### getFieldDecorator(id, options) 参数

 | 参数      | 说明                                     | 类型 | 默认值 |
 |-----------|-----------------------------------------|-----|--------|
-| id | 必填输入控件唯一标志 | string | |
+| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
 | options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
 | options.initialValue | 子节点的初始值，类型、可选值均由子节点决定  | | |
 | options.trigger | 收集子节点的值的时机 | string | 'onChange' |
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -136,6 +136,26 @@ form {
    .@{ant-prefix}-input {
      padding-right: 24px;
    }
+
+    // Fix overlapping between feedback icon and <Select>'s arrow.
+    // https://github.com/ant-design/ant-design/issues/4431
+    .@{ant-prefix}-select {
+      &-arrow,
+      &-selection__clear {
+        right: 28px;
+      }
+      &-selection-selected-value {
+        padding-right: 42px;
+      }
+    }
+    .@{ant-prefix}-cascader-picker {
+      &-arrow {
+        padding-right: 36px;
+      }
+      &-clear {
+        right: 28px;
+      }
+    }
  }

  textarea.@{ant-prefix}-input {
--- a/components/grid/tests/snapshots/demo.test.js.snap
+++ b/components/grid/tests/snapshots/demo.test.js.snap
@@ -370,6 +370,198 @@ exports[`test renders ./components/grid/demo/offset.md correctly 1`] = `
 </div>
 `;

+exports[`test renders ./components/grid/demo/playground.md correctly 1`] = `
+<div>
+  <div
+    style="margin-bottom:16px;">
+    <span
+      style="margin-right:6px;">
+      Gutter (px): 
+    </span>
+    <div
+      style="width:50%;">
+      <div
+        class="ant-slider ant-slider-with-marks">
+        <div
+          class="ant-slider-rail" />
+        <div
+          class="ant-slider-track ant-slider-track-1"
+          style="visibility:visible;left:0%;width:20%;" />
+        <div
+          class="ant-slider-step">
+          <span
+            class="ant-slider-dot ant-slider-dot-active"
+            style="left:0%;" />
+          <span
+            class="ant-slider-dot ant-slider-dot-active"
+            style="left:20%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:40%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:60%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:80%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:100%;" />
+        </div>
+        <div
+          class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
+          style="left:20%;" />
+        <div
+          class="ant-slider-mark">
+          <span
+            class="ant-slider-mark-text ant-slider-mark-text-active"
+            style="width:18%;margin-left:-9%;left:0%;">
+            8
+          </span>
+          <span
+            class="ant-slider-mark-text ant-slider-mark-text-active"
+            style="width:18%;margin-left:-9%;left:20%;">
+            16
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:40%;">
+            24
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:60%;">
+            32
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:80%;">
+            40
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:100%;">
+            48
+          </span>
+        </div>
+      </div>
+    </div>
+    <span
+      style="margin-right:6px;">
+      Column Count:
+    </span>
+    <div
+      style="width:50%;">
+      <div
+        class="ant-slider ant-slider-with-marks">
+        <div
+          class="ant-slider-rail" />
+        <div
+          class="ant-slider-track ant-slider-track-1"
+          style="visibility:visible;left:0%;width:40%;" />
+        <div
+          class="ant-slider-step">
+          <span
+            class="ant-slider-dot ant-slider-dot-active"
+            style="left:0%;" />
+          <span
+            class="ant-slider-dot ant-slider-dot-active"
+            style="left:20%;" />
+          <span
+            class="ant-slider-dot ant-slider-dot-active"
+            style="left:40%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:60%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:80%;" />
+          <span
+            class="ant-slider-dot"
+            style="left:100%;" />
+        </div>
+        <div
+          class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
+          style="left:40%;" />
+        <div
+          class="ant-slider-mark">
+          <span
+            class="ant-slider-mark-text ant-slider-mark-text-active"
+            style="width:18%;margin-left:-9%;left:0%;">
+            2
+          </span>
+          <span
+            class="ant-slider-mark-text ant-slider-mark-text-active"
+            style="width:18%;margin-left:-9%;left:20%;">
+            3
+          </span>
+          <span
+            class="ant-slider-mark-text ant-slider-mark-text-active"
+            style="width:18%;margin-left:-9%;left:40%;">
+            4
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:60%;">
+            6
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:80%;">
+            8
+          </span>
+          <span
+            class="ant-slider-mark-text"
+            style="width:18%;margin-left:-9%;left:100%;">
+            12
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row"
+    style="margin-left:-8px;margin-right:-8px;">
+    <div
+      class="ant-col-6"
+      style="padding-left:8px;padding-right:8px;">
+      <div>
+        Column
+      </div>
+    </div>
+    <div
+      class="ant-col-6"
+      style="padding-left:8px;padding-right:8px;">
+      <div>
+        Column
+      </div>
+    </div>
+    <div
+      class="ant-col-6"
+      style="padding-left:8px;padding-right:8px;">
+      <div>
+        Column
+      </div>
+    </div>
+    <div
+      class="ant-col-6"
+      style="padding-left:8px;padding-right:8px;">
+      <div>
+        Column
+      </div>
+    </div>
+  </div>
+  <pre>
+    <Row gutter={16}>
+      <Col span={6} />
+      <Col span={6} />
+      <Col span={6} />
+      <Col span={6} />
+    </Row>
+  </pre>
+</div>
+`;
+
 exports[`test renders ./components/grid/demo/reponsive.md correctly 1`] = `
 <div
  class="ant-row">
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -0,0 +1,103 @@
+---
+order: 9
+title:
+  zh-CN: 栅格配置器
+  en-US: Playground
+---
+
+## zh-CN
+
+可以简单配置几种等分栅格和间距。
+
+## en-US
+
+A simple playground for column count and gutter.
+
+````jsx
+import { Row, Col, Slider } from 'antd';
+
+class App extends React.Component {
+  gutters = {};
+  colCounts = {};
+  constructor() {
+    super();
+    this.state = {
+      gutterKey: 1,
+      colCountKey: 2,
+    };
+    [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
+    [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
+  }
+  onGutterChange = (gutterKey) => {
+    this.setState({ gutterKey });
+  }
+  onColCountChange = (colCountKey) => {
+    this.setState({ colCountKey });
+  }
+  render() {
+    const { gutterKey, colCountKey } = this.state;
+    const cols = [];
+    const colCount = this.colCounts[colCountKey];
+    let colCode = '';
+    for (let i = 0; i < colCount; i++) {
+      cols.push(
+        <Col key={i.toString()} span={24 / colCount}>
+          <div>Column</div>
+        </Col>
+      );
+      colCode += `  <Col span={${24 / colCount}} />\n`;
+    }
+    return (
+      <div>
+        <div style={{ marginBottom: 16 }}>
+          <span style={{ marginRight: 6 }}>Gutter (px): </span>
+          <div style={{ width: '50%' }}>
+            <Slider
+              min={0}
+              max={Object.keys(this.gutters).length - 1}
+              value={gutterKey}
+              onChange={this.onGutterChange}
+              marks={this.gutters}
+              step={null}
+            />
+          </div>
+          <span style={{ marginRight: 6 }}>Column Count:</span>
+          <div style={{ width: '50%' }}>
+            <Slider
+              min={0}
+              max={Object.keys(this.colCounts).length - 1}
+              value={colCountKey}
+              onChange={this.onColCountChange}
+              marks={this.colCounts}
+              step={null}
+            />
+          </div>
+        </div>
+        <Row gutter={this.gutters[gutterKey]}>{cols}</Row>
+        <pre>{`<Row gutter={${this.gutters[gutterKey]}}>\n${colCode}</Row>`}</pre>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
+
+````css
+#components-grid-demo-playground [class^="ant-col-"] {
+  background: transparent;
+  border: 0;
+}
+#components-grid-demo-playground [class^="ant-col-"] > div {
+  background: #00A0E9;
+  height: 120px;
+  line-height: 120px;
+  font-size: 13px;
+}
+#components-grid-demo-playground pre {
+  background: #f9f9f9;
+  border-radius: 6px;
+  font-size: 13px;
+  padding: 8px 16px;
+}
+````
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -49,6 +49,8 @@ export { default as Input } from './input';

 export { default as InputNumber } from './input-number';

+export { default as Layout } from './layout';
+
 export { default as LocaleProvider } from './locale-provider';

 export { default as message } from './message';
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@@ -37,7 +37,7 @@
    }
    &:hover &-up-inner,
    &:hover &-down-inner {
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
    }
  }

--- a/components/input/Group.tsx
+++ b/components/input/Group.tsx
@@ -7,6 +7,7 @@ export interface GroupProps {
  children?: any;
  style?: React.CSSProperties;
  prefixCls?: string;
+  compact?: boolean;
 }

 const Group: React.StatelessComponent<GroupProps> = (props) => {
@@ -14,6 +15,7 @@ const Group: React.StatelessComponent<GroupProps> = (props) => {
  const cls = classNames(prefixCls, {
    [`${prefixCls}-lg`]: props.size === 'large',
    [`${prefixCls}-sm`]: props.size === 'small',
+    [`${prefixCls}-compact`]: props.compact,
  }, className);
  return (
    <span className={cls} style={props.style}>
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -49,10 +49,13 @@ export interface InputProps {
  onKeyDown?: React.FormEventHandler<any>;
  onChange?: React.FormEventHandler<any>;
  onClick?: React.FormEventHandler<any>;
+  onFocus?: React.FormEventHandler<any>;
  onBlur?: React.FormEventHandler<any>;
  autosize?: boolean | AutoSizeType;
  autoComplete?: 'on' | 'off';
  style?: React.CSSProperties;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
 }

 export default class Input extends Component<InputProps, any> {
@@ -82,6 +85,10 @@ export default class Input extends Component<InputProps, any> {
    autosize: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    onPressEnter: PropTypes.func,
    onKeyDown: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    prefix: PropTypes.node,
+    suffix: PropTypes.node,
  };

  nextFrameActionId: number;
@@ -91,6 +98,7 @@ export default class Input extends Component<InputProps, any> {

  state = {
    textareaStyles: null,
+    isFocus: false,
  };

  componentDidMount() {
@@ -107,6 +115,35 @@ export default class Input extends Component<InputProps, any> {
    }
  }

+  componentDidUpdate(prevProps) {
+    const { props, state, refs } = this;
+    const preHasPresuffix = prevProps.prefix || prevProps.suffix;
+    const curHasPresuffix = props.prefix || props.suffix;
+    if (state.isFocus && (preHasPresuffix !== curHasPresuffix)) {
+      refs.input.focus();
+    }
+  }
+
+  handleFocus = (e) => {
+    const { onFocus } = this.props;
+    this.setState({
+      isFocus: true,
+    });
+    if (onFocus) {
+      onFocus(e);
+    }
+  }
+
+  handleBlur = (e) => {
+    const { onBlur } = this.props;
+    this.setState({
+      isFocus: false,
+    });
+    if (onBlur) {
+      onBlur(e);
+    }
+  }
+
  handleKeyDown = (e) => {
    const { onPressEnter, onKeyDown } = this.props;
    if (e.keyCode === 13 && onPressEnter) {
@@ -142,7 +179,7 @@ export default class Input extends Component<InputProps, any> {
    this.refs.input.focus();
  }

-  renderLabledInput(children) {
+  renderLabeledInput(children) {
    const props = this.props;

    // Not wrap when there is not addons
@@ -178,6 +215,34 @@ export default class Input extends Component<InputProps, any> {
    );
  }

+  renderLabeledIcon(children) {
+    const { props } = this;
+
+    if (props.type === 'textarea' || (!props.prefix && !props.suffix)) {
+      return children;
+    }
+
+    const prefix = props.prefix ? (
+      <span className={`${props.prefixCls}-prefix`}>
+        {props.prefix}
+      </span>
+    ) : null;
+
+    const suffix = props.suffix ? (
+      <span className={`${props.prefixCls}-suffix`}>
+        {props.suffix}
+      </span>
+    ) : null;
+
+    return (
+      <span className={`${props.prefixCls}-preSuffix-wrapper`}>
+        {prefix}
+        {children}
+        {suffix}
+      </span>
+    );
+  }
+
  renderInput() {
    const props = assign({}, this.props);
    // Fix https://fb.me/react-unknown-prop
@@ -187,6 +252,8 @@ export default class Input extends Component<InputProps, any> {
      'autosize',
      'addonBefore',
      'addonAfter',
+      'prefix',
+      'suffix',
    ]);

    const prefixCls = props.prefixCls;
@@ -219,11 +286,13 @@ export default class Input extends Component<InputProps, any> {
          />
        );
      default:
-        return (
+        return this.renderLabeledIcon(
          <input
            {...otherProps}
            className={inputClassName}
            onKeyDown={this.handleKeyDown}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
            ref="input"
          />
        );
@@ -231,6 +300,6 @@ export default class Input extends Component<InputProps, any> {
  }

  render() {
-    return this.renderLabledInput(this.renderInput());
+    return this.renderLabeledInput(this.renderInput());
  }
 }
--- a/components/input/Search.tsx
+++ b/components/input/Search.tsx
@@ -36,19 +36,22 @@ export default class Search extends React.Component<SearchProps, any> {
    const wrapperCls = classNames({
      [`${prefixCls}-wrapper`]: true,
    }, className);
+    const searchSuffix = (
+      <Icon
+        className={`${prefixCls}-icon`}
+        onClick={this.onSearch}
+        type="search"
+      />
+    );
    return (
      <div className={wrapperCls} style={style}>
        <Input
          className={prefixCls}
          onPressEnter={this.onSearch}
          ref={node => this.input = node}
+          suffix={searchSuffix}
          {...others}
        />
-        <Icon
-          className={`${prefixCls}-icon`}
-          onClick={this.onSearch}
-          type="search"
-        />
      </div>
    );
  }
--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@@ -149,18 +149,259 @@ exports[`test renders ./components/input/demo/group.md correctly 1`] = `
        value="26888888" />
    </div>
  </span>
+  <br />
+  <span
+    class="ant-input-group ant-input-group-compact">
+    <input
+      class="ant-input"
+      style="width:20%;"
+      type="text"
+      value="0571" />
+    <input
+      class="ant-input"
+      style="width:30%;"
+      type="text"
+      value="26888888" />
+  </span>
+  <br />
+  <span
+    class="ant-input-group ant-input-group-compact">
+    <div
+      class="ant-select ant-select-enabled">
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-select-selection
+                  ant-select-selection--single"
+        role="combobox"
+        tabindex="0">
+        <div
+          class="ant-select-selection__rendered">
+          <div
+            class="ant-select-selection-selected-value"
+            style="display:block;opacity:1;"
+            title="Zhejiang">
+            Zhejiang
+          </div>
+        </div>
+        <span
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          <b />
+        </span>
+      </div>
+    </div>
+    <input
+      class="ant-input"
+      style="width:50%;"
+      type="text"
+      value="Xihu District, Hangzhou" />
+  </span>
+  <br />
+  <span
+    class="ant-input-group ant-input-group-compact">
+    <div
+      class="ant-select ant-select-enabled">
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-select-selection
+                  ant-select-selection--single"
+        role="combobox"
+        tabindex="0">
+        <div
+          class="ant-select-selection__rendered">
+          <div
+            class="ant-select-selection-selected-value"
+            style="display:block;opacity:1;"
+            title="Option1">
+            Option1
+          </div>
+        </div>
+        <span
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          <b />
+        </span>
+      </div>
+    </div>
+    <input
+      class="ant-input"
+      style="width:50%;"
+      type="text"
+      value="input content" />
+    <div
+      class="ant-input-number">
+      <div
+        class="ant-input-number-handler-wrap">
+        <span
+          class="ant-input-number-handler ant-input-number-handler-up "
+          unselectable="unselectable">
+          <span
+            class="ant-input-number-handler-up-inner"
+            unselectable="unselectable" />
+        </span>
+        <span
+          class="ant-input-number-handler ant-input-number-handler-down "
+          unselectable="unselectable">
+          <span
+            class="ant-input-number-handler-down-inner"
+            unselectable="unselectable" />
+        </span>
+      </div>
+      <div
+        class="ant-input-number-input-wrap">
+        <input
+          autocomplete="off"
+          class="ant-input-number-input"
+          max="Infinity"
+          min="-Infinity"
+          value="" />
+      </div>
+    </div>
+  </span>
+  <br />
+  <span
+    class="ant-input-group ant-input-group-compact">
+    <input
+      class="ant-input"
+      style="width:50%;"
+      type="text"
+      value="input content" />
+    <span
+      class="ant-calendar-picker">
+      <span>
+        <input
+          class="ant-calendar-picker-input ant-input"
+          placeholder="请选择日期"
+          readonly=""
+          value="" />
+        <span
+          class="ant-calendar-picker-icon" />
+      </span>
+    </span>
+  </span>
+  <br />
+  <span
+    class="ant-input-group ant-input-group-compact">
+    <div
+      class="ant-select ant-select-enabled">
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-select-selection
+                  ant-select-selection--single"
+        role="combobox"
+        tabindex="0">
+        <div
+          class="ant-select-selection__rendered">
+          <div
+            class="ant-select-selection-selected-value"
+            style="display:block;opacity:1;"
+            title="Option1-1">
+            Option1-1
+          </div>
+        </div>
+        <span
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          <b />
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-select ant-select-enabled">
+      <div
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-select-selection
+                  ant-select-selection--single"
+        role="combobox"
+        tabindex="0">
+        <div
+          class="ant-select-selection__rendered">
+          <div
+            class="ant-select-selection-selected-value"
+            style="display:block;opacity:1;"
+            title="Option2-2">
+            Option2-2
+          </div>
+        </div>
+        <span
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          <b />
+        </span>
+      </div>
+    </div>
+  </span>
+  <br />
+</div>
+`;
+
+exports[`test renders ./components/input/demo/presuffix.md correctly 1`] = `
+<div>
+  <div
+    style="margin-bottom:16px;">
+    <span
+      class="ant-input-preSuffix-wrapper">
+      <span
+        class="ant-input-prefix">
+        <i
+          class="anticon anticon-user" />
+      </span>
+      <input
+        class="ant-input"
+        placeholder="Enter your userName"
+        type="text"
+        value="" />
+    </span>
+  </div>
+  <div
+    style="margin-bottom:16px;">
+    <span
+      class="ant-input-wrapper ant-input-group">
+      <span
+        class="ant-input-group-addon">
+        Http://
+      </span>
+      <input
+        class="ant-input"
+        placeholder="Input your domain"
+        type="text"
+        value="" />
+      <span
+        class="ant-input-group-addon">
+        .com
+      </span>
+    </span>
+  </div>
 </div>
 `;

 exports[`test renders ./components/input/demo/search-input.md correctly 1`] = `
 <div
  class="ant-input-search-wrapper">
-  <input
-    class="ant-input ant-input-search"
-    placeholder="input search text"
-    type="text" />
-  <i
-    class="anticon anticon-search ant-input-search-icon" />
+  <span
+    class="ant-input-preSuffix-wrapper">
+    <input
+      class="ant-input ant-input-search"
+      placeholder="input search text"
+      type="text" />
+    <span
+      class="ant-input-suffix">
+      <i
+        class="anticon anticon-search ant-input-search-icon" />
+    </span>
+  </span>
 </div>
 `;

--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -9,13 +9,18 @@ title:

 输入框的组合展现。

+注意：使用 `compact` 模式时，不需要通过 `Col` 来控制宽度。
+
 ## en-US

 Input.Group example

+Note: You don't need `Col` to control the width in the `compact` mode.
+
 ````jsx
-import { Input, Col } from 'antd';
+import { Input, Col, Select, InputNumber, DatePicker } from 'antd';
 const InputGroup = Input.Group;
+const Option = Select.Option;

 ReactDOM.render(
  <div>
@@ -27,6 +32,45 @@ ReactDOM.render(
        <Input defaultValue="26888888" />
      </Col>
    </InputGroup>
+    <br />
+    <InputGroup compact>
+      <Input style={{ width: '20%' }} defaultValue="0571" />
+      <Input style={{ width: '30%' }} defaultValue="26888888" />
+    </InputGroup>
+    <br />
+    <InputGroup compact>
+      <Select defaultValue="Zhejiang">
+        <Option value="Zhejiang">Zhejiang</Option>
+        <Option value="Jiangsu">Jiangsu</Option>
+      </Select>
+      <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
+    </InputGroup>
+    <br />
+    <InputGroup compact>
+      <Select defaultValue="Option1">
+        <Option value="Option1">Option1</Option>
+        <Option value="Option2">Option2</Option>
+      </Select>
+      <Input style={{ width: '50%' }} defaultValue="input content" />
+      <InputNumber />
+    </InputGroup>
+    <br />
+    <InputGroup compact>
+      <Input style={{ width: '50%' }} defaultValue="input content" />
+      <DatePicker />
+    </InputGroup>
+    <br />
+    <InputGroup compact>
+      <Select defaultValue="Option1-1">
+        <Option value="Option1-1">Option1-1</Option>
+        <Option value="Option1-2">Option1-2</Option>
+      </Select>
+      <Select defaultValue="Option2-2">
+        <Option value="Option2-1">Option2-1</Option>
+        <Option value="Option2-2">Option2-2</Option>
+      </Select>
+    </InputGroup>
+    <br />
  </div>
 , mountNode);
 ````
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -0,0 +1,103 @@
+---
+order: 8
+title:
+    zh-CN: 前缀和后缀
+    en-US: prefix and suffix
+---
+
+## zh-CN
+
+在输入框上添加前缀或后缀图标。
+
+## en-US
+
+Add a prefix or suffix icon on the input.
+
+````jsx
+import { Input, Icon } from 'antd';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userName: '',
+      domain: '',
+    };
+    this.onChangeUserName = this.emitChange.bind(this, 'userName');
+    this.onChangeDomain = this.emitChange.bind(this, 'domain');
+  }
+  emitEmpty(type) {
+    this[`${type}Input`].focus();
+    this.setState({
+      [type]: '',
+    });
+  }
+  emitChange(type, e) {
+    this.setState({
+      [type]: e.target.value,
+    });
+  }
+  renderClearIcon(type) {
+    const value = this.state[type];
+    const empty = this.emitEmpty.bind(this, type);
+    return value ? (
+      <Icon
+        type="close-circle"
+        onClick={empty}
+      />
+    ) : null;
+  }
+  renderUserNameInput() {
+    const { userName } = this.state;
+    return (
+      <div style={{ marginBottom: 16 }}>
+        <Input
+          placeholder="Enter your userName"
+          prefix={<Icon type="user" />}
+          suffix={this.renderClearIcon('userName')}
+          value={userName}
+          onChange={this.onChangeUserName}
+          ref={node => this.userNameInput = node}
+        />
+      </div>
+    );
+  }
+  renderDomainInput() {
+    const { domain } = this.state;
+    return (
+      <div style={{ marginBottom: 16 }}>
+        <Input
+          placeholder="Input your domain"
+          addonBefore="Http://"
+          addonAfter=".com"
+          suffix={this.renderClearIcon('domain')}
+          value={domain}
+          onChange={this.onChangeDomain}
+          ref={node => this.domainInput = node}
+        />
+      </div>
+    );
+  }
+  render() {
+    return (
+      <div>
+        {this.renderUserNameInput()}
+        {this.renderDomainInput()}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
+
+````css
+.anticon-close-circle {
+  cursor: pointer;
+  color: #ccc;
+  transition: color 0.3s;
+}
+.anticon-close-circle:hover {
+  color: #999;
+}
+````
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -26,6 +26,8 @@ Keyboard and mouse can be used for providing or changing data.
 | disabled | Tell if the input is disabled. | boolean | false |
 | addonBefore | The label text displayed before (on the left side of) the input field. | React.Node |   |
 | addonAfter | The label text displayed after (on the right side of) the input field. | React.Node  |   |
+| prefix | The Input with prefix icon. | React.Node | |
+| suffix | The Input with suffix icon. | React.Node | |
 | onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) |   |
 | autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean or object | false |

@@ -47,6 +49,8 @@ Support all props of `Input`.
 | Property  | Description                      | Type   | Default   |
 |-----------|----------------------------------|--------|-----------|
 |  size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
+|  compact | whether use compact style | boolean | false |
+

 ```html
 <Input.Group>
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -26,6 +26,8 @@ title: Input
 | disabled | 是否禁用状态，默认为 false | boolean | false |
 | addonBefore | 带标签的 input，设置前置标签 | React.Node | |
 | addonAfter | 带标签的 input，设置后置标签 | React.Node | |
+| prefix | 带有前缀图标的 input | React.Node | |
+| suffix | 带有后缀图标的 input | React.Node | |
 | onPressEnter | 按下回车的回调 | function(e) | |
 | autosize | 自适应内容高度，只对 `type="textarea"` 有效，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean or object | false |

@@ -46,6 +48,8 @@ title: Input
 | 参数      | 说明                                     | 类型         | 默认值 |
 |-----------|-----------------------------------------|-------------|-------|
 |  size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
+|  compact | 是否用紧凑模式 | boolean | false |
+

 ```html
 <Input.Group>
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -12,3 +12,8 @@
 .@{ant-prefix}-input-group {
  .input-group(~"@{ant-prefix}-input");
 }
+
+// Input with suffix
+.@{ant-prefix}-input-preSuffix-wrapper {
+  .input-preSuffix-wrapper(~"@{ant-prefix}-input");
+}
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -1,6 +1,8 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";

+@input-presuffix-width: 16;
+
 // size mixins for input
 .input-lg() {
  padding: @input-padding-vertical-lg @input-padding-horizontal;
@@ -16,21 +18,21 @@
 // input status
 // == when focus or actived
 .active(@color: @outline-color) {
-  border-color: tint(@color, 20%);
+  border-color: ~`colorPalette("@{color}", 5)`;
  outline: 0;
  box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
 }

 // == when hoverd
 .hover(@color: @input-hover-border-color) {
-  border-color: tint(@color, 20%);
+  border-color: ~`colorPalette("@{color}", 5)`;
 }

 .disabled() {
  background-color: @input-disabled-bg;
  opacity: 1;
  cursor: not-allowed;
-  color: #ccc;
+  color: @disabled-color;
  &:hover {
    .hover(@input-border-color);
  }
@@ -207,6 +209,18 @@
    }
  }

+  > .@{inputClass}-preSuffix-wrapper {
+    &:not(:first-child) .@{inputClass} {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    &:not(:last-child) .@{inputClass} {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
  &-addon:first-child {
    border-right: 0;
  }
@@ -236,4 +250,88 @@
  &-sm > &-addon {
    .input-sm();
  }
+
+  .@{inputClass}-preSuffix-wrapper {
+    display: table-cell;
+    width: 100%;
+    float: left;
+  }
+
+  &&-compact {
+    & > * {
+      border-radius: 0;
+      border-right-width: 0;
+    }
+
+    // Undo float for .ant-input-group .ant-input
+    .@{inputClass} {
+      float: none;
+      z-index: auto;
+    }
+
+    // reset border for Select, datePicker
+    & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
+    & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input {
+      border-radius: 0;
+      border-right-width: 0;
+    }
+
+    & > *:first-child,
+    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
+    & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input {
+      border-top-left-radius: @border-radius-base;
+      border-bottom-left-radius: @border-radius-base;
+    }
+
+    & > *:last-child,
+    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
+    & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input {
+      border-top-right-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+      border-right-width: 1px;
+    }
+  }
 }
+
+.input-preSuffix-wrapper(@inputClass) {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  .@{inputClass} {
+    z-index: 1;
+  }
+
+  .@{inputClass}-prefix,
+  .@{inputClass}-suffix {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 0;
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+
+  .@{inputClass}-prefix {
+    left: @input-padding-horizontal;
+  }
+
+  .@{inputClass}-suffix {
+    right: @input-padding-horizontal;
+  }
+
+  .@{inputClass}:not(:first-child) {
+    padding-left: @input-padding-horizontal + @input-presuffix-width;
+  }
+
+  .@{inputClass}:not(:last-child) {
+    padding-right: @input-padding-horizontal + @input-presuffix-width;
+  }
+}
+
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@@ -9,15 +9,9 @@
  .@{ant-prefix}-input-search {
    transition: all .3s ease;
    &-icon {
-      position: absolute;
-      right: 8px;
      cursor: pointer;
      transition: all .3s ease;
      font-size: 14px;
-      height: 20px;
-      line-height: 20px;
-      top: 50%;
-      margin-top: -10px;
      &:hover {
        color: @input-hover-border-color;
      }
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import classNames from 'classnames';
+import omit from 'omit.js';
+import Icon from '../icon';
+
+export interface SiderProps {
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  className?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  trigger?: React.ReactNode;
+  width?: number | string;
+  collapsedWidth?: number;
+}
+
+export default class Sider extends React.Component<SiderProps, any> {
+
+  static defaultProps = {
+    prefixCls: 'ant-layout-sider',
+    collapsible: false,
+    defaultCollapsed: false,
+    width: 200,
+    collapsedWidth: 64,
+    style: {},
+  };
+
+  constructor(props) {
+    super(props);
+    let collapsed;
+    if ('collapsed' in props) {
+      collapsed = props.collapsed;
+    } else {
+      collapsed = props.defaultCollapsed;
+    }
+    this.state = {
+      collapsed,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if ('collapsed' in nextProps) {
+      this.setState({
+        collapsed: nextProps.collapsed,
+      });
+    }
+  }
+
+  setCollapsed = (collapsed) => {
+    if (!('collapsed' in this.props)) {
+      this.setState({
+        collapsed,
+      });
+    }
+    const { onCollapse } = this.props;
+    if (onCollapse) {
+      onCollapse(collapsed);
+    }
+  }
+
+  toggle = () => {
+    const collapsed = !this.state.collapsed;
+    this.setCollapsed(collapsed);
+  }
+
+  render() {
+    const {
+      prefixCls, className, collapsible, trigger, style, width, collapsedWidth,
+      ...others,
+    } = this.props;
+    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse']);
+    const siderCls = classNames(className, prefixCls, {
+      [`${prefixCls}-collapsed`]: !!this.state.collapsed,
+      [`${prefixCls}-has-trigger`]: !!trigger,
+    });
+    const divStyle = {
+      ...style,
+      flex: `0 0 ${this.state.collapsed ? collapsedWidth : width}px`,
+    };
+    const iconObj = {
+      'expanded': <Icon type="left" />,
+      'collapsed': <Icon type="right" />,
+    };
+    const status = this.state.collapsed ? 'collapsed' : 'expanded';
+    const defaultTrigger = iconObj[status];
+    const triggerDom = (
+      trigger !== null ?
+      (<div className={`${prefixCls}-trigger`} onClick={this.toggle}>
+        {trigger || defaultTrigger}
+      </div>)
+      : null
+    );
+    return (
+      <div className={siderCls} {...divProps} style={divStyle}>
+        {this.props.children}
+        {collapsible && triggerDom}
+      </div>
+    );
+  }
+}
--- a/components/layout/tests/snapshots/demo.test.js.snap
+++ b/components/layout/tests/snapshots/demo.test.js.snap
@@ -0,0 +1,564 @@
+exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
+<div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header">
+      Header
+    </div>
+    <div
+      class="ant-layout-content">
+      Content
+    </div>
+    <div
+      class="ant-layout-footer">
+      Footer
+    </div>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header">
+      Header
+    </div>
+    <div
+      class="ant-layout">
+      <div
+        class="ant-layout-sider"
+        style="flex:0 0 200px;">
+        Sider
+      </div>
+      <div
+        class="ant-layout-content">
+        Content
+      </div>
+    </div>
+    <div
+      class="ant-layout-footer">
+      Footer
+    </div>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header">
+      Header
+    </div>
+    <div
+      class="ant-layout">
+      <div
+        class="ant-layout-content">
+        Content
+      </div>
+      <div
+        class="ant-layout-sider"
+        style="flex:0 0 200px;">
+        Sider
+      </div>
+    </div>
+    <div
+      class="ant-layout-footer">
+      Footer
+    </div>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-sider"
+      style="flex:0 0 200px;">
+      Sider
+    </div>
+    <div
+      class="ant-layout-content">
+      <div
+        class="ant-layout-header">
+        Header
+      </div>
+      <div
+        class="ant-layout-content">
+        Content
+      </div>
+      <div
+        class="ant-layout-footer">
+        Footer
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`test renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
+<div
+  class="ant-layout">
+  <div
+    class="ant-layout-sider"
+    style="flex:0 0 200px;">
+    <div
+      class="logo" />
+    <ul
+      aria-activedescendant=""
+      class="ant-menu ant-menu-inline  ant-menu-dark ant-menu-root"
+      role="menu"
+      tabindex="0">
+      <li
+        aria-selected="true"
+        class="ant-menu-item-selected ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-user" />
+        <span
+          class="nav-text">
+          nav 1
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-video-camera" />
+        <span
+          class="nav-text">
+          nav 2
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-upload" />
+        <span
+          class="nav-text">
+          nav 3
+        </span>
+      </li>
+    </ul>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header"
+      style="background:#fff;padding:0;">
+      <i
+        class="anticon anticon-menu-fold trigger" />
+    </div>
+    <div
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;background:#fff;min-height:280px;">
+      Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
+<div
+  class="ant-layout">
+  <div
+    class="ant-layout-sider"
+    style="flex:0 0 200px;">
+    <div
+      class="logo" />
+    <ul
+      aria-activedescendant=""
+      class="ant-menu ant-menu-inline  ant-menu-dark ant-menu-root"
+      role="menu"
+      tabindex="0">
+      <li
+        aria-selected="true"
+        class="ant-menu-item-selected ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-user" />
+        <span
+          class="nav-text">
+          nav 1
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-video-camera" />
+        <span
+          class="nav-text">
+          nav 2
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-upload" />
+        <span
+          class="nav-text">
+          nav 3
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-user" />
+        <span
+          class="nav-text">
+          nav 4
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-heart-o" />
+        <span
+          class="nav-text">
+          nav 5
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;">
+        <i
+          class="anticon anticon-team" />
+        <span
+          class="nav-text">
+          nav 6
+        </span>
+      </li>
+    </ul>
+    <div
+      class="ant-layout-sider-trigger">
+      <i
+        class="anticon anticon-left" />
+    </div>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header"
+      style="background:#fff;padding:0;" />
+    <div
+      class="ant-layout-content"
+      style="margin:0 16px;">
+      <div
+        class="ant-breadcrumb"
+        style="margin:12px 0;">
+        <span>
+          <span
+            class="ant-breadcrumb-link">
+            Home
+          </span>
+          <span
+            class="ant-breadcrumb-separator">
+            /
+          </span>
+        </span>
+        <span>
+          <span
+            class="ant-breadcrumb-link">
+            List
+          </span>
+          <span
+            class="ant-breadcrumb-separator">
+            /
+          </span>
+        </span>
+        <span>
+          <span
+            class="ant-breadcrumb-link">
+            App
+          </span>
+          <span
+            class="ant-breadcrumb-separator">
+            /
+          </span>
+        </span>
+      </div>
+      <div
+        style="padding:24px;background:#fff;min-height:360px;">
+        content
+      </div>
+    </div>
+    <div
+      class="ant-layout-footer"
+      style="text-align:center;">
+      Ant Design ©2016 Created by Ant UED
+    </div>
+  </div>
+</div>
+`;
+
+exports[`test renders ./components/layout/demo/top.md correctly 1`] = `
+<div
+  class="layout ant-layout">
+  <div
+    class="ant-layout-header">
+    <div
+      class="logo" />
+    <ul
+      aria-activedescendant=""
+      class="ant-menu ant-menu-horizontal  ant-menu-dark ant-menu-root"
+      role="menu"
+      style="line-height:64px;"
+      tabindex="0">
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem">
+        nav 1
+      </li>
+      <li
+        aria-selected="true"
+        class="ant-menu-item-selected ant-menu-item"
+        role="menuitem">
+        nav 2
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem">
+        nav 3
+      </li>
+    </ul>
+  </div>
+  <div
+    class="ant-layout-content"
+    style="padding:0 50px;">
+    <div
+      class="ant-breadcrumb"
+      style="margin:12px 0;">
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          Home
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          List
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          App
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+    </div>
+    <div
+      style="background:#fff;padding:24px;min-height:280px;">
+      Content
+    </div>
+  </div>
+  <div
+    class="ant-layout-footer"
+    style="text-align:center;">
+    Ant Design ©2016 Created by Ant UED
+  </div>
+</div>
+`;
+
+exports[`test renders ./components/layout/demo/top-side.md correctly 1`] = `
+<div
+  class="ant-layout">
+  <div
+    class="header ant-layout-header">
+    <div
+      class="logo" />
+    <ul
+      aria-activedescendant=""
+      class="ant-menu ant-menu-horizontal  ant-menu-dark ant-menu-root"
+      role="menu"
+      style="line-height:64px;"
+      tabindex="0">
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem">
+        nav 1
+      </li>
+      <li
+        aria-selected="true"
+        class="ant-menu-item-selected ant-menu-item"
+        role="menuitem">
+        nav 2
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem">
+        nav 3
+      </li>
+    </ul>
+  </div>
+  <div
+    class="ant-layout-content"
+    style="padding:0 50px;">
+    <div
+      class="ant-breadcrumb"
+      style="margin:12px 0;">
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          Home
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          List
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+      <span>
+        <span
+          class="ant-breadcrumb-link">
+          App
+        </span>
+        <span
+          class="ant-breadcrumb-separator">
+          /
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-layout"
+      style="padding:24px 0;background:#fff;">
+      <div
+        class="ant-layout-sider"
+        style="flex:0 0 200px;">
+        <ul
+          aria-activedescendant=""
+          class="ant-menu ant-menu-inline  ant-menu-light ant-menu-root"
+          role="menu"
+          tabindex="0">
+          <li
+            class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu">
+            <div
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="sub1$Menu"
+              class="ant-menu-submenu-title"
+              style="padding-left:24px;">
+              <span>
+                <i
+                  class="anticon anticon-user" />
+                subnav 1
+              </span>
+            </div>
+            <ul
+              aria-activedescendant=""
+              class="ant-menu ant-menu-inline  ant-menu-sub"
+              id="sub1$Menu"
+              role="menu">
+              <li
+                aria-selected="true"
+                class="ant-menu-item-selected ant-menu-item"
+                role="menuitem"
+                style="padding-left:48px;">
+                option1
+              </li>
+              <li
+                aria-selected="false"
+                class="ant-menu-item"
+                role="menuitem"
+                style="padding-left:48px;">
+                option2
+              </li>
+              <li
+                aria-selected="false"
+                class="ant-menu-item"
+                role="menuitem"
+                style="padding-left:48px;">
+                option3
+              </li>
+              <li
+                aria-selected="false"
+                class="ant-menu-item"
+                role="menuitem"
+                style="padding-left:48px;">
+                option4
+              </li>
+            </ul>
+          </li>
+          <li
+            class="ant-menu-submenu-inline ant-menu-submenu">
+            <div
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="sub2$Menu"
+              class="ant-menu-submenu-title"
+              style="padding-left:24px;">
+              <span>
+                <i
+                  class="anticon anticon-laptop" />
+                subnav 2
+              </span>
+            </div>
+          </li>
+          <li
+            class="ant-menu-submenu-inline ant-menu-submenu">
+            <div
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-owns="sub3$Menu"
+              class="ant-menu-submenu-title"
+              style="padding-left:24px;">
+              <span>
+                <i
+                  class="anticon anticon-notification" />
+                subnav 3
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="ant-layout-content"
+        style="padding:0 24px;min-height:280px;">
+        Content
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-layout-footer"
+    style="text-align:center;">
+    Ant Design ©2016 Created by Ant UED
+  </div>
+</div>
+`;
--- a/components/layout/tests/demo.test.js
+++ b/components/layout/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('layout');
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -0,0 +1,87 @@
+---
+order: 0
+title:
+  zh-CN: 基本结构
+  en-US: Basic Structure
+---
+
+## zh-CN
+
+典型的页面布局。
+
+## en-US
+
+Classic page layouts.
+
+````jsx
+import { Layout } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+
+ReactDOM.render(
+<div>
+  <Layout>
+    <Header>Header</Header>
+    <Content>Content</Content>
+    <Footer>Footer</Footer>
+  </Layout>
+
+  <Layout>
+    <Header>Header</Header>
+    <Layout>
+      <Sider>Sider</Sider>
+      <Content>Content</Content>
+    </Layout>
+    <Footer>Footer</Footer>
+  </Layout>
+
+  <Layout>
+    <Header>Header</Header>
+    <Layout>
+      <Content>Content</Content>
+      <Sider>Sider</Sider>
+    </Layout>
+    <Footer>Footer</Footer>
+  </Layout>
+
+  <Layout>
+    <Sider>Sider</Sider>
+    <Content>
+      <Header>Header</Header>
+      <Content>Content</Content>
+      <Footer>Footer</Footer>
+    </Content>
+  </Layout>
+</div>
+, mountNode);
+````
+
+<style>
+#components-layout-demo-basic .code-box-demo {
+  text-align: center;
+}
+#components-layout-demo-basic .ant-layout-header,
+#components-layout-demo-basic .ant-layout-footer {
+  background: #7dbcea;
+  color: #fff;
+}
+#components-layout-demo-basic .ant-layout-footer {
+  line-height: 1.5;
+}
+#components-layout-demo-basic .ant-layout-sider {
+  background: #3ba0e9;
+  color: #fff;
+  line-height: 120px;
+}
+#components-layout-demo-basic .ant-layout-content {
+  background: rgba(16, 142, 233, 1);
+  color: #fff;
+  min-height: 120px;
+  line-height: 120px;
+}
+#components-layout-demo-basic > .code-box-demo > div > .ant-layout {
+  margin-bottom: 48px;
+}
+#components-layout-demo-basic > .code-box-demo > div > .ant-layout:last-child {
+  margin: 0;
+}
+</style>
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -0,0 +1,100 @@
+---
+order: 4
+title:
+  zh-CN: 自定义触发器
+  en-US: Custom trigger
+---
+
+## zh-CN
+
+要使用自定义触发器，可以设置 `trigger={null}` 来隐藏默认设定。
+
+## en-US
+
+If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
+
+````jsx
+import { Layout, Menu, Icon } from 'antd';
+const { Header, Sider, Content } = Layout;
+
+class SiderDemo extends React.Component {
+  state = {
+    collapsed: false,
+  };
+  toggle = () => {
+    this.setState({
+      collapsed: !this.state.collapsed,
+    });
+  }
+  render() {
+    return (
+      <Layout>
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={this.state.collapsed}
+        >
+          <div className="logo" />
+          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
+            <Menu.Item key="1">
+              <Icon type="user" />
+              <span className="nav-text">nav 1</span>
+            </Menu.Item>
+            <Menu.Item key="2">
+              <Icon type="video-camera" />
+              <span className="nav-text">nav 2</span>
+            </Menu.Item>
+            <Menu.Item key="3">
+              <Icon type="upload" />
+              <span className="nav-text">nav 3</span>
+            </Menu.Item>
+          </Menu>
+        </Sider>
+        <Layout>
+          <Header style={{ background: '#fff', padding: 0 }}>
+            <Icon
+              className="trigger"
+              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
+              onClick={this.toggle}
+            />
+          </Header>
+          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
+            Content
+          </Content>
+        </Layout>
+      </Layout>
+    );
+  }
+}
+
+ReactDOM.render(<SiderDemo />, mountNode);
+````
+
+````css
+#components-layout-demo-custom-trigger .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: color .3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+  color: #108ee9;
+}
+
+#components-layout-demo-custom-trigger .logo {
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px;
+}
+
+#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
+	font-size: 16px;
+}
+
+#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
+	display: none;
+}
+````
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -0,0 +1,103 @@
+---
+order: 3
+title:
+  zh-CN: 侧边布局
+  en-US: Sider
+---
+
+## zh-CN
+
+多用在两列式布局。
+
+## en-US
+
+Be used in the two-columns layout.
+
+````jsx
+import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+const { Header, Content, Footer, Sider } = Layout;
+
+class SiderDemo extends React.Component {
+  state = {
+    collapsed: false,
+  };
+  onCollapse = (collapsed) => {
+    console.log(collapsed);
+    this.setState({ collapsed });
+  }
+  render() {
+    return (
+      <Layout>
+        <Sider
+          collapsible
+          collapsed={this.state.collapsed}
+          onCollapse={this.onCollapse}
+        >
+          <div className="logo" />
+          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
+            <Menu.Item key="1">
+              <Icon type="user" />
+              <span className="nav-text">nav 1</span>
+            </Menu.Item>
+            <Menu.Item key="2">
+              <Icon type="video-camera" />
+              <span className="nav-text">nav 2</span>
+            </Menu.Item>
+            <Menu.Item key="3">
+              <Icon type="upload" />
+              <span className="nav-text">nav 3</span>
+            </Menu.Item>
+            <Menu.Item key="4">
+              <Icon type="user" />
+              <span className="nav-text">nav 4</span>
+            </Menu.Item>
+            <Menu.Item key="5">
+              <Icon type="heart-o" />
+              <span className="nav-text">nav 5</span>
+            </Menu.Item>
+            <Menu.Item key="6">
+              <Icon type="team" />
+              <span className="nav-text">nav 6</span>
+            </Menu.Item>
+          </Menu>
+        </Sider>
+        <Layout>
+          <Header style={{ background: '#fff', padding: 0 }} />
+          <Content style={{ margin: '0 16px' }}>
+            <Breadcrumb style={{ margin: '12px 0' }}>
+              <Breadcrumb.Item>Home</Breadcrumb.Item>
+              <Breadcrumb.Item>List</Breadcrumb.Item>
+              <Breadcrumb.Item>App</Breadcrumb.Item>
+            </Breadcrumb>
+            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
+              content
+            </div>
+          </Content>
+          <Footer style={{ textAlign: 'center' }}>
+            Ant Design ©2016 Created by Ant UED
+          </Footer>
+        </Layout>
+      </Layout>
+    );
+  }
+}
+
+ReactDOM.render(<SiderDemo />, mountNode);
+````
+
+````css
+#components-layout-demo-side .logo {
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px;
+}
+
+#components-layout-demo-side .ant-layout-sider-collapsed .anticon {
+	font-size: 16px;
+}
+
+#components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
+	display: none;
+}
+````
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -0,0 +1,90 @@
+---
+order: 2
+title:
+  zh-CN: 顶部-侧边布局
+  en-US: Header-Sider
+---
+
+## zh-CN
+
+多用在同时拥有顶部导航及侧边栏的页面。
+
+## en-US
+
+Be used in the page which has both the top navigation and the sidebar.
+
+````jsx
+import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+const { SubMenu } = Menu;
+const { Header, Content, Footer, Sider } = Layout;
+
+ReactDOM.render(
+  <Layout>
+    <Header className="header">
+      <div className="logo" />
+      <Menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={['2']}
+        style={{ lineHeight: '64px' }}
+      >
+        <Menu.Item key="1">nav 1</Menu.Item>
+        <Menu.Item key="2">nav 2</Menu.Item>
+        <Menu.Item key="3">nav 3</Menu.Item>
+      </Menu>
+    </Header>
+    <Content style={{ padding: '0 50px' }}>
+      <Breadcrumb style={{ margin: '12px 0' }}>
+        <Breadcrumb.Item>Home</Breadcrumb.Item>
+        <Breadcrumb.Item>List</Breadcrumb.Item>
+        <Breadcrumb.Item>App</Breadcrumb.Item>
+      </Breadcrumb>
+      <Layout style={{ padding: '24px 0', background: '#fff' }}>
+        <Sider width={200}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+          >
+            <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
+              <Menu.Item key="1">option1</Menu.Item>
+              <Menu.Item key="2">option2</Menu.Item>
+              <Menu.Item key="3">option3</Menu.Item>
+              <Menu.Item key="4">option4</Menu.Item>
+            </SubMenu>
+            <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
+              <Menu.Item key="5">option5</Menu.Item>
+              <Menu.Item key="6">option6</Menu.Item>
+              <Menu.Item key="7">option7</Menu.Item>
+              <Menu.Item key="8">option8</Menu.Item>
+            </SubMenu>
+            <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
+              <Menu.Item key="9">option9</Menu.Item>
+              <Menu.Item key="10">option10</Menu.Item>
+              <Menu.Item key="11">option11</Menu.Item>
+              <Menu.Item key="12">option12</Menu.Item>
+            </SubMenu>
+          </Menu>
+        </Sider>
+        <Content style={{ padding: '0 24px', minHeight: 280 }}>
+          Content
+        </Content>
+      </Layout>
+    </Content>
+    <Footer style={{ textAlign: 'center' }}>
+      Ant Design ©2016 Created by Ant UED
+    </Footer>
+  </Layout>
+, mountNode);
+````
+
+````css
+#components-layout-demo-top-side .logo {
+  width: 120px;
+  height: 31px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+````
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -0,0 +1,59 @@
+---
+order: 1
+title:
+  zh-CN: 上中下布局
+  en-US: Header-Content-Footer
+---
+
+## zh-CN
+
+最基本的『上-中-下』布局。
+
+## en-US
+
+The most basic "header-content-footer" layout.
+
+````jsx
+import { Layout, Menu, Breadcrumb } from 'antd';
+const { Header, Content, Footer } = Layout;
+
+ReactDOM.render(
+  <Layout className="layout">
+    <Header>
+      <div className="logo" />
+      <Menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={['2']}
+        style={{ lineHeight: '64px' }}
+      >
+        <Menu.Item key="1">nav 1</Menu.Item>
+        <Menu.Item key="2">nav 2</Menu.Item>
+        <Menu.Item key="3">nav 3</Menu.Item>
+      </Menu>
+    </Header>
+    <Content style={{ padding: '0 50px' }}>
+      <Breadcrumb style={{ margin: '12px 0' }}>
+        <Breadcrumb.Item>Home</Breadcrumb.Item>
+        <Breadcrumb.Item>List</Breadcrumb.Item>
+        <Breadcrumb.Item>App</Breadcrumb.Item>
+      </Breadcrumb>
+      <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
+    </Content>
+    <Footer style={{ textAlign: 'center' }}>
+      Ant Design ©2016 Created by Ant UED
+    </Footer>
+  </Layout>
+, mountNode);
+````
+
+````css
+#components-layout-demo-top .logo {
+  width: 120px;
+  height: 31px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 24px 16px 0;
+  float: left;
+}
+````
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -0,0 +1,59 @@
+---
+category: Components
+type: Layout
+cols: 1
+title: Layout
+---
+
+When you are handling the overall layout of a page, this component might be helpfull.
+
+## Overview
+
+- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested.
+- `Header`: The top layout with default style.
+- `Sider`: The sidebar with default style and basic functions.
+- `Content`: The content layout with default style.
+- `Footer`: The bottom layout with default style.
+
+> Base on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
+
+## API
+
+```jsx
+<Layout>
+  <Header>header</Header>
+  <Layout>
+    <Sider>left sidebar</Sider>
+    <Content>main content</Content>
+    <Sider>right sidebar</Sider>
+  </Layout>
+  <Footer>footer</Footer>
+</Layout>
+```
+
+### Layout
+
+The wrapper.
+
+Property | Description | Type | Default
+-----|-----|-----|------
+style | to custom the styles | Object | -
+className | container className | string | -
+
+> API of `Layout.Header` `Layout.Footer` `Layout.Content` is the same with `Layout`.
+
+### Layout.Sider
+
+The sidebar.
+
+Property | Description | Type | Default
+-----|-----|-----|------
+collapsible | whether can be collapsed | Boolean | false
+defaultCollapsed | to set the initial status | Boolean | false  |
+collapsed | to set the current status | Boolean | -
+onCollapse | the callback function, can be executed when you switch the sidebar, available only `collapsible: true` | (collapsed) => {}  | -
+trigger | specify the customized trigger, set to null to hide the trigger | React.ReactNode or null | - |
+width | width of the sidebar | Number or String | 200
+collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | Number | 64
+style | to custom the styles | Object | -
+className | container className | string | -
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@@ -0,0 +1,5 @@
+import Layout from './layout';
+import Sider from './Sider';
+
+Layout.Sider = Sider;
+export default Layout;
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -0,0 +1,60 @@
+---
+category: Components
+subtitle: 布局
+type: Layout
+cols: 1
+title: Layout
+---
+
+可协助进行页面级整体布局。
+
+## 概述
+
+- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身。
+- `Header`：顶部布局，自带默认样式。
+- `Sider`：侧边栏，自带默认样式及基本功能。
+- `Content`：内容部分，自带默认样式。
+- `Footer`：底部布局，自带默认样式。
+
+> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
+
+## API
+
+```jsx
+<Layout>
+  <Header>header</Header>
+  <Layout>
+    <Sider>left sidebar</Sider>
+    <Content>main content</Content>
+    <Sider>right sidebar</Sider>
+  </Layout>
+  <Footer>footer</Footer>
+</Layout>
+```
+
+### Layout
+
+布局容器。
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| style | 指定样式 | Object | - |
+| className | 容器 className | string | - |
+
+> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
+
+### Layout.Sider
+
+侧边栏。
+
+| 参数      | 说明                                     | 类型       | 默认值 |
+|----------|-----------------------------------------|------------|-------|
+| collapsible | 是否可收起 | Boolean | false  |
+| defaultCollapsed | 是否默认收起 | Boolean | false  |
+| collapsed | 当前收起状态 | Boolean | - |
+| onCollapse | 展开-收起时的回调函数，仅当 `collapsible:true` 时生效 | (collapsed) => {} | - |
+| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | React.ReactNode or null | - |
+| width | 宽度 | Number or String | 200 |
+| collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | Number | 64 |
+| style | 指定样式 | Object | - |
+| className | 容器 className | string | - |
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export interface BasicProps {
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  className?: string;
+}
+
+function generator(props) {
+  return (Basic) : any => {
+    return class Adapter extends React.Component<BasicProps, any> {
+      static Header: any;
+      static Footer: any;
+      static Content: any;
+      static Sider: any;
+      render() {
+        const { prefixCls } = props;
+        return <Basic prefixCls={prefixCls} {...this.props}/>;
+      }
+    };
+  };
+}
+
+class Basic extends React.Component<BasicProps, any> {
+  render() {
+    const { prefixCls, className, ...others } = this.props;
+    const divCls = classNames(className, prefixCls);
+    return (
+      <div className={divCls} {...others} />
+    );
+  }
+}
+
+const Layout = generator({
+  prefixCls: 'ant-layout',
+})(Basic);
+
+const Header = generator({
+  prefixCls: 'ant-layout-header',
+})(Basic);
+
+const Footer = generator({
+  prefixCls: 'ant-layout-footer',
+})(Basic);
+
+const Content = generator({
+  prefixCls: 'ant-layout-content',
+})(Basic);
+
+Layout.Header = Header;
+Layout.Footer = Footer;
+Layout.Content = Content;
+
+export default Layout;
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@@ -0,0 +1,65 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@layout-prefix-cls: ~"@{ant-prefix}-layout";
+
+.@{layout-prefix-cls} {
+  display: flex;
+  flex-wrap: wrap;
+  flex: auto;
+  overflow: auto;
+  background: @layout-body-background;
+
+  &-header,
+  &-footer {
+    flex: 1 0 100%;
+  }
+
+  &-header {
+    background: @layout-header-background;
+    padding: @layout-header-padding;
+    height: @layout-header-height;
+    line-height: @layout-header-height;
+  }
+
+  &-footer {
+    padding: @layout-footer-padding;
+    color: @text-color;
+    font-size: @font-size-base;
+  }
+
+  &-content {
+    flex: auto;
+  }
+
+  &-sider {
+    flex: 0 0 200px;
+    transition: all .3s ease;
+    position: relative;
+    background: @layout-sider-background;
+
+    &-has-trigger {
+      padding-bottom: @layout-trigger-height;
+    }
+
+    &-right {
+      order: 1;
+    }
+
+    &-collapsed {
+      flex: 0 0 64px;
+    }
+
+    &-trigger {
+      position: absolute;
+      text-align: center;
+      width: 100%;
+      bottom: 0;
+      cursor: pointer;
+      height: @layout-trigger-height;
+      line-height: @layout-trigger-height;
+      background: tint(@heading-color, 20%);
+      color: #fff;
+    }
+  }
+}
--- a/components/layout/style/index.tsx
+++ b/components/layout/style/index.tsx
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/locale-provider/tests/snapshots/demo.test.js.snap
+++ b/components/locale-provider/tests/snapshots/demo.test.js.snap
@@ -1152,7 +1152,7 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
          <div
            class="ant-spin-container">
            <div
-              class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left">
+              class="ant-table ant-table-large ant-table-empty ant-table-without-column-header ant-table-scroll-position-left">
              <div
                class="ant-table-content">
                <div
--- a/components/mention/style/index.less
+++ b/components/mention/style/index.less
@@ -54,7 +54,7 @@
  overflow-y: auto;
  font-size: @font-size-base;
  &-notfound.@{ant-prefix}-mention-dropdown-item {
-    color: #ccc;
+    color: @disabled-color;

    .@{iconfont-css-prefix}-loading {
      color: @primary-color;
@@ -78,15 +78,15 @@
    &:hover,
    &.focus,
    &-active {
-      background-color: tint(@primary-color, 90%);
+      background-color: @primary-1;
    }

    &-disabled {
-      color: #ccc;
+      color: @disabled-color;
      cursor: not-allowed;

      &:hover {
-        color: #ccc;
+        color: @disabled-color;
        background-color: @component-background;
        cursor: not-allowed;
      }
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
  zh-CN: 顶部导航
  en-US: Top Navigation
 ---
@@ -32,7 +32,8 @@ const App = React.createClass({
  },
  render() {
    return (
-      <Menu onClick={this.handleClick}
+      <Menu
+        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -97,7 +97,7 @@
  }

  &:not(&-horizontal) &-item-selected {
-    background-color: tint(@primary-color, 90%);
+    background-color: @primary-1;
  }

  &-horizontal,
@@ -178,6 +178,7 @@
    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 8px;
+      transition: all .3s;
    }
  }

@@ -390,7 +391,7 @@
    }
  }

-  &-dark&-vertical &-item-selected {
+  &&-dark &-item-selected {
    background-color: transparent;
  }

--- a/components/pagination/tests/snapshots/demo.test.js.snap
+++ b/components/pagination/tests/snapshots/demo.test.js.snap
@@ -88,7 +88,7 @@ exports[`test renders ./components/pagination/demo/changer.md correctly 1`] = `
    </a>
  </li>
  <li
-    class="ant-pagination-item ant-pagination-item-5"
+    class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
    title="5">
    <a>
      5
@@ -234,7 +234,7 @@ exports[`test renders ./components/pagination/demo/jump.md correctly 1`] = `
    </a>
  </li>
  <li
-    class="ant-pagination-item ant-pagination-item-5"
+    class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
    title="5">
    <a>
      5
@@ -505,7 +505,7 @@ exports[`test renders ./components/pagination/demo/more.md correctly 1`] = `
    </a>
  </li>
  <li
-    class="ant-pagination-item ant-pagination-item-5"
+    class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
    title="5">
    <a>
      5
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -70,7 +70,7 @@
      content: "•••";
      display: block;
      letter-spacing: 2px;
-      color: #ccc;
+      color: @disabled-color;
      text-align: center;
    }

@@ -175,13 +175,13 @@
    &:hover {
      border-color: @border-color-base;
      a {
-        color: #ccc;
+        color: @disabled-color;
        cursor: not-allowed;
      }
    }
    cursor: not-allowed;
    a {
-      color: #ccc;
+      color: @disabled-color;
    }
  }

@@ -292,3 +292,12 @@
    }
  }
 }
+
+@media only screen and (max-width: 1024px) {
+  .@{pagination-prefix-cls}-item {
+    &-after-jump-prev,
+    &-before-jump-next {
+      display: none;
+    }
+  }
+}
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -103,7 +103,7 @@
  }

  & + span {
-    color: #ccc;
+    color: @disabled-color;
    cursor: not-allowed;
  }
 }
@@ -193,15 +193,15 @@ span.@{radio-prefix-cls} + * {
    }

    &:hover {
-      border-color: tint(@primary-color, 20%);
-      box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
-      color: tint(@primary-color, 20%);
+      border-color: @primary-5;
+      box-shadow: -1px 0 0 0@primary-5;
+      color: @primary-5;
    }

    &:active {
-      border-color: shade(@primary-color, 5%);
-      box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
-      color: shade(@primary-color, 5%);
+      border-color: @primary-7;
+      box-shadow: -1px 0 0 0@primary-7;
+      color: @primary-7;
    }
  }

@@ -209,13 +209,13 @@ span.@{radio-prefix-cls} + * {
    border-color: @border-color-base;
    background-color: @background-color-base;
    cursor: not-allowed;
-    color: #ccc;
+    color: @disabled-color;

    &:first-child,
    &:hover {
      border-color: @border-color-base;
      background-color: @background-color-base;
-      color: #ccc;
+      color: @disabled-color;
    }
    &:first-child {
      border-left-color: @border-color-base;
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -28,6 +28,7 @@ ReactDOM.render(
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={handleChange}
+    filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -18,7 +18,7 @@
  background: @component-background;
  top: 50%;
  font-size: @font-size-base;
-  color: #ccc;
+  color: @disabled-color;
  width: 12px;
  height: 12px;
  margin-top: -6px;
@@ -107,7 +107,7 @@
  }

  &-disabled {
-    color: #ccc;
+    color: @disabled-color;
  }

  &-disabled &-selection {
@@ -198,10 +198,10 @@
  }

  &-disabled &-selection__choice__remove {
-    color: #ccc;
+    color: @disabled-color;
    cursor: default;
    &:hover {
-      color: #ccc;
+      color: @disabled-color;
    }
  }

@@ -450,15 +450,15 @@

      &:hover,
      &-active {
-        background-color: tint(@primary-color, 90%);
+        background-color: @primary-1;
      }

      &-disabled {
-        color: #ccc;
+        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
-          color: #ccc;
+          color: @disabled-color;
          background-color: @component-background;
          cursor: not-allowed;
        }
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -64,7 +64,7 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
  height: 16px;
  line-height: 1;
  font-size: 16px;
-  color: #ccc;
+  color: @disabled-color;
 }

 .icon-wrapper .anticon:first-child {
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -24,6 +24,6 @@ To input a value in a range.
 | defaultValue   | The default value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]`   | Number or [Number, Number] | 0 or [0, 0]
 | included       | Make effect when `marks` not null，`true` means containment and `false` means coordinative | Boolean			 | true
 | disabled       | If true, the slider will not be interactable. | Boolean 			| false
-| onChange       | Callback function that is fired when the user changes the slider's value. | Function | NOOP
-| onAfterChange  | Fire when  `onmouseup` is fired. | Function        | NOOP
+| onChange       | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP
+| onAfterChange  | Fire when  `onmouseup` is fired. | Function(value) | NOOP
 | tipFormatter   | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function or null | IDENTITY
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -25,6 +25,6 @@ title: Slider
 | defaultValue   | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`   | Number or [Number, Number] | 0 or [0, 0]
 | included       | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | Boolean			 | true
 | disabled       | 值为 `true` 时，滑块为禁用状态 | Boolean 			| false
-| onChange       | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function | NOOP
-| onAfterChange  | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function        | NOOP
+| onChange       | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP
+| onAfterChange  | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP
 | tipFormatter   | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function or null | IDENTITY
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@@ -3,7 +3,7 @@

@slider-prefix-cls: ~"@{ant-prefix}-slider";
 // slider color
-@slider-disabled-color: #ccc;
+@slider-disabled-color: @disabled-color;
 // tooltip
@slider-tooltip-color: #fff;
@slider-tooltip-bg: tint(@text-color, 4%);
@@ -16,7 +16,7 @@
  margin: 10px 6px;
  height: 12px;
  border-radius: 5px;
-  background-color: #e9e9e9;
+  background-color: @border-color-split;
  cursor: pointer;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
@@ -39,7 +39,7 @@
  &:hover {
    background-color: #e1e1e1;
    .@{slider-prefix-cls}-handle {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
    }
  }

@@ -61,7 +61,7 @@
    transition: border-color 0.3s ease, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

    &:hover {
-      border-color: tint(@primary-color, 20%);
+      border-color: @primary-5;
      transform: scale(1.2);
      transform-origin: center center;
    }
@@ -107,7 +107,7 @@
    margin-left: -4px;
    width: 8px;
    height: 8px;
-    border: 2px solid #e9e9e9;
+    border: 2px solid @border-color-split;
    background-color: @component-background;
    cursor: pointer;
    border-radius: 50%;
@@ -124,7 +124,7 @@
  }

  &-disabled {
-    background-color: #e9e9e9 !important;
+    background-color: @border-color-split !important;

    .@{slider-prefix-cls}-track {
      background-color: @slider-disabled-color !important;
--- a/components/spin/tests/snapshots/demo.test.js.snap
+++ b/components/spin/tests/snapshots/demo.test.js.snap
@@ -11,6 +11,66 @@ exports[`test renders ./components/spin/demo/basic.md correctly 1`] = `
 </div>
 `;

+exports[`test renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
+<div>
+  <div
+    class="ant-spin-nested-loading">
+    <div
+      class="ant-spin-container">
+      <div
+        class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
+        data-show="true">
+        <span
+          class="ant-alert-message">
+          Alert message title
+        </span>
+        <span
+          class="ant-alert-description">
+          Further details about the context of this alert.
+        </span>
+      </div>
+    </div>
+  </div>
+  Loading state：
+  <span
+    class="ant-switch"
+    tabindex="0">
+    <span
+      class="ant-switch-inner" />
+  </span>
+</div>
+`;
+
+exports[`test renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
+<div>
+  <div
+    class="ant-spin-nested-loading">
+    <div
+      class="ant-spin-container">
+      <div
+        class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
+        data-show="true">
+        <span
+          class="ant-alert-message">
+          Alert message title
+        </span>
+        <span
+          class="ant-alert-description">
+          Further details about the context of this alert.
+        </span>
+      </div>
+    </div>
+  </div>
+  Loading state：
+  <span
+    class="ant-switch"
+    tabindex="0">
+    <span
+      class="ant-switch-inner" />
+  </span>
+</div>
+`;
+
 exports[`test renders ./components/spin/demo/inside.md correctly 1`] = `
 <div
  class="example">
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -0,0 +1,56 @@
+---
+order: 5
+title:
+  zh-CN: 延迟
+  en-US: delay
+---
+
+## zh-CN
+
+延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
+
+## en-US
+
+Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
+
+````jsx
+import { Spin, Alert, Switch } from 'antd';
+
+const Card = React.createClass({
+  getInitialState() {
+    return { loading: false };
+  },
+  toggle(value) {
+    this.setState({ loading: value });
+  },
+  render() {
+    const container = (
+      <Alert message="Alert message title"
+        description="Further details about the context of this alert."
+        type="info"
+      />
+    );
+    return (
+      <div>
+        <Spin spinning={this.state.loading} delay={500} >{container}</Spin>
+        Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <Card />
+, mountNode);
+````
+
+````css
+.example {
+  text-align: center;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding: 30px 50px;
+  margin: 20px 0;
+}
+````
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@@ -19,3 +19,4 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 | size       | enum           | default     | Size of dot in spin component, available in `small`, `default` and `large`. |
 | spinning   | boolean        | true        | Use in embedded mode, to modify loading state. |
 | tip    | string        | None        | Customize description content  |
+| delay | number (milliseconds) | None | Specifies a delay for loading state |
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -12,6 +12,7 @@ export interface SpinProps {
  spinning?: boolean;
  size?: 'small' | 'default' | 'large';
  tip?: string;
+  delay?: number;
 }

 export default class Spin extends React.Component<SpinProps, any> {
@@ -29,6 +30,7 @@ export default class Spin extends React.Component<SpinProps, any> {
  };

  debounceTimeout: number;
+  delayTimeout: number;

  constructor(props) {
    super(props);
@@ -53,18 +55,30 @@ export default class Spin extends React.Component<SpinProps, any> {
    if (this.debounceTimeout) {
      clearTimeout(this.debounceTimeout);
    }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
  }

  componentWillReceiveProps(nextProps) {
    const currentSpinning = this.props.spinning;
    const spinning = nextProps.spinning;
+    const { delay } = this.props;
+
    if (this.debounceTimeout) {
      clearTimeout(this.debounceTimeout);
    }
    if (currentSpinning && !spinning) {
      this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 300);
+      if (this.delayTimeout) {
+        clearTimeout(this.delayTimeout);
+      }
    } else {
-      this.setState({ spinning });
+      if (spinning && delay && !isNaN(Number(delay))) {
+        this.delayTimeout = setTimeout(() => this.setState({ spinning }), delay);
+      } else {
+        this.setState({ spinning });
+      }
    }
  }
  render() {
@@ -81,6 +95,7 @@ export default class Spin extends React.Component<SpinProps, any> {
    // fix https://fb.me/react-unknown-prop
    const divProps = omit(restProps, [
      'spinning',
+      'delay',
    ]);

    const spinElement = (
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -20,3 +20,4 @@ subtitle: 加载中
 | size       | enum           | default     | spin组件中点的大小，可选值为 small default large |
 | spinning   | boolean        | true        | 用于内嵌其他组件的模式，可以关闭 loading 效果    |
 | tip    | string        | 无        | 自定义描述文案 |
+| delay | number (毫秒) | 无 | 延迟显示 loading 效果 |
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -6,7 +6,7 @@
@process-title-color: @text-color;
@process-description-color: @process-title-color;
@process-tail-color: @border-color-split;
-@wait-icon-color: #ccc;
+@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
--- a/components/style/color/bezierEasing.less
+++ b/components/style/color/bezierEasing.less
@@ -0,0 +1,101 @@
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+})()`;
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -0,0 +1,40 @@
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+@functions: ~`(function() {
+  var warmDark = 0.5;     // warm color darken radio
+  var warmRotate = -26;  // warm color rotate degree
+  var coldDark = 0.55;     // cold color darken radio
+  var coldRotate = 10;   // cold color rotate degree
+  var getShadeColor = function(c) {
+    var shadeColor = tinycolor(c);
+    // warm and cold color will darken in different radio, and rotate in different degree
+    // warmer color
+    if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
+      return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
+    }
+    // colder color
+    return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
+  }
+  var primaryEasing = colorEasing(0.6);
+  this.colorPalette = function(color, index) {
+    var currentEasing = colorEasing(index * 0.1);
+    // return light colors after tint
+    if (index <= 6) {
+      return tinycolor.mix(
+        '#ffffff',
+        color,
+        currentEasing * 100 / primaryEasing
+      ).toHexString();
+    }
+    return tinycolor.mix(
+      getShadeColor(color),
+      color,
+      (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
+    ).toHexString();
+  };
+})()`;
--- a/components/style/color/colors.less
+++ b/components/style/color/colors.less
@@ -0,0 +1,90 @@
+@import 'colorPalette';
+
+// color palettes
+@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
+@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
+@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
+@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
+@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
+@blue-6: #108ee9;
+@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
+@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
+@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
+@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
+
+@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
+@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
+@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
+@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
+@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
+@purple-6: #7265E6;
+@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
+@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
+@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
+@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
+
+@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
+@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
+@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
+@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
+@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
+@cyan-6: #00A2AE;
+@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
+@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
+@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
+@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
+
+@green-1: color(~`colorPalette("@{green-6}", 1)`);
+@green-2: color(~`colorPalette("@{green-6}", 2)`);
+@green-3: color(~`colorPalette("@{green-6}", 3)`);
+@green-4: color(~`colorPalette("@{green-6}", 4)`);
+@green-5: color(~`colorPalette("@{green-6}", 5)`);
+@green-6: #00A854;
+@green-7: color(~`colorPalette("@{green-6}", 7)`);
+@green-8: color(~`colorPalette("@{green-6}", 8)`);
+@green-9: color(~`colorPalette("@{green-6}", 9)`);
+@green-10: color(~`colorPalette("@{green-6}", 10)`);
+
+@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
+@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
+@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
+@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
+@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
+@pink-6: #f5317f;
+@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
+@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
+@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
+@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
+
+@red-1: color(~`colorPalette("@{red-6}", 1)`);
+@red-2: color(~`colorPalette("@{red-6}", 2)`);
+@red-3: color(~`colorPalette("@{red-6}", 3)`);
+@red-4: color(~`colorPalette("@{red-6}", 4)`);
+@red-5: color(~`colorPalette("@{red-6}", 5)`);
+@red-6: #F04134;
+@red-7: color(~`colorPalette("@{red-6}", 7)`);
+@red-8: color(~`colorPalette("@{red-6}", 8)`);
+@red-9: color(~`colorPalette("@{red-6}", 9)`);
+@red-10: color(~`colorPalette("@{red-6}", 10)`);
+
+@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
+@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
+@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
+@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
+@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
+@orange-6: #F56A00;
+@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
+@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
+@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
+@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
+
+@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
+@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
+@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
+@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
+@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
+@yellow-6: #ffbf00;
+@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
+@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
+@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
+@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
--- a/components/style/color/tinyColor.less
+++ b/components/style/color/tinyColor.less
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -76,7 +76,7 @@ a {
  }

  &[disabled] {
-    color: #ccc;
+    color: @disabled-color;
    cursor: not-allowed;
    pointer-events: none;
  }
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -1,22 +1,36 @@
+@import "../color/colors";
+
 // Prefix
@ant-prefix             : ant;

 // Color
-@primary-color          : #108ee9;
-@success-color          : #87d068;
-@error-color            : #f50;
-@highlight-color        : #f50;
-@warning-color          : #fa0;
+@primary-color          : @blue-6;
+@success-color          : @green-6;
+@error-color            : @red-6;
+@highlight-color        : @red-6;
+@warning-color          : @yellow-6;
@normal-color           : #d9d9d9;

+@primary-1: color(~`colorPalette("@{primary-color}", 1)`);  // replace tint(@primary-color, 90%)
+@primary-2: color(~`colorPalette("@{primary-color}", 2)`);  // replace tint(@primary-color, 80%)
+@primary-3: color(~`colorPalette("@{primary-color}", 3)`);
+@primary-4: color(~`colorPalette("@{primary-color}", 4)`);
+@primary-5: color(~`colorPalette("@{primary-color}", 5)`);  // replace tint(@primary-color, 20%)
+@primary-6: @primary-color;                                 // don't use, use @primary-color
+@primary-7: color(~`colorPalette("@{primary-color}", 7)`);  // replace shade(@primary-color, 5%)
+@primary-8: color(~`colorPalette("@{primary-color}", 8)`);
+@primary-9: color(~`colorPalette("@{primary-color}", 9)`);
+@primary-10: color(~`colorPalette("@{primary-color}", 10)`);
+
 // ------ Base & Require ------
@body-background        : #fff;
@component-background   : #fff;
@font-family            : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@code-family            : Consolas, Menlo, Courier, monospace;
-@text-color             : #666;
-@heading-color          : #404040;
-@text-color-secondary   : #999;
+@text-color             : fade(#000, 65%);
+@heading-color          : fade(#000, 75%);
+@text-color-secondary   : fade(#000, 43%);
+@disabled-color         : fade(#000, 25%);
@font-size-base         : 12px;
@font-size-lg           : @font-size-base + 2px;
@line-height-base       : 1.5;
@@ -28,9 +42,9 @@
@icon-url               : "https://at.alicdn.com/t/font_r5u29ls31bgldi";

 // LINK
-@link-color             : #108ee9;
-@link-hover-color       : tint(@link-color, 20%);
-@link-active-color      : shade(@link-color, 5%);
+@link-color             : @primary-color;
+@link-hover-color       : @primary-5;
+@link-active-color      : @primary-7;
@link-hover-decoration  : none;

 // Animation
@@ -75,7 +89,7 @@

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;
-@btn-group-border       : shade(@primary-color, 5%);
+@btn-group-border       : @primary-7;

@btn-default-color      : @text-color;
@btn-default-bg         : @background-color-base;
@@ -85,7 +99,7 @@
@btn-ghost-bg           : transparent;
@btn-ghost-border       : @border-color-base;

-@btn-disable-color      : #ccc;
+@btn-disable-color      : @disabled-color;
@btn-disable-bg         : @background-color-base;
@btn-disable-border     : @border-color-base;

@@ -119,10 +133,20 @@
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

-// Layout and Grid system
+// Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

+// Layout
+@layout-body-background    : #ececec;
+@layout-header-background  : @heading-color;
+@layout-header-height      : 64px;
+@layout-header-padding     : 0 50px;
+@layout-footer-padding     : 24px 50px;
+@layout-sider-background   : @heading-color;
+@layout-content-margin     : 24px;
+@layout-trigger-height     : 48px;
+
 // z-index list
@zindex-affix           : 10;
@zindex-back-top        : 10;
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@@ -14,7 +14,7 @@
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #ccc;
-  background-color: #ccc;
+  background-color: @disabled-color;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;
@@ -122,7 +122,7 @@
    }

    .@{switch-prefix-cls}-inner {
-      color: #ccc;
+      color: @disabled-color;
    }
  }
 }
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -560,7 +560,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
    warning(recordKey !== undefined,
      'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.'
    );
-    return recordKey;
+    return recordKey === undefined ? index : recordKey;
  }

  renderRowSelection() {
@@ -823,7 +823,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
  }

  render() {
-    const { style, className, prefixCls, ...restProps } = this.props;
+    const { style, className, prefixCls, showHeader, ...restProps } = this.props;
    const data = this.getCurrentPageData();
    let columns = this.renderRowSelection();
    const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
@@ -833,6 +833,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
      [`${prefixCls}-${this.props.size}`]: true,
      [`${prefixCls}-bordered`]: this.props.bordered,
      [`${prefixCls}-empty`]: !data.length,
+      [`${prefixCls}-without-column-header`]: !showHeader,
    });

    columns = this.renderColumnsDropdown(columns);
@@ -853,6 +854,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
        prefixCls={prefixCls}
        data={data}
        columns={columns}
+        showHeader={showHeader}
        className={classString}
        expandIconColumnIndex={expandIconColumnIndex}
        expandIconAsCell={expandIconAsCell}
--- a/components/table/tests/snapshots/Table.filter.test.js.snap
+++ b/components/table/tests/snapshots/Table.filter.test.js.snap
@@ -20,7 +20,7 @@ exports[`Table.filter renders filter correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
--- a/components/table/tests/snapshots/Table.pagination.test.js.snap
+++ b/components/table/tests/snapshots/Table.pagination.test.js.snap
@@ -6,7 +6,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
--- a/components/table/tests/snapshots/Table.test.js.snap
+++ b/components/table/tests/snapshots/Table.test.js.snap
@@ -6,7 +6,7 @@ exports[`Table renders JSX correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
--- a/components/table/tests/snapshots/demo.test.js.snap
+++ b/components/table/tests/snapshots/demo.test.js.snap
@@ -6,7 +6,7 @@ exports[`test renders ./components/table/demo/ajax.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-empty ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -93,7 +93,7 @@ exports[`test renders ./components/table/demo/basic.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -316,7 +316,7 @@ exports[`test renders ./components/table/demo/bordered.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-bordered ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-title">
          Header
@@ -468,7 +468,7 @@ exports[`test renders ./components/table/demo/colspan-rowspan.md correctly 1`] =
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-bordered ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -685,7 +685,7 @@ exports[`test renders ./components/table/demo/custom-filter-panel.md correctly 1
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -929,6 +929,29 @@ exports[`test renders ./components/table/demo/dynamic-settings.md correctly 1`]
          </div>
        </div>
      </div>
+      <div
+        class="ant-row ant-form-item">
+        <div
+          class="ant-form-item-label">
+          <label
+            class="">
+            Column Header
+          </label>
+        </div>
+        <div
+          class="">
+          <div
+            class="ant-form-item-control ">
+            <span
+              checked=""
+              class="ant-switch ant-switch-checked"
+              tabindex="0">
+              <span
+                class="ant-switch-inner" />
+            </span>
+          </div>
+        </div>
+      </div>
      <div
        class="ant-row ant-form-item">
        <div
@@ -1852,7 +1875,7 @@ exports[`test renders ./components/table/demo/edit-cell.md correctly 1`] = `
      <div
        class="ant-spin-container">
        <div
-          class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left">
+          class="ant-table ant-table-large ant-table-bordered ant-table-without-column-header ant-table-scroll-position-left">
          <div
            class="ant-table-content">
            <div
@@ -2008,7 +2031,7 @@ exports[`test renders ./components/table/demo/edit-row.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-bordered ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -2138,7 +2161,7 @@ exports[`test renders ./components/table/demo/expand.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -2313,7 +2336,7 @@ exports[`test renders ./components/table/demo/expand-children.md correctly 1`] =
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -2745,7 +2768,7 @@ exports[`test renders ./components/table/demo/fixed-columns.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -3113,7 +3136,7 @@ exports[`test renders ./components/table/demo/fixed-columns-header.md correctly
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-fixed-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -4163,7 +4186,7 @@ exports[`test renders ./components/table/demo/fixed-columns-header.md correctly
      </a>
    </li>
    <li
-      class="ant-pagination-item ant-pagination-item-5"
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
      title="5">
      <a>
        5
@@ -4198,7 +4221,7 @@ exports[`test renders ./components/table/demo/fixed-header.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-fixed-header ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-fixed-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -5202,7 +5225,7 @@ exports[`test renders ./components/table/demo/grouping-columns.md correctly 1`]
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-middle ant-table-bordered ant-table-fixed-header ant-table-scroll-position-left">
+        class="ant-table ant-table-middle ant-table-bordered ant-table-without-column-header ant-table-fixed-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -6057,7 +6080,7 @@ exports[`test renders ./components/table/demo/grouping-columns.md correctly 1`]
      </a>
    </li>
    <li
-      class="ant-pagination-item ant-pagination-item-5"
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
      title="5">
      <a>
        5
@@ -6092,7 +6115,7 @@ exports[`test renders ./components/table/demo/head.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -6296,7 +6319,7 @@ exports[`test renders ./components/table/demo/jsx.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-bordered ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-bordered ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -6541,7 +6564,7 @@ exports[`test renders ./components/table/demo/paging.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -6906,7 +6929,7 @@ exports[`test renders ./components/table/demo/reset-filter.md correctly 1`] = `
      <div
        class="ant-spin-container">
        <div
-          class="ant-table ant-table-large ant-table-scroll-position-left">
+          class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
          <div
            class="ant-table-content">
            <div
@@ -7111,7 +7134,7 @@ exports[`test renders ./components/table/demo/row-selection.md correctly 1`] = `
    <div
      class="ant-spin-container">
      <div
-        class="ant-table ant-table-large ant-table-scroll-position-left">
+        class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
        <div
          class="ant-table-content">
          <div
@@ -7372,7 +7395,7 @@ exports[`test renders ./components/table/demo/row-selection-and-operation.md cor
      <div
        class="ant-spin-container">
        <div
-          class="ant-table ant-table-large ant-table-scroll-position-left">
+          class="ant-table ant-table-large ant-table-without-column-header ant-table-scroll-position-left">
          <div
            class="ant-table-content">
            <div
@@ -7843,7 +7866,7 @@ exports[`test renders ./components/table/demo/size.md correctly 1`] = `
      <div
        class="ant-spin-container">
        <div
-          class="ant-table ant-table-middle ant-table-scroll-position-left">
+          class="ant-table ant-table-middle ant-table-without-column-header ant-table-scroll-position-left">
          <div
            class="ant-table-content">
            <div
@@ -7978,7 +8001,7 @@ exports[`test renders ./components/table/demo/size.md correctly 1`] = `
      <div
        class="ant-spin-container">
        <div
-          class="ant-table ant-table-small ant-table-scroll-position-left">
+          class="ant-table ant-table-small ant-table-without-column-header ant-table-scroll-position-left">
          <div
            class="ant-table-content">
            <div
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -1,5 +1,5 @@
 ---
-order: 22
+order: 24
 title:
  en-US: Dynamic Settings
  zh-CN: 动态控制表格属性
@@ -62,6 +62,7 @@ for (let i = 1; i <= 10; i++) {

 const expandedRowRender = record => <p>{record.description}</p>;
 const title = () => 'Here is title';
+const showHeader = true;
 const footer = () => 'Here is footer';
 const scroll = { y: 240 };

@@ -73,6 +74,7 @@ class Demo extends React.Component {
    size: 'default',
    expandedRowRender,
    title,
+    showHeader,
    footer,
    rowSelection: {},
    scroll: undefined,
@@ -96,6 +98,10 @@ class Demo extends React.Component {
    this.setState({ title: enable ? title : undefined });
  }

+  handleHeaderChange = (enable) => {
+    this.setState({ showHeader: enable ? showHeader : false });
+  }
+
  handleFooterChange = (enable) => {
    this.setState({ footer: enable ? footer : undefined });
  }
@@ -126,6 +132,9 @@ class Demo extends React.Component {
            <FormItem label="Title">
              <Switch checked={!!state.title} onChange={this.handleTitleChange} />
            </FormItem>
+            <FormItem label="Column Header">
+              <Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
+            </FormItem>
            <FormItem label="Footer">
              <Switch checked={!!state.footer} onChange={this.handleFooterChange} />
            </FormItem>
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -58,7 +58,7 @@ class EditableCell extends React.Component {
        </div>
        :
        <div className="editable-row-text">
-          {value || ' '}
+          {value.toString() || ' '}
        </div>
      }
    </div>);
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -9,15 +9,15 @@ title:

 使用受控属性对筛选和排序状态进行控制。

-> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
+> 1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
 > 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
 > 3. 务必指定 `column.key`。

 ## en-US

-Control filters and sorters by `fileredValue` and `sortOrder`.
+Control filters and sorters by `filteredValue` and `sortOrder`.

-> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode.
+> 1. Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.
 > 2. Make sure `sortOrder` is assigned for only one column.
 > 3. `column.key` is required.

--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -10,7 +10,6 @@
  overflow: hidden;
  position: relative;
  border-radius: @border-radius-base @border-radius-base 0 0;
-  overflow: hidden;

  &-body {
    transition: opacity 0.3s ease;
@@ -61,7 +60,7 @@
    transition: all .3s ease;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
-      background: tint(@primary-color, 90%);
+      background: @primary-1;
    }
  }

@@ -102,7 +101,7 @@

  &-title + &-content {
    position: relative;
-    border-radius: 6px 6px 0 0;
+    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
    .@{table-prefix-cls}-bordered & {
      &,
@@ -112,6 +111,12 @@
    }
  }

+  // https://github.com/ant-design/ant-design/issues/4373
+  &-without-column-header &-title + &-content,
+  &-without-column-header table {
+    border-radius: 0;
+  }
+
  &-tbody > tr.@{table-prefix-cls}-row-selected {
    background: #fafafa;
  }
@@ -364,7 +369,7 @@
        .@{ant-prefix}-dropdown-menu-submenu-title:after {
          color: @primary-color;
          font-weight: bold;
-          text-shadow: 0 0 2px tint(@primary-color, 80%);
+          text-shadow: 0 0 2px@primary-2;
        }
      }
    }
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -92,7 +92,7 @@
    cursor: not-allowed;
    &,
    &:hover {
-      color: #ccc;
+      color: @disabled-color;
    }
  }

@@ -146,7 +146,7 @@
    .@{tab-prefix-cls}-tab-disabled {
      pointer-events: none;
      cursor: default;
-      color: #ccc;
+      color: @disabled-color;
    }

    .@{tab-prefix-cls}-tab {
@@ -162,11 +162,11 @@
      text-decoration: none;

      &:hover {
-        color: tint(@primary-color, 20%);
+        color: @primary-5;
      }

      &:active {
-        color: shade(@primary-color, 5%);
+        color: @primary-7;
      }
      .@{iconfont-css-prefix} {
        width: 14px;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
乐仪	ffa7f9b1ba	CHANGELOG - v2.6	2017-01-02 02:14:40 +08:00
ddcat1115	c5b154294e	add attribute `compact` for InputGroup (#4309 ) * add attribute `compact` for InputGroup * improve	2017-01-02 00:12:41 +08:00
偏右	d811ebee5c	New color system (#4426 ) * Add new color patterns algorithm * Add color palettes * update other colors * fix gray color * update more tint/shade to colorPalette * new font color * Update doc for new color system * improve doc style	2017-01-01 22:20:06 +08:00
afc163	fb6858c3cc	Fix hasFeedback and Select style detail for #4436	2017-01-01 17:39:27 +08:00
Jesper We	d258ace146	Fix #4431 Overlapping graphics with<Select> in <Form.Item ... hasFeedback={true} (#4436 )	2017-01-01 17:20:08 +08:00
afc163	793a2d284e	Add spin demo test snapshot	2017-01-01 15:42:54 +08:00
陆离	7f7d94068a	add `delay` props of Spin (#4424 ) * add `delay` props of Spin + close 4306 + Specifies a delay for loading state. If `spinning` ends during delay, loading state won't appear. * improves	2017-01-01 01:13:34 +08:00
Rex	1b8a280614	support suffix (#4283 ) * support suffix * optimize prefix and suffix * 1. Optimize prefix and suffix implementation 2. Improve the api document 3. Optimize `Input.Search` implementation * update snapshots	2017-01-01 01:06:19 +08:00
偏右	e4bee3425a	Upgrade rc form (#4430 ) * support nested form item name by upgrade rc-form react-component/form#48 * Fix dynamic form demo	2016-12-31 23:47:07 +08:00
Wei Zhu	2390c055aa	Ignore yarn.lock	2016-12-31 20:27:23 +08:00
Wei Zhu	f2dbf83216	Specify eslint-plugin-markdown version since yarn complains it.	2016-12-31 20:27:13 +08:00
afc163	c0a44adb56	Fix Cascader[disabled] background, close #4434	2016-12-31 16:08:58 +08:00
afc163	c285f5f651	fix snapshot	2016-12-30 22:36:10 +08:00
afc163	45051aebac	fix changelog	2016-12-30 21:54:09 +08:00
afc163	237d6ab62b	fix layout demo	2016-12-30 21:44:10 +08:00
偏右	0062867274	Feature 2.6 (#4429 ) * new Layout Component (#4087) * change Anchor type * new Layout * Component update && add snap * Revert "new Layout Component" (#4131) * add Layout (#4169) * add Layout * update * fix snapshot * Improve layout component 1. update demo code 2. drop `position` of Sider 3. improve demo style	2016-12-30 21:41:28 +08:00
afc163	c3982b02aa	Fix monthCellContentRender and wrong documentation, close #4394	2016-12-30 15:04:13 +08:00
Wei Zhu	0a3e57a61e	Using padding for node gaps, fix #4371 (#4398 )	2016-12-30 14:32:34 +08:00
Kevin Ivan	fd469ea1a5	grammar typo (#4379 )	2016-12-30 14:30:20 +08:00
Rex	c8a16b10bd	fix the blue border in some scenes (#4382 )	2016-12-30 14:27:23 +08:00
afc163	959fc6b2e3	update docs	2016-12-30 14:13:43 +08:00
afc163	2583798cce	Add demo for Case-insensitive search Select, close #4408	2016-12-30 14:05:27 +08:00
afc163	20cd35abe3	fix demo	2016-12-30 14:05:27 +08:00
Wei Zhu	29e4717fe3	Fallback table record key to data index. (#4397 ) In last PR #4185, we removed data index from record key, it leads to inconformity behavior.	2016-12-30 13:50:11 +08:00
afc163	f816455421	update Changelog	2016-12-30 13:45:44 +08:00
afc163	7f41114ab7	fix site layout back	2016-12-30 13:44:24 +08:00
afc163	662b213137	Fix Menu[dark] item background, close #4414 again	2016-12-30 13:16:30 +08:00
afc163	35d91d8dee	Fix Menu[dark] item background, close #4414	2016-12-30 12:16:29 +08:00
Wei Zhu	42f98e6779	docs: fix typo.	2016-12-29 21:41:46 +08:00
可乐	2e4e1fcaef	避免 value 正好是数字 0 (#4401 )	2016-12-29 13:42:14 +08:00
偏右	3deb8ec590	Delete .hound.yml	2016-12-28 20:08:36 +08:00
ddcat1115	c4b637b7de	site: fix site style (#4386 )	2016-12-28 17:54:07 +08:00
afc163	967b9a77a9	update doc	2016-12-28 15:50:59 +08:00
afc163	8852dfd767	update doc titles	2016-12-28 15:45:37 +08:00
afc163	047476efaf	update customize-theme doc	2016-12-28 00:23:32 +08:00
afc163	d570d03698	improve document for Form setFields, close #4370	2016-12-27 21:14:00 +08:00
afc163	22a0604ed5	update doc for babelrc	2016-12-27 21:07:16 +08:00
afc163	869fc54cf7	fix snapshots	2016-12-27 19:32:36 +08:00
afc163	668c481110	Fix table radius without column header, close #4373	2016-12-27 18:24:30 +08:00
afc163	e91f4f2335	improve style code	2016-12-27 17:57:17 +08:00
afc163	3e00fa8e64	update dynamic-settings table demo	2016-12-27 17:47:27 +08:00
afc163	b0a5601c98	fix less variables in slider	2016-12-27 17:04:10 +08:00
afc163	9b8a26ba17	upgrade code style	2016-12-26 19:46:01 +08:00
afc163	d81c425588	fix snapshot	2016-12-26 18:24:00 +08:00
afc163	f07f33d879	fix snapshots	2016-12-26 11:16:28 +08:00
Babajide Fowotade	8c0692f5e7	Fix babel dir path to modify in create-react-app docs (#4362 )	2016-12-26 11:15:36 +08:00
afc163	7602faed65	improve playground.md	2016-12-25 21:31:33 +08:00
afc163	1ef76b40ec	update Slider doc	2016-12-25 21:10:14 +08:00
afc163	ee17abfa9d	Add Grid playground demo	2016-12-25 21:09:49 +08:00
afc163	0d0d63a741	Improve responsive layout of Pagination, close #4349	2016-12-25 19:55:12 +08:00
afc163	27b3cdab05	better responsive page layout	2016-12-25 19:18:08 +08:00
Alexandre Kirszenberg	517720895d	Dropdown.Button as a single non-wrappable element (#4355 )	2016-12-24 23:12:37 +08:00