Merge pull request #14564 from ant-design/feature-merge-master

Feature merge master

CHANGELOG.en-US.md

@@ -20,10 +20,11 @@ timeline: true
 `2019-01-19`
 
 - 🌟 Update the "Use in creact-react-app" document to be compatible with upgraded creact-react-app and react-scripts-rewired. [#14385](https://github.com/ant-design/ant-design/pull/14385)
-- 💄 Fix using autoprefixer 9.4.5 in postcss (webpack) will throw an error `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed`. [#14312](https://github.com/ant-design/ant-design/pull/14312)
-- 💄 Fix InputNumber style not correct in MenuItem. [#14373](https://github.com/ant-design/ant-design/pull/14373)
-- 💄 Fix Input.Search with enterButton style issue. [#14397](https://github.com/ant-design/ant-design/pull/14397)
-- 💄 Fix Slider focus style. [9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607)
+- 🐞 Fix using autoprefixer 9.4.5 in postcss (webpack) will throw an error `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed`. [#14312](https://github.com/ant-design/ant-design/pull/14312)
+- 🐞 Fix InputNumber style not correct in MenuItem. [#14373](https://github.com/ant-design/ant-design/pull/14373)
+- 🐞 Fix Input.Search with enterButton style issue. [#14397](https://github.com/ant-design/ant-design/pull/14397)
+- 🐞 Fix Input.TextArea autosize not correct when input number. [#14375](https://github.com/ant-design/ant-design/pull/14375)
+- 🐞 Fix Slider focus style. [9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607)
 - 🐞 Fix the problem that the `prefixCls` property is passed to the `Empty` . [#14404](https://github.com/ant-design/ant-design/pull/14404)
 - 🐞 Fix the problem that Radio `onChange` will be override by RadioGroup `onChange`.[#14364](https://github.com/ant-design/ant-design/pull/14364)
 

CHANGELOG.zh-CN.md

@@ -19,10 +19,11 @@ timeline: true
 
 `2019-01-19`
 - 🌟 更新《在 creact-react-app 中使用》文档以兼容升级后的 creact-react-app 和 react-scripts-rewired。[#14385](https://github.com/ant-design/ant-design/pull/14385)
-- 💄 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312)
-- 💄 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373)
-- 💄 修复 Input.Search 使用 `enterButton` 时的样式问题。[#14397](https://github.com/ant-design/ant-design/pull/14397)
-- 💄 修复 Slider focus 时的样式错误。[9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607)
+- 🐞 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312)
+- 🐞 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373)
+- 🐞 修复 Input.Search 使用 `enterButton` 时的样式问题。[#14397](https://github.com/ant-design/ant-design/pull/14397)
+- 🐞 修复 Input.TextArea 中输入数字时 `autosize` 高度无法自适应的问题。[#14375](https://github.com/ant-design/ant-design/pull/14375)
+- 🐞 修复 Slider focus 时的样式错误。[9202509](https://github.com/ant-design/ant-design/commit/92025095032a05b2bc347218b523ffd42f75a607)
 - 🐞 修复 `prefixCls` 属性被传递到了 Empty 元素上的问题。[#14404](https://github.com/ant-design/ant-design/pull/14404)
 - 🐞 修复 RadioGroup `onChange` 将覆盖 Radio `onChange` 的问题。[#14364](https://github.com/ant-design/ant-design/pull/14364)
 

README-zh_CN.md

@@ -52,6 +52,10 @@
 npm install antd --save
 ```
 
+```bash
+yarn add antd
+```
+
 ## 🔨 示例
 
 ```jsx

README.md

@@ -52,6 +52,10 @@ English | [简体中文](./README-zh_CN.md)
 npm install antd --save
 ```
 
+```bash
+yarn add antd
+```
+
 ## 🔨 Usage
 
 ```jsx

components/_util/isFlexSupported.tsx → components/_util/styleChecker.tsx

-export default function isFlexSupported() {
+function isStyleSupport(styleName: string | Array<string>): boolean {
   if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
     const { documentElement } = window.document;
-    return (
-      'flex' in documentElement.style ||
-      'webkitFlex' in documentElement.style ||
-      'Flex' in documentElement.style ||
-      'msFlex' in documentElement.style
-    );
+
+    return styleNameList.some(name => name in documentElement.style);
   }
   return false;
 }
+
+export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
+
+export default isStyleSupport;

components/badge/ScrollNumber.tsx

@@ -169,7 +169,10 @@ export default class ScrollNumber extends Component<ScrollNumberProps, ScrollNum
     // mock border-color by box-shadow for compatible with old usage:
     // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
     if (style && style.borderColor) {
-      newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`;
+      newProps.style = {
+        ...style,
+        boxShadow: `0 0 0 1px ${style.borderColor} inset`,
+      };
     }
     if (displayComponent) {
       return React.cloneElement(displayComponent, {

components/form/Form.tsx

@@ -92,7 +92,7 @@ export type GetFieldDecoratorOptions = {
 // function create
 export type WrappedFormUtils = {
   /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
-  getFieldsValue(fieldNames?: Array<string>): Object;
+  getFieldsValue(fieldNames?: Array<string>): { [field: string]: any };
   /** 获取一个输入控件的值*/
   getFieldValue(fieldName: string): any;
   /** 设置一组输入控件的值*/

components/form/demo/validate-other.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Demostration for validataion configuration for form controls which are not show in the above demos.
+Demonstration of validation configuration for form controls which are not shown in the demos above.
 
 ````jsx
 import {

components/grid/col.tsx

@@ -6,26 +6,29 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
+// https://github.com/ant-design/ant-design/issues/14324
+type ColSpanType = number | string;
+
 export interface ColSize {
-  span?: number;
-  order?: number;
-  offset?: number;
-  push?: number;
-  pull?: number;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
 }
 
 export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
-  span?: number;
-  order?: number;
-  offset?: number;
-  push?: number;
-  pull?: number;
-  xs?: number | ColSize;
-  sm?: number | ColSize;
-  md?: number | ColSize;
-  lg?: number | ColSize;
-  xl?: number | ColSize;
-  xxl?: number | ColSize;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+  xs?: ColSpanType | ColSize;
+  sm?: ColSpanType | ColSize;
+  md?: ColSpanType | ColSize;
+  lg?: ColSpanType | ColSize;
+  xl?: ColSpanType | ColSize;
+  xxl?: ColSpanType | ColSize;
   prefixCls?: string;
 }
 

components/input/Input.tsx

@@ -185,38 +185,36 @@ class Input extends React.Component<InputProps, any> {
   }
 
   renderLabeledInput(prefixCls: string, children: React.ReactElement<any>) {
-    const props = this.props;
+    const { addonBefore, addonAfter, style, size, className } = this.props;
     // Not wrap when there is not addons
-    if (!props.addonBefore && !props.addonAfter) {
+    if (!addonBefore && !addonAfter) {
       return children;
     }
 
     const wrapperClassName = `${prefixCls}-group`;
     const addonClassName = `${wrapperClassName}-addon`;
-    const addonBefore = props.addonBefore ? (
-      <span className={addonClassName}>{props.addonBefore}</span>
-    ) : null;
-    const addonAfter = props.addonAfter ? (
-      <span className={addonClassName}>{props.addonAfter}</span>
+    const addonBeforeNode = addonBefore ? (
+      <span className={addonClassName}>{addonBefore}</span>
     ) : null;
+    const addonAfterNode = addonAfter ? <span className={addonClassName}>{addonAfter}</span> : null;
 
-    const className = classNames(`${prefixCls}-wrapper`, {
+    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, {
       [wrapperClassName]: addonBefore || addonAfter,
     });
 
-    const groupClassName = classNames(`${prefixCls}-group-wrapper`, {
-      [`${prefixCls}-group-wrapper-sm`]: props.size === 'small',
-      [`${prefixCls}-group-wrapper-lg`]: props.size === 'large',
+    const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, {
+      [`${prefixCls}-group-wrapper-sm`]: size === 'small',
+      [`${prefixCls}-group-wrapper-lg`]: size === 'large',
     });
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
     return (
-      <span className={groupClassName} style={props.style}>
-        <span className={className}>
-          {addonBefore}
+      <span className={mergedGroupClassName} style={style}>
+        <span className={mergedWrapperClassName}>
+          {addonBeforeNode}
           {React.cloneElement(children, { style: null })}
-          {addonAfter}
+          {addonAfterNode}
         </span>
       </span>
     );
@@ -251,7 +249,7 @@ class Input extends React.Component<InputProps, any> {
   }
 
   renderInput(prefixCls: string) {
-    const { className } = this.props;
+    const { className, addonBefore, addonAfter } = this.props;
     const { value } = this.state;
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(this.props, [
@@ -273,7 +271,9 @@ class Input extends React.Component<InputProps, any> {
         {...otherProps}
         value={fixControlledValue(value)}
         onChange={this.handleChange}
-        className={classNames(this.getInputClassName(prefixCls), className)}
+        className={classNames(this.getInputClassName(prefixCls), {
+          [className!]: className && !addonBefore && !addonAfter,
+        })}
         onKeyDown={this.handleKeyDown}
         ref={this.saveInput}
       />,

components/input/Search.tsx

@@ -41,76 +41,100 @@ export default class Search extends React.Component<SearchProps, any> {
     this.input = node;
   };
 
-  getButtonOrIcon(prefixCls: string) {
+  renderSuffix = (prefixCls: string) => {
+    const { suffix, enterButton } = this.props;
+    if (enterButton) return suffix;
+
+    const node = (
+      <Icon
+        className={`${prefixCls}-icon`}
+        type="search"
+        key="searchIcon"
+        onClick={this.onSearch}
+      />
+    );
+
+    if (suffix) {
+      let cloneSuffix = suffix;
+      if (React.isValidElement(cloneSuffix) && !cloneSuffix.key) {
+        cloneSuffix = React.cloneElement(cloneSuffix, {
+          key: 'originSuffix',
+        });
+      }
+      return [cloneSuffix, node];
+    }
+
+    return node;
+  };
+
+  renderAddonAfter = (prefixCls: string) => {
     const { enterButton, size, disabled } = this.props;
+    if (!enterButton) return null;
+    const btnClassName = `${prefixCls}-button`;
+
     const enterButtonAsElement = enterButton as React.ReactElement<any>;
-    let node;
-    if (!enterButton) {
-      node = <Icon className={`${prefixCls}-icon`} type="search" key="searchIcon" />;
-    } else if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
-      node = React.cloneElement(
-        enterButtonAsElement,
-        enterButtonAsElement.type === Button
+    if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
+      return React.cloneElement(enterButtonAsElement, {
+        onClick: this.onSearch,
+        ...(enterButtonAsElement.type === Button
           ? {
-              className: `${prefixCls}-button`,
+              className: btnClassName,
               size,
             }
-          : {},
-      );
-    } else {
-      node = (
-        <Button
-          className={`${prefixCls}-button`}
-          type="primary"
-          size={size}
-          disabled={disabled}
-          key="enterButton"
-        >
-          {enterButton === true ? <Icon type="search" /> : enterButton}
-        </Button>
-      );
+          : {}),
+      });
     }
-    return React.cloneElement(node, {
-      onClick: this.onSearch,
-    });
-  }
+
+    return (
+      <Button
+        className={btnClassName}
+        type="primary"
+        size={size}
+        disabled={disabled}
+        key="enterButton"
+        onClick={this.onSearch}
+      >
+        {enterButton === true ? <Icon type="search" /> : enterButton}
+      </Button>
+    );
+  };
 
   renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
       inputPrefixCls: customizeInputPrefixCls,
-      className,
       size,
-      suffix,
       enterButton,
-      ...others
+      className,
+      ...restProps
     } = this.props;
-    delete (others as any).onSearch;
+
+    delete (restProps as any).onSearch;
+
     const prefixCls = getPrefixCls('input-search', customizePrefixCls);
     const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
-    const buttonOrIcon = this.getButtonOrIcon(prefixCls);
-    let searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon;
-    if (Array.isArray(searchSuffix)) {
-      searchSuffix = (searchSuffix as React.ReactElement<any>[]).map((item, index) => {
-        if (!React.isValidElement(item) || item.key) {
-          return item;
-        }
-        return React.cloneElement(item, { key: index });
+
+    let inputClassName;
+
+    if (enterButton) {
+      inputClassName = classNames(prefixCls, className, {
+        [`${prefixCls}-enter-button`]: !!enterButton,
+        [`${prefixCls}-${size}`]: !!size,
       });
+    } else {
+      inputClassName = classNames(prefixCls, className);
     }
-    const inputClassName = classNames(prefixCls, className, {
-      [`${prefixCls}-enter-button`]: !!enterButton,
-      [`${prefixCls}-${size}`]: !!size,
-    });
+
     return (
       <Input
         onPressEnter={this.onSearch}
-        {...others}
+        {...restProps}
         size={size}
-        className={inputClassName}
         prefixCls={inputPrefixCls}
-        suffix={searchSuffix}
+        addonAfter={this.renderAddonAfter(prefixCls)}
+        suffix={this.renderSuffix(prefixCls)}
         ref={this.saveInput}
+        className={inputClassName}
       />
     );
   };

components/input/__tests__/__snapshots__/Search.test.js.snap

@@ -2,45 +2,53 @@
 
 exports[`Input.Search should support custom Button 1`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
 >
-  <input
-    class="ant-input"
-    type="text"
-    value=""
-  />
   <span
-    class="ant-input-suffix"
+    class="ant-input-wrapper ant-input-group"
   >
-    <button
-      class="ant-btn ant-input-search-button"
-      type="button"
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-group-addon"
     >
-      <span>
-        ok
-      </span>
-    </button>
+      <button
+        class="ant-btn ant-input-search-button"
+        type="button"
+      >
+        <span>
+          ok
+        </span>
+      </button>
+    </span>
   </span>
 </span>
 `;
 
 exports[`Input.Search should support custom button 1`] = `
 <span
-  class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
 >
-  <input
-    class="ant-input"
-    type="text"
-    value=""
-  />
   <span
-    class="ant-input-suffix"
+    class="ant-input-wrapper ant-input-group"
   >
-    <button
-      type="button"
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-group-addon"
     >
-      ok
-    </button>
+      <button
+        type="button"
+      >
+        ok
+      </button>
+    </span>
   </span>
 </span>
 `;

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

@@ -1029,64 +1029,72 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
   <br />
   <br />
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+    class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
   >
-    <input
-      class="ant-input"
-      placeholder="input search text"
-      type="text"
-      value=""
-    />
     <span
-      class="ant-input-suffix"
+      class="ant-input-wrapper ant-input-group"
     >
-      <button
-        class="ant-btn ant-input-search-button ant-btn-primary"
-        type="button"
+      <input
+        class="ant-input"
+        placeholder="input search text"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-group-addon"
       >
-        <i
-          aria-label="icon: search"
-          class="anticon anticon-search"
+        <button
+          class="ant-btn ant-input-search-button ant-btn-primary"
+          type="button"
         >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="search"
-            fill="currentColor"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          <i
+            aria-label="icon: search"
+            class="anticon anticon-search"
           >
-            <path
-              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-            />
-          </svg>
-        </i>
-      </button>
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="search"
+              fill="currentColor"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              />
+            </svg>
+          </i>
+        </button>
+      </span>
     </span>
   </span>
   <br />
   <br />
   <span
-    class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+    class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
   >
-    <input
-      class="ant-input ant-input-lg"
-      placeholder="input search text"
-      type="text"
-      value=""
-    />
     <span
-      class="ant-input-suffix"
+      class="ant-input-wrapper ant-input-group"
     >
-      <button
-        class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
-        type="button"
+      <input
+        class="ant-input ant-input-lg"
+        placeholder="input search text"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-group-addon"
       >
-        <span>
-          Search
-        </span>
-      </button>
+        <button
+          class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+          type="button"
+        >
+          <span>
+            Search
+          </span>
+        </button>
+      </span>
     </span>
   </span>
 </div>

components/input/__tests__/__snapshots__/index.test.js.snap

@@ -375,6 +375,7 @@ exports[`Input.Search should support suffix 1`] = `
 >
   <Consumer>
     <Input
+      addonAfter={null}
       className="ant-input-search"
       disabled={false}
       onPressEnter={[Function]}

components/input/demo/addon.md

 ---
 order: 2
 title:
-    zh-CN: 前置/后置标签
-    en-US: Pre / Post tab
+  zh-CN: 前置/后置标签
+  en-US: Pre / Post tab
 ---
 
 ## zh-CN

components/input/demo/size.md

 ---
 order: 1
 title:
-    zh-CN: 三种大小
-    en-US: Three sizes of Input
+  zh-CN: 三种大小
+  en-US: Three sizes of Input
 ---
 
 ## zh-CN

components/input/style/search-input.less

@@ -15,36 +15,14 @@
     }
   }
 
-  &:not(&-small) > .@{ant-prefix}-input-suffix {
-    right: @control-padding-horizontal;
-  }
-
-  > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    > .@{iconfont-css-prefix}-search {
-      font-size: @font-size-lg;
-    }
-  }
-
-  &.@{search-prefix}-enter-button {
-    display: table;
+  .@{ant-prefix}-input-group-addon {
+    border: 0;
+    padding: 0;
 
-    > * {
-      display: table-cell;
-    }
-
-    > .@{ant-prefix}-input {
-      .input;
+    .@{search-prefix}-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
       width: 100%;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
-    }
-
-    > .@{ant-prefix}-input-suffix {
-      position: static;
-      transform: none;
     }
   }
 }

components/menu/MenuItem.tsx

@@ -11,6 +11,7 @@ interface MenuItemProps {
   title?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
   onClick?: (param: ClickParam) => void;
   onMouseEnter?: (event: string, e: MouseEvent) => void;
   onMouseLeave?: (event: string, e: MouseEvent) => void;

components/menu/SubMenu.tsx

@@ -3,7 +3,15 @@ import * as PropTypes from 'prop-types';
 import { SubMenu as RcSubMenu } from 'rc-menu';
 import classNames from 'classnames';
 
-class SubMenu extends React.Component<any, any> {
+export interface SubMenuProps {
+  rootPrefixCls?: string;
+  className?: string;
+  disabled?: boolean;
+  title?: React.ReactNode;
+  onTitleClick?: (key: string, domEvent?: Event) => void;
+}
+
+class SubMenu extends React.Component<SubMenuProps, any> {
   static contextTypes = {
     antdMenuTheme: PropTypes.string,
   };

components/radio/__tests__/group.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 import Radio from '../radio';
 import RadioGroup from '../group';
+import RadioButton from '../radioButton';
 
 describe('Radio', () => {
   function createRadioGroup(props) {
@@ -99,6 +100,29 @@ describe('Radio', () => {
     expect(onChange.mock.calls.length).toBe(2);
   });
 
+  it('Trigger onChange when both of radioButton and radioGroup exists', () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      <RadioGroup onChange={onChange}>
+        <RadioButton value="A">A</RadioButton>
+        <RadioButton value="B">B</RadioButton>
+        <RadioButton value="C">C</RadioButton>
+      </RadioGroup>,
+    );
+    const radios = wrapper.find('input');
+
+    // uncontrolled component
+    wrapper.setState({ value: 'B' });
+    radios.at(0).simulate('change');
+    expect(onChange.mock.calls.length).toBe(1);
+
+    // controlled component
+    wrapper.setProps({ value: 'A' });
+    radios.at(1).simulate('change');
+    expect(onChange.mock.calls.length).toBe(2);
+  });
+
   it("won't fire change events when value not changes", () => {
     const onChange = jest.fn();
 

components/radio/radioButton.tsx

@@ -18,7 +18,6 @@ export default class RadioButton extends React.Component<RadioButtonProps, any>
     const { prefixCls: customizePrefixCls, ...radioProps }: RadioButtonProps = this.props;
     const prefixCls = getPrefixCls('radio-button', customizePrefixCls);
     if (this.context.radioGroup) {
-      radioProps.onChange = this.context.radioGroup.onChange;
       radioProps.checked = this.props.value === this.context.radioGroup.value;
       radioProps.disabled = this.props.disabled || this.context.radioGroup.disabled;
     }

components/spin/style/index.less

@@ -90,6 +90,7 @@
       height: 100%;
       width: 100%;
       z-index: 10;
+      display: ~'none \9\0';
     }
   }
 

components/table/style/index.less

@@ -563,6 +563,11 @@
     table {
       width: auto;
       min-width: 100%;
+
+      // https://github.com/ant-design/ant-design/issues/14545
+      .@{table-prefix-cls}-fixed-columns-in-body {
+        visibility: hidden;
+      }
     }
   }
 

components/table/style/size.less

@@ -74,7 +74,7 @@
         padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
       }
       > .@{table-prefix-cls}-thead > tr > th {
-        background-color: @component-background;
+        background-color: transparent;
         border-bottom: @border-width-base @border-style-base @border-color-split;
       }
       > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {

components/tabs/index.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
-import isFlexSupported from '../_util/isFlexSupported';
+import { isFlexSupported } from '../_util/styleChecker';
 
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -83,7 +83,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
   componentDidMount() {
     const NO_FLEX = ' no-flex';
     const tabNode = ReactDOM.findDOMNode(this) as Element;
-    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
+    if (tabNode && !isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) {
       tabNode.className += NO_FLEX;
     }
   }

components/tree-select/interface.tsx

@@ -34,7 +34,6 @@ export interface TreeSelectProps extends AbstractSelectProps {
   defaultValue?: string | number | Array<any>;
   dropdownStyle?: React.CSSProperties;
   filterTreeNode?: (inputValue: string, treeNode: any) => boolean | boolean;
-  getPopupContainer?: (triggerNode?: Element) => HTMLElement;
   labelInValue?: boolean;
   loadData?: (node: any) => void;
   maxTagCount?: number;

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

@@ -5,155 +5,116 @@ title: Getting Started
 
 Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> 8.0.0) correctly.
 
-> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
+> Before delving into Ant Design React, a good knowledge base of [React](https://reactjs.org) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
 
 ---
 
-## Playground
+## First Example
 
-The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug.
+There is the simplest example to show usage of Ant Design React.
 
-<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=12" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
-## First Local Development
+### 1. Create one codesandbox
 
-During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
+Visit http://u.ant.design/codesandbox-repro to create a codesandbox, don't forget to press save button.
 
-### 1. Installation
-
-[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [create-umi](https://github.com/umijs/create-umi) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation.
-
-```bash
-$ npm install antd-init -g
-```
-
-Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
-
-Also, you can try other scaffolds provided below:
-
-- [Ant Design Pro](http://pro.ant.design/)
-- [antd-admin](https://github.com/zuiidea/antd-admin)
-- [d2-admin](https://github.com/d2-projects/d2-admin)
-- more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
-
-### 2. Create a New Project
-
-A new project can be created using CLI tools.
-
-```bash
-$ mkdir antd-demo && cd antd-demo
-$ antd-init
-```
-
-`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
-
-### 3. Use antd's Components
-
-By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
-You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`.
+### 2. Using antd component
 
 Replace the content of `index.js` with the following code.
 As you can see, there is no difference between antd's components and usual React components.
 
 ```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleProvider, DatePicker, message } from 'antd';
-// The default locale is en-US, but we can change it to other language
-import frFR from 'antd/lib/locale-provider/fr_FR';
-import moment from 'moment';
-import 'moment/locale/fr';
-
-moment.locale('fr');
+import React from "react";
+import ReactDOM from "react-dom";
+import { DatePicker, message } from "antd";
+import "antd/dist/antd.css";
+import "./index.css";
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      date: '',
-    };
-  }
-  handleChange(date) {
-    message.info('Selected Date: ' + (date ? date.toString() : ''));
+  state = {
+    date: null,
+  };
+
+  handleChange = date => {
+    message.info(`Selected Date: ${date.format("YYYY-MM-DD")}`);
     this.setState({ date });
-  }
+  };
+
   render() {
+    const { date } = this.state;
     return (
-      <LocaleProvider locale={frFR}>
-        <div style={{ width: 400, margin: '100px auto' }}>
-          <DatePicker onChange={value => this.handleChange(value)} />
-          <div style={{ marginTop: 20 }}>Date: {this.state.date && this.state.date.toString()}</div>
+      <div style={{ width: 400, margin: "100px auto" }}>
+        <DatePicker onChange={this.handleChange} />
+        <div style={{ marginTop: 20 }}>
+          Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
         </div>
-      </LocaleProvider>
+      </div>
     );
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 ```
 
-> All the components in antd are listed in the sidebar.
+### 3. Explore in more components
 
-### 4. Development & Debugging
+You can look up compnents in side menu, find one like [Alert](/components/alert). Plenty of examples are provided in component page,
+API documentation too.
 
-Run your project and visit http://127.0.0.1:8000
+Click the corner icon at first example, there are source codes to use out of box. Now you are try import `Alert` in previous codesandbox:
 
-```bash
-$ npm start
+```diff
+- import { DatePicker, message } from 'antd';
++ import { DatePicker, message, Alert } from 'antd';
 ```
 
-### 5. Building & Deployment
+Add jsx part in `render` function.
 
-```bash
-$ npm run build
+```diff
+  <DatePicker onChange={value => this.handleChange(value)} />
+  <div style={{ marginTop: 20 }}>
+-   Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
++   <Alert message={`Selected Date: ${date ? date.format('YYYY-MM-DD') : 'None'}`} type="success" />
+  </div>
 ```
 
-Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
+Then you can see the result at preview section.
+
+<img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/QjCr7oLcpT/c7ce72d2-601e-4130-a33b-456d4652bb2d.png" alt="codesandbox screenshot" />
+
+OK! Now you know how to use antd components in a clear way, welcome to explore more usages in this codesandbox.
+We also strongly recommend to use codesandbox to provide a reproducible demo while reporting a bug.
+
+### 4. Next Step
 
-> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
-> But you can use those tools in your project, depending on your context and needs.
+In real world you gonna need a whole package of `compile/build/deploy/lint/debug` development workflow
+which you can read ariticles afterwards or try other scaffolds provided below:
+
+- [Ant Design Pro](http://pro.ant.design/)
+- [antd-admin](https://github.com/zuiidea/antd-admin)
+- [d2-admin](https://github.com/d2-projects/d2-admin)
+- more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
 
 ## Compatibility
 
 Ant Design React supports all the modern browsers and IE9+.
 
-You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
-
-If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
-
-> Please avoid using both the babel and shim methods at the same time.
-
-> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import  [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <!-- import stylesheet -->
-    <link rel="stylesheet" href="/index.css">
-    <!-- Polyfills -->
-    <!--[if lt IE 10]>
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-    <![endif]-->
-    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
-  </head>
-  <body>
-  </body>
-  <!-- import common dependencies -->
-  <script src="/common.js"></script>
-  <!-- import entry file -->
-  <script src="/index.js"></script>
-</html>
-```
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| --------- | --------- | --------- | --------- | --------- | --------- |
+| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-#### IE8 note
+We offset very limit support for IE9/10, some styles and animation would be mininal under them, also we are using Flex layout in few components.
 
-> We don't support IE8 after `antd@2.0`.
+> Note, different with Ant Design, Ant Design Pro support to IE11+.
+
+Polyfills are needed for IE browsers, we recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/).
+
+Ant Design 3.0 support both React 15 and 16 now though, we strongly suggest React 16 for better performance and few bugs.
 
-You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
+#### IE8 note
 
-> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
+> We don't support IE8 after `antd@2.0`.
 
 ## Customized Work Flow
 
@@ -165,7 +126,6 @@ If you are trying [parcel](https://parceljs.org), here is [a demo repository](ht
 
 There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute.
 
-
 ## Import on Demand
 
 If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance.
@@ -199,8 +159,3 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/
 
 - [Customize Theme](/docs/react/customize-theme)
 - [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
-
-## Tips
-
-- You can use any `npm` modules.
-- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.

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

@@ -5,55 +5,22 @@ title: 快速上手
 
 Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
-> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。
+> 在开始之前，推荐先学习 [React](http://reactjs.org) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。
 > 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。
 
 ---
 
-## 在线演示
+## 第一个例子
 
-最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
+这是一个最简单的 Ant Design 组件的在线演示。
 
-<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=12" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/wk04r016q8?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
-## 第一个本地实例
+### 1. 创建一个 codesandbox
 
-实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
-我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
+访问 http://u.ant.design/codesandbox-repro 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。
 
-### 1. 安装脚手架工具
-
-[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [create-umi](https://github.com/umijs/create-umi) 或 [create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建。
-
-```bash
-$ npm install antd-init -g
-```
-
-更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
-
-您也可以使用以下脚手架和范例：
-
-- [Ant Design Pro](http://pro.ant.design/)
-- [antd-admin](https://github.com/zuiidea/antd-admin)
-- [d2-admin](https://github.com/d2-projects/d2-admin)
-- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
-
-### 2. 创建一个项目
-
-使用命令行进行初始化。
-
-```bash
-$ mkdir antd-demo && cd antd-demo
-$ antd-init
-```
-
-antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
-
-若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
-
-### 3. 使用组件
-
-脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
+### 2. 使用组件
 
 直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
 
@@ -65,26 +32,29 @@ import { LocaleProvider, DatePicker, message } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import "antd/dist/antd.css";
+import "./index.css";
 
 moment.locale('zh-cn');
 
 class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      date: '',
-    };
-  }
-  handleChange(date) {
-    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
+  state = {
+    date: null,
+  };
+
+  handleChange = (date) => {
+    message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`);
     this.setState({ date });
   }
   render() {
+    const { date } = this.state;
     return (
       <LocaleProvider locale={zhCN}>
         <div style={{ width: 400, margin: '100px auto' }}>
-          <DatePicker onChange={value => this.handleChange(value)} />
-          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
+          <DatePicker onChange={this.handleChange} />
+          <div style={{ marginTop: 20 }}>
+            当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
+          </div>
         </div>
       </LocaleProvider>
     );
@@ -94,69 +64,63 @@ class App extends React.Component {
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-> 你可以在左侧菜单选用更多组件。
+### 3. 探索更多组件用法
 
-### 4. 开发调试
+你可以在左侧菜单查看组件列表，比如 [Alert](/components/alert-cn) 组件，组件文档中提供了各类演示，最下方有组件 API 文档可以查阅。
+在代码演示部分找到第一个例子，点击右下角的图标展开代码。
 
-一键启动调试，访问 http://127.0.0.1:8000 查看效果。
+然后依照演示代码的写法，在之前的 codesandbox 里修改 `index.js`，首先在 `import` 内引入 Alert 组件：
 
-```bash
-$ npm start
+```diff
+- import { LocaleProvider, DatePicker, message } from 'antd';
++ import { LocaleProvider, DatePicker, message, Alert } from 'antd';
 ```
 
-### 5. 构建和部署
+然后在 `render` 内添加相应的 jsx 代码：
 
-```bash
-$ npm run build
+```diff
+  <DatePicker onChange={value => this.handleChange(value)} />
+  <div style={{ marginTop: 20 }}>
+-   当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
++   <Alert message={`当前日期：${date ? date.format('YYYY-MM-DD') : '未选择'}`} type="success" />
+  </div>
 ```
 
-入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
+在右侧预览区就可以看到如图的效果。
+
+<img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/Up3%24VYhN0S/134614ee-7440-46f1-a797-fa6f6b3e300f.png" alt="codesandbox screenshot" />
+
+好的，现在你已经会使用基本的 antd 组件了，你可以在这个例子中继续探索其他组件的用法。
+如果你遇到组件的 bug，也推荐建一个可重现的 codesandbox 来报告 bug。
+
+### 4. 下一步
 
-> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
+实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例：
+
+- [Ant Design Pro](http://pro.ant.design/)
+- [antd-admin](https://github.com/zuiidea/antd-admin)
+- [d2-admin](https://github.com/d2-projects/d2-admin)
+- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
 
 ## 兼容性
 
 Ant Design React 支持所有的现代浏览器和 IE9+。
 
-对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
-
-如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
-
-> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题
-
-> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <!-- 引入样式 -->
-    <link rel="stylesheet" href="/index.css">
-    <!-- Polyfills -->
-    <!--[if lt IE 10]>
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-    <![endif]-->
-    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
-  </head>
-  <body>
-  </body>
-  <!-- 引入公用文件 -->
-  <script src="/common.js"></script>
-  <!-- 引入入口文件 -->
-  <script src="/index.js"></script>
-</html>
-```
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
+| --------- | --------- | --------- | --------- | --------- | --------- |
+| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-#### IE8 note
+我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。
 
-> `antd@2.0` 之后将不再支持 IE8。
+> 注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。
 
-IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
+对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。
 
-另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。
+Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。
 
-> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8
+#### IE8 note
+
+> `antd@2.0` 之后将不再支持 IE8。
 
 ## 自行构建
 
@@ -199,8 +163,3 @@ import { Button } from 'antd';
 
 - [改变主题](/docs/react/customize-theme)
 - [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
-
-## 小贴士
-
-- 你可以享用 `npm` 生态圈里的所有模块。
-- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。

docs/spec/download.en-US.md

@@ -79,15 +79,6 @@ Please find below some of the design resources and tools about Ant Design that w
       <span class="resource-card-description">A series prototypes that help creating application structure and user flow</span>
     </div>
   </a>
-  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
-    <div class="resource-card-icon">
-      <img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
-    </div>
-    <div class="resource-card-content">
-      <span class="resource-card-title">Web Font</span>
-      <span class="resource-card-description">Icon font package for your local reference</span>
-    </div>
-  </a>
   <a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
     <div class="resource-card-icon">
       <img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">

docs/spec/download.zh-CN.md

@@ -81,15 +81,6 @@ title: 设计资源
       <span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
     </div>
   </a>
-  <a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
-    <div class="resource-card-icon">
-      <img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
-    </div>
-    <div class="resource-card-content">
-      <span class="resource-card-title">Web Font</span>
-      <span class="resource-card-description">网络字体图标的本地文件包</span>
-    </div>
-  </a>
   <a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
     <div class="resource-card-icon">
       <img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">

docs/spec/stay.zh-CN.md

@@ -14,13 +14,13 @@ title: 足不出户
 
 ## 覆盖层
 
-<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>
+<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤销』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤销』。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png" good>
 
-<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤消』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
+<img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤销』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png" good>
 
 <img class="preview-img" align="right" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像『狼来了』一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" bad>
 
-二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
+二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤销』即可。
 
 <br>
 

site/theme/static/icons.less

@@ -28,7 +28,7 @@ ul.anticons-list {
       display: block;
       text-align: center;
       transform: scale(0.83);
-      font-family: 'Lucida Console', Consolas;
+      font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
       white-space: nowrap;
       .ant-badge {
         transition: color 0.3s ease-in-out;