Merge branch 'develop-0.11.0' into component-transfer

* develop-0.11.0: (147 commits) update upload style fix className update tabs demo Add picture style upload list fix docs fix #662 fix value prop of DatePicker to controlled prop Add overflowCount for badge, close #660 Add ceiling spec, #413 update spec/tools.md fix react-component/time-picker#9 fix prefixCls feat: add Menu.ItemGroup #654 update tabs document update text Add design tools page update upgrade notes Add warn message and fix warn alert icon Datepicker => DatePicker, Timepicker => TimePicker Add propTypes ... # Conflicts: # index.js
2024-11-27 12:39:49 +08:00 · 2015-12-15 14:05:57 +08:00 · 2015-12-15 14:05:57 +08:00 · 2c8072cb98
commit 2c8072cb98
parent 779d904f53 0bd2ed9378
209 changed files with 2580 additions and 1542 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -12,7 +12,7 @@
    "experimentalObjectRestSpread": true
  },
  "plugins": [
-    "markdown",
+    "markdown-antd",
    "react",
    "babel"
  ],
--- a/.lesshintrc
+++ b/.lesshintrc
@ -0,0 +1,12 @@
+{
+  "propertyOrdering": false,
+  "hexLength": "short",
+  "stringQuotes": false,
+  "decimalZero": false,
+  "importantRule": false,
+  "zeroUnit": "no_unit",
+  "qualifyingElement": false,
+  "duplicateProperty": false,
+  "importPath": false,
+  "finalNewline": false
+}
--- a/.lesslintrc
+++ b/.lesslintrc
@ -1,6 +0,0 @@
-{
-  "import": false,
-  "require-newline": false,
-  "leading-zero": false,
-  "single-comment": false
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,22 @@

 ---

+## 0.10.4 `2015-11-30`
+
+- 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
+- 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
+- 修复 RadioGroup 中的 Radio/RadioButton 无法单独设置 disabled 的问题。[#603](https://github.com/ant-design/ant-design/issues/603)
+- 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
+
+
+## 0.10.3 `2015-11-26`
+
+- 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
+- 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
+- Pagination 的改动也修复了 Table 切换数据源后回到[第一页的例子](http://ant.design/components/table/#demo-ajax)。
+- 对演示和样式代码增加了 lint 检查。
+
+
 ## 0.10.2 `2015-11-25`

 - Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
@ -42,7 +58,7 @@
 - 优先使用苹方字体。
 - 统一 size 属性的可选值为 `small` `default` `large`。
 - 开始初步补充[测试用例](https://github.com/ant-design/ant-design/tree/1a3a19793c0791201666fdcf0dbd12a30fad4be0/tests)。
- 提供主色系更换的方案。[#384](https://github.com/ant-design/ant-design/issues/384)
+- 提供主色系更换的[方案](https://github.com/ant-tool/xtool/tree/master/examples/customize-antd-theme)。[#384](https://github.com/ant-design/ant-design/issues/384)
 - 添加[色彩换算工具](http://ant.design/spec/colors#色彩换算工具)。
 - 添加布局和导航规范，以及[常用布局](http://ant.design/spec/layout/)。
 - 文档支持标题和演示的锚点，方便分享文档和演示代码。
@ -94,7 +110,7 @@
 > 备注：
 >
 > - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
-> - [0.10 升级指南](http://ant.design/docs/upgrade-to-0.10)
+> - [0.10 升级指南](http://ant.design/docs/upgrade-notes)


 ## 0.9.3 ~ 0.9.5 `2015-11-04`
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -1,20 +1,18 @@
+<p align="center">
+  <a href="http://ant.design">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>
+
 # Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 一套企业级的 UI 设计语言和 React 实现。

-<p align="center">
-  <a href="http://ant.design">
-    <img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-  </a>
-</p>
-
 ## 特性

- 提炼自企业级后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上二次封装的丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 背靠 npm 生态圈。
- 基于 webpack 的调试构建方案，支持 ES6。
+- 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
+- 基于 npm + webpack + babel 的工作流，支持 ES2015。


 ## 安装
@ -28,18 +26,29 @@ npm install antd
 - 使用全部组件

  ```jsx
-  import { Datepicker } from 'antd';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import { DatePicker } from 'antd';
+  ReactDOM.render(<DatePicker />, mountNode);
  ```

 - 按需使用

  ```jsx
-  import 'antd/lib/index.css'; // 只需在页面入口模块引用一次
-  import Datepicker from 'antd/lib/datepicker';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import DatePicker from 'antd/lib/date-picker';
+  ReactDOM.render(<DatePicker />, mountNode);
  ```

+引入样式：
+
+```jsx
+// only need to import once in entry module
+import 'antd/lib/index.css';
+```
+
+```jsx
+// or less for modifyVars
+import 'antd/style/index.less';
+```
+
 ## 浏览器支持

 现代浏览器和 IE8 及以上。
@ -47,11 +56,11 @@ npm install antd
 ## 链接

 - [首页](http://ant.design/)
- [文档和组件](http://ant.design/docs/introduce)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [React UI 库](http://ant.design/docs/introduce)
+- [构建调试工具](https://github.com/ant-tool/xtool/)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [修改记录](CHANGELOG.md)
- [React 模块](http://react-component.github.io/)
+- [React 组件](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
--- a/README.md
+++ b/README.md
@ -1,16 +1,18 @@
+<p align="center">
+  <a href="http://ant.design">
+    <img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+  </a>
+</p>
+
 # Ant Design [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd) [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 An enterprise-class UI design language and React-based implementation.

-![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
-
 ## Features

- An enterprise-class graphical design language and framework for financial applications
+- An enterprise-class graphical design language and framework for financial applications.
 - Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- A Component development model based on React.
- Backed by the npm ecosystem.
- webpack-based debug builds supporting ES6
+- A npm + webpack + babel workflow, supporting ES2015.

 ## Install

@ -23,18 +25,29 @@ npm install antd
 - Use all components

  ```jsx
-  import { Datepicker } from 'antd';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import { DatePicker } from 'antd';
+  ReactDOM.render(<DatePicker />, mountNode);
  ```

 - Use on demand

  ```jsx
-  import 'antd/lib/index.css'; // only need to import once in entry module
-  import Datepicker from 'antd/lib/datepicker';
-  ReactDOM.render(<Datepicker />, mountNode);
+  import DatePicker from 'antd/lib/date-picker';
+  ReactDOM.render(<DatePicker />, mountNode);
  ```

+Import style:
+
+```jsx
+// only need to import once in entry module
+import 'antd/lib/index.css';
+```
+
+```jsx
+// or less for modifyVars
+import 'antd/style/index.less';
+```
+
 ## Browser Support

 Normal browsers and Internet Explorer 8+.
@ -43,14 +56,13 @@ Normal browsers and Internet Explorer 8+.
 ## Links

 - [Home page](http://ant.design/)
- [Documentation and Components](http://ant.design/docs/introduce)
- [Components](http://ant.design/components/)
- [Build/Debug tools](https://github.com/ant-design/antd-bin)
+- [React UI library](http://ant.design/docs/introduce)
+- [Build/Debug tools](https://github.com/ant-tool/xtool/)
 - [Roadmap](https://github.com/ant-design/ant-design/issues/9)
 - [ChangeLog](CHANGELOG.md)
- [React modules](http://react-component.github.io/)
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/en-US/component-design.md)
+- [React components](http://react-component.github.io/)
+- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)

--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@ -1,6 +1,6 @@
 # 可关闭的警告提示

- order: 1
+- order: 2

 显示关闭按钮，点击可关闭警告提示。

--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@ -0,0 +1,15 @@
+# 自定义关闭
+
+- order: 5
+
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
+
+---
+
+````jsx
+import { Alert } from 'antd';
+
+ReactDOM.render(
+<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
+, document.getElementById('components-alert-demo-close-text'));
+````
--- a/components/alert/demo/close-type.md
+++ b/components/alert/demo/close-type.md
@ -1,16 +0,0 @@
-# 自定义关闭
-
- order: 4
-
-可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
-
---
-
-````jsx
-import { Alert } from 'antd';
-const link = <a href="#">不再提醒</a>;
-
-ReactDOM.render(
-<Alert message="消息提示的文案" type="info" closeText={link} />
-, document.getElementById('components-alert-demo-close-type'));
-````
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@ -1,6 +1,6 @@
 # 含有辅助性文字介绍

- order: 2
+- order: 3

 含有辅助性文字介绍的警告提示。

--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@ -0,0 +1,36 @@
+# 图标
+
+- order: 4
+
+可口的图标让信息类型更加醒目。
+
+---
+
+````jsx
+import { Alert } from 'antd';
+
+ReactDOM.render(<div>
+  <Alert message="成功提示的文案" type="success" showIcon />
+  <Alert message="消息提示的文案" type="info" showIcon />
+  <Alert message="警告提示的文案" type="warn" showIcon />
+  <Alert message="错误提示的文案" type="error" showIcon />
+  <Alert message="成功提示的文案"
+    description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
+    type="success"
+    showIcon />
+  <Alert message="消息提示的文案"
+    description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+    type="info"
+    showIcon />
+  <Alert
+    message="警告提示的文案"
+    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
+    type="warn"
+    showIcon />
+  <Alert
+    message="错误提示的文案"
+    description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+    type="error"
+    showIcon />
+</div>, document.getElementById('components-alert-demo-icon'));
+````
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@ -1,6 +1,6 @@
 # 四种样式

- order: 3
+- order: 1

 共有四种样式`success`、`info`、`warn`、`error`。

--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -2,11 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
+import classNames from 'classnames';

 export default React.createClass({
  getDefaultProps() {
    return {
-      prefixCls: 'ant-alert'
+      prefixCls: 'ant-alert',
+      showIcon: false,
+      onClose() {}
    };
  },
  getInitialState() {
@ -26,9 +29,7 @@ export default React.createClass({
    this.setState({
      closing: false
    });
-    if (this.props.onClose) {
-      this.props.onClose.call(this, e);
-    }
+    this.props.onClose.call(this, e);
  },
  animationEnd() {
    this.setState({
@ -37,10 +38,12 @@ export default React.createClass({
    });
  },
  render() {
-    let iconClass = this.props.description ?
-      'ant-alert-with-description-icon' : 'ant-alert-icon';
+    let {
+      closable, description, type, prefixCls, message, closeText, showIcon
+    } = this.props;
+
    let iconType = '';
-    switch (this.props.type) {
+    switch (type) {
    case 'success':
      iconType = 'check-circle';
      break;
@ -51,49 +54,44 @@ export default React.createClass({
      iconType = 'exclamation-circle';
      break;
    case 'warn':
-      iconType = 'question-circle';
+      iconType = 'exclamation-circle';
      break;
    default:
      iconType = 'default';
    }
-    let html;
-    let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
-    if (this.props.description) {
-      let close = this.props.closable ?
-        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
-          <span className="ant-alert-with-description-close-icon-x"></span>
-        </a> : '';
-      html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
-        <Icon className={iconClass} type={iconType} />
-        <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
-        <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
-          {close}
-      </div>;
-    } else {
-      if (this.props.closeText) {
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <Icon className={iconClass} type={iconType} />
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
-        </div>;
-      } else {
-        let close = this.props.closable ?
-          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
-            <span className="ant-alert-close-icon-x"></span>
-          </a> : '';
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <Icon className={iconClass} type={iconType} />
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          {close}
-        </div>;
-      }
+
+    // use outline icon in alert with description
+    if (!!description) {
+      iconType += '-o';
    }
-    return this.state.closed ? null : <Animate
-      component=""
-      showProp="data-show"
-      transitionName="slide-up"
-      onEnd={this.animationEnd}>
-      {html}
-    </Animate>;
+
+    let alertCls = classNames({
+      [prefixCls]: true,
+      [prefixCls + '-' + type]: true,
+      [prefixCls + '-close']: !this.state.closing,
+      [prefixCls + '-with-description']: !!description,
+      [prefixCls + '-no-icon']: !showIcon,
+    });
+
+    // closeable when closeText is assigned
+    if (closeText) {
+      closable = true;
+    }
+
+    return this.state.closed ? null : (
+      <Animate component=""
+               showProp="data-show"
+               transitionName="slide-up"
+               onEnd={this.animationEnd}>
+        <div data-show={this.state.closing} className={alertCls}>
+          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
+          <span className={prefixCls + '-message'}>{message}</span>
+          <span className={prefixCls + '-description'}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+            {closeText || <Icon type="cross" />}
+          </a> : null}
+        </div>
+      </Animate>
+    );
  }
 });
--- a/components/alert/index.md
+++ b/components/alert/index.md
@ -23,3 +23,4 @@
 | message    | 必选参数，警告提示内容                                       | String     | 无    |
 | description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
 | onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
+| showIcon   | 可选参数，是否显示辅助图标                                 | Boolean   | false    |
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@ -1,5 +1,6 @@
 import React, { createElement } from 'react';
 import assign from 'object-assign';
+import { isCssAnimationSupported } from 'css-animation';

 function getNumberArray(num) {
  return num ?
@ -98,7 +99,8 @@ class AntScrollNumber extends React.Component {
    const props = assign({}, this.props, {
      className: `${this.props.prefixCls} ${this.props.className}`
    });
-    if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+    const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
+    if (isBrowser && isCssAnimationSupported) {
      return createElement(
        this.props.component,
        props,
--- a/components/badge/index.jsx
+++ b/components/badge/index.jsx
@ -8,10 +8,10 @@ class AntBadge extends React.Component {
  }

  render() {
-    let { count, prefixCls } = this.props;
+    let { count, prefixCls, overflowCount } = this.props;
    const dot = this.props.dot;

-    count = count >= 100 ? '99+' : count;
+    count = count > overflowCount ? '${overflowCount}+' : count;

    // dot mode don't need count
    if (dot) {
@ -43,6 +43,7 @@ AntBadge.defaultProps = {
  prefixCls: 'ant-badge',
  count: null,
  dot: false,
+  overflowCount: 99,
 };

 AntBadge.propTypes = {
@ -51,6 +52,7 @@ AntBadge.propTypes = {
    React.PropTypes.number
  ]),
  dot: React.PropTypes.bool,
+  overflowCount: React.PropTypes.number,
 };

 export default AntBadge;
--- a/components/badge/index.md
+++ b/components/badge/index.md
@ -22,5 +22,6 @@

 | 参数           | 说明                             | 类型       |  可选值 | 默认值 |
 |----------------|----------------------------------|------------|---------|--------|
-| count          | 展示的数字，大于 99 时显示为 99+，为 0 时隐藏 | Number     |         |        |
+| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number     |         |        |
+| overflowCount  | 展示封顶的数字值                 | Number     |         | 99     |
 | dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@ -41,7 +41,7 @@ const Home = React.createClass({

 ReactDOM.render((
  <Router>
-    <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
+    <Route name="home" breadcrumbName="首页" path="/" component={Home}>
      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
        <Route name="app" breadcrumbName="应用:id" path=":id" />
      </Route>
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@ -0,0 +1,20 @@
+# 分隔符
+
+- order: 3
+
+使用 `separator=">"` 可以自定义分隔符。
+
+---
+
+````jsx
+import { Breadcrumb } from 'antd';
+
+ReactDOM.render(
+  <Breadcrumb separator=">">
+    <Breadcrumb.Item>首页</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用中心</Breadcrumb.Item>
+    <Breadcrumb.Item href="">应用列表</Breadcrumb.Item>
+    <Breadcrumb.Item>某应用</Breadcrumb.Item>
+  </Breadcrumb>
+, document.getElementById('components-breadcrumb-demo-separator'));
+````
--- a/components/breadcrumb/index.jsx
+++ b/components/breadcrumb/index.jsx
@ -1,52 +1,79 @@
-import React from 'react';
+import React, { cloneElement } from 'react';

-let prefixCls = 'ant-breadcrumb';
-
-let BreadcrumbItem = React.createClass({
+const BreadcrumbItem = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-breadcrumb',
+      separator: '/',
+    };
+  },
  propTypes: {
-    href: React.PropTypes.string
+    prefixCls: React.PropTypes.string,
+    separator: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]),
+    href: React.PropTypes.string,
  },
  render() {
-    let link = <a className={prefixCls + '-link'} {...this.props}>{this.props.children}</a>;
-    let slash = <span className={prefixCls + '-slash'}>/</span>;
+    const { prefixCls, separator, children } = this.props;
+    let link = <a className={prefixCls + '-link'} {...this.props}>{children}</a>;
    if (typeof this.props.href === 'undefined') {
-      link = <span className={prefixCls + '-link'} {...this.props}>{this.props.children}</span>;
+      link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
    }
-    return <span>{link}{slash}</span>;
+    return <span>
+      {link}
+      <span className={prefixCls + '-separator'}>{separator}</span>
+    </span>;
  }
 });

-let Breadcrumb = React.createClass({
+const Breadcrumb = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-breadcrumb',
+      separator: '/',
+    };
+  },
  propTypes: {
+    prefixCls: React.PropTypes.string,
+    separator: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element,
+    ]),
    router: React.PropTypes.object,
    routes: React.PropTypes.array,
    params: React.PropTypes.object
  },
  render() {
    let crumbs;
-    let ReactRouter = this.props.router;
-    let routes = this.props.routes;
-    let params = this.props.params;
+    const { separator, prefixCls, router, routes, params, children } = this.props;
+    const ReactRouter = router;
    if (routes && routes.length > 0 && ReactRouter) {
      let Link = ReactRouter.Link;
      crumbs = routes.map(function(route, i) {
        if (!route.breadcrumbName) {
          return null;
        }
-        let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
+        const name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
          return params[key] || replacement;
        });
        let link;
-        let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
+        const path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
        if (i === routes.length - 1) {
          link = <span>{name}</span>;
        } else {
          link = <Link to={path} params={params}>{name}</Link>;
        }
-        return <BreadcrumbItem key={name}>{link}</BreadcrumbItem>;
+        return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
      });
    } else {
-      crumbs = this.props.children;
+      crumbs = React.Children.map(children, (element, index) => {
+        return cloneElement(element, {
+          separator,
+          key: index,
+        });
+      });
    }
    return (
      <div className={prefixCls}>
--- a/components/breadcrumb/index.md
+++ b/components/breadcrumb/index.md
@ -27,11 +27,12 @@

 ### Breadcrumb

-| 参数      | 说明                                     | 类型       |  可选值 | 默认值 |
-|-----------|------------------------------------------|------------|---------|--------|
-| router    | 可传入 react-router 的实例               | Object     |         | -      |
-| routes    | router 的路由栈信息                      | Array      |         | -      |
-| params    | 路由的参数                               | Object     |         | -      |
+| 参数      | 说明                              | 类型              |  可选值 | 默认值 |
+|-----------|-----------------------------------|-------------------|---------|--------|
+| router    | 可传入 react-router 的实例        | Object            |         | -      |
+| routes    | router 的路由栈信息               | Array             |         | -      |
+| params    | 路由的参数                        | Object            |         | -      |
+| separator | 分隔符自定义                      | String or Element |         | '/'    |

 ### Breadcrumb.Item

--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@ -17,6 +17,7 @@ ReactDOM.render(<div>
  <Button type="primary">主按钮</Button>
  <Button>次按钮</Button>
  <Button type="ghost">幽灵按钮</Button>
+  <Button type="dashed">虚线按钮</Button>
 </div>,
 document.getElementById('components-button-demo-basic'));
 ````
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@ -18,6 +18,9 @@ ReactDOM.render(<div>
  <br />
  <Button type="ghost">幽灵按钮</Button>
  <Button type="ghost" disabled>幽灵按钮(失效)</Button>
+  <br />
+  <Button type="dashed">虚线按钮</Button>
+  <Button type="dashed" disabled>虚线按钮(失效)</Button>
 </div>
 , document.getElementById('components-button-demo-disabled'));
 ````
--- a/components/calendar/locale/en_US.js
+++ b/components/calendar/locale/en_US.js
@ -1 +1 @@
-module.exports = require('../../datepicker/locale/en_US');
+module.exports = require('../../date-picker/locale/en_US');
--- a/components/calendar/locale/zh_CN.js
+++ b/components/calendar/locale/zh_CN.js
@ -1 +1 @@
-module.exports = require('../../datepicker/locale/zh_CN');
+module.exports = require('../../date-picker/locale/zh_CN');
--- a/components/checkbox/demo/disable.md
+++ b/components/checkbox/demo/disable.md
@ -1,4 +1,4 @@
- 不可用
+# 不可用

 - order: 1

--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -0,0 +1,15 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015-12-12" />
+, document.getElementById('components-date-picker-demo-basic'));
+````
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@ -0,0 +1,15 @@
+# 禁用
+
+- order: 5
+
+选择框的不可用状态。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015-06-06" disabled />
+, document.getElementById('components-date-picker-demo-disabled'));
+````
--- a/components/date-picker/demo/formatter.md
+++ b/components/date-picker/demo/formatter.md
@ -0,0 +1,15 @@
+# 日期格式
+
+- order: 1
+
+使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <DatePicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
+, document.getElementById('components-date-picker-demo-formatter'));
+````
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@ -7,8 +7,8 @@
 ---

 ````jsx
-import { Datepicker } from 'antd';
-import enUS from 'antd/lib/datepicker/locale/en_US';
+import { DatePicker } from 'antd';
+import enUS from 'antd/lib/date-picker/locale/en_US';
 import assign from 'object-assign';

 const App = React.createClass({
@ -22,10 +22,10 @@ const App = React.createClass({
    };
  },
  render() {
-    return <Datepicker locale={this.state.locale} />;
+    return <DatePicker locale={this.state.locale} />;
  }
 });

-ReactDOM.render(<App />, document.getElementById('components-datepicker-demo-locale'));
+ReactDOM.render(<App />, document.getElementById('components-date-picker-demo-locale'));
 ````

--- a/components/date-picker/demo/month-picker.md
+++ b/components/date-picker/demo/month-picker.md
@ -0,0 +1,15 @@
+# 月选择器
+
+- order: 9
+
+使用 MonthPicker 实现月选择器.
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+const MonthPicker = DatePicker.MonthPicker;
+ReactDOM.render(
+  <MonthPicker defaultValue="2015-12" />
+, document.getElementById('components-date-picker-demo-month-picker'));
+````
--- a/components/date-picker/demo/range.md
+++ b/components/date-picker/demo/range.md
@ -9,7 +9,7 @@
 ---

 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';

 const disabledDate = function(current, value) {
  // can not select days after today
@ -17,6 +17,6 @@ const disabledDate = function(current, value) {
 };

 ReactDOM.render(
-  <Datepicker disabledDate={disabledDate} />
-, document.getElementById('components-datepicker-demo-range'));
+  <DatePicker disabledDate={disabledDate} />
+, document.getElementById('components-date-picker-demo-range'));
 ````
--- a/components/date-picker/demo/select.md
+++ b/components/date-picker/demo/select.md
@ -7,18 +7,18 @@
 ---

 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';

 const Picker = React.createClass({
  handleChange: function(value) {
    console.log(new Date(value.getTime()));
  },
  render: function() {
-    return <Datepicker onChange={this.handleChange} />;
+    return <DatePicker onChange={this.handleChange} />;
  }
 });

 ReactDOM.render(
  <Picker />
-, document.getElementById('components-datepicker-demo-select'));
+, document.getElementById('components-date-picker-demo-select'));
 ````
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -0,0 +1,19 @@
+# 三种大小
+
+- order: 1
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { DatePicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <DatePicker size="large" />
+    <DatePicker />
+    <DatePicker size="small" />
+  </div>
+, document.getElementById('components-date-picker-demo-size'));
+````
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Datepicker } from 'antd';
+import { DatePicker } from 'antd';

 const DateRange = React.createClass({
  getInitialState() {
@ -36,11 +36,11 @@ const DateRange = React.createClass({
  },
  render() {
    return <div>
-      <Datepicker disabledDate={this.disabledStartDate}
+      <DatePicker disabledDate={this.disabledStartDate}
        value={this.state.startValue}
        placeholder="开始日期"
        onChange={this.onChange.bind(this, 'startValue')} />
-      <Datepicker disabledDate={this.disabledEndDate}
+      <DatePicker disabledDate={this.disabledEndDate}
        value={this.state.endValue}
        placeholder="结束日期"
        onChange={this.onChange.bind(this, 'endValue')} />
@ -50,5 +50,5 @@ const DateRange = React.createClass({

 ReactDOM.render(
  <DateRange />
-, document.getElementById('components-datepicker-demo-start-end'));
+, document.getElementById('components-date-picker-demo-start-end'));
 ````
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -0,0 +1,52 @@
+# 日期时间选择
+
+- order: 4
+
+和 [时间选择框](/components/timepicer) 配合使用。
+
+---
+
+````jsx
+import { DatePicker, TimePicker } from 'antd';
+
+const DateTimePicker = React.createClass({
+  handleChange(from, value) {
+    this.result = this.result || new Date();
+    if (!value) {
+      if (from === 'date') {
+        this.selectedDate = false;
+      } else {
+        this.selectedTime = false;
+      }
+      return;
+    }
+    if (from === 'date') {
+      this.result.setFullYear(value.getFullYear());
+      this.result.setMonth(value.getMonth());
+      this.result.setDate(value.getDate());
+      this.selectedDate = true;
+    } else {
+      this.result.setHours(value.getHours());
+      this.result.setMinutes(value.getMinutes());
+      this.result.setSeconds(value.getSeconds());
+      this.selectedTime = true;
+    }
+    if (this.selectedDate && this.selectedTime) {
+      this.props.onSelect(this.result);
+    }
+  },
+  render() {
+    return <div>
+      <DatePicker onChange={this.handleChange.bind(null, 'date')} />
+      <TimePicker onChange={this.handleChange.bind(null, 'time')} />
+    </div>;
+  }
+});
+
+function onSelect(value) {
+  console.log('选择了时间：', value);
+}
+
+ReactDOM.render(<DateTimePicker onSelect={onSelect} />
+, document.getElementById('components-date-picker-demo-time'));
+````
--- a/components/date-picker/index.jsx
+++ b/components/date-picker/index.jsx
@ -1,18 +1,18 @@
 import React from 'react';
 import Calendar from 'rc-calendar';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
-import Datepicker from 'rc-calendar/lib/Picker';
+import DatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import defaultLocale from './locale/zh_CN';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import DateTimeFormat from 'gregorian-calendar-format';
 import objectAssign from 'object-assign';

-function createPicker(TheCalendar) {
+function createPicker(TheCalendar, defaultFormat) {
  return React.createClass({
    getDefaultProps() {
      return {
-        format: 'yyyy-MM-dd',
+        format: defaultFormat || 'yyyy-MM-dd',
        transitionName: 'slide-up',
        popupStyle: {},
        onSelect: null, // 向前兼容
@ -75,7 +75,9 @@ function createPicker(TheCalendar) {
      });
    },
    handleChange(value) {
-      this.setState({value});
+      if (!('value' in this.props)) {
+        this.setState({ value });
+      }
      const timeValue = value ? new Date(value.getTime()) : null;
      // onSelect 为向前兼容.
      if (this.props.onSelect) {
@ -121,7 +123,7 @@ function createPicker(TheCalendar) {
      }

      return <span className={pickerClass}>
-        <Datepicker
+        <DatePicker
          transitionName={this.props.transitionName}
          disabled={this.props.disabled}
          calendar={calendar}
@ -147,14 +149,14 @@ function createPicker(TheCalendar) {
                );
            }
          }
-        </Datepicker>
+        </DatePicker>
      </span>;
    }
  });
 }

 const AntDatePicker = createPicker(Calendar);
-const AntMonthPicker = createPicker(MonthCalendar);
+const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM');

 const AntCalendar = React.createClass({
  getDefaultProps() {
--- a/components/date-picker/index.md
+++ b/components/date-picker/index.md
@ -1,4 +1,4 @@
-# Datepicker
+# DatePicker

 - category: Components
 - chinese: 日期选择框
@ -15,7 +15,7 @@
 ## API

 ```html
-<Datepicker defaultValue="2015-01-01" />
+<DatePicker defaultValue="2015-01-01" />
 ```

 | 参数         | 说明           | 类型     | 默认值       |
--- a/components/date-picker/locale/en_US.js
+++ b/components/date-picker/locale/en_US.js
--- a/components/date-picker/locale/zh_CN.js
+++ b/components/date-picker/locale/zh_CN.js
--- a/components/datepicker/demo/basic.md
+++ b/components/datepicker/demo/basic.md
@ -1,15 +0,0 @@
-# 基本
-
- order: 0
-
-最简单的用法。
-
---
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015-12-12" />
-, document.getElementById('components-datepicker-demo-basic'));
-````
--- a/components/datepicker/demo/disabled.md
+++ b/components/datepicker/demo/disabled.md
@ -1,15 +0,0 @@
-# 禁用
-
- order: 5
-
-选择框的不可用状态。
-
---
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015-06-06" disabled />
-, document.getElementById('components-datepicker-demo-disabled'));
-````
--- a/components/datepicker/demo/formatter.md
+++ b/components/datepicker/demo/formatter.md
@ -1,15 +0,0 @@
-# 日期格式
-
- order: 1
-
-使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
-
---
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <Datepicker defaultValue="2015/01/01" format="yyyy/MM/dd" />
-, document.getElementById('components-datepicker-demo-formatter'));
-````
--- a/components/datepicker/demo/size.md
+++ b/components/datepicker/demo/size.md
@ -1,19 +0,0 @@
-# 三种大小
-
- order: 1
-
-三种大小的输入框，大的用在表单中，中的为默认。
-
---
-
-````jsx
-import { Datepicker } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <Datepicker size="large" />
-    <Datepicker />
-    <Datepicker size="small" />
-  </div>
-, document.getElementById('components-datepicker-demo-size'));
-````
--- a/components/datepicker/demo/time.md
+++ b/components/datepicker/demo/time.md
@ -1,43 +0,0 @@
-# 日期时间选择
-
- order: 4
-
-和 [时间选择框](/components/timepicer) 配合使用。
-
---
-
-````jsx
-import { Datepicker, Timepicker } from 'antd';
-
-let result = new Date();
-let selectdDate, selectdTime;
-function handleChange(from, value) {
-  if (!value) {
-    if (from === 'date') {
-      selectdDate = false;
-    } else {
-      selectdTime = false;
-    }
-    return;
-  }
-  if (from === 'date') {
-    result.setFullYear(value.getFullYear());
-    result.setMonth(value.getMonth());
-    result.setDate(value.getDate());
-    selectdDate = true;
-  } else {
-    result.setHours(value.getHours());
-    result.setMinutes(value.getMinutes());
-    result.setSeconds(value.getSeconds());
-    selectdTime = true;
-  }
-  if (selectdDate && selectdTime) {
-    console.log('选择结果是：' + result);
-  }
-}
-
-ReactDOM.render(<div>
-  <Datepicker onChange={handleChange.bind(null, 'date')} />
-  <Timepicker onChange={handleChange.bind(null, 'time')} />
-</div>, document.getElementById('components-datepicker-demo-time'));
-````
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';

 const menu = <Menu>
  <Menu.Item>
@ -23,15 +23,9 @@ const menu = <Menu>

 ReactDOM.render(
  <Dropdown overlay={menu}>
-    <Button>
-      某按钮 <Icon type="down" />
-    </Button>
+    <a className="ant-dropdown-link" href="#">
+      触发链接 <Icon type="down" />
+    </a>
  </Dropdown>
 , document.getElementById('components-dropdown-demo-basic'));
 ````
-
-<style>
-.code-box-demo .ant-btn {
-  margin-right: 6px;
-}
-</style>
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@ -0,0 +1,30 @@
+# 带下拉框的按钮
+
+- order: 4
+
+左边是按钮，右边是额外的相关功能菜单。
+
+---
+
+````jsx
+import { Menu, Dropdown } from 'antd';
+const DropdownButton = Dropdown.Button;
+
+const menu = <Menu>
+  <Menu.Item>
+    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
+  </Menu.Item>
+</Menu>;
+
+ReactDOM.render(
+<DropdownButton overlay={menu} type="primary">
+  某功能按钮
+</DropdownButton>
+, document.getElementById('components-dropdown-demo-dropdown-button'));
+````
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 const onClick = function({key}) {
  console.log('点击了菜单' + key);
 };
@ -20,9 +20,9 @@ const menu = <Menu onClick={onClick}>

 ReactDOM.render(
  <Dropdown overlay={menu}>
-    <Button>
+    <a className="ant-dropdown-link" href="#">
      鼠标移入，点击菜单 <Icon type="down" />
-    </Button>
+    </a>
  </Dropdown>
 , document.getElementById('components-dropdown-demo-event'));
 ````
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';

 const menu = <Menu>
  <Menu.Item key="0">
@ -22,9 +22,9 @@ const menu = <Menu>

 ReactDOM.render(
  <Dropdown overlay={menu}>
-    <Button>
+    <a className="ant-dropdown-link" href="#">
      鼠标移入 <Icon type="down" />
-    </Button>
+    </a>
  </Dropdown>
 , document.getElementById('components-dropdown-demo-item'));
 ````
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@ -2,12 +2,12 @@

 - order: 2

-点击或鼠标移入触发。
+默认是移入触发菜单，可以点击触发。

 ---

 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';

 const menu = <Menu>
  <Menu.Item key="0">
@ -22,14 +22,9 @@ const menu = <Menu>

 ReactDOM.render(<div>
  <Dropdown overlay={menu} trigger={['click']}>
-    <Button type="primary">
+    <a className="ant-dropdown-link" href="#">
      点击触发 <Icon type="down" />
-    </Button>
-  </Dropdown>
-  <Dropdown overlay={menu}>
-    <Button>
-      鼠标移入 <Icon type="down" />
-    </Button>
+    </a>
  </Dropdown>
 </div>, document.getElementById('components-dropdown-demo-trigger'));
 ````
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.jsx
@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import Icon from '../icon';
+import Dropdown from './dropdown';
+const ButtonGroup = Button.Group;
+
+const align = {
+  points: ['tr', 'br'],
+  overlay: {
+    adjustX: 1,
+    adjustY: 1,
+  },
+  offset: [0, 3],
+  targetOffset: [0, 0],
+};
+
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      align: align,
+      type: 'default',
+    };
+  },
+  render() {
+    return <ButtonGroup className="ant-dropdown-button">
+      <Button type={this.props.type}>
+        {this.props.children}
+      </Button>
+      <Dropdown {...this.props}>
+        <Button type={this.props.type}>
+          <Icon type="down" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>;
+  }
+});
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.jsx
@ -0,0 +1,16 @@
+import React from 'react';
+import Dropdown from 'rc-dropdown';
+
+export default React.createClass({
+  getDefaultProps: function () {
+    return {
+      transitionName: 'slide-up',
+      prefixCls: 'ant-dropdown',
+    };
+  },
+  render: function () {
+    return (
+      <Dropdown {...this.props} />
+    );
+  }
+});
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@ -1,16 +1,5 @@
-import React from 'react';
-import Dropdown from 'rc-dropdown';
+import Dropdown from './dropdown';
+import DropdownButton from './dropdown-button';

-export default React.createClass({
-  getDefaultProps: function () {
-    return {
-      transitionName: 'slide-up',
-      prefixCls: 'ant-dropdown',
-    };
-  },
-  render: function () {
-    return (
-      <Dropdown {...this.props} />
-    );
-  }
-});
+Dropdown.Button = DropdownButton;
+export default Dropdown;
--- a/components/dropdown/index.md
+++ b/components/dropdown/index.md
@ -19,10 +19,18 @@
 | 成员        | 说明             | 类型               | 默认值       |
 |-------------|------------------|--------------------|--------------|
 | trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
-| overlay     | 菜单节点         | React.Element      | 无           |
-| onClick     | 点击菜单后的回调 | function({key,keyPath,item,domEvent}) {}     | 无           |
+| overlay     | 菜单节点         | [Menu](/components/menu) | 无     |


 菜单可由 `antd.Menu` 取得，可设置 `onSelect` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。

 > 注意： Menu.Item 必须设置唯一的 key 属性。
+
+### DropdownButton
+
+| 成员        | 说明             | 类型               | 默认值       |
+|-------------|------------------|--------------------|--------------|
+| type        | 按钮类型，和 [Button](/components/button) 一致 | String | 'default'        |
+| onClick     | 点击左侧按钮的回调，和 [Button](/components/button) 一致 | Function   | 无           |
+| trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
+| overlay     | 菜单节点         | [Menu](/components/menu) | 无     |
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@ -7,7 +7,7 @@
 ---

 ````jsx
-import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
+import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, message, Row, Col } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;

@ -92,17 +92,17 @@ const Demo = React.createClass({
        </FormItem>

        <FormItem
-          label="Datepicker 日期选择框："
+          label="DatePicker 日期选择框："
          labelCol={{span: 8}}
          required>
          <Col span="6">
-            <Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
+            <DatePicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
          </Col>
          <Col span="1">
            <p className="ant-form-split">-</p>
          </Col>
          <Col span="6">
-            <Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
+            <DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
          </Col>
        </FormItem>
        <Row>
--- a/components/form/demo/search-input.md
+++ b/components/form/demo/search-input.md
@ -0,0 +1,61 @@
+# 搜索框
+
+- order: 10
+
+带有搜索按钮。
+
+---
+
+
+````jsx
+import { Icon, Input, Button } from 'antd';
+import classNames from 'classnames';
+const InputGroup = Input.Group;
+
+const SearchInput = React.createClass({
+  getInitialState() {
+    return {
+      value: '',
+      focus: false
+    };
+  },
+  handleInputChange(e) {
+    this.setState({
+      value: e.target.value,
+    });
+  },
+  handleFocusBlur(e) {
+    this.setState({
+      focus: e.target === document.activeElement,
+    });
+  },
+  handleSearch() {
+    if (this.props.onSearch) {
+      this.props.onSearch();
+    }
+  },
+  render() {
+    const btnCls = classNames({
+      'ant-search-btn': true,
+      'ant-search-btn-noempty': !!this.state.value.trim(),
+    });
+    const searchCls = classNames({
+      'ant-search-input': true,
+      'ant-search-input-focus': this.state.focus,
+    });
+    return <InputGroup className={searchCls} style={this.props.style}>
+      <Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
+        onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
+      <div className="ant-input-group-wrap">
+        <Button className={btnCls} onClick={this.handleSearch}>
+          <Icon type="search" />
+        </Button>
+      </div>
+    </InputGroup>;
+  }
+});
+
+ReactDOM.render(
+  <SearchInput placeholder="input search text" style={{width: 200}} />
+, document.getElementById('components-form-demo-search-input'));
+````
--- a/components/form/demo/validate.md
+++ b/components/form/demo/validate.md
@ -13,7 +13,7 @@ validateStatus: ['success', 'warning', 'error', 'validating']。
 ---

 ````jsx
-import { Form, Input, Datepicker, Col } from 'antd';
+import { Form, Input, DatePicker, Col } from 'antd';
 const FormItem = Form.Item;

 ReactDOM.render(
@ -78,13 +78,13 @@ ReactDOM.render(
      labelCol={{span: 5}}
      validateStatus="error">
      <Col span="6">
-        <Datepicker />
+        <DatePicker />
      </Col>
      <Col span="1">
        <p className="ant-form-split">-</p>
      </Col>
      <Col span="6">
-        <Datepicker />
+        <DatePicker />
      </Col>
      <Col span="19" offset="5">
        <p className="ant-form-explain">请输入正确选项</p>
--- a/components/icon/index.jsx
+++ b/components/icon/index.jsx
@ -1,13 +1,7 @@
 import React from 'react';

-class Icon extends React.Component {
-
-  render() {
-    let {type, className = '', ...other} = this.props;
-    className += ` anticon anticon-${type}`;
-    return <i className={className} {...other}></i>;
-  }
-
-}
-
-export default Icon;
+export default props => {
+  let { type, className = '', ...other } = props;
+  className += ` anticon anticon-${type}`;
+  return <i className={className} {...other} />;
+};
--- a/components/icon/index.md
+++ b/components/icon/index.md
@ -10,34 +10,30 @@

 ## 图标的命名规范

-我们为每个图标赋予了语义化的命名。只需在 <Icon> 标签内，制定对应的 type 属性即可。
-
-不同 type 命名规则如下:
+我们为每个图标赋予了语义化的命名，命名规则如下:

 - 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；

 - 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。

-## 实现原理
-
-所有的 Icon 标签最终会渲染为
-
-```html
-<i class="anticon anticon-${type}"></i>
-```
-
 ## 如何使用

-使用 <Icon> 标签申明组件，设置对应的 type 设置需要渲染的图标，示例代码如下:
+使用 `<Icon />` 标签声明组件，指定图标对应的 type 属性，示例代码如下:

 ```html
 <Icon type="link" />
 ```

-> 点击图标复制代码。
+最终会渲染为：
+
+```html
+<i class="anticon anticon-${type}"></i>
+```

 ## 图标列表

+> 点击图标复制代码。
+
 ### 一. 方向性图标

 <div id="iconset-direction"></div>
@ -157,7 +153,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'

 const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];

-const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode'];
+const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];


 ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import assign from 'object-assign';

 function prefixClsFn(prefixCls, ...args) {
  return args.map((s)=> {
@ -14,26 +15,29 @@ function ieGT9() {
  return documentMode > 9;
 }

+function fixControlledValue(value) {
+  if (typeof value === 'undefined' || value === null) {
+    return '';
+  }
+  return value;
+}
+
 class Group extends React.Component {
  render() {
+    const className = 'ant-input-group ' + (this.props.className || '');
    return (
-      <div className={this.props.className}>
+      <span className={className}
+            style={this.props.style}>
        {this.props.children}
-      </div>
+      </span>
    );
  }
 }

 Group.propTypes = {
-  className: React.PropTypes.string,
  children: React.PropTypes.any,
 };

-Group.defaultProps = {
-  className: 'ant-input-group',
-};
-
-
 class Input extends React.Component {
  renderLabledInput(children) {
    const props = this.props;
@ -52,16 +56,16 @@ class Input extends React.Component {
    ) : null;

    return (
-      <div className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
+      <span className={(addonBefore || addonAfter) ? wrapperClassName : ''}>
        {addonBefore}
        {children}
        {addonAfter}
-      </div>
+      </span>
    );
  }

  renderInput() {
-    const props = this.props;
+    const props = assign({}, this.props);
    const prefixCls = props.prefixCls;
    let inputClassName = prefixClsFn(prefixCls, 'input');
    if (!props.type) {
@ -77,9 +81,12 @@ class Input extends React.Component {
    if(placeholder && ieGT9()){
      placeholder = null;
    }
+    if ('value' in props) {
+      props.value = fixControlledValue(props.value);
+    }
    switch (props.type) {
    case 'textarea':
-      return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
+      return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
    default:
      inputClassName = props.className ? props.className : inputClassName;
      return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@ -9,6 +9,7 @@
 ````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;

 const App = React.createClass({
  getInitialState() {
@ -31,14 +32,18 @@ const App = React.createClass({
        <Menu.Item key="mail">
          <Icon type="mail" />导航一
        </Menu.Item>
-        <Menu.Item key="app">
+        <Menu.Item key="app" disabled>
          <Icon type="appstore" />导航二
        </Menu.Item>
        <SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
-          <Menu.Item key="setting:1">选项1</Menu.Item>
-          <Menu.Item key="setting:2">选项2</Menu.Item>
-          <Menu.Item key="setting:3">选项3</Menu.Item>
-          <Menu.Item key="setting:4">选项4</Menu.Item>
+          <MenuItemGroup title="分组1">
+            <Menu.Item key="setting:1">选项1</Menu.Item>
+            <Menu.Item key="setting:2">选项2</Menu.Item>
+          </MenuItemGroup>
+          <MenuItemGroup title="分组2">
+            <Menu.Item key="setting:3">选项3</Menu.Item>
+            <Menu.Item key="setting:4">选项4</Menu.Item>
+          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="http://www.alipay.com/" target="_blank">导航四 - 链接</a>
--- a/components/menu/demo/sider.md
+++ b/components/menu/demo/sider.md
@ -9,6 +9,7 @@
 ````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;

 const Sider = React.createClass({
  getInitialState() {
@ -29,10 +30,14 @@ const Sider = React.createClass({
                 selectedKeys={[this.state.current]}
                 mode="inline">
      <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
-        <Menu.Item key="1">选项1</Menu.Item>
-        <Menu.Item key="2">选项2</Menu.Item>
-        <Menu.Item key="3">选项3</Menu.Item>
-        <Menu.Item key="4">选项4</Menu.Item>
+        <MenuItemGroup title="分组1">
+          <Menu.Item key="1">选项1</Menu.Item>
+          <Menu.Item key="2">选项2</Menu.Item>
+        </MenuItemGroup>
+        <MenuItemGroup title="分组2">
+          <Menu.Item key="3">选项3</Menu.Item>
+          <Menu.Item key="4">选项4</Menu.Item>
+        </MenuItemGroup>
      </SubMenu>
      <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
        <Menu.Item key="5">选项5</Menu.Item>
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@ -9,6 +9,7 @@
 ````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;

 function handleClick(e) {
  console.log('click', e);
@ -16,10 +17,14 @@ function handleClick(e) {

 ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
  <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
-    <Menu.Item key="1">选项1</Menu.Item>
-    <Menu.Item key="2">选项2</Menu.Item>
-    <Menu.Item key="3">选项3</Menu.Item>
-    <Menu.Item key="4">选项4</Menu.Item>
+    <MenuItemGroup title="分组1">
+      <Menu.Item key="1">选项1</Menu.Item>
+      <Menu.Item key="2">选项2</Menu.Item>
+    </MenuItemGroup>
+    <MenuItemGroup title="分组2">
+      <Menu.Item key="3">选项3</Menu.Item>
+      <Menu.Item key="4">选项4</Menu.Item>
+    </MenuItemGroup>
  </SubMenu>
  <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
    <Menu.Item key="5">选项5</Menu.Item>
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@ -72,5 +72,6 @@ const AntMenu = React.createClass({
 AntMenu.Divider = Menu.Divider;
 AntMenu.Item = Menu.Item;
 AntMenu.SubMenu = Menu.SubMenu;
+AntMenu.ItemGroup = Menu.ItemGroup;

 export default AntMenu;
--- a/components/menu/index.md
+++ b/components/menu/index.md
@ -53,4 +53,11 @@
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | title    | 子菜单项值 | String or React.Element   |    |
-| children   | (MenuItem or SubMenu)[] |  子菜单的菜单项 | | |
+| children | 子菜单的菜单项 | (MenuItem or SubMenu)[] |  | |
+
+### Menu.ItemGroup props
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| title    | 分组标题       | String or React.Element |    |
+| children | 分组的菜单项    | MenuItem[] |  | |
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@ -1,6 +1,6 @@
 # 修改延时

- order: 4
+- order: 2

 自定义时长 `10s`，默认时长为 `1.5s`。

@ -13,7 +13,7 @@ const success = function() {
  message.success('这是一条成功的提示,并将于10秒后消失', 10);
 };

-ReactDOM.render(<Button type="primary" onClick={success}>自定义时长提示</Button>
+ReactDOM.render(<Button onClick={success}>自定义时长提示</Button>
 , document.getElementById('components-message-demo-duration'));
 ````

--- a/components/message/demo/error.md
+++ b/components/message/demo/error.md
@ -1,18 +0,0 @@
-# 错误或失败
-
- order: 1
-
-操作失败反馈。
-
---
-
-````jsx
-import { message, Button } from 'antd';
-
-const error = function() {
-  message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示');
-};
-
-ReactDOM.render(<Button type="primary" onClick={error}>显示失败提示</Button>
-, document.getElementById('components-message-demo-error'));
-````
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@ -1,6 +1,6 @@
 # 普通提示

- order: 2
+- order: 0

 信息提醒反馈。

--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@ -1,6 +1,6 @@
 # 加载中

- order: 5
+- order: 3

 进行全局 loading，异步自行移除。

--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@ -0,0 +1,35 @@
+# 其他提示类型
+
+- order: 1
+
+包括成功、失败、警告。
+
+---
+
+````jsx
+import { message, Button } from 'antd';
+
+const success = function() {
+  message.success('这是一条成功提示');
+};
+
+const error = function() {
+  message.error('这是一条报错提示');
+};
+
+const warn = function() {
+  message.warn('这是一条警告提示');
+};
+
+ReactDOM.render(<div>
+  <Button onClick={success}>显示成功提示</Button>
+  <Button onClick={error}>显示报错提示</Button>
+  <Button onClick={warn}>显示警告提示</Button>
+</div>, document.getElementById('components-message-demo-other'));
+````
+
+<style>
+#components-message-demo-other .ant-btn {
+  margin-right: 8px;
+}
+</style>
--- a/components/message/demo/success.md
+++ b/components/message/demo/success.md
@ -1,19 +0,0 @@
-# 成功
-
- order: 0
-
-操作成功反馈。
-
---
-
-````jsx
-import { message, Button } from 'antd';
-
-const success = function() {
-  message.success('这是一条成功的提示');
-};
-
-ReactDOM.render(<Button type="primary" onClick={success}>显示成功提示</Button>
-, document.getElementById('components-message-demo-success'));
-````
-
--- a/components/message/index.jsx
+++ b/components/message/index.jsx
@ -23,6 +23,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
    'info': 'ant-message-info',
    'success': 'ant-message-success',
    'error': 'ant-message-error',
+    'warn': 'ant-message-warn',
    'loading': 'ant-message-loading'
  })[type];

@ -30,6 +31,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
    'info': 'info-circle',
    'success': 'check-circle',
    'error': 'exclamation-circle',
+    'warn': 'exclamation-circle',
    'loading': 'loading'
  })[type];

@ -62,6 +64,9 @@ export default {
  error(content, duration, onClose) {
    return notice(content, duration, 'error', onClose);
  },
+  warn(content, duration, onClose) {
+    return notice(content, duration, 'warn', onClose);
+  },
  loading(content, duration, onClose) {
    return notice(content, duration, 'loading', onClose);
  },
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@ -11,6 +11,7 @@ export default function (props) {
  let d;
  props = props || {};
  props.iconClassName = props.iconClassName || 'question-circle';
+
  let iconClassType = props.iconClassName;

  let width = props.width || 416;
@ -20,6 +21,9 @@ export default function (props) {
    props.okCancel = true;
  }

+  props.okText = props.okText || (props.okCancel ? '确定' : '知道了');
+  props.cancelText = props.cancelText || '取消';
+
  function close() {
    d.setState({
      visible: false
@ -72,19 +76,22 @@ export default function (props) {
    <span className="ant-confirm-title">{props.title}</span>
    <div className="ant-confirm-content">{props.content}</div>
  </div>;
-  let footer = <div className="ant-confirm-btns">
-    <Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
-    <Button type="primary" size="large" onClick={onOk}>确 定</Button>
-  </div>;

+  let footer = null;
  if (props.okCancel) {
    footer = <div className="ant-confirm-btns">
-      <Button type="ghost" size="large" onClick={onCancel}>取 消</Button>
-      <Button type="primary" size="large" onClick={onOk}>确 定</Button>
+      <Button type="ghost" size="large" onClick={onCancel}>
+        {props.cancelText}
+      </Button>
+      <Button type="primary" size="large" onClick={onOk}>
+        {props.okText}
+      </Button>
    </div>;
  } else {
    footer = <div className="ant-confirm-btns">
-      <Button type="primary" size="large" onClick={onOk}>知道了</Button>
+      <Button type="primary" size="large" onClick={onOk}>
+        {props.okText}
+      </Button>
    </div>;
  }

--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@ -0,0 +1,60 @@
+# 国际化
+
+- order: 6
+
+设置 `okText` 与 `cancelText` 以自定义按钮文字。
+
+---
+
+````jsx
+import { Modal, Button } from 'antd';
+
+const LocalizedModal = React.createClass({
+  getInitialState() {
+    return { visible: false };
+  },
+  showModal() {
+    this.setState({
+      visible: true
+    });
+  },
+  handleOk() {
+    this.setState({
+      visible: false
+    });
+  },
+  handleCancel() {
+    this.setState({
+      visible: false
+    });
+  },
+  render() {
+    return <div>
+      <Button type="primary" onClick={this.showModal}>Show Modal</Button>
+      <Modal title="Modal" visible={this.state.visible}
+             onOk={this.handleOk} onCancel={this.handleCancel}
+             okText="OK" cancelText="Cancel">
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+        <p>Bla bla ...</p>
+      </Modal>
+    </div>;
+  }
+});
+
+function confirm() {
+  Modal.confirm({
+    title: 'Confirm',
+    content: 'Bla bla ...',
+    okText: 'OK',
+    cancelText: 'Cancel'
+  });
+}
+
+ReactDOM.render(<div>
+  <LocalizedModal />
+  <br />
+  <Button onClick={confirm}>confirm</Button>
+</div>, document.getElementById('components-modal-demo-locale'));
+````
+
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@ -15,6 +15,8 @@ let AntModal = React.createClass({
      prefixCls: 'ant-modal',
      onOk: noop,
      onCancel: noop,
+      okText: '确定',
+      cancelText: '取消',
      width: 520,
      transitionName: 'zoom',
      maskAnimation: 'fade',
@ -56,14 +58,14 @@ let AntModal = React.createClass({
        type="ghost"
        size="large"
        onClick={this.handleCancel}>
-        取消
+        {props.cancelText}
      </Button>,
      <Button key="confirm"
        type="primary"
        size="large"
        loading={props.confirmLoading}
        onClick={this.handleOk}>
-        确定
+        {props.okText}
      </Button>
    ];
    let footer = props.footer || defaultFooter;
--- a/components/modal/index.md
+++ b/components/modal/index.md
@ -27,6 +27,8 @@
 | onCancel   | 点击遮罩层或右上角叉或取消按钮的回调  | function  | 无           |
 | width      | 宽度           | String or Number | 520           |
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |
+| okText     | 确认按钮文字    | String           | 确定       |
+| cancelText | 取消按钮文字    | String           | 取消       |


 ### Modal.xxx()
@ -47,6 +49,8 @@
 | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
 | width      | 宽度           | String or Number | 416           |
 | iconClassName | 图标 Icon 类型 | String | question-circle |
+| okText     | 确认按钮文字    | String           | 确定       |
+| cancelText | 取消按钮文字    | String           | 取消       |

 <style>
 .code-box-demo .ant-btn {
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@ -59,6 +59,7 @@ function notice(args) {
      duration: duration,
      closable: true,
      onClose: args.onClose,
+      key: args.key,
      style: {}
    });
  } else {
@ -73,6 +74,7 @@ function notice(args) {
        duration: duration,
        closable: true,
        onClose: args.onClose,
+        key: args.key,
        style: {}
      });
    } else {
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={50} />,
+  <Pagination defaultCurrent={1} total={50} />,
 document.getElementById('components-pagination-demo-basic'));
 ````
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@ -9,15 +9,11 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
 function onShowSizeChange(current, pageSize) {
  console.log(current, pageSize);
 }

 ReactDOM.render(
-  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
+  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />,
 document.getElementById('components-pagination-demo-changer'));
 ````
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@ -0,0 +1,33 @@
+# 受控
+
+- order: 8
+
+受控制的页码。
+
+---
+
+````jsx
+import { Pagination } from 'antd';
+
+let Container = React.createClass({
+  getInitialState() {
+    return {
+      current: 3
+    };
+  },
+  onChange(page) {
+    console.log(page);
+    this.setState({
+      current: page
+    });
+  },
+  render() {
+    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
+  }
+});
+
+ReactDOM.render(
+<Container />,
+document.getElementById('components-pagination-demo-controlled'));
+````
+
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination showQuickJumper onChange={onChange} total={500} />,
+  <Pagination showQuickJumper defaultCurrent={2} total={500} />,
 document.getElementById('components-pagination-demo-jump'));
 ````
--- a/components/pagination/demo/locale.md
+++ b/components/pagination/demo/locale.md
@ -1,6 +1,6 @@
 # 国际化

- order: 6
+- order: 7

 通过 `locale` 配置时区、语言等, 默认支持 en_US, zh_CN

@ -10,11 +10,7 @@
 import { Pagination } from 'antd';
 import enUS from 'antd/lib/pagination/locale/en_US';

-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={50} locale={enUS} />,
+  <Pagination defaultCurrent={1} total={50} locale={enUS} />,
 document.getElementById('components-pagination-demo-locale'));
 ````
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@ -9,11 +9,9 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
-ReactDOM.render(
-  <Pagination size="small" onChange={onChange} total={50} />,
- document.getElementById('components-pagination-demo-mini'));
+ReactDOM.render(<div>
+  <Pagination size="small" total={50} />
+  <br />
+  <Pagination size="small" total={50} showSizeChanger showQuickJumper />
+</div>, document.getElementById('components-pagination-demo-mini'));
 ````
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination onChange={onChange} total={500} />,
+  <Pagination defaultCurrent={1} total={500} />,
 document.getElementById('components-pagination-demo-more'));
 ````
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@ -9,11 +9,7 @@
 ````jsx
 import { Pagination } from 'antd';

-function onChange(page) {
-  console.log(page);
-}
-
 ReactDOM.render(
-  <Pagination simple onChange={onChange} total={50} />,
+  <Pagination simple defaultCurrent={2} total={50} />,
 document.getElementById('components-pagination-demo-simple'));
 ````
--- a/components/pagination/index.jsx
+++ b/components/pagination/index.jsx
@ -1,25 +1,37 @@
 import React from 'react';
 import Pagination from 'rc-pagination';
-import Select from 'rc-select';
+import Select from '../select';
 import zhCN from './locale/zh_CN';

-const prefixCls = 'ant-pagination';
+class MiniSelect extends React.Component {
+  render() {
+    return <Select size="small" {...this.props} />;
+  }
+}
+
+MiniSelect.Option = Select.Option;

 class AntPagination extends React.Component {
  render() {
    let className = this.props.className;
+    let selectComponentClass = Select;
+
    if (this.props.size === 'small') {
      className += ' mini';
+      selectComponentClass = MiniSelect;
    }
-    return <Pagination selectComponentClass={Select}
+
+    return <Pagination selectComponentClass={selectComponentClass}
                       selectPrefixCls="ant-select"
-                       prefixCls={prefixCls}
-      {...this.props} className={className}/>;
+                       {...this.props}
+                       className={className} />;
  }
 }

 AntPagination.defaultProps = {
  locale: zhCN,
+  className: '',
+  prefixCls: 'ant-pagination',
 };

 export default AntPagination;
--- a/components/pagination/index.md
+++ b/components/pagination/index.md
@ -21,7 +21,8 @@

 | 参数             | 说明                               | 类型     | 默认值         |
 |------------------|------------------------------------|----------|----------------|
-| current          | 当前页数                           | Number   | 1              |
+| current          | 当前页数                           | Number   | 无             |
+| defaultCurrent   | 默认的当前页数                     | Number   | 1              |
 | total            | 数据总数                           | Number   | 0              |
 | pageSize         | 每页条数                           | Number   | 10             |
 | onChange         | 页码改变的回调，参数是改变后的页码 | Function | noop           |
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@ -0,0 +1,58 @@
+# 条件触发
+
+- order: 3
+
+可以判断是否需要弹出。
+
+---
+
+````jsx
+import { Popconfirm, Switch, message } from 'antd';
+
+let App = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      condition: true,   // 是否满足条件，不满足则弹出确认框
+    };
+  },
+  changeCondition(value) {
+    this.setState({ condition: value });
+  },
+  confirm() {
+    this.setState({ visible: false });
+    message.success('进行下一步操作. next step.');
+  },
+  cancel() {
+    this.setState({ visible: false });
+    message.error('点击了取消');
+  },
+  handleVisibleChange(visible) {
+    if (!visible) {
+      this.setState({ visible });
+      return;
+    }
+    // 打开前进行判断
+    console.log(this.state.condition);
+    if (this.state.condition) {
+      this.confirm();  // 直接执行下一步
+    } else {
+      this.setState({ visible });  // 进行确认
+    }
+  },
+  render() {
+    return <div>
+      <Popconfirm title="确定要删除这个任务吗？"
+        visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
+        onConfirm={this.confirm} onCancel={this.cancel}>
+        <a href="#">删除某任务</a>
+      </Popconfirm>
+      <br />
+      <br />
+      点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, document.getElementById('components-popconfirm-demo-dynamic-trigger'));
+````
--- a/components/popconfirm/demo/locale.md
+++ b/components/popconfirm/demo/locale.md
@ -0,0 +1,17 @@
+# 国际化
+
+- order: 2
+
+设置 `okText` `cancelText` 以自定义按钮文字。
+
+---
+
+````jsx
+import { Popconfirm } from 'antd';
+
+ReactDOM.render(
+  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
+    <a href="#">Delete</a>
+  </Popconfirm>
+, document.getElementById('components-popconfirm-demo-locale'));
+````
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@ -38,7 +38,7 @@ ReactDOM.render(<div>
      <Button>左下</Button>
    </Popconfirm>
  </div>
-  <div style={{width: 60, marginLeft: 270}}>
+  <div style={{width: 60, marginLeft: 252}}>
    <Popconfirm placement="rightTop" title={text} onConfirm={confirm}>
      <Button>右上</Button>
    </Popconfirm>
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@ -2,7 +2,23 @@ import React from 'react';
 import Tooltip from 'rc-tooltip';
 import Icon from '../icon';
 import Button from '../button';
+
 const prefixCls = 'ant-popover';
+const noop = function() {};
+const transitionNames = {
+  top: 'zoom-down',
+  bottom: 'zoom-up',
+  left: 'zoom-right',
+  right: 'zoom-left',
+  topLeft: 'zoom-down',
+  bottomLeft: 'zoom-up',
+  leftTop: 'zoom-right',
+  rightTop: 'zoom-left',
+  topRight: 'zoom-down',
+  bottomRight: 'zoom-up',
+  leftBottom: 'zoom-right',
+  rightBottom: 'zoom-left',
+};

 export default React.createClass({
  getInitialState() {
@ -16,67 +32,61 @@ export default React.createClass({
      placement: 'top',
      trigger: 'click',
      overlayStyle: {},
-      onConfirm: function () {
-      },
-      onCancel: function () {
-      }
+      onConfirm: noop,
+      onCancel: noop,
+      okText: '确定',
+      cancelText: '取消',
+      visible: false,
+      onVisibleChange() {},
    };
  },
+  componentWillReceiveProps(nextProps) {
+    if ('visible' in nextProps) {
+      this.setState({ visible: nextProps.visible });
+    }
+  },
  confirm() {
+    this.setVisible(false);
    this.props.onConfirm.call(this);
-    this.setState({
-      visible: false
-    });
  },
  cancel() {
+    this.setVisible(false);
    this.props.onCancel.call(this);
-    this.setState({
-      visible: false
-    });
  },
-  onVisibleChange(v) {
-    this.setState({
-      visible: v
-    });
+  onVisibleChange(visible) {
+    this.setVisible(visible);
+    this.props.onVisibleChange(visible);
+  },
+  setVisible(visible) {
+    if (!('visible' in this.props)) {
+      this.setState({ visible });
+    }
  },
  render() {
+    const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
    const overlay = <div>
      <div className={prefixCls + '-content'}>
        <p className={prefixCls + '-message'}>
          <Icon type="exclamation-circle" />
-          {this.props.title}
+          {title}
        </p>
-
        <div className={prefixCls + '-buttons'}>
-          <Button onClick={this.cancel} type="ghost" size="small">取消</Button>
-          <Button onClick={this.confirm} type="primary" size="small">确定</Button>
+          <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
+          <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
        </div>
      </div>
    </div>;

-    const transitionName = ({
-      top: 'zoom-down',
-      bottom: 'zoom-up',
-      left: 'zoom-right',
-      right: 'zoom-left',
-      topLeft: 'zoom-down',
-      bottomLeft: 'zoom-up',
-      leftTop: 'zoom-right',
-      rightTop: 'zoom-left',
-      topRight: 'zoom-down',
-      bottomRight: 'zoom-up',
-      leftBottom: 'zoom-right',
-      rightBottom: 'zoom-left',
-    })[this.props.placement];
+    const transitionName = transitionNames[placement];

    return (
-      <Tooltip placement={this.props.placement}
-               overlayStyle={this.props.overlayStyle}
+      <Tooltip placement={placement}
+               overlayStyle={overlayStyle}
               prefixCls={prefixCls}
               onVisibleChange={this.onVisibleChange}
               transitionName={transitionName}
               visible={this.state.visible}
-               trigger={this.props.trigger}
+               trigger={trigger}
               overlay={overlay}>
        {this.props.children}
      </Tooltip>
--- a/components/popconfirm/index.md
+++ b/components/popconfirm/index.md
@ -23,3 +23,5 @@
 | title     | 确认框的描述                             | string        | 无     |
 | onConfirm | 点击确认的回调                           | function      | 无     |
 | onCancel  | 卡片内容                                 | function      | 无     |
+| okText    | 确认按钮文字                              | String        | 确定   |
+| cancelText| 取消按钮文字                              | String        | 取消   |
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@ -19,7 +19,7 @@ ReactDOM.render(<div>
  <div>
    <RadioGroup onChange={onChange} defaultValue="a">
      <RadioButton value="a">杭州</RadioButton>
-      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="b" disabled>上海</RadioButton>
      <RadioButton value="c">北京</RadioButton>
      <RadioButton value="d">成都</RadioButton>
    </RadioGroup>
--- a/components/radio/group.jsx
+++ b/components/radio/group.jsx
@ -42,7 +42,7 @@ export default React.createClass({
          {...radio.props}
          onChange={this.onRadioChange}
          checked={this.state.value === radio.props.value}
-          disabled={this.props.disabled}
+          disabled={radio.props.disabled || this.props.disabled}
        />;
      }
      return radio;
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@ -14,12 +14,15 @@ function handleChange(value) {
  console.log('selected ' + value);
 }

-ReactDOM.render(
+ReactDOM.render(<div>
  <Select defaultValue="lucy" style={{width:120}} onChange={handleChange}>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
-, document.getElementById('components-select-demo-basic'));
+  <Select defaultValue="lucy" style={{width:120}} disabled>
+    <Option value="lucy">Lucy</Option>
+  </Select>
+</div>, document.getElementById('components-select-demo-basic'));
 ````
--- a/components/select/index.jsx
+++ b/components/select/index.jsx
@ -1,36 +1,37 @@
 import React from 'react';
 import Select from 'rc-select';
+import classNames from 'classnames';

-let AntSelect = React.createClass({
+const AntSelect = React.createClass({
  getDefaultProps() {
    return {
      prefixCls: 'ant-select',
      transitionName: 'slide-up',
      optionLabelProp: 'children',
+      choiceTransitionName: 'zoom',
      showSearch: false,
      size: 'default'
    };
  },
  render() {
-    const {size, className, combobox, notFoundContent} = this.props;
+    let {
+      size, className, combobox, notFoundContent
+    } = this.props;

-    let sizeClass = null;
-    if (size === 'large') {
-      sizeClass = 'ant-select-lg';
-    } else if (size === 'small') {
-      sizeClass = 'ant-select-sm';
+    const cls = classNames({
+      'ant-select-lg': size === 'large',
+      'ant-select-sm': size === 'small',
+      [className]: !!className,
+    });
+
+    if (combobox) {
+      notFoundContent = null;
    }

-    const classNames = [];
-
-    if (className) {
-      classNames.push(className);
-    }
-    if (sizeClass) {
-      classNames.push(sizeClass);
-    }
    return (
-      <Select {...this.props} className={classNames.join(' ')} notFoundContent={combobox ? null : notFoundContent} />
+      <Select {...this.props}
+        className={cls}
+        notFoundContent={notFoundContent} />
    );
  }
 });
--- a/components/select/index.md
+++ b/components/select/index.md
@ -26,31 +26,34 @@
 |----------|----------------|----------|--------------|
 | value    | 指定当前选中的条目 | string/Array<String>   |  无  |
 | defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
-| multiple   | 支持多选 |   | false |
-| filterOption | 是否根据输入项进行筛选 |  | true     |
-| tags | 可以把随意输入的条目作为tag，输入项不需要与下拉选项匹配 | |false |
-| onSelect | 被选中时调用，参数为选中的option value值 | function(value, option) | 无   |
-| onDeselect | 取消选中时调用，参数为选中的option value值，仅在multiple或tags模式下生效 |  function(value, option) | 无   |
-| onChange | 选中option，或input的value变化(combobox模式下)时，调用此函数 | function(value, label) | 无 |
-| allowClear | 显示清除按钮 | | false |
+| multiple   | 支持多选 | boolean | false |
+| filterOption | 是否根据输入项进行筛选 | boolean | true     |
+| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
+| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
+| onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 |  function(value, option) | 无   |
+| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
+| allowClear | 显示清除按钮 | boolean | false |
 | onSearch | 文本框值变化时回调 | function(value: String) |  |
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | false |
 | optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
-| combobox | 输入框自动提示模式 | | false |
+| combobox | 输入框自动提示模式 | boolean | false |
 | size    | 选择框大小，可选 `large` `small`  | String      |      default      |
+| showSearch | 在下拉中显示搜索框 | boolean | false |
+| disabled | 是否禁用 | boolean | false |

 ### Option props

 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
 | disabled    | 是否禁用 | Boolean   |  false  |
-| key   | 如果react需要你设置此项，此项值与value的值相同，然后可以省略value设置 |  String |  |
+| key   | 如果 react 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 |  String |  |
 | value   | 默认根据此属性值进行筛选 | String | - |

 ### OptGroup props

-| 参数     | 说明           | 类型     | 默认值       |
-|----------|----------------|----------|--------------|
-| label    | 组名 | String/React.Element   |  无  |
-| key   |  |  String | - |
+| 参数     | 说明           | 类型     | 默认值          |
+|----------|----------------|----------|-----------------|
+| label    | 组名           | String/React.Element | 无  |
+| key      |                |  String  | -               |
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@ -0,0 +1,19 @@
+# 两种大小
+
+- order: 3
+
+`size="small"` 表示小号开关。
+
+---
+
+````jsx
+import { Switch } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Switch />
+    &nbsp;
+    <Switch size="small" />
+  </div>
+, document.getElementById('components-switch-demo-size'));
+````
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@ -1,13 +1,20 @@
 import Switch from 'rc-switch';
 import React from 'react';
+import classNames from 'classnames';

 export default React.createClass({
  getDefaultProps() {
    return {
-      prefixCls: 'ant-switch'
+      prefixCls: 'ant-switch',
+      size: 'default',
    };
  },
  render() {
-    return <Switch {...this.props}/>;
+    const { prefixCls, size, className } = this.props;
+    const cls = classNames({
+      [className]: !!className,
+      [prefixCls + '-' + size]: true,
+    });
+    return <Switch className={cls} {...this.props} />;
  }
 });
--- a/components/switch/index.md
+++ b/components/switch/index.md
@ -19,8 +19,9 @@

 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
-|  checked | 指定当前是否选中 | boolean  |   | false    |
-|  defaultChecked | 初始是否选中 | boolean |  | false |
-|  onChange | 变化时回调函数 | Function(checked:boolean) |  |  |
-|  checkedChildren | 选中时的内容 | React Node |  |  |
-|  unCheckedChildren | 非选中时的内容 | React Node |  |  |
+| checked | 指定当前是否选中 | boolean  |   | false    |
+| defaultChecked | 初始是否选中 | boolean |  | false |
+| onChange | 变化时回调函数 | Function(checked:boolean) |  |  |
+| checkedChildren | 选中时的内容 | React Node |  |  |
+| unCheckedChildren | 非选中时的内容 | React Node |  |  |
+| size | 开关大小 | string | 'default' or 'small' | 'default' |
--- a/Show More
+++ b/Show More