2.8.0

1. Fix expand cell width to 50px;
2. Fix select all cell width in different size.

.github/ISSUE_TEMPLATE.md

@@ -1,12 +1,12 @@
 <!-- Issue Template -->
 
 <!--
-亲爱的中文用户请注意：
-
-1. 官方 issue 用于报告 bug 和讨论需求。用法咨询类问题建议到 https://segmentfault.com/t/antd 上提问，目前社区没有足够精力提供此类服务，感谢您的理解。
-2. 建议使用英文进行提问，这样你的问题可以被更多的人阅读和回答。如果表达上较复杂，英文标题加中文描述也是可选的方案。
+1. 官方 issue 用于报告 bug 和需求建议。用法咨询类问题建议到 https://segmentfault.com/t/antd 上提问，目前社区没有足够精力提供此类服务，感谢您的理解。
+2. 建议使用英文进行提问，这样你的问题可以被更多的人阅读和回答。如果表达上确实较复杂，英文标题加中文描述也是可选的方案。
 3. 报告 BUG 时请务必按照下列格式书写，并尽可能提供源代码、复现步骤、复现演示、GIF 演示等。我们和你一样都希望尽快解决问题，请不要浪费时间在互相追问上。
-4. 如果需要粘贴源码，尽量避免截图并注意代码格式。关于如何在 Markdown 中书写代码可以参考：https://segmentfault.com/markdown
+4. 注意你的 issue 格式，不适合阅读的格式会被忽视或直接关闭。
+5. 如果需要粘贴源码，尽量避免截图并注意代码格式。关于如何在 Markdown 中书写代码可以参考：https://segmentfault.com/markdown
+6. 抱怨不能解决问题，通畅有效和心情舒畅的交流才能解决。
 -->
 
 #### Environment(required)

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,6 +2,7 @@ First of all, thanks for your contribution! :-)
 
 Please makes sure these boxes are checked before submitting your PR, thank you!
 
+* [ ] Make sure you propose PR to correct branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
 * [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
 * [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
 * [ ] Rebase before creating a PR to keep commit history clear.

CHANGELOG.en-US.md

@@ -17,6 +17,67 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 
 ---
 
+## 2.8.0
+
+`2017-03-06`
+
+- Tabs
+  - Added `tabBarStyle` to allow customize style of tab bar. [#4966](https://github.com/ant-design/ant-design/issues/4966)
+  - Added `TabPane[closable]` to allow config whether to show delete icon or not. [#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+- Anchor
+  - Added `showInkInFixed` to allow config whether to show circle icon or not when anchor is fixed. [#4960](https://github.com/ant-design/ant-design/pull/4960)
+  - Fix issue resulting in Anchor throw errors when `children` is not AnchorLink. [#5129](https://github.com/ant-design/ant-design/issues/5129)
+- Table
+  - Added invert selection feature. [demo](https://ant.design/components/table-cn/#components-table-demo-row-selection-custom) [#4962](https://github.com/ant-design/ant-design/pull/4962)
+  - `spin` now spport Spin props. [#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+  - Fix issue resulting header's bottom border doesn't show when `size` is `small`. [#5182](https://github.com/ant-design/ant-design/issues/5182)
+- Mention added custom trigger character support. [demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger)
+  ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif)
+- Rate
+  - Support custom character. [demo](https://ant.design/components/rate-cn/#components-rate-demo-character)
+  - Added new `className` prop.
+- Layout
+  - Added a new `Header Sider` demo. [demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2)
+  - Added a new `Fixed Header` demo. [demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed)
+  - Added `Sider[breakpoint]` to allow config responsive breakpoint. [#4931](https://github.com/ant-design/ant-design/pull/4931)
+- Form
+  - Added `layout` to replace the original `horizontal`、`vertical`、`inline`. [#5056](https://github.com/ant-design/ant-design/issues/5056)
+  - Added responsive support. [#5055](https://github.com/ant-design/ant-design/issues/5055)
+- Calendar
+  - Added `dateFullCellRender` and `monthFullCellRender` to allow override the content of cell. [#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun)
+  - Added  `onSelect` for date selection. [demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select)
+- AutoComplete
+  - Fix alignment issue in Form.Item. [#5139](https://github.com/ant-design/ant-design/issues/5139)
+  - Adde a newd `Uncertain Category` demo. [demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category)
+- Col added `xl` to support 1600px breakpoint. [#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me)
+- Upload added `locale` to support i18n. [#4697](https://github.com/ant-design/ant-design/issues/4697)
+- Transfer added `onScroll` to support load data dynamically. [#4188](https://github.com/ant-design/ant-design/issues/4188)
+- `message` and `notification` add `getContainer` to allow config the render container. [#5019](https://github.com/ant-design/ant-design/issues/5019)
+- Badge added `showZero` to allow config whether to show `0` or not. [#4251](https://github.com/ant-design/ant-design/issues/4251)
+- InputNumber
+  - Added `formatter` to allow format the value to present.
+  - Added ctrl and shift key support. [detail](https://github.com/react-component/input-number#keyboard-navigation)
+- Added some new icons. [#5107](https://github.com/ant-design/ant-design/pull/5107)
+- New locale support:
+  - Dutch [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl)
+  - Catalan [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell)
+  - Czech [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169)
+  - Korean [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141)
+- Improve Spin display position. [#4722](https://github.com/ant-design/ant-design/issues/4722)
+- Fix Checkbox comatible issue with `browser-sync`. [#2744](https://github.com/ant-design/ant-design/issues/2744)
+- Fix Steps width issue when resize window. [#5083](https://github.com/ant-design/ant-design/issues/5083)
+- Fix Upload.Dragger unmount error. [#5162](https://github.com/ant-design/ant-design/issues/5162)
+- Fix Button shifting during click in IE issue.
+- FIx Input prefix and suffix vertical alignment.
+
+## 2.7.4
+
+`2017-02-28`
+
+- Fix TreeSelect cannot display bug. [#5092](https://github.com/ant-design/ant-design/issues/5092)
+- Fix Anchor `e.stopPreventDefault is not a function` error. [#5080](https://github.com/ant-design/ant-design/issues/5080)
+- Fix some detail styles of Input, Cascader, Upload.
+
 ## 2.7.3
 
 `2017-02-25`

CHANGELOG.zh-CN.md

@@ -9,14 +9,77 @@ timeline: true
 
 #### 发布周期
 
-* patch 版本：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
-* minor 版本：每月发布一个带有新特性的向下兼容的版本。
-* 大版本号：含有破坏性更新和新特性，不在发布周期内。
+* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
+* 次版本号：每月发布一个带有新特性的向下兼容的版本。
+* 主版本号：含有破坏性更新和新特性，不在发布周期内。
 
 如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md)。
 
 ---
 
+## 2.8.0
+
+`2017-03-06`
+
+- Tabs
+  - 新增 `tabBarStyle` 用于自定义 tabBar 的样式。[#4966](https://github.com/ant-design/ant-design/issues/4966)
+  - 新增 `TabPane[closable]` 用于设置是否显示删除按钮。[#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+- Anchor
+  - 新增 `showInkInFixed` 用于设置在 fixed 状态下是否圆形图标。[#4960](https://github.com/ant-design/ant-design/pull/4960)
+  - 修复 `children` 不是 AnchorLink 时会报错的问题。[#5129](https://github.com/ant-design/ant-design/issues/5129)
+- Table
+  - 新增反选功能并允许自定义全选选项。[#4962](https://github.com/ant-design/ant-design/pull/4962)
+  - `spin` 属性支持所有 Spin 的属性。[#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+  - 修正 `size` 是 `small` 的时候表头没有底边框的问题。[#5182](https://github.com/ant-design/ant-design/issues/5182)
+- Mention
+  - 新增自定义触发字符的支持。[demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger)
+
+  ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif)
+- Rate
+  - 支持自定义字符。[demo](https://ant.design/components/rate-cn/#components-rate-demo-charactor)
+  - 新增 `className` 属性。
+- Layout
+  - 新增 `顶部-侧边布局-通栏` 的例子。[demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2)
+  - 新增 `固定头部` 的例子。[demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed)
+  - Sider 新增 `breakpoint` 用于设置响应式展示。[#4931](https://github.com/ant-design/ant-design/pull/4931)
+- Form
+  - 新增 `layout` 属性用于取代原有的 `horizontal`、`vertical`、`inline`。[#5056](https://github.com/ant-design/ant-design/issues/5056)
+  - 支持响应式布局变化。[#5055](https://github.com/ant-design/ant-design/issues/5055)
+- Calendar
+  - 新增 `dateFullCellRender` 和 `monthFullCellRender` 用于覆盖单元格的内容。[#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun)
+  - 新增 `onSelect` 用于日期选择功能。[demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select)
+- AutoComplete
+  - 修复在 Form.Item 里不对齐的问题。[#5139](https://github.com/ant-design/ant-design/issues/5139)
+  - 新增 `查询模式 - 确定类目` 的例子。[demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category)
+- Col 新增 `xl` 属性，支持 1600px 的响应布局断点。[#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me)
+- Upload 新增 `locale` 支持国际化文案定义。[#4697](https://github.com/ant-design/ant-design/issues/4697)
+- Transfer 新增 `onScroll` 支持动态加载数据。[#4188](https://github.com/ant-design/ant-design/issues/4188)
+- message 和 notification 新增 `getContainer` 参数支持自定义消息渲染的容器。[#5019](https://github.com/ant-design/ant-design/issues/5019)
+- Badge 新增 `showZero` 支持设置是否显示 `0`。[#4251](https://github.com/ant-design/ant-design/issues/4251)
+- InputNumber
+  - 新增 `formatter` 用于格式化展示的值。
+  - 新增组合键的支持。[详细](https://github.com/react-component/input-number#keyboard-navigation)
+- 新增大量图标。[#5107](https://github.com/ant-design/ant-design/pull/5107)
+- 新增语言支持：
+  - 荷兰语 [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl)
+  - 加泰罗尼亚语 [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell)
+  - 捷克语 [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169)
+  - 朝鲜语 [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141)
+- 优化 Spin 显示位置。[#4722](https://github.com/ant-design/ant-design/issues/4722)
+- 优化 Checkbox 以兼容 `browser-sync`。[#2744](https://github.com/ant-design/ant-design/issues/2744)
+- 修复 Steps 在窗口变化时的宽度问题。[#5083](https://github.com/ant-design/ant-design/issues/5083)
+- 修复 Upload.Dragger unmount 时会报错的问题。[#5162](https://github.com/ant-design/ant-design/issues/5162)
+- 修复 Button 里的文字在 IE 下点击时会移动的问题。
+- 修复 Input 的前缀跟后缀的垂直居中对齐问题。
+
+## 2.7.4
+
+`2017-02-28`
+
+- 修复 TreeSelect 多选框无法展现的问题。[#5092](https://github.com/ant-design/ant-design/issues/5092)
+- 修复 Anchor 的 `e.stopPreventDefault is not a function` 的报错。[#5080](https://github.com/ant-design/ant-design/issues/5080)
+- 修复 Input、Cascader、Upload 的一些样式细节。
+
 ## 2.7.3
 
 `2017-02-25`

README-zh_CN.md

@@ -47,7 +47,6 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。
 
-
 ## 浏览器支持
 
 现代浏览器和 IE9 及以上。

README.md

@@ -38,8 +38,6 @@ npm install antd
 
 ## Usage
 
-### Use prebuilt bundle
-
 ```jsx
 import { DatePicker } from 'antd';
 ReactDOM.render(<DatePicker />, mountNode);
@@ -58,22 +56,25 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
    ```js
    // .babelrc or babel-loader option
    {
-     "plugins": [["import", { libraryName: "antd", style: "css" }]]
+     "plugins": [
+       ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
+     ]
    }
    ```
 
-   Then you can import components from antd directly.
+   Then you can import components from antd, equivalent to import manually below.
 
    ```jsx
    // import js and css modularly, parsed by babel-plugin-import
    import { DatePicker } from 'antd';
    ```
 
-- Manual import
+- Manually import
 
    ```jsx
-   import DatePicker from 'antd/lib/date-picker';  // just for js
-   import 'antd/lib/date-picker/style/css';  // with style
+   import DatePicker from 'antd/lib/date-picker';  // for js
+   import 'antd/lib/date-picker/style/css';        // for css
+   // import 'antd/lib/date-picker/style';         // that will import less
    ```
 
 ## Environment Support

components/affix/index.tsx

@@ -138,12 +138,12 @@ export default class Affix extends React.Component<AffixProps, any> {
     const targetRect = getTargetRect(targetNode);
     const targetInnerHeight =
       (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
-    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
+    if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
       // Fixed Top
       const width = elemOffset.width;
       this.setAffixStyle(e, {
         position: 'fixed',
-        top: targetRect.top + offsetTop,
+        top: targetRect.top + (offsetTop as number),
         left: targetRect.left + elemOffset.left,
         width,
       });
@@ -152,7 +152,7 @@ export default class Affix extends React.Component<AffixProps, any> {
         height: affixNode.offsetHeight,
       });
     } else if (
-      scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
+      scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
         offsetMode.bottom
     ) {
       // Fixed Bottom
@@ -160,7 +160,7 @@ export default class Affix extends React.Component<AffixProps, any> {
       const width = elemOffset.width;
       this.setAffixStyle(e, {
         position: 'fixed',
-        bottom: targetBottomOffet + offsetBottom,
+        bottom: targetBottomOffet + (offsetBottom as number),
         left: targetRect.left + elemOffset.left,
         width,
       });

components/anchor/AnchorLink.tsx

@@ -16,6 +16,7 @@ export interface AnchorLinkProps {
 }
 
 export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
+  static __ANT_ANCHOR_LINK = true;
   static contextTypes = {
     anchorHelper: React.PropTypes.any,
   };
@@ -73,7 +74,6 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     if (onClick) {
       onClick(href, this._component);
     } else {
-      e.stopPreventDefault();
       const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
       scrollToFn(href, this.props.offsetTop);
     }

components/anchor/index.en-US.md

@@ -20,6 +20,8 @@ For displaying anchor hyperlinks on page and jumping between them.
 | offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | bounds     | Bounding distance of anchor area | number | 5(px) |
+| affix | Fixed mode of Anchor | boolean | false |
+| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
 
 ### Link Props
 

components/anchor/index.tsx

@@ -14,6 +14,7 @@ export interface AnchorProps {
   className?: string;
   style?: React.CSSProperties;
   affix?: boolean;
+  showInkInFixed?: boolean;
 }
 
 export default class Anchor extends React.Component<AnchorProps, any> {
@@ -22,6 +23,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   static defaultProps = {
     prefixCls: 'ant-anchor',
     affix: true,
+    showInkInFixed: false,
   };
 
   static childContextTypes = {
@@ -91,14 +93,15 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   }
 
   renderAnchorLink = (child) => {
+
     const { href } = child.props;
-    if (href) {
+    if (child.type.__ANT_ANCHOR_LINK && href) {
       this.anchorHelper.addLink(href);
       return React.cloneElement(child, {
         onClick: this.clickAnchorLink,
         prefixCls: this.props.prefixCls,
         bounds: this.props.bounds,
-        affix: this.props.affix,
+        affix: this.props.affix || this.props.showInkInFixed,
         offsetTop: this.props.offsetTop,
       });
     }
@@ -106,7 +109,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   }
 
   render() {
-    const { prefixCls, offsetTop, style, className = '', affix } = this.props;
+    const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props;
     const { activeAnchor, animated } = this.state;
     const inkClass = classNames({
       [`${prefixCls}-ink-ball`]: true,
@@ -119,7 +122,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
     }, className);
 
     const anchorClass = classNames(prefixCls, {
-      'fixed': !affix,
+      'fixed': !affix && !showInkInFixed,
     });
 
     const anchorContent = (
@@ -128,7 +131,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
           <div className={`${prefixCls}-ink`} >
             <span className={inkClass} ref="ink" />
           </div>
-          {React.Children.map(this.props.children, this.renderAnchorLink)}
+          {React.Children.toArray(this.props.children).map(this.renderAnchorLink)}
         </div>
       </div>
     );

components/anchor/index.zh-CN.md

@@ -21,6 +21,8 @@ title: Anchor
 | offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
 | bounds | 锚点区域边界 | number | 5(px) |
+| affix | 固定模式 | boolean | false |
+| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
 
 ### Link Props
 

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -85,6 +85,62 @@ exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`test renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
+<div
+  class="certain-category-search-wrapper"
+  style="width:250px;">
+  <div
+    class="ant-select-lg ant-select-lg certain-category-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+    style="width:100%;">
+    <div
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+                ant-select-selection--single"
+      role="combobox">
+      <div
+        class="ant-select-selection__rendered">
+        <div
+          class="ant-select-selection__placeholder"
+          style="display:block;user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          input here
+        </div>
+        <ul>
+          <li
+            class="ant-select-search ant-select-search--inline">
+            <div
+              class="ant-select-search__field__wrap">
+              <span
+                class="ant-input-preSuffix-wrapper">
+                <input
+                  class="ant-input ant-input ant-select-search__field"
+                  type="text"
+                  value="" />
+                <span
+                  class="ant-input-suffix">
+                  <i
+                    class="anticon anticon-search certain-category-icon" />
+                </span>
+              </span>
+              <span
+                class="ant-select-search__field__mirror" />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable">
+        <b />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`test renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
 <div
   class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"

components/auto-complete/demo/certain-category.md

@@ -0,0 +1,149 @@
+---
+order: 4
+title:
+  zh-CN: 查询模式 - 确定类目
+  en-US: Lookup-Patterns - Certain Category
+---
+
+## zh-CN
+
+[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
+
+## en-US
+
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
+Basic Usage, set datasource of autocomplete with `dataSource` property.
+
+````jsx
+import { Icon, Input, AutoComplete } from 'antd';
+const Option = AutoComplete.Option;
+const OptGroup = AutoComplete.OptGroup;
+
+const dataSource = [{
+  title: '话题',
+  children: [{
+    title: 'AntDesign',
+    count: 10000,
+  }, {
+    title: 'AntDesign UI',
+    count: 10600,
+  }],
+}, {
+  title: '问题',
+  children: [{
+    title: 'AntDesign UI 有多好',
+    count: 60100,
+  }, {
+    title: 'AntDesign 是啥',
+    count: 30010,
+  }],
+}, {
+  title: '文章',
+  children: [{
+    title: 'AntDesign 是一个设计语言',
+    count: 100000,
+  }],
+}];
+
+function renderTitle(title) {
+  return (
+    <span>
+      {title}
+      <a
+        style={{ float: 'right' }}
+        href="https://www.google.com/search?q=antd"
+        target="_blank"
+        rel="noopener noreferrer"
+      >更多
+      </a>
+    </span>
+  );
+}
+
+const options = dataSource.map(group =>
+  <OptGroup
+    key={group.title}
+    label={renderTitle(group.title)}
+  >
+    {group.children.map(opt =>
+      <Option key={opt.title} value={opt.title}>
+        {opt.title}
+        <span className="certain-search-item-count">{opt.count} 人 关注</span>
+      </Option>)
+    }
+  </OptGroup>).concat([
+    <Option disabled key="all" className="show-all">
+      <a
+        href="https://www.google.com/search?q=antd"
+        target="_blank"
+        rel="noopener noreferrer"
+      >查看所有结果</a>
+    </Option>,
+  ]);
+
+function Complete() {
+  return (
+    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
+      <AutoComplete
+        className="certain-category-search"
+        dropdownClassName="certain-category-search-dropdown"
+        dropdownMatchSelectWidth={false}
+        dropdownStyle={{ width: 300 }}
+        size="large"
+        style={{ width: '100%' }}
+        dataSource={options}
+        placeholder="input here"
+        optionLabelProp="value"
+      >
+        <Input suffix={<Icon type="search" className="certain-category-icon" />} />
+      </AutoComplete>
+    </div>
+  );
+}
+
+ReactDOM.render(<Complete />, mountNode);
+````
+
+````css
+.certain-category-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
+  right: 12px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+  color: #666;
+  font-weight: bold;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+  border-bottom: 1px solid #F6F6F6;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item {
+  padding-left: 16px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+  text-align: center;
+  cursor: default;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu {
+  max-height: 300px;
+}
+
+.certain-search-item-count {
+ position: absolute;
+ color: #999;
+ right: 16px;
+}
+
+.certain-category-search.ant-select-focused .certain-category-icon {
+  color: #108ee9;
+}
+
+.certain-category-icon {
+  color: #6E6E6E;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 16px;
+}
+````

components/auto-complete/demo/uncertain-category.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 查询模式 - 不确定类目
   en-US: Lookup-Patterns - Uncertain Category
@@ -58,11 +58,9 @@ class Complete extends React.Component {
   }
 
   handleChange = (value) => {
-    if (value) {
-      this.setState({
-        dataSource: searchResult(value),
-      });
-    }
+    this.setState({
+      dataSource: value ? searchResult(value) : [],
+    });
   }
 
   render() {
@@ -104,23 +102,8 @@ ReactDOM.render(<Complete />, mountNode);
   width: 100%;
 }
 
-.global-search.ant-select-auto-complete .ant-input {
-  height: 40px;
-  padding: 11px 12px;
-}
-
-.global-search.ant-select-auto-complete .ant-select-selection__placeholder {
-  top: 20px;
-  margin-left: 12px;
-  margin-right: 12px;
-}
-
-.global-search .search-btn {
-  font-size: 18px;
-}
-
 .global-search.ant-select-auto-complete .ant-select-selection--single {
-  margin-right: -50px;
+  margin-right: -46px;
 }
 
 .global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) {
@@ -132,14 +115,12 @@ ReactDOM.render(<Complete />, mountNode);
 }
 
 .global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button {
-  padding-top: 5px;
-  padding-bottom: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .global-search-item-count {
- position: absolute;
- right: 16px;
+  position: absolute;
+  right: 16px;
 }
 ````

components/auto-complete/index.en-US.md

@@ -31,4 +31,5 @@ const dataSource = ['12345', '23456', '34567'];
 | placeholder | placeholder of input | string | - |
 | children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array<React.ReactElement<OptionProps>> | - |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
+| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true     |

components/auto-complete/index.tsx

@@ -33,7 +33,7 @@ export interface AutoCompleteProps extends AbstractSelectProps {
   onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
   onSelect?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>, option: Object) => any;
   disabled?: boolean;
-  children: ValidInputElement |
+  children?: ValidInputElement |
     React.ReactElement<OptionProps> |
     Array<React.ReactElement<OptionProps>>;
 }
@@ -55,6 +55,10 @@ class InputElement extends React.Component<any, any> {
   }
 }
 
+function isSelectOptionOrSelectOptGroup(child: any): Boolean {
+  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+
 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
   static Option = Option as React.ClassicComponentClass<OptionProps>;
   static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
@@ -94,7 +98,9 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
 
     let options;
     const childArray = React.Children.toArray(children);
-    if (childArray.length && (childArray[0] as React.ReactElement<any>).type === Option) {
+    if (childArray.length &&
+        isSelectOptionOrSelectOptGroup(childArray[0])
+      ) {
       options = children;
     } else {
       options = dataSource ? dataSource.map((item) => {

components/auto-complete/style/index.less

@@ -8,11 +8,7 @@
 
 .@{autocomplete-prefix-cls} {
   &.@{select-prefix-cls} {
-
     .@{select-prefix-cls} {
-      &-search--inline {
-        position: relative;
-      }
       &-selection {
         border: 0;
         &--single {
@@ -21,7 +17,6 @@
         &__rendered {
           margin-left: 0;
           margin-right: 0;
-          line-height: 0;
         }
         &__placeholder {
           margin-left: 8px;

components/back-top/index.tsx

@@ -82,7 +82,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
     const { visibilityHeight, target = getDefaultTarget } = this.props;
     const scrollTop = getScroll(target(), true);
     this.setState({
-      visible: scrollTop > visibilityHeight,
+      visible: scrollTop > (visibilityHeight as number),
     });
   }
 

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

@@ -1,139 +1,153 @@
 exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
-<span
-  class="ant-badge"
-  title="5">
-  <a
-    class="head-example"
-    href="#" />
-  <sup
-    class="ant-scroll-number ant-badge-count"
-    data-show="true">
-    <span
-      class="ant-scroll-number-only"
-      style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
-      <p
-        class="">
-        0
-      </p>
-      <p
-        class="">
-        1
-      </p>
-      <p
-        class="">
-        2
-      </p>
-      <p
-        class="">
-        3
-      </p>
-      <p
-        class="">
-        4
-      </p>
-      <p
-        class="">
-        5
-      </p>
-      <p
-        class="">
-        6
-      </p>
-      <p
-        class="">
-        7
-      </p>
-      <p
-        class="">
-        8
-      </p>
-      <p
-        class="">
-        9
-      </p>
-      <p
-        class="">
-        0
-      </p>
-      <p
-        class="">
-        1
-      </p>
-      <p
-        class="">
-        2
-      </p>
-      <p
-        class="">
-        3
-      </p>
-      <p
-        class="">
-        4
-      </p>
-      <p
-        class="current">
-        5
-      </p>
-      <p
-        class="">
-        6
-      </p>
-      <p
-        class="">
-        7
-      </p>
-      <p
-        class="">
-        8
-      </p>
-      <p
-        class="">
-        9
-      </p>
-      <p
-        class="">
-        0
-      </p>
-      <p
-        class="">
-        1
-      </p>
-      <p
-        class="">
-        2
-      </p>
-      <p
-        class="">
-        3
-      </p>
-      <p
-        class="">
-        4
-      </p>
-      <p
-        class="">
-        5
-      </p>
-      <p
-        class="">
-        6
-      </p>
-      <p
-        class="">
-        7
-      </p>
-      <p
-        class="">
-        8
-      </p>
-      <p
-        class="">
-        9
-      </p>
-    </span>
-  </sup>
-</span>
+<div>
+  <span
+    class="ant-badge"
+    title="5">
+    <a
+      class="head-example"
+      href="#" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true">
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="current">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+      </span>
+    </sup>
+  </span>
+  <span
+    class="ant-badge"
+    title="0">
+    <a
+      class="head-example"
+      href="#" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true">
+      0
+    </sup>
+  </span>
+</div>
 `;
 
 exports[`test renders ./components/badge/demo/change.md correctly 1`] = `

components/badge/demo/basic.md

@@ -7,19 +7,24 @@ title:
 
 ## zh-CN
 
-简单的徽章展示。
+简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
 
 ## en-US
 
-Simplest Usage.
+Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 
 ````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(
-  <Badge count={5}>
-    <a href="#" className="head-example" />
-  </Badge>
+  <div>
+    <Badge count={5}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={0} showZero>
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
 , mountNode);
 ````
 

components/badge/index.en-US.md

@@ -27,6 +27,7 @@ Badge normally appears in proximity to notification or head picture with eye-cat
 |----------------|-------------------------|------------|---------|
 | count          | Number to show in badge | number     |         |
 | overflowCount  | Max count to show       | number     | 99      |
+| showZero       | Whether to show badge when `count` is zero   | boolean | false |
 | dot            | Whether to show red dot without number | boolean | false  |
 | status         | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
 | text           | If `status` is set, `text` is to set the text of status dot | string | '' |

components/badge/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
@@ -7,6 +7,7 @@ import warning from '../_util/warning';
 export interface BadgeProps {
   /** Number to show in badge */
   count: number | string;
+  showZero?: boolean;
   /** Max count to show */
   overflowCount?: number;
   /** whether to show red dot without number */
@@ -22,30 +23,45 @@ export default class Badge extends React.Component<BadgeProps, any> {
   static defaultProps = {
     prefixCls: 'ant-badge',
     count: null,
+    showZero: false,
     dot: false,
     overflowCount: 99,
   };
 
   static propTypes = {
-    count: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
+    count: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
     ]),
-    dot: React.PropTypes.bool,
-    overflowCount: React.PropTypes.number,
+    showZero: PropTypes.bool,
+    dot: PropTypes.bool,
+    overflowCount: PropTypes.number,
   };
 
   render() {
-    const { count, prefixCls, overflowCount, className, style, children, dot, status, text, ...restProps } = this.props;
+    const {
+      count,
+      showZero,
+      prefixCls,
+      overflowCount,
+      className,
+      style,
+      children,
+      dot,
+      status,
+      text,
+      ...restProps,
+    } = this.props;
     const isDot = dot || status;
-    let displayCount = count > overflowCount ? `${overflowCount}+` : count;
+    let displayCount = count > (overflowCount as number) ? `${overflowCount}+` : count;
     // dot mode don't need count
     if (isDot) {
       displayCount = '';
     }
 
-    // null undefined "" "0" 0
-    const hidden = (!displayCount || displayCount === '0') && !isDot;
+    const isZero = displayCount === '0' || displayCount === 0;
+    const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
+    const hidden = (isEmpty || (isZero && !showZero)) && !isDot;
     const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: isDot,
       [`${prefixCls}-count`]: !isDot,

components/badge/index.zh-CN.md

@@ -24,10 +24,11 @@ title: Badge
 <Badge count={5} />
 ```
 
-| 参数           | 说明                             | 类型       |  可选值 | 默认值 |
-|----------------|----------------------------------|------------|---------|--------|
-| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number     |         |        |
-| overflowCount  | 展示封顶的数字值                 | number     |         | 99     |
-| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
-| status         | 设置 Badge 为状态点            | Enum      | 'success'、'processing'、'default'、'error'、'warning' | '' |
-| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | string | | '' |
+| 参数           | 说明                             | 类型       | 默认值 |
+|----------------|----------------------------------|------------|---------|
+| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | |
+| overflowCount  | 展示封顶的数字值                 | number | 99 |
+| showZero       | 当数值为 0 时，是否展示 Badge   | boolean | false |
+| dot            | 不展示数字，只有一个小红点       | boolean | false  |
+| status         | 设置 Badge 为状态点            | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | string | '' |

components/breadcrumb/Breadcrumb.tsx

@@ -93,7 +93,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         }
         warning(
           element.type && element.type.__ANT_BREADCRUMB_ITEM,
-          'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
+          'Breadcrumb only accepts Breadcrumb.Item as it\'s children'
         );
         return cloneElement(element, {
           separator,

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -16,7 +16,7 @@ describe('Breadcrumb', () => {
     expect(console.error.calls.count()).toBe(1);
     // eslint-disable-next-line
     expect(console.error.calls.argsFor(0)[0]).toContain(
-      'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
+      'Breadcrumb only accepts Breadcrumb.Item as it\'s children'
     );
   });
 

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

@@ -410,11 +410,11 @@ exports[`test renders ./components/button/demo/size.md correctly 1`] = `
       class="ant-radio-button-wrapper">
       <span
         class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
         <input
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Large
@@ -423,13 +423,13 @@ exports[`test renders ./components/button/demo/size.md correctly 1`] = `
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
       <span
-        class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-        <span
-          class="ant-radio-button-inner" />
+        class="ant-radio-button ant-radio-button-checked">
         <input
           checked=""
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Default
@@ -439,11 +439,11 @@ exports[`test renders ./components/button/demo/size.md correctly 1`] = `
       class="ant-radio-button-wrapper">
       <span
         class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
         <input
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Small

components/button/style/index.less

@@ -111,6 +111,12 @@
     padding-right: 8px;
   }
 
+  // http://stackoverflow.com/a/21281554/3040605
+  &:focus > span,
+  &:active > span {
+    position: relative;
+  }
+
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {

components/calendar/Header.tsx

@@ -26,8 +26,8 @@ export default class Header extends React.Component<HeaderProps, any> {
 
   getYearSelectElement(year) {
     const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
-    const start = year - yearSelectOffset;
-    const end = start + yearSelectTotal;
+    const start = year - (yearSelectOffset as number);
+    const end = start + (yearSelectTotal as number);
     const suffix = locale.year === '年' ? '年' : '';
 
     const options: React.ReactElement<any>[] = [];

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

@@ -62,13 +62,13 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
         <span
-          class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-          <span
-            class="ant-radio-button-inner" />
+          class="ant-radio-button ant-radio-button-checked">
           <input
             checked=""
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           月
@@ -78,11 +78,11 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
         class="ant-radio-button-wrapper">
         <span
           class="ant-radio-button">
-          <span
-            class="ant-radio-button-inner" />
           <input
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           年
@@ -473,6 +473,7 @@ exports[`test renders ./components/calendar/demo/basic.md correctly 1`] = `
             </td>
           </tr>
           <tr
+            class="ant-fullcalendar-current-week"
             role="row">
             <td
               class="ant-fullcalendar-cell"
@@ -848,13 +849,13 @@ exports[`test renders ./components/calendar/demo/card.md correctly 1`] = `
         <label
           class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
           <span
-            class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-            <span
-              class="ant-radio-button-inner" />
+            class="ant-radio-button ant-radio-button-checked">
             <input
               checked=""
               class="ant-radio-button-input"
               type="radio" />
+            <span
+              class="ant-radio-button-inner" />
           </span>
           <span>
             月
@@ -864,11 +865,11 @@ exports[`test renders ./components/calendar/demo/card.md correctly 1`] = `
           class="ant-radio-button-wrapper">
           <span
             class="ant-radio-button">
-            <span
-              class="ant-radio-button-inner" />
             <input
               class="ant-radio-button-input"
               type="radio" />
+            <span
+              class="ant-radio-button-inner" />
           </span>
           <span>
             年
@@ -1259,6 +1260,7 @@ exports[`test renders ./components/calendar/demo/card.md correctly 1`] = `
               </td>
             </tr>
             <tr
+              class="ant-fullcalendar-current-week"
               role="row">
               <td
                 class="ant-fullcalendar-cell"
@@ -1633,13 +1635,13 @@ exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
         <span
-          class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-          <span
-            class="ant-radio-button-inner" />
+          class="ant-radio-button ant-radio-button-checked">
           <input
             checked=""
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           月
@@ -1649,11 +1651,11 @@ exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`
         class="ant-radio-button-wrapper">
         <span
           class="ant-radio-button">
-          <span
-            class="ant-radio-button-inner" />
           <input
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           年
@@ -2187,6 +2189,7 @@ exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`
             </td>
           </tr>
           <tr
+            class="ant-fullcalendar-current-week"
             role="row">
             <td
               class="ant-fullcalendar-cell"
@@ -2595,3 +2598,799 @@ exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`
   </div>
 </div>
 `;
+
+exports[`test renders ./components/calendar/demo/select.md correctly 1`] = `
+<div>
+  <div
+    class="ant-alert ant-alert-info ant-alert-no-icon"
+    data-show="true">
+    <span
+      class="ant-alert-message">
+      You selected date: 2017-01-25
+    </span>
+    <span
+      class="ant-alert-description" />
+  </div>
+  <div
+    class=" ant-fullcalendar-fullscreen">
+    <div
+      class="ant-fullcalendar-header">
+      <div
+        class="ant-fullcalendar-year-select 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="2017年">
+              2017年
+            </div>
+          </div>
+          <span
+            class="ant-select-arrow"
+            style="user-select:none;-webkit-user-select:none;"
+            unselectable="unselectable">
+            <b />
+          </span>
+        </div>
+      </div>
+      <div
+        class="ant-fullcalendar-month-select 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="1月">
+              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-radio-group ant-radio-group-default">
+        <label
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
+          <span
+            class="ant-radio-button ant-radio-button-checked">
+            <input
+              checked=""
+              class="ant-radio-button-input"
+              type="radio" />
+            <span
+              class="ant-radio-button-inner" />
+          </span>
+          <span>
+            月
+          </span>
+        </label>
+        <label
+          class="ant-radio-button-wrapper">
+          <span
+            class="ant-radio-button">
+            <input
+              class="ant-radio-button-input"
+              type="radio" />
+            <span
+              class="ant-radio-button-inner" />
+          </span>
+          <span>
+            年
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen"
+      tabindex="0">
+      <div
+        class="ant-fullcalendar-calendar-body">
+        <table
+          cellspacing="0"
+          class="ant-fullcalendar-table"
+          role="grid">
+          <thead>
+            <tr
+              role="row">
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周一">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  一
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周二">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  二
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周三">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  三
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周四">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  四
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周五">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  五
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周六">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  六
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="周日">
+                <span
+                  class="ant-fullcalendar-column-header-inner">
+                  日
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="ant-fullcalendar-tbody">
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-26">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    26
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-27">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    27
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-28">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    28
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-29">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    29
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-30">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    30
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="2016-12-31">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    31
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-1">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    01
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-2">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    02
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-3">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    03
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-4">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    04
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-5">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    05
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-6">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    06
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-7">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    07
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-8">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    08
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-9">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    09
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-10">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    10
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-11">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    11
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-12">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    12
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-13">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    13
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-14">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    14
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-15">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    15
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-16">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    16
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-17">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    17
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-18">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    18
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-19">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    19
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-20">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    20
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-21">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    21
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-22">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    22
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-23">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    23
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-24">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    24
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-selected-day"
+                role="gridcell"
+                title="2017-1-25">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    25
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-26">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    26
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-27">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    27
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-28">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    28
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-29">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    29
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+            <tr
+              role="row">
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-30">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    30
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="2017-1-31">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    31
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="2017-2-1">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    01
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="2017-2-2">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    02
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="2017-2-3">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    03
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="2017-2-4">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    04
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="2017-2-5">
+                <div
+                  class="ant-fullcalendar-date">
+                  <div
+                    class="ant-fullcalendar-value">
+                    05
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/calendar/__tests__/index.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Moment from 'moment';
+import { mount } from 'enzyme';
+import Calendar from '..';
+
+describe('Calendar', () => {
+  it('Calendar should be selectable', () => {
+    const onSelect = jest.fn();
+    const wrapper = mount(
+      <Calendar onSelect={onSelect} />
+    );
+    wrapper.find('.ant-fullcalendar-cell').at(0).simulate('click');
+    expect(onSelect).toBeCalledWith(expect.anything());
+    const value = onSelect.mock.calls[0][0];
+    expect(Moment.isMoment(value)).toBe(true);
+  });
+});

components/calendar/demo/select.md

@@ -0,0 +1,46 @@
+---
+order: 3
+title:
+  zh-CN: 选择功能
+  en-US: Selectable Calendar
+---
+
+## zh-CN
+
+一个通用的日历面板，支持年/月切换。
+
+## en-US
+
+A basic calendar component with Year/Month switch.
+
+````jsx
+import { Calendar, Alert } from 'antd';
+import moment from 'moment';
+
+class App extends React.Component {
+  state = {
+    value: moment('2017-01-25'),
+    selectedValue: moment('2017-01-25'),
+  }
+  onSelect = (value) => {
+    this.setState({
+      value,
+      selectedValue: value,
+    });
+  }
+  onPanelChange = (value) => {
+    this.setState({ value });
+  }
+  render() {
+    const { value, selectedValue } = this.state;
+    return (
+      <div>
+        <Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} />
+        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````

components/calendar/index.en-US.md

@@ -26,6 +26,7 @@ moment.locale('zh-cn');
   dateCellRender={dateCellRender}
   monthCellRender={monthCellRender}
   onPanelChange={onPanelChange}
+  onSelect={onSelect}
 />
 ```
 
@@ -35,7 +36,10 @@ moment.locale('zh-cn');
 | defaultValue | set default date | [moment](http://momentjs.com/) | default date     |
 | mode         | can be set to month or year | string | month  |
 | fullscreen   | to set whether full-screen display   | boolean     | true         |
-| dateCellRender     | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
-| monthCellRender    | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
+| dateCellRender      | to set the way of renderer the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| monthCellRender     | to set the way of renderer the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| dateFullCellRender  | to set the way of renderer the date cell,the returned content will override the cell | function(date: moment): ReactNode | - |
+| monthFullCellRender | to set the way of renderer the month cell,the returned content will override the cell | function(date: moment): ReactNode | - |
 | locale       | set locale | object   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
-| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
+| onPanelChange| callback when panel change | function(date: moment, mode: string) | - |
+| onSelect     | callback when select date  | function(date: moment）              | - |

components/calendar/index.tsx

@@ -33,9 +33,12 @@ export interface CalendarProps {
   fullscreen?: boolean;
   dateCellRender?: (date: moment.Moment) => React.ReactNode;
   monthCellRender?: (date: moment.Moment) => React.ReactNode;
+  dateFullCellRender?: (date: moment.Moment) => React.ReactNode;
+  monthFullCellRender?: (date: moment.Moment) => React.ReactNode;
   locale?: any;
   style?: React.CSSProperties;
   onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
+  onSelect?: (date?: moment.Moment) => void;
 }
 
 export interface CalendarState {
@@ -49,11 +52,15 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     fullscreen: true,
     prefixCls: PREFIX_CLS,
     mode: 'month',
+    onSelect: noop,
+    onPanelChange: noop,
   };
 
   static propTypes = {
     monthCellRender: PropTypes.func,
     dateCellRender: PropTypes.func,
+    monthFullCellRender: PropTypes.func,
+    dateFullCellRender: PropTypes.func,
     fullscreen: PropTypes.bool,
     locale: PropTypes.object,
     prefixCls: PropTypes.string,
@@ -61,6 +68,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     style: PropTypes.object,
     onPanelChange: PropTypes.func,
     value: PropTypes.object,
+    onSelect: PropTypes.func,
   };
 
   static contextTypes = {
@@ -123,13 +131,16 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     );
   }
 
-  setValue = (value) => {
-    if (!('value' in this.props) && this.state.value !== value) {
+  setValue = (value, way: 'select' | 'changePanel') => {
+    if (!('value' in this.props)) {
       this.setState({ value });
     }
-    const onPanelChange = this.props.onPanelChange;
-    if (onPanelChange) {
-      onPanelChange(value, this.state.mode);
+    if (way === 'select') {
+      if (this.props.onSelect) {
+        this.props.onSelect(value);
+      }
+    } else if (way === 'changePanel') {
+      this.onPanelChange(value, this.state.mode);
     }
   }
 
@@ -137,13 +148,29 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     const mode = (type === 'date') ? 'month' : 'year';
     if (this.state.mode !== mode) {
       this.setState({ mode });
-      const onPanelChange = this.props.onPanelChange;
-      if (onPanelChange) {
-        onPanelChange(this.state.value, mode);
-      }
+      this.onPanelChange(this.state.value, mode);
     }
   }
 
+  onHeaderValueChange = (value) => {
+    this.setValue(value, 'changePanel');
+  }
+
+  onHeaderTypeChange = (type) => {
+    this.setType(type);
+  }
+
+  onPanelChange(value, mode) {
+    const { onPanelChange } = this.props;
+    if (onPanelChange) {
+      onPanelChange(value, mode);
+    }
+  }
+
+  onSelect = (value) => {
+    this.setValue(value, 'select');
+  }
+
   render() {
     const { state, props, context } = this;
     const { value, mode } = state;
@@ -151,7 +178,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
     if (value && localeCode) {
       value.locale(localeCode);
     }
-    const { prefixCls, style, className, fullscreen } = props;
+    const { prefixCls, style, className, fullscreen, dateFullCellRender, monthFullCellRender } = props;
     const type = (mode === 'year') ? 'month' : 'date';
     const locale = getComponentLocale(props, context, 'Calendar', () => require('./locale/zh_CN'));
 
@@ -160,6 +187,9 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
       cls += (` ${prefixCls}-fullscreen`);
     }
 
+    const monthCellRender = monthFullCellRender || this.monthCellRender;
+    const dateCellRender = dateFullCellRender || this.dateCellRender;
+
     return (
       <div className={cls} style={style}>
         <Header
@@ -168,8 +198,8 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
           value={value}
           locale={locale.lang}
           prefixCls={prefixCls}
-          onTypeChange={this.setType}
-          onValueChange={this.setValue}
+          onTypeChange={this.onHeaderTypeChange}
+          onValueChange={this.onHeaderValueChange}
         />
         <FullCalendar
           {...props}
@@ -179,8 +209,9 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
           prefixCls={prefixCls}
           showHeader={false}
           value={value}
-          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender}
+          monthCellRender={monthCellRender}
+          dateCellRender={dateCellRender}
+          onSelect={this.onSelect}
         />
       </div>
     );

components/calendar/index.zh-CN.md

@@ -28,6 +28,7 @@ moment.locale('zh-cn');
   dateCellRender={dateCellRender}
   monthCellRender={monthCellRender}
   onPanelChange={onPanelChange}
+  onSelect={onSelect}
 />
 ```
 
@@ -37,7 +38,10 @@ moment.locale('zh-cn');
 | defaultValue | 默认展示的日期  | [moment](http://momentjs.com/)     | 默认日期     |
 | mode         | 初始模式，`month/year` | string | month  |
 | fullscreen   | 是否全屏显示   | boolean     | true         |
-| dateCellRender     | 自定义渲染日期单元格| function(date: moment): ReactNode   | 无 |
-| monthCellRender    | 自定义渲染月单元格  | function(date: moment): ReactNode   | 无 |
+| dateCellRender      | 自定义渲染日期单元格，返回内容会被追加到单元格| function(date: moment): ReactNode   | 无 |
+| monthCellRender     | 自定义渲染月单元格，返回内容会被追加到单元格  | function(date: moment): ReactNode   | 无 |
+| dateFullCellRender  | 自定义渲染日期单元格，返回内容覆盖单元格| function(date: moment): ReactNode   | 无 |
+| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格  | function(date: moment): ReactNode   | 无 |
 | locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
+| onSelect     | 点击选择日期回调 | function(date: moment）              | 无 |

components/calendar/locale/ca_ES.tsx

@@ -0,0 +1,2 @@
+import ca_ES from '../../date-picker/locale/ca_ES';
+export default ca_ES;

components/calendar/locale/cs_CZ.tsx

@@ -0,0 +1,2 @@
+import cs_CZ from '../../date-picker/locale/cs_CZ';
+export default cs_CZ;

components/calendar/locale/ko_KR.tsx

@@ -0,0 +1,2 @@
+import ko_KR from '../../date-picker/locale/ko_KR';
+export default ko_KR;

components/calendar/locale/nl_NL.tsx

@@ -0,0 +1,2 @@
+import nl_NL from '../../date-picker/locale/nl_NL';
+export default nl_NL;

components/calendar/style/index.less

@@ -84,23 +84,30 @@
   &-month,
   &-date {
     text-align: center;
+    transition: all .3s;
   }
 
   &-value {
     display: block;
     margin: 0 auto;
     color: @text-color;
-    border-radius: 4px;
+    border-radius: @border-radius-base;
     width: 22px;
     height: 22px;
     padding: 0;
     background: transparent;
     line-height: 22px;
+    transition: all .3s;
 
     &:hover {
       background: @primary-1;
       cursor: pointer;
     }
+
+    &:active {
+      background: @primary-color;
+      color: #fff;
+    }
   }
 
   &-month-panel-cell &-value {
@@ -109,30 +116,35 @@
 
   &-today &-value,
   &-month-panel-current-cell &-value {
+    box-shadow: 0 0 0 1px @primary-color;
+  }
+
+  &-selected-day &-value,
+  &-month-panel-selected-cell &-value {
     background: @primary-color;
     color: #fff;
   }
 
   &-disabled-cell &-value {
     cursor: not-allowed;
-    color: #bcbcbc;
-    background: #f3f3f3;
+    color: @disabled-color;
+    background: @background-color-base;
     border-radius: 0;
     width: auto;
 
     &:hover {
-      background: #f3f3f3;
+      background: @background-color-base;
     }
   }
 
   &-disabled-cell-first-of-row &-value {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
   }
 
   &-disabled-cell-last-of-row &-value {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
   }
 
   &-last-month-cell &-value,
@@ -166,8 +178,8 @@
       margin-left: 16px;
     }
     label.@{ant-prefix}-radio-button {
-      height: 28px;
-      line-height: 26px;
+      height: @input-height-base;
+      line-height: @input-height-base - 2px;
     }
   }
 
@@ -180,12 +192,16 @@
     height: 116px;
     padding: 4px 8px;
     border-top: 2px solid @border-color-split;
-    transition: background 0.3s ease;
+    transition: background .3s;
 
     &:hover {
       background: @primary-1;
       cursor: pointer;
     }
+
+    &:active {
+      background: @primary-2;
+    }
   }
 
   &-fullscreen &-column-header {
@@ -207,12 +223,24 @@
   &-fullscreen &-month-panel-current-cell &-month,
   &-fullscreen &-today &-date {
     border-top-color: @primary-color;
-    background-color: @primary-1;
-    color: @primary-color;
-  }
-  &-fullscreen &-month-panel-current-cell &-value {
+    background: transparent;
+  }
+
+  &-fullscreen &-month-panel-current-cell &-value,
+  &-fullscreen &-today &-value {
+    box-shadow: none;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-month,
+  &-fullscreen &-selected-day &-date {
+    background: @primary-1;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-value,
+  &-fullscreen &-selected-day &-value {
     color: @primary-color;
   }
+
   &-fullscreen &-last-month-cell &-date,
   &-fullscreen &-next-month-btn-day &-date {
     color: @disabled-color;

components/cascader/style/index.less

@@ -8,7 +8,9 @@
   font-size: @font-size-base;
 
   &-input.@{ant-prefix}-input {
-    background-color: transparent;
+    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
+    // because input.less will compile after cascader.less
+    background-color: transparent!important;
     cursor: pointer;
     width: 100%;
     z-index: 1;

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

@@ -3,11 +3,11 @@ exports[`test renders ./components/checkbox/demo/basic.md correctly 1`] = `
   class="ant-checkbox-wrapper">
   <span
     class="ant-checkbox">
-    <span
-      class="ant-checkbox-inner" />
     <input
       class="ant-checkbox-input"
       type="checkbox" />
+    <span
+      class="ant-checkbox-inner" />
   </span>
   <span>
     Checkbox
@@ -22,12 +22,12 @@ exports[`test renders ./components/checkbox/demo/check-all.md correctly 1`] = `
     <label
       class="ant-checkbox-wrapper">
       <span
-        class="ant-checkbox-indeterminate ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-indeterminate">
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Check all
@@ -40,13 +40,13 @@ exports[`test renders ./components/checkbox/demo/check-all.md correctly 1`] = `
     <label
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked">
         <input
           checked=""
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Apple
@@ -56,11 +56,11 @@ exports[`test renders ./components/checkbox/demo/check-all.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Pear
@@ -69,13 +69,13 @@ exports[`test renders ./components/checkbox/demo/check-all.md correctly 1`] = `
     <label
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked">
         <input
           checked=""
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Orange
@@ -92,13 +92,13 @@ exports[`test renders ./components/checkbox/demo/controller.md correctly 1`] = `
     <label
       class="ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked">
         <input
           checked=""
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Checked-Enabled
@@ -131,26 +131,26 @@ exports[`test renders ./components/checkbox/demo/disabled.md correctly 1`] = `
     class="ant-checkbox-wrapper">
     <span
       class="ant-checkbox ant-checkbox-disabled">
-      <span
-        class="ant-checkbox-inner" />
       <input
         class="ant-checkbox-input"
         disabled=""
         type="checkbox" />
+      <span
+        class="ant-checkbox-inner" />
     </span>
   </label>
   <br />
   <label
     class="ant-checkbox-wrapper">
     <span
-      class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1 ant-checkbox-disabled">
-      <span
-        class="ant-checkbox-inner" />
+      class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled">
       <input
         checked=""
         class="ant-checkbox-input"
         disabled=""
         type="checkbox" />
+      <span
+        class="ant-checkbox-inner" />
     </span>
   </label>
 </div>
@@ -163,13 +163,13 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
     <label
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked">
         <input
           checked=""
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Apple
@@ -179,11 +179,11 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Pear
@@ -193,11 +193,11 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Orange
@@ -211,11 +211,11 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Apple
@@ -224,13 +224,13 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
     <label
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked">
         <input
           checked=""
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Pear
@@ -240,11 +240,11 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Orange
@@ -257,14 +257,14 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
     <label
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
-        class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1 ant-checkbox-disabled">
-        <span
-          class="ant-checkbox-inner" />
+        class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled">
         <input
           checked=""
           class="ant-checkbox-input"
           disabled=""
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Apple
@@ -274,12 +274,12 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox ant-checkbox-disabled">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           disabled=""
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Pear
@@ -289,11 +289,11 @@ exports[`test renders ./components/checkbox/demo/group.md correctly 1`] = `
       class="ant-checkbox-group-item ant-checkbox-wrapper">
       <span
         class="ant-checkbox">
-        <span
-          class="ant-checkbox-inner" />
         <input
           class="ant-checkbox-input"
           type="checkbox" />
+        <span
+          class="ant-checkbox-inner" />
       </span>
       <span>
         Orange

components/checkbox/style/mixin.less

@@ -13,11 +13,9 @@
     vertical-align: middle;
 
     .@{checkbox-prefix-cls}-wrapper:hover &,
-    &:hover,
-    &-focused {
-      .@{checkbox-inner-prefix-cls} {
-        border-color: @primary-color;
-      }
+    &:hover &-inner,
+    &-input:focus + &-inner {
+      border-color: @primary-color;
     }
 
     &-inner {

components/date-picker/RangePicker.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import assign from 'object-assign';
 import Icon from '../icon';
 import { getLocaleCode } from '../_util/getLocale';
+import warning from '../_util/warning';
 
 export default class RangePicker extends React.Component<any, any> {
   static contextTypes = {
@@ -119,6 +120,7 @@ export default class RangePicker extends React.Component<any, any> {
       ranges, prefixCls, popupStyle,
       style, onOk, locale, format,
     } = props;
+    warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
 
     const calendarClassName = classNames({
       [`${prefixCls}-time`]: showTime,

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -269,11 +269,11 @@ exports[`test renders ./components/date-picker/demo/size.md correctly 1`] = `
       class="ant-radio-button-wrapper">
       <span
         class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
         <input
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Large
@@ -282,13 +282,13 @@ exports[`test renders ./components/date-picker/demo/size.md correctly 1`] = `
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
       <span
-        class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-        <span
-          class="ant-radio-button-inner" />
+        class="ant-radio-button ant-radio-button-checked">
         <input
           checked=""
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Default
@@ -298,11 +298,11 @@ exports[`test renders ./components/date-picker/demo/size.md correctly 1`] = `
       class="ant-radio-button-wrapper">
       <span
         class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
         <input
           class="ant-radio-button-input"
           type="radio" />
+        <span
+          class="ant-radio-button-inner" />
       </span>
       <span>
         Small

components/date-picker/createPicker.tsx

@@ -7,6 +7,7 @@ import omit from 'omit.js';
 import assign from 'object-assign';
 import Icon from '../icon';
 import { getLocaleCode } from '../_util/getLocale';
+import warning from '../_util/warning';
 
 export interface PickerProps {
   value?: moment.Moment;
@@ -122,6 +123,7 @@ export default function createPicker(TheCalendar) {
         };
       }
 
+      warning(!('onOK' in props), 'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!');
       const calendar = (
         <TheCalendar
           {...calendarHandler}

components/date-picker/index.en-US.md

@@ -47,6 +47,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | open | open state of picker | boolean | - |
 | onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
 | placeholder  | placeholder of date input | string\|RangePicker[] | - |
+| onOk | callback when click ok button | function() | - |
 
 ### DatePicker
 
@@ -59,7 +60,6 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | showTime     | to provide an additional time selection  | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
 | showToday    | whether to show "Today" button | boolean | true |
 | disabledTime | to specify the time that cannot be selected | function(date) | - |
-| onOk | callback when click ok button | function() | - |
 
 ### MonthPicker
 

components/date-picker/locale/ca_ES.tsx

@@ -0,0 +1,17 @@
+import CalendarLocale from 'rc-calendar/lib/locale/ca_ES';
+import TimePickerLocale from '../../time-picker/locale/ca_ES';
+import assign from 'object-assign';
+
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: 'Seleccionar data',
+    rangePlaceholder: ['Data inicial', 'Data final'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/date-picker/locale/cs_CZ.tsx

@@ -0,0 +1,17 @@
+import CalendarLocale from 'rc-calendar/lib/locale/cs_CZ';
+import TimePickerLocale from '../../time-picker/locale/cs_CZ';
+import assign from 'object-assign';
+
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: 'Vybrat datum',
+    rangePlaceholder: ['Od', 'Do'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/date-picker/locale/ko_KR.tsx

@@ -0,0 +1,17 @@
+import CalendarLocale from 'rc-calendar/lib/locale/ko_KR';
+import TimePickerLocale from '../../time-picker/locale/ko_KR';
+import assign from 'object-assign';
+
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: '날짜 선택',
+    rangePlaceholder: ['시작일', '종료일'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/date-picker/locale/nl_NL.tsx

@@ -0,0 +1,17 @@
+import CalendarLocale from 'rc-calendar/lib/locale/nl_NL';
+import TimePickerLocale from '../../time-picker/locale/nl_NL';
+import assign from 'object-assign';
+
+// 统一合并为完整的 Locale
+const locale = {
+  lang: assign({
+    placeholder: 'Selecteer datum',
+    rangePlaceholder: ['Begin datum', 'Eind datum'],
+  }, CalendarLocale),
+  timePickerLocale: assign({}, TimePickerLocale),
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

components/date-picker/style/Calendar.less

@@ -108,6 +108,7 @@
     cursor: auto;
     outline: 0;
     height: 22px;
+    color: @input-color;
   }
 
   &-week-number {

components/date-picker/style/Picker.less

@@ -38,7 +38,7 @@
     outline: none;
   }
 
-  &:hover &-input {
+  &:hover &-input:not([disabled]) {
     border-color: @primary-color;
   }
 

components/form/Form.tsx

@@ -11,11 +11,13 @@ import { FIELD_META_PROP } from './constants';
 
 export interface FormCreateOption {
   onFieldsChange?: (props: any, fields: Array<any>) => void;
+  onValuesChange?: (props: any, values: any) => void;
   mapPropsToFields?: (props: any) => void;
   withRef?: boolean;
 }
 
 export interface FormProps {
+  layout?: 'horizontal' | 'inline' | 'vertical';
   horizontal?: boolean;
   inline?: boolean;
   vertical?: boolean;
@@ -24,7 +26,7 @@ export interface FormProps {
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
-  hideRequiredMark?: false;
+  hideRequiredMark?: boolean;
 }
 
 // function create
@@ -48,6 +50,7 @@ export type WrappedFormUtils = {
                           callback?: (erros: any, values: any) => void): void;
   /** 获取某个输入控件的 Error */
   getFieldError(name: string): Object[];
+  getFieldsError(names?: Array<string>): Object;
   /** 判断一个输入控件是否在校验状态*/
   isFieldValidating(name: string): boolean;
   /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
@@ -85,6 +88,7 @@ export interface ComponentDecorator {
 export default class Form extends React.Component<FormProps, any> {
   static defaultProps = {
     prefixCls: 'ant-form',
+    layout: 'horizontal',
     hideRequiredMark: false,
     onSubmit(e) {
       e.preventDefault();
@@ -92,13 +96,11 @@ export default class Form extends React.Component<FormProps, any> {
   };
 
   static propTypes = {
-    prefixCls: React.PropTypes.string,
-    vertical: React.PropTypes.bool,
-    horizontal: React.PropTypes.bool,
-    inline: React.PropTypes.bool,
-    children: React.PropTypes.any,
-    onSubmit: React.PropTypes.func,
-    hideRequiredMark: React.PropTypes.bool,
+    prefixCls: PropTypes.string,
+    layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+    children: PropTypes.any,
+    onSubmit: PropTypes.func,
+    hideRequiredMark: PropTypes.bool,
   };
 
   static childContextTypes = {
@@ -161,23 +163,33 @@ export default class Form extends React.Component<FormProps, any> {
   }
 
   getChildContext() {
+    const { layout, vertical } = this.props;
     return {
-      vertical: this.props.vertical,
+      vertical: layout === 'vertical' || vertical,
     };
   }
 
   render() {
-    const { prefixCls, hideRequiredMark, className = '', inline, horizontal, vertical } = this.props;
+    const {
+      prefixCls, hideRequiredMark, className = '', layout,
+      // @deprecated
+      inline, horizontal, vertical,
+    } = this.props;
+    warning(
+      !inline && !horizontal && !vertical,
+      '`Form[inline|horizontal|vertical]` is deprecated, please use `Form[layout]` instead.'
+    );
     const formClassName = classNames(prefixCls, {
-      [`${prefixCls}-horizontal`]: horizontal,
-      [`${prefixCls}-vertical`]: vertical,
-      [`${prefixCls}-inline`]: inline,
+      [`${prefixCls}-horizontal`]: (!inline && !vertical && layout === 'horizontal') || horizontal,
+      [`${prefixCls}-vertical`]: layout === 'vertical' || vertical,
+      [`${prefixCls}-inline`]: layout === 'inline' || inline,
       [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
     }, className);
 
     const formProps = omit(this.props, [
       'prefixCls',
       'className',
+      'layout',
       'inline',
       'horizontal',
       'vertical',

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

@@ -1,7 +1,7 @@
 exports[`test renders ./components/form/demo/advanced-search.md correctly 1`] = `
 <div>
   <form
-    class="ant-form ant-advanced-search-form">
+    class="ant-form ant-form-horizontal ant-advanced-search-form">
     <div
       class="ant-row"
       style="margin-left:-20px;margin-right:-20px;">
@@ -218,7 +218,7 @@ exports[`test renders ./components/form/demo/advanced-search.md correctly 1`] =
 
 exports[`test renders ./components/form/demo/coordinated.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item">
     <div
@@ -291,7 +291,7 @@ exports[`test renders ./components/form/demo/coordinated.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-8 ant-col-xs-offset-0 ant-col-sm-8 ant-col-sm-offset-4">
       <div
         class="ant-form-item-control ">
         <button
@@ -384,11 +384,11 @@ 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">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-20 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
       <div
         class="ant-form-item-control ">
         <button
@@ -407,7 +407,7 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-20 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
       <div
         class="ant-form-item-control ">
         <button
@@ -485,11 +485,12 @@ exports[`test renders ./components/form/demo/horizontal-login.md correctly 1`] =
       <div
         class="ant-form-item-control ">
         <span
-          class="ant-input-wrapper ant-input-group">
+          class="ant-input-preSuffix-wrapper">
           <span
-            class="ant-input-group-addon">
+            class="ant-input-prefix">
             <i
-              class="anticon anticon-user" />
+              class="anticon anticon-user"
+              style="font-size:13px;" />
           </span>
           <input
             class="ant-input ant-input-lg"
@@ -509,11 +510,12 @@ exports[`test renders ./components/form/demo/horizontal-login.md correctly 1`] =
       <div
         class="ant-form-item-control ">
         <span
-          class="ant-input-wrapper ant-input-group">
+          class="ant-input-preSuffix-wrapper">
           <span
-            class="ant-input-group-addon">
+            class="ant-input-prefix">
             <i
-              class="anticon anticon-lock" />
+              class="anticon anticon-lock"
+              style="font-size:13px;" />
           </span>
           <input
             class="ant-input ant-input-lg"
@@ -568,13 +570,13 @@ exports[`test renders ./components/form/demo/layout.md correctly 1`] = `
             <label
               class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
               <span
-                class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-                <span
-                  class="ant-radio-button-inner" />
+                class="ant-radio-button ant-radio-button-checked">
                 <input
                   checked=""
                   class="ant-radio-button-input"
                   type="radio" />
+                <span
+                  class="ant-radio-button-inner" />
               </span>
               <span>
                 Horizontal
@@ -584,11 +586,11 @@ exports[`test renders ./components/form/demo/layout.md correctly 1`] = `
               class="ant-radio-button-wrapper">
               <span
                 class="ant-radio-button">
-                <span
-                  class="ant-radio-button-inner" />
                 <input
                   class="ant-radio-button-input"
                   type="radio" />
+                <span
+                  class="ant-radio-button-inner" />
               </span>
               <span>
                 Vertical
@@ -598,11 +600,11 @@ exports[`test renders ./components/form/demo/layout.md correctly 1`] = `
               class="ant-radio-button-wrapper">
               <span
                 class="ant-radio-button">
-                <span
-                  class="ant-radio-button-inner" />
                 <input
                   class="ant-radio-button-input"
                   type="radio" />
+                <span
+                  class="ant-radio-button-inner" />
               </span>
               <span>
                 Inline
@@ -657,7 +659,7 @@ exports[`test renders ./components/form/demo/layout.md correctly 1`] = `
     <div
       class="ant-row ant-form-item">
       <div
-        class="ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
+        class="ant-form-item-control-wrapper ant-col-xs-14 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-4">
         <div
           class="ant-form-item-control ">
           <button
@@ -676,7 +678,7 @@ exports[`test renders ./components/form/demo/layout.md correctly 1`] = `
 
 exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = `
 <form
-  class="ant-form login-form">
+  class="ant-form ant-form-horizontal login-form">
   <div
     class="ant-row ant-form-item">
     <div
@@ -684,11 +686,12 @@ exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = `
       <div
         class="ant-form-item-control ">
         <span
-          class="ant-input-wrapper ant-input-group">
+          class="ant-input-preSuffix-wrapper">
           <span
-            class="ant-input-group-addon">
+            class="ant-input-prefix">
             <i
-              class="anticon anticon-user" />
+              class="anticon anticon-user"
+              style="font-size:13px;" />
           </span>
           <input
             class="ant-input ant-input-lg"
@@ -708,11 +711,12 @@ exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = `
       <div
         class="ant-form-item-control ">
         <span
-          class="ant-input-wrapper ant-input-group">
+          class="ant-input-preSuffix-wrapper">
           <span
-            class="ant-input-group-addon">
+            class="ant-input-prefix">
             <i
-              class="anticon anticon-lock" />
+              class="anticon anticon-lock"
+              style="font-size:13px;" />
           </span>
           <input
             class="ant-input ant-input-lg"
@@ -734,13 +738,13 @@ exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = `
         <label
           class="ant-checkbox-wrapper">
           <span
-            class="ant-checkbox ant-checkbox-checked ant-checkbox-checked-1">
-            <span
-              class="ant-checkbox-inner" />
+            class="ant-checkbox ant-checkbox-checked">
             <input
               checked=""
               class="ant-checkbox-input"
               type="checkbox" />
+            <span
+              class="ant-checkbox-inner" />
           </span>
           <span>
             Remember me
@@ -769,7 +773,7 @@ exports[`test renders ./components/form/demo/normal-login.md correctly 1`] = `
 
 exports[`test renders ./components/form/demo/register.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item">
     <div
@@ -1016,21 +1020,21 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
     style="margin-bottom:8px;">
     <div
-      class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-14 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
       <div
         class="ant-form-item-control ">
         <label
           class="ant-checkbox-wrapper">
           <span
             class="ant-checkbox">
-            <span
-              class="ant-checkbox-inner" />
             <input
               class="ant-checkbox-input"
               type="checkbox" />
+            <span
+              class="ant-checkbox-inner" />
           </span>
           <span>
-            I had read the 
+            I have read the 
             <a>
               agreement
             </a>
@@ -1042,7 +1046,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-14 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
       <div
         class="ant-form-item-control ">
         <button
@@ -1060,7 +1064,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
 
 exports[`test renders ./components/form/demo/time-related-controls.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item">
     <div
@@ -1265,7 +1269,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-16 ant-col-offset-8 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-16 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8">
       <div
         class="ant-form-item-control ">
         <button
@@ -1283,7 +1287,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
 
 exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item">
     <div
@@ -1582,11 +1586,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-wrapper">
             <span
               class="ant-radio">
-              <span
-                class="ant-radio-inner" />
               <input
                 class="ant-radio-input"
                 type="radio" />
+              <span
+                class="ant-radio-inner" />
             </span>
             <span>
               item 1
@@ -1596,11 +1600,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-wrapper">
             <span
               class="ant-radio">
-              <span
-                class="ant-radio-inner" />
               <input
                 class="ant-radio-input"
                 type="radio" />
+              <span
+                class="ant-radio-inner" />
             </span>
             <span>
               item 2
@@ -1610,11 +1614,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-wrapper">
             <span
               class="ant-radio">
-              <span
-                class="ant-radio-inner" />
               <input
                 class="ant-radio-input"
                 type="radio" />
+              <span
+                class="ant-radio-inner" />
             </span>
             <span>
               item 3
@@ -1645,11 +1649,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-button-wrapper">
             <span
               class="ant-radio-button">
-              <span
-                class="ant-radio-button-inner" />
               <input
                 class="ant-radio-button-input"
                 type="radio" />
+              <span
+                class="ant-radio-button-inner" />
             </span>
             <span>
               item 1
@@ -1659,11 +1663,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-button-wrapper">
             <span
               class="ant-radio-button">
-              <span
-                class="ant-radio-button-inner" />
               <input
                 class="ant-radio-button-input"
                 type="radio" />
+              <span
+                class="ant-radio-button-inner" />
             </span>
             <span>
               item 2
@@ -1673,11 +1677,11 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-radio-button-wrapper">
             <span
               class="ant-radio-button">
-              <span
-                class="ant-radio-button-inner" />
               <input
                 class="ant-radio-button-input"
                 type="radio" />
+              <span
+                class="ant-radio-button-inner" />
             </span>
             <span>
               item 3
@@ -1720,7 +1724,7 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-12 ant-col-xs-offset-0 ant-col-sm-12 ant-col-sm-offset-6">
       <div
         class="ant-form-item-control ">
         <button
@@ -1738,7 +1742,7 @@ exports[`test renders ./components/form/demo/validate-other.md correctly 1`] = `
 
 exports[`test renders ./components/form/demo/validate-static.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div
@@ -1966,7 +1970,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
 
 exports[`test renders ./components/form/demo/without-form-create.md correctly 1`] = `
 <form
-  class="ant-form">
+  class="ant-form ant-form-horizontal">
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div

components/form/__tests__/label.test.js

@@ -27,7 +27,7 @@ describe('Form', () => {
 
   it('should not remove duplicated user input colon when layout is vertical', () => {
     const wrapper = mount(
-      <Form vertical>
+      <Form layout="vertical">
         <Form.Item label="label:">input</Form.Item>
         <Form.Item label="label：">input</Form.Item>
       </Form>

components/form/demo/coordinated.md

@@ -63,7 +63,12 @@ class App extends React.Component {
             </Select>
           )}
         </FormItem>
-        <FormItem wrapperCol={{ span: 8, offset: 4 }}>
+        <FormItem
+          wrapperCol={{
+            xs: { span: 8, offset: 0 },
+            sm: { span: 8, offset: 4 },
+          }}
+        >
           <Button type="primary" htmlType="submit">
             Submit
           </Button>

components/form/demo/customized-form-controls.md

@@ -108,7 +108,7 @@ class Demo extends React.Component {
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
-      <Form inline onSubmit={this.handleSubmit}>
+      <Form layout="inline" onSubmit={this.handleSubmit}>
         <FormItem label="Price">
           {getFieldDecorator('price', {
             initialValue: { number: 0, currency: 'rmb' },

components/form/demo/dynamic-form-item.md

@@ -63,7 +63,10 @@ class DynamicFieldSet extends React.Component {
       wrapperCol: { span: 20 },
     };
     const formItemLayoutWithOutLabel = {
-      wrapperCol: { span: 20, offset: 4 },
+      wrapperCol: {
+        xs: { span: 20, offset: 0 },
+        sm: { span: 20, offset: 4 },
+      },
     };
     getFieldDecorator('keys', { initialValue: [] });
     const keys = getFieldValue('keys');

components/form/demo/form-in-modal.md

@@ -29,7 +29,7 @@ const CollectionCreateForm = Form.create()(
         onCancel={onCancel}
         onOk={onCreate}
       >
-        <Form vertical>
+        <Form layout="vertical">
           <FormItem label="Title">
             {getFieldDecorator('title', {
               rules: [{ required: true, message: 'Please input the title of collection!' }],

components/form/demo/global-state.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中。
+通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件或者 [Redux](https://github.com/reactjs/redux)、[dva](https://github.com/dvajs/dva) 中，更多可参考 [rc-form 示例](http://react-component.github.io/form/examples/redux.html)。
 
 ## en-US
 
-We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`.
+We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`, see more at this [rc-form demo](http://react-component.github.io/form/examples/redux.html).
 
 ````jsx
 import { Form, Input } from 'antd';
@@ -35,7 +35,7 @@ const CustomizedForm = Form.create({
 })((props) => {
   const { getFieldDecorator } = props.form;
   return (
-    <Form inline>
+    <Form layout="inline">
       <FormItem label="Username">
         {getFieldDecorator('username', {
           rules: [{ required: true, message: 'Username is required!' }],

components/form/demo/horizontal-login.md

@@ -41,7 +41,7 @@ class HorizontalLoginForm extends React.Component {
     const userNameError = isFieldTouched('userName') && getFieldError('userName');
     const passwordError = isFieldTouched('password') && getFieldError('password');
     return (
-      <Form inline onSubmit={this.handleSubmit}>
+      <Form layout="inline" onSubmit={this.handleSubmit}>
         <FormItem
           validateStatus={userNameError ? 'error' : ''}
           help={userNameError || ''}
@@ -49,7 +49,7 @@ class HorizontalLoginForm extends React.Component {
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }],
           })(
-            <Input addonBefore={<Icon type="user" />} placeholder="Username" />
+            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
           )}
         </FormItem>
         <FormItem
@@ -59,7 +59,7 @@ class HorizontalLoginForm extends React.Component {
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }],
           })(
-            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
+            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
           )}
         </FormItem>
         <FormItem>

components/form/demo/layout.md

@@ -34,12 +34,14 @@ class FormLayoutDemo extends React.Component {
       wrapperCol: { span: 14 },
     } : null;
     const buttonItemLayout = formLayout === 'horizontal' ? {
-      wrapperCol: { span: 14, offset: 4 },
+      wrapperCol: {
+        xs: { span: 14, offset: 0 },
+        sm: { span: 14, offset: 4 },
+      },
     } : null;
-    const layoutProps = { [formLayout]: true };
     return (
       <div>
-        <Form {...layoutProps}>
+        <Form layout={formLayout}>
           <FormItem
             label="Form Layout"
             {...formItemLayout}

components/form/demo/normal-login.md

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

components/form/demo/register.md

@@ -44,7 +44,7 @@ const residences = [{
 
 class RegistrationForm extends React.Component {
   state = {
-    passwordDirty: false,
+    confirmDirty: false,
   };
   handleSubmit = (e) => {
     e.preventDefault();
@@ -54,9 +54,9 @@ class RegistrationForm extends React.Component {
       }
     });
   }
-  handlePasswordBlur = (e) => {
+  handleConfirmBlur = (e) => {
     const value = e.target.value;
-    this.setState({ passwordDirty: this.state.passwordDirty || !!value });
+    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
   }
   checkPassword = (rule, value, callback) => {
     const form = this.props.form;
@@ -68,7 +68,7 @@ class RegistrationForm extends React.Component {
   }
   checkConfirm = (rule, value, callback) => {
     const form = this.props.form;
-    if (value && this.state.passwordDirty) {
+    if (value && this.state.confirmDirty) {
       form.validateFields(['confirm'], { force: true });
     }
     callback();
@@ -81,8 +81,14 @@ class RegistrationForm extends React.Component {
     };
     const tailFormItemLayout = {
       wrapperCol: {
-        span: 14,
-        offset: 6,
+        xs: {
+          span: 14,
+          offset: 0,
+        },
+        sm: {
+          span: 14,
+          offset: 6,
+        },
       },
     };
     const prefixSelector = getFieldDecorator('prefix', {
@@ -121,7 +127,7 @@ class RegistrationForm extends React.Component {
               validator: this.checkConfirm,
             }],
           })(
-            <Input type="password" onBlur={this.handlePasswordBlur} />
+            <Input type="password" />
           )}
         </FormItem>
         <FormItem
@@ -136,7 +142,7 @@ class RegistrationForm extends React.Component {
               validator: this.checkPassword,
             }],
           })(
-            <Input type="password" />
+            <Input type="password" onBlur={this.handleConfirmBlur} />
           )}
         </FormItem>
         <FormItem
@@ -200,7 +206,7 @@ class RegistrationForm extends React.Component {
           {getFieldDecorator('agreement', {
             valuePropName: 'checked',
           })(
-            <Checkbox>I had read the <a>agreement</a></Checkbox>
+            <Checkbox>I have read the <a>agreement</a></Checkbox>
           )}
         </FormItem>
         <FormItem {...tailFormItemLayout}>

components/form/demo/time-related-controls.md

@@ -108,7 +108,12 @@ class TimeRelatedForm extends React.Component {
             <TimePicker />
           )}
         </FormItem>
-        <FormItem wrapperCol={{ span: 16, offset: 8 }}>
+        <FormItem
+          wrapperCol={{
+            xs: { span: 16, offset: 0 },
+            sm: { span: 16, offset: 8 },
+          }}
+        >
           <Button type="primary" htmlType="submit" size="large">Submit</Button>
         </FormItem>
       </Form>

components/form/demo/validate-other.md

@@ -157,7 +157,12 @@ class Demo extends React.Component {
           )}
         </FormItem>
 
-        <FormItem wrapperCol={{ span: 12, offset: 6 }}>
+        <FormItem
+          wrapperCol={{
+            xs: { span: 12, offset: 0 },
+            sm: { span: 12, offset: 6 },
+          }}
+        >
           <Button type="primary" htmlType="submit">Submit</Button>
         </FormItem>
       </Form>

components/form/index.en-US.md

@@ -37,8 +37,10 @@ A form field is defined using `<Form.Item />`.
 | Property  | Description                              | Type       | Default Value |
 |-----------|------------------------------------------|------------|---------|
 | form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
-| vertical | Use vertical layout. | boolean | false |
-| inline | Use inline alignment. | boolean | false |
+| layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| horizontal | Use horizontal layout(Deprecated after 2.8) | boolean | true |
+| vertical | Use vertical layout(Deprecated after 2.8) | boolean | false |
+| inline | Use inline alignment(Deprecated after 2.8) | boolean | false |
 | onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
 

components/form/index.zh-CN.md

@@ -39,8 +39,10 @@ title: Form
 | 参数      | 说明                                     | 类型       | 默认值 |
 |-----------|------------------------------------------|------------|-------|
 | form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
-| vertical | 垂直排列布局 | boolean | false |
-| inline | 行内排列布局 | boolean | false |
+| layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| horizontal | 水平排列布局(2.8 之后废弃) | boolean | true |
+| vertical | 垂直排列布局(2.8 之后废弃) | boolean | false |
+| inline | 行内排列布局(2.8 之后废弃) | boolean | false |
 | onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
 

components/form/style/index.less

@@ -86,33 +86,24 @@ input[type="checkbox"] {
   }
 
   &-label {
-    text-align: right;
+    display: block;
+    float: none; // To reset `col-*`
+    padding: 0 0 8px;
+    text-align: left;
     vertical-align: middle;
     line-height: @form-component-height;
-    display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     label {
       color: @label-color;
-
-      &:after {
-        content: ":";
-        margin: 0 8px 0 2px;
-        position: relative;
-        top: -0.5px;
-      }
     }
   }
 
   .@{ant-prefix}-switch {
     margin: 4px 0;
   }
-
-  &-no-colon &-label label:after {
-    content: " ";
-  }
 }
 
 .@{form-prefix-cls}-explain {
@@ -247,47 +238,59 @@ form {
   }
 }
 
-// Form layout
-//== Vertical Form
-.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
-.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label {  // when labelCol is 24, it is a vertical form
-  padding: 0 0 8px;
-  display: block;
-  text-align: left;
-
-  label:after {
-    content: '';
-  }
-}
-
-//== Inline Form
-.@{form-prefix-cls}-inline {
-  .@{form-prefix-cls}-item {
-    display: inline-block;
-    margin-right: 10px;
-    margin-bottom: 0;
-
-    &-with-help {
-      margin-bottom: 24px;
-    }
-
-    > div {
+@media (min-width: @screen-sm) {
+  // Form layout
+  // == common style of Horizontal Form & Inline Form
+  .@{form-prefix-cls}-horizontal,
+  .@{form-prefix-cls}-inline {
+    // when labelCol is 24, it is a vertical form
+    .@{form-prefix-cls}-item-label:not(.@{ant-prefix}-col-24) {
       display: inline-block;
-      vertical-align: middle;
+      float: left; // To revert `col-*`
+      padding: 0;
+      text-align: right;
+
+      label:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
+    }
+    .@{form-prefix-cls}-item-no-colon .@{form-prefix-cls}-item-label label:after {
+      content: " ";
     }
   }
 
-  .@{form-prefix-cls}-text {
-    display: inline-block;
-  }
+  //== Inline Form
+  .@{form-prefix-cls}-inline {
+    .@{form-prefix-cls}-item {
+      display: inline-block;
+      margin-right: 10px;
+      margin-bottom: 0;
 
-  .has-feedback {
-    display: inline-block;
-  }
+      &-with-help {
+        margin-bottom: 24px;
+      }
 
-  // Fix https://github.comdesigndesign/issues/1040
-  .@{form-prefix-cls}-explain {
-    position: absolute;
+      > div {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .@{form-prefix-cls}-text {
+      display: inline-block;
+    }
+
+    .has-feedback {
+      display: inline-block;
+    }
+
+    // Fix https://github.comdesigndesign/issues/1040
+    .@{form-prefix-cls}-explain {
+      position: absolute;
+    }
   }
 }
 

components/form/style/mixin.less

@@ -25,6 +25,10 @@
     .active(@border-color);
   }
 
+  .@{ant-prefix}-input-prefix {
+    color: @text-color;
+  }
+
   .@{ant-prefix}-input-group-addon {
     color: @text-color;
     border-color: @border-color;

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

@@ -566,15 +566,15 @@ exports[`test renders ./components/grid/demo/reponsive.md correctly 1`] = `
 <div
   class="ant-row">
   <div
-    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8">
+    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10">
     Col
   </div>
   <div
-    class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8">
+    class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4">
     Col
   </div>
   <div
-    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8">
+    class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10">
     Col
   </div>
 </div>

components/grid/col.tsx

@@ -25,6 +25,7 @@ export interface ColProps {
   sm?: number | ColSize;
   md?: number | ColSize;
   lg?: number | ColSize;
+  xl?: number | ColSize;
   prefixCls?: string;
   style?: React.CSSProperties;
 }
@@ -42,13 +43,14 @@ export default class Col extends React.Component<ColProps, any> {
     sm: objectOrNumber,
     md: objectOrNumber,
     lg: objectOrNumber,
+    xl: objectOrNumber,
   };
 
   render() {
     const props = this.props;
     const { span, order, offset, push, pull, className, children, prefixCls = 'ant-col', ...others } = props;
     let sizeClassObj = {};
-    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
       let sizeProps: ColSize = {};
       if (typeof props[size] === 'number') {
         sizeProps.span = props[size];

components/grid/demo/reponsive-more.md

@@ -7,13 +7,13 @@ title:
 
 ## zh-CN
 
-`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。
+`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` 属性中来使用。
 
 其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
 
 ## en-US
 
-`Span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` properties to use,
+`Span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use,
 where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
 
 ````jsx

components/grid/demo/reponsive.md

@@ -7,20 +7,20 @@ title:
 
 ## zh-CN
 
-参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。
+参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`。
 
 ## en-US
 
-Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs` `sm` `md` `lg`.
+Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset five dimensions: `xs` `sm` `md` `lg` `xl`.
 
 ````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <Row>
-    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
-    <Col xs={20} sm={16} md={12} lg={8}>Col</Col>
-    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
+    <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
+    <Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
+    <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
   </Row>
 , mountNode);
 ````

components/grid/index.en-US.md

@@ -108,5 +108,6 @@ Ant Design layout component if it can not meet your needs, you can use the excel
 | sm       | `≥768px`, could be a `span` value or a object contain above props | number\|object | - |
 | md       | `≥992px`, could be a `span` value or a object contain above props | number\|object | - |
 | lg       | `≥1200px`, could be a `span` value or a object contain above props | number\|object | - |
+| xl       | `≥1600px`, could be a `span` value or a object contain above props | number\|object | - |
 
 The breakpoints of responsive grid follow [BootStrap 3 media queries rules](http://getbootstrap.com/css/#grid-media-queries)(not contain `occasionally part`).

components/grid/index.zh-CN.md

@@ -107,5 +107,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | sm       | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | md       | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 | lg       | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xl       | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
 
 响应式栅格的断点遵循了 [BootStrap 3 的规则](http://getbootstrap.com/css/#grid-media-queries)（不包含链接里 `occasionally` 的部分)。

components/grid/row.tsx

@@ -17,6 +17,7 @@ export default class Row extends React.Component<RowProps, any> {
   static defaultProps = {
     gutter: 0,
   };
+
   static propTypes = {
     type: React.PropTypes.string,
     align: React.PropTypes.string,
@@ -27,16 +28,17 @@ export default class Row extends React.Component<RowProps, any> {
     prefixCls: React.PropTypes.string,
   };
   render() {
-    const { type, justify, align, className, gutter, style, children, prefixCls = 'ant-row', ...others } = this.props;
+    const { type, justify, align, className, gutter, style, children,
+      prefixCls = 'ant-row', ...others } = this.props;
     const classes = classNames({
       [prefixCls]: !type,
       [`${prefixCls}-${type}`]: type,
       [`${prefixCls}-${type}-${justify}`]: type && justify,
       [`${prefixCls}-${type}-${align}`]: type && align,
     }, className);
-    const rowStyle = gutter > 0 ? assign({}, {
-      marginLeft: gutter / -2,
-      marginRight: gutter / -2,
+    const rowStyle = (gutter as number) > 0 ? assign({}, {
+      marginLeft: (gutter as number) / -2,
+      marginRight: (gutter as number) / -2,
     }, style) : style;
     const cols = Children.map(children, (col: React.ReactElement<any>) => {
       if (!col) {
@@ -44,9 +46,9 @@ export default class Row extends React.Component<RowProps, any> {
       }
       if (col.props) {
         return cloneElement(col, {
-          style: gutter > 0 ? assign({}, {
-            paddingLeft: gutter / 2,
-            paddingRight: gutter / 2,
+          style: (gutter as number) > 0 ? assign({}, {
+            paddingLeft: (gutter as number) / 2,
+            paddingRight: (gutter as number) / 2,
           }, col.props.style) : col.props.style,
         });
       }

components/grid/style/index.less

@@ -98,3 +98,11 @@
 @media (min-width: @screen-lg-min) {
   .make-grid(-lg);
 }
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}

components/icon/index.en-US.md

@@ -51,13 +51,20 @@ import IconSet from 'site/theme/template/IconSet';
 ReactDOM.render(<IconSet className="icons" catigory="suggestion" />, mountNode);
 ```
 
-### Other Icons
+### Application Icons
 
 ```__react
 import IconSet from 'site/theme/template/IconSet';
 ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
 ```
 
+### Brand and Logos
+
+```__react
+import IconSet from 'site/theme/template/IconSet';
+ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
+```
+
 ## Props
 
 | Property | Description      | Type   | Default |

components/icon/index.zh-CN.md

@@ -59,6 +59,13 @@ import IconSet from 'site/theme/template/IconSet';
 ReactDOM.render(<IconSet className="icons" catigory="other" />, mountNode);
 ```
 
+### 品牌和标识
+
+```__react
+import IconSet from 'site/theme/template/IconSet';
+ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
+```
+
 ## Props
 
 | 参数      | 说明             | 类型      | 默认值  |

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

@@ -107,6 +107,38 @@ exports[`test renders ./components/input-number/demo/disabled.md correctly 1`] =
 </div>
 `;
 
+exports[`test renders ./components/input-number/demo/formatter.md correctly 1`] = `
+<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="$ 100" />
+  </div>
+</div>
+`;
+
 exports[`test renders ./components/input-number/demo/size.md correctly 1`] = `
 <div>
   <div

components/input-number/demo/formatter.md

@@ -0,0 +1,26 @@
+---
+order: 4
+title:
+    zh-CN: 格式化展示
+    en-US: Formatter
+---
+
+## zh-CN
+
+展示具有具体含义的数据。
+
+## en-US
+
+Display value within it's situation.
+
+````jsx
+import { InputNumber } from 'antd';
+
+function onChange(value) {
+  console.log('changed', value);
+}
+
+ReactDOM.render(
+  <InputNumber formatter={value => `$ ${value}`} defaultValue={100} onChange={onChange} />
+, mountNode);
+````

components/input-number/index.en-US.md

@@ -19,6 +19,7 @@ When a numeric value needs to be provided.
 | value     | current value       | number      |            |
 | step     | The number to which the current value is increased or decreased. It can be an integer or decimal.  | number\|string      |  1      |
 | defaultValue     | initial value       | number      |            |
-| onChange     | The callback triggered when the value is changed.     | Function(value: number | string) |            |
+| onChange     | The callback triggered when the value is changed.     | function(value: number | string) |            |
 | disabled     | disable the input       | boolean      |      false      |
-| size    | width of input box  | string      |      none      |
+| size    | width of input box  | string      | - |
+| formatter | Specifies the format of the value presented | function(value: number | string): string | - |

components/input-number/index.zh-CN.md

@@ -25,3 +25,4 @@ title: InputNumber
 | onChange     | 变化回调       | Function(value: number | string) |            |
 | disabled     | 禁用       | boolean      |      false      |
 | size    | 输入框大小  | string      |      无      |
+| formatter | 指定输入框展示值的格式 | function(value: number | string): string | - |

components/input-number/style/index.less

@@ -75,7 +75,7 @@
     line-height: @input-height-base - 2px;
     height: @input-height-base - 2px;
     transition: all 0.3s linear;
-    color: @text-color;
+    color: @input-color;
     border: 0;
     border-radius: @border-radius-base;
     padding: 0 7px;

components/input/Search.tsx

@@ -32,7 +32,7 @@ export default class Search extends React.Component<SearchProps, any> {
   }
   render() {
     const { className, prefixCls, ...others } = this.props;
-    delete others.onSearch;
+    delete (others as any).onSearch;
     const searchSuffix = (
       <Icon
         className={`${prefixCls}-icon`}

components/input/demo/presuffix.md

@@ -59,4 +59,7 @@ ReactDOM.render(<App />, mountNode);
 .anticon-close-circle:hover {
   color: #999;
 }
+.anticon-close-circle:active {
+  color: #666;
+}
 ````

components/input/style/index.less

@@ -17,10 +17,3 @@
 .@{ant-prefix}-input-preSuffix-wrapper {
   .input-preSuffix-wrapper(~"@{ant-prefix}-input");
 }
-
-// chrome only hack, fix https://github.com/ant-design/ant-design/issues/4987
-@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
-  input.@{ant-prefix}-input {
-    line-height: inherit;
-  }
-}

components/input/style/mixin.less

@@ -294,7 +294,7 @@
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
-    line-height: 1.2;
+    line-height: 0;
   }
 
   .@{inputClass}-prefix {

components/layout/Sider.tsx

@@ -1,8 +1,32 @@
+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = function matchMediaPolyfill(mediaQuery: string): MediaQueryList {
+    return {
+      media: mediaQuery,
+      matches: false,
+      addListener() {
+      },
+      removeListener() {
+      },
+    };
+  };
+  window.matchMedia = window.matchMedia || matchMediaPolyfill;
+}
+
 import React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Icon from '../icon';
 
+const dimensionMap = {
+  xs: '480px',
+  sm: '768px',
+  md: '992px',
+  lg: '1200px',
+  xl: '1600px',
+};
+
 export interface SiderProps {
   style?: React.CSSProperties;
   prefixCls?: string;
@@ -11,13 +35,15 @@ export interface SiderProps {
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   reverseArrow?: boolean;
-  onCollapse?: (collapsed: boolean) => void;
+  onCollapse?: (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;
   trigger?: React.ReactNode;
   width?: number | string;
-  collapsedWidth?: number;
+  collapsedWidth?: number | string;
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export default class Sider extends React.Component<SiderProps, any> {
+  static __ANT_LAYOUT_SIDER: any = true;
 
   static defaultProps = {
     prefixCls: 'ant-layout-sider',
@@ -27,11 +53,19 @@ export default class Sider extends React.Component<SiderProps, any> {
     width: 200,
     collapsedWidth: 64,
     style: {},
-    name: 'Sider',
   };
 
+  private mql: any;
+
   constructor(props) {
     super(props);
+    let matchMedia;
+    if (typeof window !== 'undefined') {
+      matchMedia = window.matchMedia;
+    }
+    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMap) {
+      this.mql = matchMedia(`(max-width: ${dimensionMap[props.breakpoint]})`);
+    }
     let collapsed;
     if ('collapsed' in props) {
       collapsed = props.collapsed;
@@ -40,6 +74,7 @@ export default class Sider extends React.Component<SiderProps, any> {
     }
     this.state = {
       collapsed,
+      below: false,
     };
   }
 
@@ -51,7 +86,27 @@ export default class Sider extends React.Component<SiderProps, any> {
     }
   }
 
-  setCollapsed = (collapsed) => {
+  componentDidMount() {
+    if (this.mql) {
+      this.mql.addListener(this.responsiveHandler);
+      this.responsiveHandler(this.mql);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.mql) {
+      this.mql.removeListener(this.responsiveHandler);
+    }
+  }
+
+  responsiveHandler = (mql) => {
+    this.setState({ below: mql.matches });
+    if (this.state.collapsed !== mql.matches) {
+      this.setCollapsed(mql.matches, 'responsive');
+    }
+  }
+
+  setCollapsed = (collapsed, type) => {
     if (!('collapsed' in this.props)) {
       this.setState({
         collapsed,
@@ -59,30 +114,32 @@ export default class Sider extends React.Component<SiderProps, any> {
     }
     const { onCollapse } = this.props;
     if (onCollapse) {
-      onCollapse(collapsed);
+      onCollapse(collapsed, type);
     }
   }
 
   toggle = () => {
     const collapsed = !this.state.collapsed;
-    this.setCollapsed(collapsed);
+    this.setCollapsed(collapsed, 'clickTrigger');
+  }
+
+  belowShowChange = () => {
+    this.setState({ belowShow: !this.state.belowShow });
   }
 
   render() {
-    const {
-      prefixCls, className, collapsible, reverseArrow, trigger, style, width, collapsedWidth,
+    const { prefixCls, className,
+      collapsible, reverseArrow, trigger, style, width, collapsedWidth,
       ...others,
     } = this.props;
-    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'name']);
-    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`,
-      width: `${this.state.collapsed ? collapsedWidth : width}px`,
-    };
+    const divProps = omit(others, ['collapsed',
+      'defaultCollapsed', 'onCollapse', 'breakpoint']);
+    const siderWidth = this.state.collapsed ? collapsedWidth : width;
+    // special trigger when collapsedWidth == 0
+    const zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' ?
+      (<span onClick={this.toggle} className={`${prefixCls}-zero-width-trigger`}>
+        <Icon type="bars" />
+      </span>) : null;
     const iconObj = {
       'expanded': reverseArrow ? <Icon type="right" /> : <Icon type="left" />,
       'collapsed': reverseArrow ? <Icon type="left" /> : <Icon type="right" />,
@@ -91,15 +148,27 @@ export default class Sider extends React.Component<SiderProps, any> {
     const defaultTrigger = iconObj[status];
     const triggerDom = (
       trigger !== null ?
+      zeroWidthTrigger ||
       (<div className={`${prefixCls}-trigger`} onClick={this.toggle}>
         {trigger || defaultTrigger}
       </div>)
       : null
     );
+    const divStyle = {
+      ...style,
+      flex: `0 0 ${siderWidth}px`,
+      width: `${siderWidth}px`,
+    };
+    const siderCls = classNames(className, prefixCls, {
+      [`${prefixCls}-collapsed`]: !!this.state.collapsed,
+      [`${prefixCls}-has-trigger`]: !!trigger,
+      [`${prefixCls}-below`]: !!this.state.below,
+      [`${prefixCls}-zero-width`]: siderWidth === 0 || siderWidth === '0',
+    });
     return (
       <div className={siderCls} {...divProps} style={divStyle}>
         {this.props.children}
-        {collapsible && triggerDom}
+        {collapsible || (this.state.below && zeroWidthTrigger) ? triggerDom : null}
       </div>
     );
   }

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

@@ -155,6 +155,173 @@ exports[`test renders ./components/layout/demo/custom-trigger.md correctly 1`] =
 </div>
 `;
 
+exports[`test renders ./components/layout/demo/fixed.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="content ant-layout-content">
+    <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/responsive.md correctly 1`] = `
+<div
+  class="ant-layout ant-layout-has-sider">
+  <div
+    class="ant-layout-sider"
+    style="flex:0 0 200px;width: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="false"
+        class="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="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 4
+        </span>
+      </li>
+    </ul>
+  </div>
+  <div
+    class="ant-layout">
+    <div
+      class="ant-layout-header"
+      style="background:#fff;padding:0;" />
+    <div
+      class="ant-layout-content"
+      style="margin:24px 16px 0;">
+      <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/side.md correctly 1`] = `
 <div
   class="ant-layout ant-layout-has-sider">
@@ -531,3 +698,175 @@ exports[`test renders ./components/layout/demo/top-side.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`test renders ./components/layout/demo/top-side-2.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 ant-layout-has-sider">
+    <div
+      class="ant-layout-sider"
+      style="background:#fff;flex:0 0 200px;width:200px;">
+      <ul
+        aria-activedescendant=""
+        class="ant-menu ant-menu-inline  ant-menu-light ant-menu-root"
+        role="menu"
+        style="height:100%;"
+        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"
+      style="padding:0 24px 24px;">
+      <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-content"
+        style="background:#fff;padding:24px;margin:0;min-height:280px;">
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/layout/demo/fixed.md

@@ -0,0 +1,68 @@
+---
+order: 6
+iframe: true
+title:
+  zh-CN: 固定头部
+  en-US: Fixed Header
+---
+
+## zh-CN
+
+一般用于固定顶部导航，方便页面切换。
+
+## en-US
+
+Fixed Header is generally used to fix the top navigation to facilitate page switching.
+
+````jsx
+import { Layout, Menu, Breadcrumb } from 'antd';
+const { Header, Content, Footer } = 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 className="content">
+      <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-fixed .logo {
+  width: 120px;
+  height: 31px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 24px 16px 0;
+  float: left;
+}
+#components-layout-demo-fixed .header {
+  position: fixed;
+  width: 100%;
+}
+#components-layout-demo-fixed .content {
+  padding: 0 50px;
+  margin-top: 64px;
+}
+````

components/layout/demo/responsive.md

@@ -0,0 +1,71 @@
+---
+order: 5
+title:
+  zh-CN: 响应式布局
+  en-US: Responsive
+---
+
+## zh-CN
+
+Layout.Sider 支持响应式布局。
+
+> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为零，会出现特殊 trigger。
+
+## en-US
+
+Layout.Sider supports responsive layout.
+
+> Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to `0`.
+
+````jsx
+import { Layout, Menu, Icon } from 'antd';
+const { Header, Content, Footer, Sider } = Layout;
+
+ReactDOM.render(<Layout>
+  <Sider
+    breakpoint="lg"
+    collapsedWidth="0"
+    onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
+  >
+    <div className="logo" />
+    <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
+      <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>
+  </Sider>
+  <Layout>
+    <Header style={{ background: '#fff', padding: 0 }} />
+    <Content style={{ margin: '24px 16px 0' }}>
+      <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>, mountNode);
+````
+
+````css
+#components-layout-demo-responsive .logo {
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px;
+}
+````

components/layout/demo/top-side-2.md

@@ -0,0 +1,88 @@
+---
+order: 2
+title:
+  zh-CN: 顶部-侧边布局-通栏
+  en-US: Header Sider 2
+---
+
+## zh-CN
+
+同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。
+
+## en-US
+
+Both the top navigation and the sidebar, commonly used in application site.
+
+````jsx
+import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+const { SubMenu } = Menu;
+const { Header, Content, 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>
+    <Layout>
+      <Sider width={200} style={{ background: '#fff' }}>
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          style={{ height: '100%' }}
+        >
+          <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>
+      <Layout style={{ padding: '0 24px 24px' }}>
+        <Breadcrumb style={{ margin: '12px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
+          Content
+        </Content>
+      </Layout>
+    </Layout>
+  </Layout>
+, mountNode);
+````
+
+````css
+#components-layout-demo-top-side-2 .logo {
+  width: 120px;
+  height: 31px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+````

components/layout/demo/top-side.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-多用在同时拥有顶部导航及侧边栏的页面。
+拥有顶部导航及侧边栏的页面，多用于展示类网站。
 
 ## en-US
 
-Be used in the page which has both the top navigation and the sidebar.
+Both the top navigation and the sidebar, commonly used in documentation site.
 
 ````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';

components/layout/index.en-US.md

@@ -51,9 +51,19 @@ 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) => {}  | -
+onCollapse | the callback function, can be executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {}  | -
 trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode| - |
 width | width of the sidebar | number\|string | 200
-collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | number | 64
+collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64
+breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
 style | to custom the styles | object | -
 className | container className | string | -
+
+> Note: If you want to wrap the `Sider`, do not forget to add this setting to the customized component: `__ANT_LAYOUT_SIDER = true`. e.g.
+
+```jsx
+const CustomizedSider = (props) => <Sider {...props} />
+CustomizedSider.__ANT_LAYOUT_SIDER = true;
+...
+<CustomizedSider>Sider Content</CustomizedSider>
+```

components/layout/index.zh-CN.md

@@ -52,9 +52,19 @@ title: Layout
 | collapsible | 是否可收起 | boolean | false  |
 | defaultCollapsed | 是否默认收起 | boolean | false  |
 | collapsed | 当前收起状态 | boolean | - |
-| onCollapse | 展开-收起时的回调函数，仅当 `collapsible:true` 时生效 | (collapsed) => {} | - |
+| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
 | width | 宽度 | number\|string | 200 |
-| collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | number | 64 |
+| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
+| breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
 | style | 指定样式 | object | - |
 | className | 容器 className | string | - |
+
+> 注意：如果你想在 `Sider` 基础上进行包装，需要给自定义组件加上 `__ANT_LAYOUT_SIDER = true` 设置，例如：
+
+```jsx
+const CustomizedSider = (props) => <Sider {...props} />
+CustomizedSider.__ANT_LAYOUT_SIDER = true;
+...
+<CustomizedSider>Sider Content</CustomizedSider>
+```

components/layout/layout.tsx

@@ -5,7 +5,6 @@ export interface BasicProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
-  name: string;
 }
 
 function generator(props) {
@@ -17,7 +16,7 @@ function generator(props) {
       static Sider: any;
       render() {
         const { prefixCls } = props;
-        return <Basic prefixCls={prefixCls} name={props.name} {...this.props}/>;
+        return <Basic prefixCls={prefixCls} {...this.props}/>;
       }
     };
   };
@@ -25,15 +24,13 @@ function generator(props) {
 
 class Basic extends React.Component<BasicProps, any> {
   render() {
-    const { prefixCls, className, children, name, ...others } = this.props;
+    const { prefixCls, className, children, ...others } = this.props;
     let hasSider;
-    if (name === 'Layout') {
-      React.Children.forEach(children, (ele: React.ReactElement<any>) => {
-        if (ele && ele.props && ele.props.name === 'Sider') {
-          hasSider = true;
-        }
-      });
-    }
+    React.Children.forEach(children, (element: any) => {
+      if (element && element.type && element.type.__ANT_LAYOUT_SIDER) {
+        hasSider = true;
+      }
+    });
     const divCls = classNames(className, prefixCls, {
       [`${prefixCls}-has-sider`]: hasSider,
     });
@@ -45,22 +42,18 @@ class Basic extends React.Component<BasicProps, any> {
 
 const Layout = generator({
   prefixCls: 'ant-layout',
-  name: 'Layout',
 })(Basic);
 
 const Header = generator({
   prefixCls: 'ant-layout-header',
-  name: 'Header',
 })(Basic);
 
 const Footer = generator({
   prefixCls: 'ant-layout-footer',
-  name: 'Footer',
 })(Basic);
 
 const Content = generator({
   prefixCls: 'ant-layout-content',
-  name: 'Content',
 })(Basic);
 
 Layout.Header = Header;

components/layout/style/index.less

@@ -60,5 +60,31 @@
       background: tint(@heading-color, 20%);
       color: #fff;
     }
+
+    &-zero-width {
+      & > * {
+        overflow: hidden;
+      }
+
+      &-trigger {
+        position: absolute;
+        top: @layout-header-height;
+        right: -@layout-zero-trigger-width;
+        text-align: center;
+        width: @layout-zero-trigger-width;
+        height: @layout-zero-trigger-height;
+        line-height: @layout-zero-trigger-height;
+        background: @layout-sider-background;
+        color: #fff;
+        font-size: @layout-zero-trigger-width / 2;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+        cursor: pointer;
+        transition: background .3s ease;
+
+        &:hover {
+          background: tint(@layout-sider-background, 10%);
+        }
+      }
+    }
   }
 }

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

@@ -11,13 +11,13 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
       <label
         class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
         <span
-          class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-          <span
-            class="ant-radio-button-inner" />
+          class="ant-radio-button ant-radio-button-checked">
           <input
             checked=""
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           English
@@ -27,11 +27,11 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
         class="ant-radio-button-wrapper">
         <span
           class="ant-radio-button">
-          <span
-            class="ant-radio-button-inner" />
           <input
             class="ant-radio-button-input"
             type="radio" />
+          <span
+            class="ant-radio-button-inner" />
         </span>
         <span>
           中文
@@ -246,11 +246,11 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
               class="ant-checkbox-wrapper">
               <span
                 class="ant-checkbox">
-                <span
-                  class="ant-checkbox-inner" />
                 <input
                   class="ant-checkbox-input"
                   type="checkbox" />
+                <span
+                  class="ant-checkbox-inner" />
               </span>
             </label>
             <span
@@ -316,11 +316,11 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
               class="ant-checkbox-wrapper">
               <span
                 class="ant-checkbox">
-                <span
-                  class="ant-checkbox-inner" />
                 <input
                   class="ant-checkbox-input"
                   type="checkbox" />
+                <span
+                  class="ant-checkbox-inner" />
               </span>
             </label>
             <span
@@ -424,13 +424,13 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
             <label
               class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
               <span
-                class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-                <span
-                  class="ant-radio-button-inner" />
+                class="ant-radio-button ant-radio-button-checked">
                 <input
                   checked=""
                   class="ant-radio-button-input"
                   type="radio" />
+                <span
+                  class="ant-radio-button-inner" />
               </span>
               <span>
                 Month
@@ -440,11 +440,11 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
               class="ant-radio-button-wrapper">
               <span
                 class="ant-radio-button">
-                <span
-                  class="ant-radio-button-inner" />
                 <input
                   class="ant-radio-button-input"
                   type="radio" />
+                <span
+                  class="ant-radio-button-inner" />
               </span>
               <span>
                 Year
@@ -835,6 +835,7 @@ exports[`test renders ./components/locale-provider/demo/all.md correctly 1`] = `
                   </td>
                 </tr>
                 <tr
+                  class="ant-fullcalendar-current-week"
                   role="row">
                   <td
                     class="ant-fullcalendar-cell"