Merge branch 'master' into feature-2.10

CHANGELOG.en-US.md

@@ -478,6 +478,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
   * RangePicker can set presetted ranges. [demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
   * Fix "Now" button doesn't work while `DatePicker[showTime]` is set. [#3748](https://github.com/ant-design/ant-design/issues/3748)
   * Fix `RangePicker[format]` should work. [#3808](https://github.com/ant-design/ant-design/issues/3808)
+  * Fix issue that RangePicker `placeholder=['xx', 'xx']` not working.
 * Add and update some icons. [#3977](https://github.com/ant-design/ant-design/pull/3977)
 * New component `Input.Search`. [demo](https://ant.design/components/input/#components-input-demo-search-input)
 * Mention onSelect event will get complete record. [#3867](https://github.com/ant-design/ant-design/issues/3867)

CHANGELOG.zh-CN.md

@@ -478,6 +478,7 @@ timeline: true
   * RangePicker 现在可以自定义快捷选择。[demo](https://ant.design/components/date-picker/#components-date-picker-demo-presetted-ranges)
   * 修复 DatePicker 设置 `showTime` 后 “此刻” 按钮失效的问题。[#3748](https://github.com/ant-design/ant-design/issues/3748)
   * 修复 `RangePicker[format]` 失效的问题。[#3808](https://github.com/ant-design/ant-design/issues/3808)
+  * 修复 RangePicker `placeholder=['xx', 'xx']` 失效的问题。
 * 新增并优化部分 Icon。[#3977](https://github.com/ant-design/ant-design/pull/3977)
 * 新增 Input.Search 控件。[demo](https://ant.design/components/input/#components-input-demo-search-input)
 * Mention onSelect 事件现在可以获取完整的数据。[#3867](https://github.com/ant-design/ant-design/issues/3867)

README-zh_CN.md

@@ -13,7 +13,8 @@
 [![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)
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
 
 一套企业级的 UI 设计语言和 React 实现。
 

README.md

@@ -13,7 +13,8 @@
 [![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)
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](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.
 

components/affix/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import shallowequal from 'shallowequal';
@@ -60,9 +61,9 @@ export interface AffixProps {
 
 export default class Affix extends React.Component<AffixProps, any> {
   static propTypes = {
-    offsetTop: React.PropTypes.number,
+    offsetTop: PropTypes.number,
-    offsetBottom: React.PropTypes.number,
+    offsetBottom: PropTypes.number,
-    target: React.PropTypes.func,
+    target: PropTypes.func,
   };
 
   scrollEvent: any;

components/anchor/AnchorLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import AnchorHelper, { scrollTo } from './anchorHelper';
 
@@ -18,7 +19,7 @@ export interface AnchorLinkProps {
 export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
   static __ANT_ANCHOR_LINK = true;
   static contextTypes = {
-    anchorHelper: React.PropTypes.any,
+    anchorHelper: PropTypes.any,
   };
 
   static defaultProps = {

components/anchor/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import AnchorLink from './AnchorLink';
@@ -27,7 +28,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   };
 
   static childContextTypes = {
-    anchorHelper: React.PropTypes.any,
+    anchorHelper: PropTypes.any,
   };
 
   refs: {

components/breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { cloneElement } from 'react';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -43,12 +44,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
   };
 
   static propTypes = {
-    prefixCls: React.PropTypes.string,
+    prefixCls: PropTypes.string,
-    separator: React.PropTypes.node,
+    separator: PropTypes.node,
-    routes: React.PropTypes.array,
+    routes: PropTypes.array,
-    params: React.PropTypes.object,
+    params: PropTypes.object,
-    linkRender: React.PropTypes.func,
+    linkRender: PropTypes.func,
-    nameRender: React.PropTypes.func,
+    nameRender: PropTypes.func,
   };
 
   componentDidMount() {

components/button/button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon';
 import omit from 'omit.js';
@@ -60,14 +61,14 @@ export default class Button extends React.Component<ButtonProps, any> {
   };
 
   static propTypes = {
-    type: React.PropTypes.string,
+    type: PropTypes.string,
-    shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
+    shape: PropTypes.oneOf(['circle', 'circle-outline']),
-    size: React.PropTypes.oneOf(['large', 'default', 'small']),
+    size: PropTypes.oneOf(['large', 'default', 'small']),
-    htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
+    htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
-    onClick: React.PropTypes.func,
+    onClick: PropTypes.func,
-    loading: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.object]),
+    loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    className: React.PropTypes.string,
+    className: PropTypes.string,
-    icon: React.PropTypes.string,
+    icon: PropTypes.string,
   };
 
   timeout: number;

components/button/style/index.less

@@ -82,10 +82,6 @@
     display: block;
   }
 
-  .@{iconfont-css-prefix} {
-    transition: all .3s @ease-in-out;
-  }
-
   &&-loading:not(&-circle):not(&-circle-outline) {
     padding-left: 29px;
     pointer-events: none;

components/checkbox/Group.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Checkbox from './Checkbox';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
@@ -34,10 +35,10 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
     prefixCls: 'ant-checkbox-group',
   };
   static propTypes = {
-    defaultValue: React.PropTypes.array,
+    defaultValue: PropTypes.array,
-    value: React.PropTypes.array,
+    value: PropTypes.array,
-    options: React.PropTypes.array.isRequired,
+    options: PropTypes.array.isRequired,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   };
   constructor(props) {
     super(props);

components/date-picker/RangePicker.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import PropTypes from 'prop-types';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -10,7 +11,7 @@ import warning from '../_util/warning';
 
 export default class RangePicker extends React.Component<any, any> {
   static contextTypes = {
-      antLocale: React.PropTypes.object,
+      antLocale: PropTypes.object,
   };
   static defaultProps = {
     prefixCls: 'ant-calendar',

components/date-picker/createPicker.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import PropTypes from 'prop-types';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -18,7 +19,7 @@ export default function createPicker(TheCalendar) {
   // use class typescript error
   const CalenderWrapper = React.createClass<any, any>({
     contextTypes: {
-      antLocale: React.PropTypes.object,
+      antLocale: PropTypes.object,
     },
     getDefaultProps() {
       return {

components/date-picker/style/MonthPicker.less

@@ -2,5 +2,6 @@
   .@{calendar-prefix-cls}-month-panel,
   .@{calendar-prefix-cls}-year-panel {
     top: 0;
+    height: 248px;
   }
 }

components/date-picker/style/RangePicker.less

@@ -3,8 +3,8 @@
 .@{calendar-prefix-cls}-range-picker-input {
   background-color: transparent;
   border: 0;
-  height: 18px;
+  height: 100%;
-  line-height: 18px;
+  line-height: 100%;
   outline: 0;
   width: 43%;
   text-align: center;

components/form/FormItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import Row from '../row';
@@ -41,22 +42,22 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   };
 
   static propTypes = {
-    prefixCls: React.PropTypes.string,
+    prefixCls: PropTypes.string,
-    label: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.node]),
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    labelCol: React.PropTypes.object,
+    labelCol: PropTypes.object,
-    help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]),
+    help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
-    validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
+    validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
-    hasFeedback: React.PropTypes.bool,
+    hasFeedback: PropTypes.bool,
-    wrapperCol: React.PropTypes.object,
+    wrapperCol: PropTypes.object,
-    className: React.PropTypes.string,
+    className: PropTypes.string,
-    id: React.PropTypes.string,
+    id: PropTypes.string,
-    children: React.PropTypes.node,
+    children: PropTypes.node,
-    colon: React.PropTypes.bool,
+    colon: PropTypes.bool,
   };
 
   static contextTypes = {
-    form: React.PropTypes.object,
+    form: PropTypes.object,
-    vertical: React.PropTypes.bool,
+    vertical: PropTypes.bool,
   };
 
   context: FormItemContext;

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

@@ -10,13 +10,14 @@ title:
 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
 > * 提供受控属性 `value` 或其它与 [`valuePropName`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的属性。
 > * 提供 `onChange` 事件或 [`trigger`](http://ant.design/components/form/#getFieldDecorator-参数) 的值同名的事件。
+> * 不能是函数式组件。
 
 ## en-US
 
 Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
 > * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
 > * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
-
+> * It must be a class component.
 
 ````jsx
 import { Form, Input, Select, Button } from 'antd';

components/grid/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 import { Col, Row } from '..';
 
 describe('Grid', () => {

components/grid/row.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 import assign from 'object-assign';
+import PropTypes from 'prop-types';
 
 export interface RowProps {
   className?: string;
@@ -19,13 +20,13 @@ export default class Row extends React.Component<RowProps, any> {
   };
 
   static propTypes = {
-    type: React.PropTypes.string,
+    type: PropTypes.string,
-    align: React.PropTypes.string,
+    align: PropTypes.string,
-    justify: React.PropTypes.string,
+    justify: PropTypes.string,
-    className: React.PropTypes.string,
+    className: PropTypes.string,
-    children: React.PropTypes.node,
+    children: PropTypes.node,
-    gutter: React.PropTypes.number,
+    gutter: PropTypes.number,
-    prefixCls: React.PropTypes.string,
+    prefixCls: PropTypes.string,
   };
   render() {
     const { type, justify, align, className, gutter, style, children,

components/icon/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 import { wrap } from 'react-stateless-wrapper';
 import AntIcon from '..';
 

components/icon/index.tsx

@@ -11,7 +11,7 @@ export interface IconProps {
   style?: React.CSSProperties;
 }
 
-export default (props: IconProps) => {
+const Icon = (props: IconProps) => {
   const { type, className = '', spin } = props;
   const classString = classNames({
     anticon: true,
@@ -20,3 +20,5 @@ export default (props: IconProps) => {
   }, className);
   return <i {...omit(props, ['type', 'spin'])} className={classString} />;
 };
+
+export default Icon;

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

@@ -57,7 +57,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
       />
     </span>
     <span
-      class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+      class="ant-input-number-handler ant-input-number-handler-down "
       unselectable="unselectable"
     >
       <span
@@ -170,7 +170,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
         class="ant-input-number-input"
         max="Infinity"
         min="-Infinity"
-        value="$ 100"
+        value="$ 1,000"
       />
     </div>
   </div>
@@ -181,7 +181,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
         unselectable="unselectable"
       >
         <span
@@ -205,8 +205,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
       <input
         autocomplete="off"
         class="ant-input-number-input"
-        max="Infinity"
+        max="100"
-        min="-Infinity"
+        min="0"
         value="100%"
       />
     </div>

components/input-number/demo/formatter.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-展示具有具体含义的数据。
+通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。
 
 ## en-US
 
-Display value within it's situation.
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
 
 ````jsx
 import { InputNumber } from 'antd';
@@ -22,8 +22,20 @@ function onChange(value) {
 
 ReactDOM.render(
   <div>
-    <InputNumber formatter={value => `$ ${value}`} defaultValue={100} onChange={onChange} />
+    <InputNumber
-    <InputNumber formatter={value => `${value.replace('%', '')}%`} defaultValue={100} onChange={onChange} />
+      defaultValue={1000}
+      formatter={value => `$ ${value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`}
+      parser={value => value.replace(/\$\s?|(,*)/g, '')}
+      onChange={onChange}
+    />
+    <InputNumber
+      defaultValue={100}
+      min={0}
+      max={100}
+      formatter={value => `${value}%`}
+      parser={value => value.replace('%', '')}
+      onChange={onChange}
+    />
   </div>
 , mountNode);
 ````

components/input-number/index.tsx

@@ -13,6 +13,7 @@ export interface InputNumberProps {
   disabled?: boolean;
   size?: 'large' | 'small' | 'default';
   formatter?: (value: number | string | undefined) => string;
+  parser?: (displayValue: string | undefined) => number;
   placeholder?: string;
   style?: React.CSSProperties;
   className?: string;

components/input/style/mixin.less

@@ -175,7 +175,6 @@
   }
 
   // Reset rounded corners
-  > span > .@{inputClass}:first-child,
   > .@{inputClass}:first-child,
   &-addon:first-child {
     border-bottom-right-radius: 0;
@@ -241,6 +240,8 @@
       border-radius: 0;
       border-right-width: 0;
       vertical-align: middle;
+      float: none;
+      display: inline-block;
     }
 
     // Undo float for .ant-input-group .ant-input

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

@@ -297,6 +297,267 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
+<div
+  class="ant-layout ant-layout-has-sider"
+  style="height:100vh;"
+>
+  <div
+    class="ant-layout-sider"
+    style="overflow:auto;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-bar-chart"
+        />
+        <span
+          class="nav-text"
+        >
+          nav 4
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;"
+      >
+        <i
+          class="anticon anticon-cloud-o"
+        />
+        <span
+          class="nav-text"
+        >
+          nav 5
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;"
+      >
+        <i
+          class="anticon anticon-appstore-o"
+        />
+        <span
+          class="nav-text"
+        >
+          nav 6
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;"
+      >
+        <i
+          class="anticon anticon-team"
+        />
+        <span
+          class="nav-text"
+        >
+          nav 7
+        </span>
+      </li>
+      <li
+        aria-selected="false"
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px;"
+      >
+        <i
+          class="anticon anticon-shop"
+        />
+        <span
+          class="nav-text"
+        >
+          nav 8
+        </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;overflow:initial;"
+    >
+      <div
+        style="padding:24px;background:#fff;text-align:center;"
+      >
+        ...
+        <br />
+        Really
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        long
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        ...
+        <br />
+        content
+      </div>
+    </div>
+    <div
+      class="ant-layout-footer"
+      style="text-align:center;"
+    >
+      Ant Design ©2016 Created by Ant UED
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
 <div
   class="ant-layout ant-layout-has-sider"

components/layout/demo/fixed-sider.md

@@ -0,0 +1,92 @@
+---
+order: 7
+iframe: 360
+title:
+  zh-CN: 固定侧边栏
+  en-US: Fixed Sider
+---
+
+## zh-CN
+
+当内容较长时，使用固定侧边栏可以提供更好的体验。
+
+## en-US
+
+When dealing with long content, a fixed sider can provide a better user experience.
+
+````jsx
+import { Layout, Menu, Icon } from 'antd';
+const { Header, Content, Footer, Sider } = Layout;
+
+ReactDOM.render(<Layout style={{ height: '100vh' }}>
+  <Sider style={{ overflow: 'auto' }}>
+    <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="bar-chart" />
+        <span className="nav-text">nav 4</span>
+      </Menu.Item>
+      <Menu.Item key="5">
+        <Icon type="cloud-o" />
+        <span className="nav-text">nav 5</span>
+      </Menu.Item>
+      <Menu.Item key="6">
+        <Icon type="appstore-o" />
+        <span className="nav-text">nav 6</span>
+      </Menu.Item>
+      <Menu.Item key="7">
+        <Icon type="team" />
+        <span className="nav-text">nav 7</span>
+      </Menu.Item>
+      <Menu.Item key="8">
+        <Icon type="shop" />
+        <span className="nav-text">nav 8</span>
+      </Menu.Item>
+    </Menu>
+  </Sider>
+  <Layout>
+    <Header style={{ background: '#fff', padding: 0 }} />
+    <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+      <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
+        ...
+        <br />
+        Really
+        <br />...<br />...<br />...<br />
+        long
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />...
+        <br />...<br />...<br />...<br />...<br />...<br />
+        content
+      </div>
+    </Content>
+    <Footer style={{ textAlign: 'center' }}>
+      Ant Design ©2016 Created by Ant UED
+    </Footer>
+  </Layout>
+</Layout>, mountNode);
+````
+
+````css
+#components-layout-demo-fixed-sider .logo {
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px;
+}
+````

components/locale-provider/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { changeConfirmLocale } from '../modal/locale';
 
 export interface LocaleProviderProps {
@@ -18,11 +19,11 @@ export interface LocaleProviderProps {
 
 export default class LocaleProvider extends React.Component<LocaleProviderProps, any> {
   static propTypes = {
-    locale: React.PropTypes.object,
+    locale: PropTypes.object,
   };
 
   static childContextTypes = {
-    antLocale: React.PropTypes.object,
+    antLocale: PropTypes.object,
   };
 
   getChildContext() {

components/locale-provider/style/index.less

@@ -1 +1,3 @@
 // placeholder
+@import "../../style/themes/default";
+@import "../../style/core/index";

components/menu/style/index.less

@@ -53,6 +53,9 @@
     &:hover {
       color: @primary-color;
     }
+    &:focus {
+      text-decoration: none;
+    }
     &:before {
       position: absolute;
       background-color: transparent;

components/modal/Modal.tsx

@@ -1,6 +1,6 @@
-import { PropTypes } from 'react';
 import React from 'react';
 import Dialog from 'rc-dialog';
+import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Button from '../button';
 
@@ -93,7 +93,7 @@ export default class Modal extends React.Component<ModalProps, any> {
   };
 
   static contextTypes = {
-    antLocale: React.PropTypes.object,
+    antLocale: PropTypes.object,
   };
 
   context: ModalContext;

components/popover/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 import Popover from '..';
 
 describe('Popover', () => {

components/select/index.tsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import RcSelect, { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
 import warning from '../_util/warning';
@@ -90,7 +91,7 @@ export default class Select extends React.Component<SelectProps, any> {
   };
 
   static contextTypes = {
-    antLocale: React.PropTypes.object,
+    antLocale: PropTypes.object,
   };
 
   context: SelectContext;

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

@@ -266,7 +266,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
             />
           </span>
           <span
-            class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
+            class="ant-input-number-handler ant-input-number-handler-down "
             unselectable="unselectable"
           >
             <span

components/style/themes/default.less

@@ -252,6 +252,11 @@
 @spin-dot-size: 20px;
 @spin-dot-size-lg: 32px;
 
+// Table
+// --
+@table-header-bg: @background-color-base;
+@table-row-hover-bg: @primary-1;
+
 // TimePicker
 // ---
 @time-picker-panel-column-width: 56px;

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

@@ -15,7 +15,7 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
 <div>
   <span
     class="ant-switch ant-switch-disabled"
-    tabindex="0"
+    tabindex="-1"
   >
     <span
       class="ant-switch-inner"

components/table/Table.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import RcTable from 'rc-table';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import assign from 'object-assign';
 import Pagination, { PaginationProps } from '../pagination';
@@ -102,21 +103,21 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   static ColumnGroup = ColumnGroup;
 
   static propTypes = {
-    dataSource: React.PropTypes.array,
+    dataSource: PropTypes.array,
-    columns: React.PropTypes.array,
+    columns: PropTypes.array,
-    prefixCls: React.PropTypes.string,
+    prefixCls: PropTypes.string,
-    useFixedHeader: React.PropTypes.bool,
+    useFixedHeader: PropTypes.bool,
-    rowSelection: React.PropTypes.object,
+    rowSelection: PropTypes.object,
-    className: React.PropTypes.string,
+    className: PropTypes.string,
-    size: React.PropTypes.string,
+    size: PropTypes.string,
-    loading: React.PropTypes.oneOfType([
+    loading: PropTypes.oneOfType([
-      React.PropTypes.bool,
+      PropTypes.bool,
-      React.PropTypes.object,
+      PropTypes.object,
     ]),
-    bordered: React.PropTypes.bool,
+    bordered: PropTypes.bool,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
-    locale: React.PropTypes.object,
+    locale: PropTypes.object,
-    dropdownPrefixCls: React.PropTypes.string,
+    dropdownPrefixCls: PropTypes.string,
   };
 
   static defaultProps = {
@@ -135,7 +136,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   };
 
   static contextTypes = {
-    antLocale: React.PropTypes.object,
+    antLocale: PropTypes.object,
   };
 
   context: TableContext;

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

@@ -6589,12 +6589,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
             >
               <table
                 class="ant-table-fixed"
-                style="width:1010px;"
+                style="width:130%;"
               >
                 <colgroup>
-                  <col
-                    style="width:100px;min-width:100px;"
-                  />
                   <col
                     style="width:100px;min-width:100px;"
                   />
@@ -6602,17 +6599,16 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                     style="width:200px;min-width:200px;"
                   />
                   <col
-                    style="width:50px;min-width:50px;"
+                    style="width:200px;min-width:200px;"
                   />
                   <col
                     style="width:100px;min-width:100px;"
                   />
                   <col
-                    style="width:200px;min-width:200px;"
+                    style="width:100px;min-width:100px;"
-                  />
-                  <col
-                    style="width:200px;min-width:200px;"
                   />
+                  <col />
+                  <col />
                   <col
                     style="width:60px;min-width:60px;"
                   />
@@ -6755,12 +6751,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
             >
               <table
                 class="ant-table-fixed"
-                style="width:1010px;"
+                style="width:130%;"
               >
                 <colgroup>
-                  <col
-                    style="width:100px;min-width:100px;"
-                  />
                   <col
                     style="width:100px;min-width:100px;"
                   />
@@ -6768,17 +6761,16 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                     style="width:200px;min-width:200px;"
                   />
                   <col
-                    style="width:50px;min-width:50px;"
+                    style="width:200px;min-width:200px;"
                   />
                   <col
                     style="width:100px;min-width:100px;"
                   />
                   <col
-                    style="width:200px;min-width:200px;"
+                    style="width:100px;min-width:100px;"
-                  />
-                  <col
-                    style="width:200px;min-width:200px;"
                   />
+                  <col />
+                  <col />
                   <col
                     style="width:60px;min-width:60px;"
                   />

components/table/demo/grouping-columns.md

@@ -36,7 +36,7 @@ const columns = [{
     title: 'Age',
     dataIndex: 'age',
     key: 'age',
-    width: 100,
+    width: 200,
     sorter: (a, b) => a.age - b.age,
   }, {
     title: 'Address',
@@ -51,7 +51,7 @@ const columns = [{
         title: 'Building',
         dataIndex: 'building',
         key: 'building',
-        width: 50,
+        width: 100,
       }, {
         title: 'Door No.',
         dataIndex: 'number',
@@ -66,12 +66,10 @@ const columns = [{
     title: 'Company Address',
     dataIndex: 'companyAddress',
     key: 'companyAddress',
-    width: 200,
   }, {
     title: 'Company Name',
     dataIndex: 'companyName',
     key: 'companyName',
-    width: 200,
   }],
 }, {
   title: 'Gender',
@@ -102,7 +100,7 @@ ReactDOM.render(
     dataSource={data}
     bordered
     size="middle"
-    scroll={{ x: 1010, y: 240 }}
+    scroll={{ x: '130%', y: 240 }}
   />
 , mountNode);
 ```

components/table/style/index.less

@@ -2,7 +2,6 @@
 @import "../../style/mixins/index";
 
 @table-prefix-cls: ~"@{ant-prefix}-table";
-@table-head-background-color: @background-color-base;
 
 .@{table-prefix-cls}-wrapper {
   .clearfix;
@@ -29,7 +28,7 @@
   }
 
   &-thead > tr > th {
-    background: @table-head-background-color;
+    background: @table-header-bg;
     font-weight: 500;
     transition: background .3s ease;
     text-align: left;
@@ -66,7 +65,7 @@
     &.@{table-prefix-cls}-row-hover,
     &:hover {
       & > td {
-        background: @primary-1;
+        background: @table-row-hover-bg;
       }
     }
   }
@@ -77,13 +76,13 @@
 
   &-footer {
     padding: 16px 8px;
-    background: @table-head-background-color;
+    background: @table-header-bg;
     border-radius: 0 0 @border-radius-base @border-radius-base;
     position: relative;
     &:before {
       content: '';
       height: 1px;
-      background: @table-head-background-color;
+      background: @table-header-bg;
       position: absolute;
       top: -1px;
       width: 100%;
@@ -148,17 +147,19 @@
   &-thead > tr > th.@{table-prefix-cls}-selection-column,
   &-tbody > tr > td.@{table-prefix-cls}-selection-column {
     text-align: center;
+    min-width: 62px;
     width: 62px;
   }
 
   &-expand-icon-th,
   &-row-expand-icon-cell {
     text-align: center;
+    min-width: 50px;
     width: 50px;
   }
 
   &-header {
-    background: @table-head-background-color;
+    background: @table-header-bg;
     overflow: hidden;
   }
 

components/tree-select/style/index.less

@@ -84,6 +84,10 @@
         &.@{select-tree-prefix-cls}-bottom_close,
         &.@{select-tree-prefix-cls}-noline_close {
           .antTreeSwitcherIcon();
+          .ie-rotate(3);
+          &:after {
+            transform: rotate(270deg) scale(0.59);
+          }
         }
       }
     }

components/upload/Upload.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import RcUpload from 'rc-upload';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import assign from 'object-assign';
 import Dragger from './Dragger';
@@ -41,7 +42,7 @@ export default class Upload extends React.Component<UploadProps, any> {
   };
 
   static contextTypes = {
-    antLocale: React.PropTypes.object,
+    antLocale: PropTypes.object,
   };
 
   context: UploadContext;

docs/react/getting-started.en-US.md

@@ -161,11 +161,15 @@ There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129)
 
 ## Import on Demand
 
-If you see a log like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance.
+If you see logs like below screenshot, you might import all components by writing `import { Button } from 'antd';`, this will affect your app's network perfermance.
 
-> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)
+```
+You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
+```
 
-But, we can import individual components on demand:
+> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png)
+
+However, we can import individual components on demand:
 
 ```jsx
 import Button from 'antd/lib/button';

docs/react/getting-started.zh-CN.md

@@ -159,9 +159,13 @@ IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016
 
 ## 按需加载
 
-如果你在控制台看到下面的提示，则你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
+如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
 
-> ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)
+```
+You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
+```
+
+> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png)
 
 可以通过以下的写法来按需加载组件。
 

docs/react/introduce.en-US.md

@@ -164,6 +164,6 @@ If you'd like to help us improve antd, just create a [Pull Request](https://gith
 
 ## Need Help?
 
-For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) as well.
+For questions on how to use antd, please post questions to [stackoverflow](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [gitter](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well.
 
 As always, we encourage experienced users to help those who are not familiar with `antd`!

docs/react/introduce.zh-CN.md

@@ -173,4 +173,5 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
 2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-3. [![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)
+3. [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+4. [![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)（中文）

docs/react/recommendation.en-US.md

@@ -11,8 +11,7 @@ Router | [react-router](https://github.com/ReactTraining/react-router)
 Layout | [react-blocks](http://whoisandie.github.io/react-blocks/)
 Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd)  [react-draggable](https://github.com/mzabriskie/react-draggable)
 Code Editor | [react-codemirror](https://github.com/JedWatson/react-codemirror)
-Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill)  [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)
+Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill)  [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor](https://github.com/leejaen/react-lz-editor)(Ant Design style)
-[react-lz-editor](https://github.com/leejaen/react-lz-editor)(Ant Design style) 
 Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
 Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media)
 Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)

docs/react/use-with-create-react-app.en-US.md

@@ -96,8 +96,8 @@ Ok, you now see a blue primary button displaying in page now, next you can choos
 
 ## Advanced Guides
 
-We are successd to run antd components now, but in the real world, there are still lots of problems about antd-demo.
+We are successfully running antd components now; but in the real world, there are still lots of problems about antd-demo.
-For instance, we actully import all components in the project which will be a serious network perfermance issue.
+For instance, we actually import all components in the project which will cause a serious network perfermance issue.
 
 > You will see a warning in your browser console.
 > ![](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)

docs/spec/data-display.md

@@ -22,7 +22,7 @@ title:
 > 1. 表格中的时间、状态、操作栏需保持词语完整不过行。
 > 2. 当数据为空时，可使用『- -』来表示暂无数据。
 
-## 折叠面板
+## 折叠面板 Collapse
 
 <img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/UzmOpWyvIZmFibFPOjuo.png">
 

docs/spec/icon.en-US.md

@@ -0,0 +1,109 @@
+---
+order: 4
+title: Icons
+---
+
+An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data. Ant Design's icons adhere to the following two principles and are designed for cross-platform consistency:
+
+- Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood
+- All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.)
+
+---
+
+## System icons
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png">
+
+System icons are often used to represent commonly used operations, such as: save, edit, delete. The library also includes icons to represent file types and state.
+
+- [View the icon library](/components/icon/#Application-Icons)
+
+### Key contour lines
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="Ant Design's grid and key contour lines">
+
+Contour lines play an important role in making various icons with the same visual effect. We recommend using a template following Ant Design's contour lines when creating new icons.
+
+Please make all icons in the 1024×1024 resolution (16×16 64 times).
+
+- [Illustrator tips](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
+
+<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="Square contour">
+<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="Horizontal rectangle contour">
+
+<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="Circular contour">
+<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.png" alt="Vertical rectangle contour">
+
+### Design details
+
+#### Stroke weight
+
+<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="Correct example" description="Line thickness is consistently 72px">
+<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="Incorrect example" description="Line thickness is not uniform">
+
+Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px.
+
+#### Corners
+
+<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="Correct example" description="The icon's corners are properly rounded">
+<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="Incorrect example" description="The icon's corners are not rounded">
+
+Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.
+
+Icons that follow Ant Design should have rounded corners and edges using a 72px radius. Angles should be a multiple of 45°.
+
+#### Visual correction
+
+<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="Correct example" description="For the intricate “JPG” lettering, an outline is added for readability">
+<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="Incorrect example" description="The text in the icon is crowded and hard to read">
+
+In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability.
+
+### Perspective
+
+<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="Correct example" description="Maintains a flat, simple style">
+<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="Incorrect example" description="Icons should not have depth nor varying perspectives">
+
+Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.
+
+### Naming conventions
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png">
+
+Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.
+
+### Icon sizing
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png">
+
+Icons should be scaled according to the text size, according to the Ant Design specification.
+
+For example, icons inline with 12pt font should be 12px in size with 8px of spacing.
+
+### Color
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" description="Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
+
+The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
+
+---
+
+## Pictographs
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/tFBnAjChLpybfxtnotTx.png">
+
+While certain icons may be used to express an action or to communicate state, other icons may act as pictographs which can be used to either communicate meaning or to help a user remember an abstract concept.
+
+> Note: The design principles for system icons (stroke weight, etc.) also apply to pictographs.
+
+### Pictograph sizing
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png">
+
+Conventionally, we recommend storing pictograph icons in three sizes: 32px, 48px, and 64px. That said, the physical dimensions of an icon should match the dimensions of where it is used.
+
+### Colors
+
+<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png">
+
+Pictographs should either be monochrome (using a neutral color) or consist of two colors (the neutral color + primary color), with the primary color not exceeding 40% of the pictograph's area.

docs/spec/icon.zh-CN.md

@@ -1,8 +1,6 @@
 ---
 order: 4
-title:
+title: 图标
-  zh-CN: 图标
-  en-US: Icon
 ---
 
 图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，

package.json

@@ -39,14 +39,15 @@
     "css-animation": "^1.2.5",
     "dom-closest": "^0.2.0",
     "lodash.debounce": "^4.0.8",
-    "moment": "~2.18.0",
+    "moment": "^2.18.1",
     "object-assign": "~4.1.0",
     "omit.js": "^0.1.0",
+    "prop-types": "^15.5.7",
     "rc-animate": "~2.3.0",
     "rc-calendar": "~8.1.0",
     "rc-cascader": "~0.11.0",
     "rc-checkbox": "~1.5.0",
-    "rc-collapse": "~1.6.4",
+    "rc-collapse": "~1.7.0",
     "rc-dialog": "~6.5.0",
     "rc-dropdown": "~1.4.8",
     "rc-editor-mention": "~0.5.2",
@@ -124,7 +125,7 @@
     "rc-scroll-anim": "^1.0.3",
     "rc-tween-one": "^1.1.2",
     "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
+    "react-addons-test-utils": "^15.5.1",
     "react-color-standalone": "^2.4.2-1",
     "react-copy-to-clipboard": "^4.0.1",
     "react-document-title": "^2.0.1",
@@ -133,6 +134,7 @@
     "react-intl": "^2.0.1",
     "react-stateless-wrapper": "^1.0.2",
     "react-sublime-video": "^0.2.0",
+    "react-test-renderer": "^15.5.4",
     "reqwest": "^2.0.5",
     "rimraf": "^2.5.4",
     "stylelint": "^7.8.0",

site/theme/en-US.js

@@ -49,7 +49,8 @@ module.exports = {
     'app.footer.feedback': 'Feedback',
     'app.footer.stackoverflow': 'StackOverflow',
     'app.footer.segmentfault': 'SegmentFault',
-    'app.footer.discuss': 'Chat Room',
+    'app.footer.discuss-en': 'Chat Room (English)',
+    'app.footer.discuss-cn': 'Chat Room (中文)',
     'app.footer.bug-report': 'Bug Report',
     'app.footer.issues': 'Issues',
     'app.footer.version': 'Version: ',

site/theme/static/template.html

@@ -96,6 +96,17 @@
       /* eslint-enable */
     }
     </script>
+    <!-- Hotjar Tracking Code for ant.design -->
+    <script>
+    (function(h,o,t,j,a,r){
+      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+      h._hjSettings={hjid:473408,hjsv:5};
+      a=o.getElementsByTagName('head')[0];
+      r=o.createElement('script');r.async=1;
+      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
   </head>
   <body>
     <div id="react-content">

site/theme/template/Content/ComponentDoc.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import DocumentTitle from 'react-document-title';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -9,7 +10,7 @@ import EditButton from './EditButton';
 
 export default class ComponentDoc extends React.Component {
   static contextTypes = {
-    intl: React.PropTypes.object,
+    intl: PropTypes.object,
   }
 
   constructor(props) {

site/theme/template/Content/Demo.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
@@ -9,7 +10,7 @@ import BrowserFrame from '../BrowserFrame';
 
 export default class Demo extends React.Component {
   static contextTypes = {
-    intl: React.PropTypes.object,
+    intl: PropTypes.object,
   }
 
   constructor(props) {

site/theme/template/Layout/Footer.jsx

@@ -126,7 +126,12 @@ class Footer extends React.Component {
             </div>
             <div>
               <a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design">
-                <FormattedMessage id="app.footer.discuss" />
+                <FormattedMessage id="app.footer.discuss-cn" />
+              </a>
+            </div>
+            <div>
+              <a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english">
+                <FormattedMessage id="app.footer.discuss-en" />
               </a>
             </div>
             <div>

site/theme/template/Layout/index.jsx

@@ -1,5 +1,6 @@
 import React, { cloneElement } from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import { addLocaleData, IntlProvider } from 'react-intl';
 import { LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
@@ -22,7 +23,7 @@ if (typeof window !== 'undefined') {
 
 export default class Layout extends React.Component {
   static contextTypes = {
-    router: React.PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
   }
 
   constructor(props) {

site/theme/zh-CN.js

@@ -49,7 +49,8 @@ module.exports = {
     'app.footer.feedback': '反馈和建议',
     'app.footer.stackoverflow': 'StackOverflow',
     'app.footer.segmentfault': 'SegmentFault',
-    'app.footer.discuss': '在线讨论',
+    'app.footer.discuss-en': '在线讨论 (English)',
+    'app.footer.discuss-cn': '在线讨论 (中文)',
     'app.footer.bug-report': '报告 Bug',
     'app.footer.issues': '讨论列表',
     'app.footer.version': '文档版本：',