Merge 4.0-prepare into fix-button-demo

.codesandbox/ci.json

@@ -0,0 +1,3 @@
+{
+  "sandboxes": ["wk04r016q8"]
+}

.github/workflows/deploy-site.yml

@@ -9,13 +9,20 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
+    - name: checkout
       uses: actions/checkout@master
 
-    - name: Deploy website
+    - name: install
-      uses: JamesIves/github-pages-deploy-action@master
+      run: npm install
+
+    - name: build
+      run: npm run predeploy
+
+    - name: deploy
+      uses: peaceiris/actions-gh-pages@v2.5.0
       env:
-        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        ACTIONS_DEPLOY_KEY: ${{ secrets.ACCESS_TOKEN }}
-        BRANCH: gh-pages
+        PUBLISH_BRANCH: gh-pages
-        FOLDER: _site
+        PUBLISH_DIR: ./_site
-        BUILD_SCRIPT: npm install && npm run predeploy
+      with:
+        emptyCommits: false

.github/workflows/test.yml

@@ -3,16 +3,217 @@ name: test
 on: [push]
 
 jobs:
-  build:
+  setup:
-
     runs-on: ubuntu-latest
 
     steps:
       - name: checkout
         uses: actions/checkout@master
 
+      - name: cache package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only
+
+      - name: hack for singe file
+        run: |
+          mkdir package-temp-dir
+          cp package-lock.json package-temp-dir
+
+      - name: cache node_modules
+        id: node_modules_cache_id
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
       - name: install
-        run: npm install
+        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: npm ci
+
+  compile:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: cache lib
+        uses: actions/cache@v1
+        with:
+          path: lib
+          key: lib-${{ github.sha }}
+
+      - name: cache es
+        uses: actions/cache@v1
+        with:
+          path: es
+          key: es-${{ github.sha }}
+
+      - name: compile
+        run: npm run compile
+
+      - name: check
+        run: node ./tests/dekko/lib.test.js
+
+    needs: setup
+
+  dist:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: dist
+        run: npm run dist
+
+      - name: check
+        run: node ./tests/dekko/dist.test.js
 
       - name: test
-        run: npm run test-all
+        run: npm test
+        env:
+          LIB_DIR: dist
+
+    needs: setup
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: lint
+        run: npm run lint
+
+    needs: setup
+
+  node:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: test
+        run: npm test
+
+    needs: setup
+
+  lib:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: restore cache from lib
+        uses: actions/cache@v1
+        with:
+          path: lib
+          key: lib-${{ github.sha }}
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: lib
+
+    needs: compile
+
+  es:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v1
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: restore cache from es
+        uses: actions/cache@v1
+        with:
+          path: es
+          key: es-${{ github.sha }}
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: es
+
+    needs: compile

CHANGELOG.en-US.md

@@ -15,6 +15,29 @@ timeline: true
 
 ---
 
+## 3.25.3
+
+`2019-11-24`
+
+- 🐞 Fix TimePicker disabled item style when focussed. [#19812](https://github.com/ant-design/ant-design/pull/19812) [@yoyo837](https://github.com/yoyo837)
+- 🐞 Fix Menu.Item link style inside Badge. [#19810](https://github.com/ant-design/ant-design/pull/19810)
+- 🐞 Fix Upload `picture-card` type, for crashed style when list item is removing. [#19783](https://github.com/ant-design/ant-design/pull/19783) [@qq645381995](https://github.com/qq645381995)
+- 🇳🇱 Update `sk-SK` locales. [#19787](https://github.com/ant-design/ant-design/pull/19787) [@Kamahl19](https://github.com/Kamahl19)
+- TypeScript
+  - ⚡️ Export interface types in Tooltip. [19846](https://github.com/ant-design/ant-design/pull/19846) [@kachkaev](https://github.com/kachkaev)
+
+## 3.25.2
+
+`2019-11-17`
+
+- 🐞 Fix Upload List do not have tooltip when upload failed. [#19689](https://github.com/ant-design/ant-design/pull/19689) [@qq645381995](https://github.com/qq645381995)
+- 💄 Fix Transfer search style to avoid text overlap with clear icon. [#19693](https://github.com/ant-design/ant-design/pull/19693) [@Abdullah700](https://github.com/Abdullah700)
+- 🇳🇱 Update `NL-nl` locales. [#19734](https://github.com/ant-design/ant-design/pull/19734) [@hoest](https://github.com/hoest)
+- TypeScript
+  - 🐞 Fix Table FilterDropdownProps definition. [#19701](https://github.com/ant-design/ant-design/pull/19701) [@DeanVanNiekerk](https://github.com/DeanVanNiekerk)
+  - 🛠 Slider add `reverse` definition. [#19713](https://github.com/ant-design/ant-design/pull/19713) [@jacklee814](https://github.com/jacklee814)
+  - 🐞 Update Table `filteredValue` definition. [#19722](https://github.com/ant-design/ant-design/pull/19722) [@andelf](https://github.com/andelf)
+
 ## 3.25.1
 
 `2019-11-10`

CHANGELOG.zh-CN.md

@@ -15,6 +15,29 @@ timeline: true
 
 ---
 
+## 3.25.3
+
+`2019-11-24`
+
+- 🐞 修复 TimePicker 禁用项 focus 时的样式问题。[#19812](https://github.com/ant-design/ant-design/pull/19812) [@yoyo837](https://github.com/yoyo837)
+- 🐞 修复 Menu.Item 链接在 Badge 内时，始终处于 active 状态的问题。[#19810](https://github.com/ant-design/ant-design/pull/19810)
+- 🐞 修复 Upload 类型为 `picture-card` 时，列表删除时的样式问题。[#19783](https://github.com/ant-design/ant-design/pull/19783) [@qq645381995](https://github.com/qq645381995)
+- 🇳🇱 更新 `sk-SK` 国际化。[#19787](https://github.com/ant-design/ant-design/pull/19787) [@Kamahl19](https://github.com/Kamahl19)
+- TypeScript
+  - ⚡️ 导出 Tooltip 类型定义。[19846](https://github.com/ant-design/ant-design/pull/19846) [@kachkaev](https://github.com/kachkaev)
+
+## 3.25.2
+
+`2019-11-17`
+
+- 🐞 修复 Upload List 上传错误时没有鼠标悬浮提示的问题。[#19689](https://github.com/ant-design/ant-design/pull/19689) [@qq645381995](https://github.com/qq645381995)
+- 💄 修复 Transfer 输入框内容会与清除按钮重叠的问题。[#19693](https://github.com/ant-design/ant-design/pull/19693) [@Abdullah700](https://github.com/Abdullah700)
+- 🇳🇱 更新 `NL-nl` 国际化。[#19734](https://github.com/ant-design/ant-design/pull/19734) [@hoest](https://github.com/hoest)
+- TypeScript
+  - 🐞 修复 Table FilterDropdownProps 定义。[#19701](https://github.com/ant-design/ant-design/pull/19701) [@DeanVanNiekerk](https://github.com/DeanVanNiekerk)
+  - 🛠 Slider 添加 `reverse` 定义。[#19713](https://github.com/ant-design/ant-design/pull/19713) [@jacklee814](https://github.com/jacklee814)
+  - 🐞 更新 Table `filteredValue` 定义。[#19722](https://github.com/ant-design/ant-design/pull/19722) [@andelf](https://github.com/andelf)
+
 ## 3.25.1
 
 `2019-11-10`

README.md

@@ -10,7 +10,7 @@
 
 An enterprise-class UI design language and React UI library.
 
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/Node%20CI/badge.svg) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![](https://badgen.net/npm/v/antd/next)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) ![CI Status](https://github.com/ant-design/ant-design/workflows/test/badge.svg) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![](https://flat.badgen.net/npm/v/antd?icon=npm)](https://www.npmjs.com/package/antd) [![](https://badgen.net/npm/v/antd/next)](https://www.npmjs.com/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
 
 [![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 

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

@@ -31,7 +31,6 @@ Array [
   "InputNumber",
   "Layout",
   "List",
-  "LocaleProvider",
   "message",
   "Menu",
   "Mentions",
@@ -63,7 +62,6 @@ Array [
   "Timeline",
   "Tooltip",
   "Typography",
-  "Mention",
   "Upload",
   "version",
 ]

components/alert/demo/custom-icon.md

@@ -16,9 +16,9 @@ A relevant icon makes information clearer and more friendly.
 
 ```jsx
 import { Alert } from 'antd';
-import { Smile } from '@ant-design/icons';
+import { SmileOutlined } from '@ant-design/icons';
 
-const icon = <Smile />;
+const icon = <SmileOutlined />;
 
 ReactDOM.render(
   <div>

components/alert/index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
-  Close,
+  CloseOutlined,
-  CheckCircle,
+  CheckCircleOutlined,
-  ExclamationCircle,
+  ExclamationCircleOutlined,
-  InfoCircle,
+  InfoCircleOutlined,
-  CloseCircle,
+  CloseCircleOutlined,
   CheckCircleFilled,
   ExclamationCircleFilled,
   InfoCircleFilled,
@@ -58,10 +58,10 @@ const iconMapFilled = {
 };
 
 const iconMapOutlined = {
-  success: CheckCircle,
+  success: CheckCircleOutlined,
-  info: InfoCircle,
+  info: InfoCircleOutlined,
-  error: CloseCircle,
+  error: CloseCircleOutlined,
-  warning: ExclamationCircle,
+  warning: ExclamationCircleOutlined,
 };
 
 export default class Alert extends React.Component<AlertProps, AlertState> {
@@ -141,7 +141,11 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
         className={`${prefixCls}-close-icon`}
         tabIndex={0}
       >
-        {closeText ? <span className={`${prefixCls}-close-text`}>{closeText}</span> : <Close />}
+        {closeText ? (
+          <span className={`${prefixCls}-close-text`}>{closeText}</span>
+        ) : (
+          <CloseOutlined />
+        )}
       </button>
     ) : null;
 

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

@@ -15,7 +15,7 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
 
 ```tsx
 import { Input, AutoComplete } from 'antd';
-import { Search, User } from '@ant-design/icons';
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
 
 const { Option, OptGroup } = AutoComplete;
 
@@ -42,7 +42,7 @@ function renderItem(title: string, count: number) {
       <>
         {title}
         <span className="certain-search-item-count">
-          <User /> {count}
+          <UserOutlined /> {count}
         </span>
       </>
     ),
@@ -76,7 +76,7 @@ function Complete() {
       >
         <Input
           size="large"
-          suffix={<Search className="certain-category-icon" />}
+          suffix={<SearchOutlined className="certain-category-icon" />}
           placeholder="input here"
         />
       </AutoComplete>

components/auto-complete/demo/form-debug.md

@@ -8,7 +8,7 @@ debug: true
 
 ```jsx
 import { Input, AutoComplete, Form, TreeSelect } from 'antd';
-import { Search } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 
 const formItemLayout = {
   labelCol: {
@@ -37,14 +37,14 @@ ReactDOM.render(
     </Form.Item>
     <Form.Item label="包含 search 图标正常" {...formItemLayout}>
       <AutoComplete>
-        <Input suffix={<Search />} />
+        <Input suffix={<SearchOutlined />} />
       </AutoComplete>
     </Form.Item>
     <Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
       <Input.Group compact>
         <TreeSelect style={{ width: '30%' }} />
         <AutoComplete>
-          <Input suffix={<Search />} />
+          <Input suffix={<SearchOutlined />} />
         </AutoComplete>
       </Input.Group>
     </Form.Item>

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

@@ -15,7 +15,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
 
 ```jsx
 import { Button, Input, AutoComplete } from 'antd';
-import { Search } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 
 function onSelect(value) {
   console.log('onSelect', value);
@@ -82,7 +82,7 @@ class Complete extends React.Component {
                 size="large"
                 type="primary"
               >
-                <Search />
+                <SearchOutlined />
               </Button>
             }
             size="large"

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

@@ -45,8 +45,8 @@ When there is a need for autocomplete functionality.
 
 ## FAQ
 
-### Why text composition system not works well with onSearch in controlled mode?
+### Why doesn't the text composition system work well with onSearch in controlled mode?
 
-Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, click on the option also not trigger the `onSearch` event.
+Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.
 
 Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)

components/avatar/demo/badge.md

@@ -15,18 +15,18 @@ Usually used for reminders and notifications.
 
 ```jsx
 import { Avatar, Badge } from 'antd';
-import { User } from '@ant-design/icons';
+import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
     <span style={{ marginRight: 24 }}>
       <Badge count={1}>
-        <Avatar shape="square" icon={<User />} />
+        <Avatar shape="square" icon={<UserOutlined />} />
       </Badge>
     </span>
     <span>
       <Badge dot>
-        <Avatar shape="square" icon={<User />} />
+        <Avatar shape="square" icon={<UserOutlined />} />
       </Badge>
     </span>
   </div>,

components/avatar/demo/basic.md

@@ -15,21 +15,21 @@ Three sizes and two shapes are available.
 
 ```jsx
 import { Avatar } from 'antd';
-import { User } from '@ant-design/icons';
+import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
     <div>
-      <Avatar size={64} icon={<User />} />
+      <Avatar size={64} icon={<UserOutlined />} />
-      <Avatar size="large" icon={<User />} />
+      <Avatar size="large" icon={<UserOutlined />} />
-      <Avatar icon={<User />} />
+      <Avatar icon={<UserOutlined />} />
-      <Avatar size="small" icon={<User />} />
+      <Avatar size="small" icon={<UserOutlined />} />
     </div>
     <div>
-      <Avatar shape="square" size={64} icon={<User />} />
+      <Avatar shape="square" size={64} icon={<UserOutlined />} />
-      <Avatar shape="square" size="large" icon={<User />} />
+      <Avatar shape="square" size="large" icon={<UserOutlined />} />
-      <Avatar shape="square" icon={<User />} />
+      <Avatar shape="square" icon={<UserOutlined />} />
-      <Avatar shape="square" size="small" icon={<User />} />
+      <Avatar shape="square" size="small" icon={<UserOutlined />} />
     </div>
   </div>,
   mountNode,

components/avatar/demo/type.md

@@ -15,16 +15,16 @@ Image, Icon and letter are supported, and the latter two kinds of avatar can hav
 
 ```jsx
 import { Avatar } from 'antd';
-import { User } from '@ant-design/icons';
+import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
-    <Avatar icon={<User />} />
+    <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
     <Avatar>USER</Avatar>
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
-    <Avatar style={{ backgroundColor: '#87d068' }} icon={<User />} />
+    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
   </div>,
   mountNode,
 );

components/badge/demo/basic.md

@@ -15,7 +15,7 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 
 ```jsx
 import { Badge } from 'antd';
-import { ClockCircle } from '@ant-design/icons';
+import { ClockCircleOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
@@ -25,7 +25,7 @@ ReactDOM.render(
     <Badge count={0} showZero>
       <a href="#" className="head-example" />
     </Badge>
-    <Badge count={<ClockCircle style={{ color: '#f5222d' }} />}>
+    <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
       <a href="#" className="head-example" />
     </Badge>
   </div>,

components/badge/demo/change.md

@@ -15,7 +15,7 @@ The count will be animated as it changes.
 
 ```jsx
 import { Badge, Button, Switch } from 'antd';
-import { Minus, Plus } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
@@ -51,10 +51,10 @@ class Demo extends React.Component {
           </Badge>
           <ButtonGroup>
             <Button onClick={this.decline}>
-              <Minus />
+              <MinusOutlined />
             </Button>
             <Button onClick={this.increase}>
-              <Plus />
+              <PlusOutlined />
             </Button>
           </ButtonGroup>
         </div>

components/badge/demo/dot.md

@@ -15,15 +15,15 @@ This will simply display a red badge, without a specific count. If count equals
 
 ```jsx
 import { Badge } from 'antd';
-import { Notification as IconNotification } from '@ant-design/icons';
+import { NotificationOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
     <Badge dot>
-      <IconNotification />
+      <NotificationOutlined />
     </Badge>
     <Badge count={0} dot>
-      <IconNotification />
+      <NotificationOutlined />
     </Badge>
     <Badge dot>
       <a href="#">Link something</a>

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import omit from 'omit.js';
 
 import DropDown, { DropDownProps } from '../dropdown/dropdown';
@@ -71,7 +71,7 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
         <DropDown overlay={overlay} placement="bottomCenter">
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
-            <Down />
+            <DownOutlined />
           </span>
         </DropDown>
       );

components/breadcrumb/demo/withIcon.md

@@ -15,15 +15,15 @@ The icon should be placed in front of the text.
 
 ```jsx
 import { Breadcrumb } from 'antd';
-import { Home, User } from '@ant-design/icons';
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <Breadcrumb>
     <Breadcrumb.Item href="">
-      <Home />
+      <HomeOutlined />
     </Breadcrumb.Item>
     <Breadcrumb.Item href="">
-      <User />
+      <UserOutlined />
       <span>Application List</span>
     </Breadcrumb.Item>
     <Breadcrumb.Item>Application</Breadcrumb.Item>

components/button/__tests__/index.test.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { render, mount } from 'enzyme';
 import renderer from 'react-test-renderer';
-import { Search } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import Button from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import { sleep } from '../../../tests/utils';
@@ -27,22 +27,22 @@ describe('Button', () => {
     const wrapper = render(<Button>按钮</Button>);
     expect(wrapper).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper1 = render(<Button icon={<Search />}>按钮</Button>);
+    const wrapper1 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
     expect(wrapper1).toMatchSnapshot();
     // should not insert space when there is icon
     const wrapper2 = render(
       <Button>
-        <Search />
+        <SearchOutlined />
         按钮
       </Button>,
     );
     expect(wrapper2).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper3 = render(<Button icon={<Search />}>按钮</Button>);
+    const wrapper3 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
     expect(wrapper3).toMatchSnapshot();
     // should not insert space when there is icon while loading
     const wrapper4 = render(
-      <Button icon={<Search />} loading>
+      <Button icon={<SearchOutlined />} loading>
         按钮
       </Button>,
     );

components/button/button.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Loading } from '@ant-design/icons';
+import { LoadingOutlined } from '@ant-design/icons';
 import { polyfill } from 'react-lifecycles-compat';
 import omit from 'omit.js';
 
@@ -262,7 +262,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
       [`${prefixCls}-dangerous`]: !!danger,
     });
 
-    const iconNode = loading ? <Loading /> : icon || null;
+    const iconNode = loading ? <LoadingOutlined /> : icon || null;
     const kids =
       children || children === 0
         ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)

components/button/demo/button-group.md

@@ -0,0 +1,81 @@
+---
+order: 6
+title:
+  zh-CN: 按钮组合
+  en-US: Button Group
+---
+
+## zh-CN
+
+可以将多个 `Button` 放入 `Button.Group` 的容器中。
+
+通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
+
+## en-US
+
+Buttons can be grouped by placing multiple `Button` components into a `Button.Group`.
+
+The `size` can be set to `large`, `small` or left unset resulting in a default size.
+
+```jsx
+import { Button } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+
+const ButtonGroup = Button.Group;
+
+ReactDOM.render(
+  <div>
+    <h4>Basic</h4>
+    <ButtonGroup>
+      <Button>Cancel</Button>
+      <Button>OK</Button>
+    </ButtonGroup>
+    <ButtonGroup>
+      <Button disabled>L</Button>
+      <Button disabled>M</Button>
+      <Button disabled>R</Button>
+    </ButtonGroup>
+    <ButtonGroup>
+      <Button>L</Button>
+      <Button>M</Button>
+      <Button>R</Button>
+    </ButtonGroup>
+
+    <h4>With Icon</h4>
+    <ButtonGroup>
+      <Button type="primary">
+        <LeftOutlined />
+        Go back
+      </Button>
+      <Button type="primary">
+        Go forward
+        <RightOutlined />
+      </Button>
+    </ButtonGroup>
+    <ButtonGroup>
+      <Button type="primary" icon="cloud" />
+      <Button type="primary" icon="cloud-download" />
+    </ButtonGroup>
+    <ButtonGroup>
+      <Button type="primary" size="small" icon="cloud" />
+      <Button type="primary" size="small" icon="cloud-download" />
+    </ButtonGroup>
+  </div>,
+  mountNode,
+);
+```
+
+<style>
+#components-button-demo-button-group h4 {
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 1;
+  font-weight: normal;
+}
+#components-button-demo-button-group h4:first-child {
+  margin-top: 0;
+}
+#components-button-demo-button-group .ant-btn-group {
+  margin-right: 8px;
+}
+</style>

components/button/demo/icon.md

@@ -19,32 +19,32 @@ If you want specific control over the positioning and placement of the `Icon`, t
 
 ```jsx
 import { Button, Tooltip } from 'antd';
-import { Search as IconSearch } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
     <Tooltip title="search">
-      <Button type="primary" shape="circle" icon={<IconSearch />} />
+      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
     </Tooltip>
     <Button type="primary" shape="circle">
       A
     </Button>
-    <Button type="primary" icon={<IconSearch />}>
+    <Button type="primary" icon={<SearchOutlined />}>
       Search
     </Button>
     <Tooltip title="search">
-      <Button shape="circle" icon={<IconSearch />} />
+      <Button shape="circle" icon={<SearchOutlined />} />
     </Tooltip>
-    <Button icon={<IconSearch />}>Search</Button>
+    <Button icon={<SearchOutlined />}>Search</Button>
     <br />
     <Tooltip title="search">
-      <Button shape="circle" icon={<IconSearch />} />
+      <Button shape="circle" icon={<SearchOutlined />} />
     </Tooltip>
-    <Button icon={<IconSearch />}>Search</Button>
+    <Button icon={<SearchOutlined />}>Search</Button>
     <Tooltip title="search">
-      <Button type="dashed" shape="circle" icon={<IconSearch />} />
+      <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
     </Tooltip>
-    <Button type="dashed" icon={<IconSearch />}>
+    <Button type="dashed" icon={<SearchOutlined />}>
       Search
     </Button>
   </div>,

components/button/demo/multiple.md

@@ -15,7 +15,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 
 ```jsx
 import { Button, Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 function handleMenuClick(e) {
   console.log('click', e);
@@ -35,7 +35,7 @@ ReactDOM.render(
     <Button>secondary</Button>
     <Dropdown overlay={menu}>
       <Button>
-        Actions <Down />
+        Actions <DownOutlined />
       </Button>
     </Dropdown>
   </div>,

components/button/demo/size.md

@@ -19,7 +19,7 @@ If a large or small button is desired, set the `size` property to either `large`
 
 ```jsx
 import { Button, Radio } from 'antd';
-import { Download } from '@ant-design/icons';
+import { DownloadOutlined } from '@ant-design/icons';
 
 class ButtonSize extends React.Component {
   state = {
@@ -62,13 +62,13 @@ class ButtonSize extends React.Component {
           Link
         </Button>
         <br />
-        <Button type="primary" icon={<Download />} size={size} />
+        <Button type="primary" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="circle" icon={<Download />} size={size} />
+        <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="round" icon={<Download />} size={size} />
+        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
-        <Button type="primary" shape="round" icon={<Download />} size={size}>
+        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
           Download
         </Button>
-        <Button type="primary" icon={<Download />} size={size}>
+        <Button type="primary" icon={<DownloadOutlined />} size={size}>
           Download
         </Button>
       </div>

components/card/demo/loading.md

@@ -15,7 +15,7 @@ Shows a loading indicator while the contents of the card is being fetched.
 
 ```jsx
 import { Skeleton, Switch, Card, Avatar } from 'antd';
-import { Edit, Ellipsis, Setting } from '@ant-design/icons';
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
 
 const { Meta } = Card;
 
@@ -47,7 +47,11 @@ class App extends React.Component {
 
         <Card
           style={{ width: 300, marginTop: 16 }}
-          actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
+          actions={[
+            <SettingOutlined key="setting" />,
+            <EditOutlined key="edit" />,
+            <EllipsisOutlined key="ellipsis" />,
+          ]}
         >
           <Skeleton loading={loading} avatar active>
             <Meta

components/card/demo/meta.md

@@ -15,7 +15,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
 
 ```jsx
 import { Card, Avatar } from 'antd';
-import { Edit, Ellipsis, Setting } from '@ant-design/icons';
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
 
 const { Meta } = Card;
 
@@ -28,7 +28,11 @@ ReactDOM.render(
         src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
       />
     }
-    actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
+    actions={[
+      <SettingOutlined key="setting" />,
+      <EditOutlined key="edit" />,
+      <EllipsisOutlined key="ellipsis" />,
+    ]}
   >
     <Meta
       avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}

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

@@ -821,7 +821,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                       "width": 0,
                     }
                   }
-                  expandIcon={<Right />}
+                  expandIcon={<RightOutlined />}
                   expandTrigger="click"
                   fieldNames={
                     Object {
@@ -834,7 +834,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                     <span
                       className="ant-cascader-menu-item-loading-icon"
                     >
-                      <Redo
+                      <RedoOutlined
                         spin={true}
                       />
                     </span>
@@ -1220,7 +1220,7 @@ exports[`Cascader should render not found content 1`] = `
                       "width": 0,
                     }
                   }
-                  expandIcon={<Right />}
+                  expandIcon={<RightOutlined />}
                   expandTrigger="click"
                   fieldNames={
                     Object {
@@ -1233,7 +1233,7 @@ exports[`Cascader should render not found content 1`] = `
                     <span
                       className="ant-cascader-menu-item-loading-icon"
                     >
-                      <Redo
+                      <RedoOutlined
                         spin={true}
                       />
                     </span>
@@ -1542,7 +1542,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                       "width": 0,
                     }
                   }
-                  expandIcon={<Right />}
+                  expandIcon={<RightOutlined />}
                   expandTrigger="click"
                   fieldNames={
                     Object {
@@ -1555,7 +1555,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                     <span
                       className="ant-cascader-menu-item-loading-icon"
                     >
-                      <Redo
+                      <RedoOutlined
                         spin={true}
                       />
                     </span>

components/cascader/demo/suffix.md

@@ -16,7 +16,7 @@ Cascade selection box for selecting province/city/district.
 
 ```jsx
 import { Cascader } from 'antd';
-import { Smile } from '@ant-design/icons';
+import { SmileOutlined } from '@ant-design/icons';
 
 const options = [
   {
@@ -60,7 +60,7 @@ function onChange(value) {
 ReactDOM.render(
   <div>
     <Cascader
-      suffixIcon={<Smile />}
+      suffixIcon={<SmileOutlined />}
       options={options}
       onChange={onChange}
       placeholder="Please select"

components/cascader/index.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { polyfill } from 'react-lifecycles-compat';
-import { CloseCircleFilled, Down, Right, Redo } from '@ant-design/icons';
+import { CloseCircleFilled, DownOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons';
 
 import Input from '../input';
 import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
@@ -534,7 +534,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         })
       ) : (
         <span className={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>
-      ))) || <Down className={arrowCls} />;
+      ))) || <DownOutlined className={arrowCls} />;
 
     const input = children || (
       <span style={style} className={pickerCls}>
@@ -560,11 +560,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
       </span>
     );
 
-    const expandIcon = <Right />;
+    const expandIcon = <RightOutlined />;
 
     const loadingIcon = (
       <span className={`${prefixCls}-menu-item-loading-icon`}>
-        <Redo spin />
+        <RedoOutlined spin />
       </span>
     );
 

components/collapse/Collapse.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
-import { Right } from '@ant-design/icons';
+import { RightOutlined } from '@ant-design/icons';
 
 import CollapsePanel from './CollapsePanel';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -49,7 +49,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
     const icon = (expandIcon ? (
       expandIcon(panelProps)
     ) : (
-      <Right rotate={panelProps.isActive ? 90 : undefined} />
+      <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
     )) as React.ReactNode;
 
     return React.isValidElement(icon)

components/collapse/demo/custom.md

@@ -15,7 +15,7 @@ Customize the background, border, margin styles and icon for each panel.
 
 ```jsx
 import { Collapse } from 'antd';
-import { CaretRight } from '@ant-design/icons';
+import { CaretRightOutlined } from '@ant-design/icons';
 
 const { Panel } = Collapse;
 
@@ -37,7 +37,7 @@ ReactDOM.render(
   <Collapse
     bordered={false}
     defaultActiveKey={['1']}
-    expandIcon={({ isActive }) => <CaretRight rotate={isActive ? 90 : 0} />}
+    expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
   >
     <Panel header="This is panel header 1" key="1" style={customPanelStyle}>
       <p>{text}</p>

components/collapse/demo/extra.md

@@ -15,7 +15,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
 
 ```jsx
 import { Collapse, Select } from 'antd';
-import { Setting } from '@ant-design/icons';
+import { SettingOutlined } from '@ant-design/icons';
 
 const { Panel } = Collapse;
 const { Option } = Select;
@@ -31,7 +31,7 @@ const text = `
 `;
 
 const genExtra = () => (
-  <Setting
+  <SettingOutlined
     onClick={event => {
       // If you don't want click extra trigger collapse, you can prevent this:
       event.stopPropagation();

components/comment/demo/basic.md

@@ -16,7 +16,7 @@ A basic comment with author, avatar, time and actions.
 ```jsx
 import { Comment, Tooltip, Avatar } from 'antd';
 import moment from 'moment';
-import { Dislike, Like, DislikeFilled, LikeFilled } from '@ant-design/icons';
+import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 
 class App extends React.Component {
   state = {
@@ -47,7 +47,7 @@ class App extends React.Component {
     const actions = [
       <span key="comment-basic-like">
         <Tooltip title="Like">
-          {React.createElement(action === 'liked' ? LikeFilled : Like, {
+          {React.createElement(action === 'liked' ? LikeFilled : LikeOutlined, {
             onClick: this.like,
           })}
         </Tooltip>
@@ -55,7 +55,7 @@ class App extends React.Component {
       </span>,
       <span key=' key="comment-basic-dislike"'>
         <Tooltip title="Dislike">
-          {React.createElement(action === 'liked' ? DislikeFilled : Dislike, {
+          {React.createElement(action === 'liked' ? DislikeFilled : DislikeOutlined, {
             onClick: this.dislike,
           })}
         </Tooltip>

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -7758,180 +7758,6 @@ exports[`ConfigProvider components List prefixCls 1`] = `
 </div>
 `;
 
-exports[`ConfigProvider components Mention configProvider 1`] = `
-<div
-  class="config-mention-wrapper"
->
-  <div
-    class="config-mention-editor oneline"
-  >
-    <div
-      class="config-mention-toolbar"
-    />
-    <div
-      class="config-mention-editor-wrapper"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ConfigProvider components Mention normal 1`] = `
-<div
-  class="ant-mention-wrapper"
->
-  <div
-    class="ant-mention-editor oneline"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ConfigProvider components Mention prefixCls 1`] = `
-<div
-  class="prefix-Mention-wrapper"
->
-  <div
-    class="prefix-Mention-editor oneline"
-  >
-    <div
-      class="prefix-Mention-toolbar"
-    />
-    <div
-      class="prefix-Mention-editor-wrapper"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`ConfigProvider components Menu configProvider 1`] = `
 <ul
   class="config-menu config-menu-light config-menu-root config-menu-inline"
@@ -17923,7 +17749,9 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
   <div
     class="config-upload-list config-upload-list-text"
   >
-    <div>
+    <div
+      class=""
+    >
       <span>
         <div
           class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
@@ -18035,7 +17863,9 @@ exports[`ConfigProvider components Upload normal 1`] = `
   <div
     class="ant-upload-list ant-upload-list-text"
   >
-    <div>
+    <div
+      class=""
+    >
       <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
@@ -18147,7 +17977,9 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
   <div
     class="ant-upload-list ant-upload-list-text"
   >
-    <div>
+    <div
+      class=""
+    >
       <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"

components/config-provider/__tests__/components.test.js

@@ -27,7 +27,6 @@ import Input from '../../input';
 import InputNumber from '../../input-number';
 import Layout from '../../layout';
 import List from '../../list';
-import Mention from '../../mention';
 import Menu from '../../menu';
 import Modal from '../../modal';
 import Pagination from '../../pagination';
@@ -341,9 +340,6 @@ describe('ConfigProvider', () => {
       />
     ));
 
-    // Mention
-    testPair('Mention', props => <Mention {...props} />);
-
     // Menu
     testPair('Menu', props => (
       <Menu {...props} defaultOpenKeys={['bamboo']} mode="inline">

components/config-provider/index.en-US.md

@@ -9,7 +9,7 @@ title: ConfigProvider
 
 ## Usage
 
-This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html), In the render tree all components will have access to the provided config.
+This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.
 
 ```jsx
 import { ConfigProvider } from 'antd';
@@ -25,7 +25,7 @@ return (
 
 ### Content Security Policy
 
-Some component use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
+Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:
 
 ```jsx
 <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
@@ -48,6 +48,6 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
 
 ## FAQ
 
-#### Locale problem is still existed in DatePicker even ConfigProvider `locale` is used?
+#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?
 
-Please make sure you set moment locale by `moment.locale('zh-cn')`, or you don't have two moment of different version.
+Please make sure you set moment locale by `moment.locale('zh-cn')` or that you don't have two different versions of moment.

components/date-picker/InputIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Calendar } from '@ant-design/icons';
+import { CalendarOutlined } from '@ant-design/icons';
 
 export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCls: string }) {
   const { suffixIcon, prefixCls } = props;
@@ -15,6 +15,6 @@ export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCl
         })
       ) : (
         <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
-      ))) || <Calendar className={`${prefixCls}-picker-icon`} />
+      ))) || <CalendarOutlined className={`${prefixCls}-picker-icon`} />
   );
 }

components/date-picker/createPicker.tsx

@@ -5,7 +5,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import { CloseCircleFilled, Calendar } from '@ant-design/icons';
+import { CloseCircleFilled, CalendarOutlined } from '@ant-design/icons';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
@@ -218,7 +218,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
           })
         ) : (
           <span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
-        ))) || <Calendar className={`${prefixCls}-picker-icon`} />;
+        ))) || <CalendarOutlined className={`${prefixCls}-picker-icon`} />;
 
       const dataOrAriaProps = getDataOrAriaProps(props);
       const input = ({ value: inputValue }: { value: moment.Moment | null }) => (

components/date-picker/demo/suffix.md

@@ -16,9 +16,9 @@ Basic use case. Users can select or input a date in panel.
 
 ```jsx
 import { DatePicker } from 'antd';
-import { Smile } from '@ant-design/icons';
+import { SmileOutlined } from '@ant-design/icons';
 
-const smileIcon = <Smile />;
+const smileIcon = <SmileOutlined />;
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 function onChange(date, dateString) {

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

@@ -15,7 +15,7 @@ Use a form in Drawer with a submit button.
 
 ```jsx
 import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
-import { Plus } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
@@ -38,13 +38,14 @@ class DrawerForm extends React.Component {
     return (
       <div>
         <Button type="primary" onClick={this.showDrawer}>
-          <Plus /> New account
+          <PlusOutlined /> New account
         </Button>
         <Drawer
           title="Create a new account"
           width={720}
           onClose={this.onClose}
           visible={this.state.visible}
+          bodyStyle={{ paddingBottom: 80 }}
         >
           <Form layout="vertical" hideRequiredMark>
             <Row gutter={16}>
@@ -144,7 +145,7 @@ class DrawerForm extends React.Component {
           <div
             style={{
               position: 'absolute',
-              left: 0,
+              right: 0,
               bottom: 0,
               width: '100%',
               borderTop: '1px solid #e9e9e9',

components/drawer/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RcDrawer from 'rc-drawer';
 import createReactContext from '@ant-design/create-react-context';
-import { Close } from '@ant-design/icons';
+import { CloseOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import omit from 'omit.js';
 
@@ -167,7 +167,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
       closable && (
         // eslint-disable-next-line react/button-has-type
         <button onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
-          <Close />
+          <CloseOutlined />
         </button>
       )
     );

components/drawer/style/drawer.less

@@ -197,6 +197,10 @@
     line-height: @line-height-base;
     word-wrap: break-word;
   }
+  &-wrapper-body {
+    height: 100%;
+    overflow: auto;
+  }
 
   &-mask {
     position: absolute;

components/dropdown/demo/basic.md

@@ -15,7 +15,7 @@ The most basic dropdown menu.
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 const menu = (
   <Menu>
@@ -40,7 +40,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      Hover me <Down />
+      Hover me <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/demo/dropdown-button.md

@@ -15,7 +15,7 @@ A button is on the left, and a related functional menu is on the right. You can
 
 ```jsx
 import { Menu, Dropdown, Button, message } from 'antd';
-import { Down, User } from '@ant-design/icons';
+import { DownOutlined, UserOutlined } from '@ant-design/icons';
 
 function handleButtonClick(e) {
   message.info('Click on left button.');
@@ -30,15 +30,15 @@ function handleMenuClick(e) {
 const menu = (
   <Menu onClick={handleMenuClick}>
     <Menu.Item key="1">
-      <User />
+      <UserOutlined />
       1st menu item
     </Menu.Item>
     <Menu.Item key="2">
-      <User />
+      <UserOutlined />
       2nd menu item
     </Menu.Item>
     <Menu.Item key="3">
-      <User />
+      <UserOutlined />
       3rd item
     </Menu.Item>
   </Menu>
@@ -49,7 +49,7 @@ ReactDOM.render(
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
     </Dropdown.Button>
-    <Dropdown.Button overlay={menu} icon={<User />}>
+    <Dropdown.Button overlay={menu} icon={<UserOutlined />}>
       Dropdown
     </Dropdown.Button>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
@@ -57,7 +57,7 @@ ReactDOM.render(
     </Dropdown.Button>
     <Dropdown overlay={menu}>
       <Button>
-        Button <Down />
+        Button <DownOutlined />
       </Button>
     </Dropdown>
   </div>,

components/dropdown/demo/event.md

@@ -15,7 +15,7 @@ An event will be triggered when you click menu items, in which you can make diff
 
 ```jsx
 import { Menu, Dropdown, message } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 const onClick = ({ key }) => {
   message.info(`Click on item ${key}`);
@@ -32,7 +32,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      Hover me, Click menu item <Down />
+      Hover me, Click menu item <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/demo/item.md

@@ -15,7 +15,7 @@ Divider and disabled menu item.
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 const menu = (
   <Menu>
@@ -39,7 +39,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      Hover me <Down />
+      Hover me <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/demo/menu-full.md

@@ -20,7 +20,7 @@ This demo was created for debugging Menu styles inside Dropdown.
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Mail, Appstore, Setting, Down } from '@ant-design/icons';
+import { MailOutlined, AppstoreOutlined, SettingOutlined, DownOutlined } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
 
@@ -34,7 +34,7 @@ const menu = (
       key="sub1"
       title={
         <span>
-          <Mail />
+          <MailOutlined />
           <span>Navigation One</span>
         </span>
       }
@@ -52,7 +52,7 @@ const menu = (
       key="sub2"
       title={
         <span>
-          <Appstore />
+          <AppstoreOutlined />
           <span>Navigation Two</span>
         </span>
       }
@@ -68,7 +68,7 @@ const menu = (
       key="sub4"
       title={
         <span>
-          <Setting />
+          <SettingOutlined />
           <span>Navigation Three</span>
         </span>
       }
@@ -84,7 +84,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      Hover to check menu style <Down />
+      Hover to check menu style <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/demo/overlay-visible.md

@@ -15,7 +15,7 @@ The default is to close the menu when you click on menu items, this feature can
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 class OverlayVisible extends React.Component {
   state = {
@@ -47,7 +47,7 @@ class OverlayVisible extends React.Component {
         visible={this.state.visible}
       >
         <a className="ant-dropdown-link" href="#">
-          Hover me <Down />
+          Hover me <DownOutlined />
         </a>
       </Dropdown>
     );

components/dropdown/demo/sub-menu.md

@@ -15,7 +15,7 @@ The menu has multiple levels.
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
 
@@ -37,7 +37,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu}>
     <a className="ant-dropdown-link" href="#">
-      Cascading menu <Down />
+      Cascading menu <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/demo/trigger.md

@@ -15,7 +15,7 @@ The default trigger mode is `hover`, you can change it to `click`.
 
 ```jsx
 import { Menu, Dropdown } from 'antd';
-import { Down } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 
 const menu = (
   <Menu>
@@ -33,7 +33,7 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu} trigger={['click']}>
     <a className="ant-dropdown-link" href="#">
-      Click me <Down />
+      Click me <DownOutlined />
     </a>
   </Dropdown>,
   mountNode,

components/dropdown/dropdown-button.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Ellipsis } from '@ant-design/icons';
+import { EllipsisOutlined } from '@ant-design/icons';
 
 import Button from '../button';
 import { ButtonHTMLType } from '../button/button';
@@ -52,7 +52,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
       placement,
       getPopupContainer,
       href,
-      icon = <Ellipsis />,
+      icon = <EllipsisOutlined />,
       title,
       ...restProps
     } = this.props;

components/dropdown/dropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RcDropdown from 'rc-dropdown';
 import classNames from 'classnames';
-import { Right } from '@ant-design/icons';
+import { RightOutlined } from '@ant-design/icons';
 
 import DropdownButton from './dropdown-button';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -101,7 +101,7 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
 
     const expandIcon = (
       <span className={`${prefixCls}-menu-submenu-arrow`}>
-        <Right className={`${prefixCls}-menu-submenu-arrow-icon`} />
+        <RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
       </span>
     );
 

components/empty/demo/config-provider.md

@@ -25,11 +25,11 @@ import {
   Table,
   List,
 } from 'antd';
-import { Smile } from '@ant-design/icons';
+import { SmileOutlined } from '@ant-design/icons';
 
 const customizeRenderEmpty = () => (
   <div style={{ textAlign: 'center' }}>
-    <Smile style={{ fontSize: 20 }} />
+    <SmileOutlined style={{ fontSize: 20 }} />
     <p>Data Not Found</p>
   </div>
 );

components/form/FormItemInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import {
-  Loading,
+  LoadingOutlined,
   CloseCircleFilled,
   CheckCircleFilled,
   ExclamationCircleFilled,
@@ -34,7 +34,7 @@ const iconMap: { [key: string]: any } = {
   success: CheckCircleFilled,
   warning: ExclamationCircleFilled,
   error: CloseCircleFilled,
-  validating: Loading,
+  validating: LoadingOutlined,
 };
 
 const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({

components/form/demo/advanced-search.md

@@ -19,7 +19,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 
 ```tsx
 import { Form, Row, Col, Input, Button } from 'antd';
-import { Down, Up } from '@ant-design/icons';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
 
 const AdvancedSearchForm = () => {
   const [expand, setExpand] = React.useState(false);
@@ -80,7 +80,7 @@ const AdvancedSearchForm = () => {
               setExpand(!expand);
             }}
           >
-            {expand ? <Up /> : <Down />} Collapse
+            {expand ? <UpOutlined /> : <DownOutlined />} Collapse
           </a>
         </Col>
       </Row>

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

@@ -15,7 +15,7 @@ Add or remove form items dynamically.
 
 ```jsx
 import { Form, Input, Button } from 'antd';
-import { MinusCircle, Plus } from '@ant-design/icons';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
 const formItemLayout = {
   labelCol: {
@@ -67,7 +67,7 @@ const DynamicFieldSet = () => {
                     <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
                   </Form.Item>
                   {fields.length > 1 ? (
-                    <MinusCircle
+                    <MinusCircleOutlined
                       className="dynamic-delete-button"
                       onClick={() => {
                         remove(field.name);
@@ -84,7 +84,7 @@ const DynamicFieldSet = () => {
                   }}
                   style={{ width: '60%' }}
                 >
-                  <Plus /> Add field
+                  <PlusOutlined /> Add field
                 </Button>
               </Form.Item>
             </div>

components/form/demo/form-context.md

@@ -15,7 +15,7 @@ Use `Form.Provider` to process data between forms. In this case, submit button i
 
 ```tsx
 import { Form, Input, InputNumber, Modal, Button, Avatar, Typography } from 'antd';
-import { Smile, User } from '@ant-design/icons';
+import { SmileOutlined } from '@ant-design/icons';
 
 const layout = {
   labelCol: { span: 8 },
@@ -103,7 +103,7 @@ const Demo = () => {
                 </ul>
               ) : (
                 <Typography.Text className="ant-form-text" type="secondary">
-                  ( <Smile /> No user yet. )
+                  ( <SmileOutlined /> No user yet. )
                 </Typography.Text>
               );
             }}

components/form/demo/inline-login.md

@@ -15,7 +15,7 @@ Inline login form is often used in navigation bar.
 
 ```tsx
 import { Form, Input, Button } from 'antd';
-import { User, Lock } from '@ant-design/icons';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
 const HorizontalLoginForm = () => {
   const [form] = Form.useForm();
@@ -36,14 +36,17 @@ const HorizontalLoginForm = () => {
         name="username"
         rules={[{ required: true, message: 'Please input your username!' }]}
       >
-        <Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
+        <Input
+          prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+          placeholder="Username"
+        />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your password!' }]}
       >
         <Input
-          prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
+          prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
           type="password"
           placeholder="Password"
         />

components/form/demo/normal-login.md

@@ -15,7 +15,7 @@ Normal login form which can contain more elements.
 
 ```tsx
 import { Form, Input, Button, Checkbox } from 'antd';
-import { User, Lock } from '@ant-design/icons';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
 
 const NormalLoginForm = () => {
   const onFinish = values => {
@@ -33,14 +33,17 @@ const NormalLoginForm = () => {
         name="username"
         rules={[{ required: true, message: 'Please input your Username!' }]}
       >
-        <Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
+        <Input
+          prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+          placeholder="Username"
+        />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your Password!' }]}
       >
         <Input
-          prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
+          prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
           type="password"
           placeholder="Password"
         />

components/form/demo/register.md

@@ -26,7 +26,7 @@ import {
   Button,
   AutoComplete,
 } from 'antd';
-import { QuestionCircle } from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 const AutoCompleteOption = AutoComplete.Option;
@@ -196,7 +196,7 @@ const RegistrationForm = () => {
           <span>
             Nickname&nbsp;
             <Tooltip title="What do you want others to call you?">
-              <QuestionCircle />
+              <QuestionCircleOutlined />
             </Tooltip>
           </span>
         }

components/form/demo/validate-other.md

@@ -28,7 +28,7 @@ import {
   Row,
   Col,
 } from 'antd';
-import { Upload as IconUpload, Inbox } from '@ant-design/icons';
+import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
@@ -165,7 +165,7 @@ const Demo = () => {
       >
         <Upload name="logo" action="/upload.do" listType="picture">
           <Button>
-            <IconUpload /> Click to upload
+            <UploadOutlined /> Click to upload
           </Button>
         </Upload>
       </Form.Item>
@@ -174,7 +174,7 @@ const Demo = () => {
         <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
           <Upload.Dragger name="files" action="/upload.do">
             <p className="ant-upload-drag-icon">
-              <Inbox />
+              <InboxOutlined />
             </p>
             <p className="ant-upload-text">Click or drag file to this area to upload</p>
             <p className="ant-upload-hint">Support for a single or bulk upload.</p>

components/icon/demo/basic.md

@@ -14,16 +14,22 @@ title:
 Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specific the `spin` property to show spinning animation.
 
 ```jsx
-import { Home, SettingFilled, Smile, Sync, Loading } from '@ant-design/icons';
+import {
+  HomeOutlined,
+  SettingFilled,
+  SmileOutlined,
+  SyncOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
 
 ReactDOM.render(
   <div className="icons-list">
-    <Home />
+    <HomeOutlined />
     <SettingFilled />
-    <Smile />
+    <SmileOutlined />
-    <Sync spin />
+    <SyncOutlined spin />
-    <Smile rotate={180} />
+    <SmileOutlined rotate={180} />
-    <Loading />
+    <LoadingOutlined />
   </div>,
   mountNode,
 );

components/icon/index.en-US.md

@@ -28,9 +28,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
 We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
 
 ```jsx
-import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
+import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 
-<Star />
+<StarOutlined />
 <StarFilled />
 <StarTwoTone twoToneColor="#eb2f96" />
 ```
@@ -62,9 +62,9 @@ More discussion of SVG icon reference at [#10353](https://github.com/ant-design/
 The properties `theme`, `component` and `twoToneColor` were added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` component.
 
 ```jsx
-import { Message } from '@ant-design/icons';
+import { MessageOutlined } from '@ant-design/icons';
 
-<Message style={{ fontSize: '16px', color: '#08c' }} />;
+<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
 ```
 
 All the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.

components/icon/index.zh-CN.md

@@ -35,9 +35,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
 其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
 
 ```jsx
-import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
+import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 
-<Star />
+<StarOutlined />
 <StarFilled />
 <StarTwoTone twoToneColor="#eb2f96" />
 ```
@@ -65,9 +65,9 @@ import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
 所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
 
 ```jsx
-import { Message } from '@ant-design/icons';
+import { MessageOutlined } from '@ant-design/icons';
 
-<Message style={{ fontSize: '16px', color: '#08c' }} />;
+<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;
 ```
 
 ### 双色图标主色
@@ -140,10 +140,10 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
 
 `Icon` 中的 `component` 组件的接受的属性如下：
 
-| 字段      | 说明                    | 类型             | 只读值         | 版本   |
+| 字段      | 说明                    | 类型             | 只读值         | 版本 |
-| --------- | ----------------------- | ---------------- | -------------- | ------ |
+| --------- | ----------------------- | ---------------- | -------------- | ---- |
-| width     | `svg` 元素宽度          | string \| number | '1em'          |  |
+| width     | `svg` 元素宽度          | string \| number | '1em'          |      |
-| height    | `svg` 元素高度          | string \| number | '1em'          |  |
+| height    | `svg` 元素高度          | string \| number | '1em'          |      |
-| fill      | `svg` 元素填充的颜色    | string           | 'currentColor' |  |
+| fill      | `svg` 元素填充的颜色    | string           | 'currentColor' |      |
-| className | 计算后的 `svg` 类名     | string           | -              |  |
+| className | 计算后的 `svg` 类名     | string           | -              |      |
-| style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |  |
+| style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |

components/index.tsx

@@ -74,8 +74,6 @@ export { default as Layout } from './layout';
 
 export { default as List } from './list';
 
-export { default as LocaleProvider } from './locale-provider';
-
 export { default as message } from './message';
 
 export { default as Menu } from './menu';
@@ -138,8 +136,6 @@ export { default as Tooltip } from './tooltip';
 
 export { default as Typography } from './typography';
 
-export { default as Mention } from './mention';
-
 export { default as Upload } from './upload';
 
 export { default as version } from './version';

components/input-number/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import RcInputNumber from 'rc-input-number';
-import { Up, Down } from '@ant-design/icons';
+import { UpOutlined, DownOutlined } from '@ant-design/icons';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { Omit } from '../_util/type';
@@ -62,8 +62,8 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
       },
       className,
     );
-    const upIcon = <Up className={`${prefixCls}-handler-up-inner`} />;
+    const upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
-    const downIcon = <Down className={`${prefixCls}-handler-down-inner`} />;
+    const downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
 
     return (
       <RcInputNumber

components/input/Password.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import { Eye, EyeInvisible } from '@ant-design/icons';
+import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
 
 import Input, { InputProps } from './Input';
 
@@ -46,7 +46,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
   getIcon() {
     const { prefixCls, action } = this.props;
     const iconTrigger = ActionMap[action!] || '';
-    const icon = this.state.visible ? Eye : EyeInvisible;
+    const icon = this.state.visible ? EyeOutlined : EyeInvisibleOutlined;
     const iconProps = {
       [iconTrigger]: this.onChange,
       className: `${prefixCls}-icon`,

components/input/Search.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Search as IconSearch, Loading as IconLoading } from '@ant-design/icons';
+import { SearchOutlined, LoadingOutlined } from '@ant-design/icons';
 
 import Input, { InputProps } from './Input';
 import Button from '../button';
@@ -65,11 +65,11 @@ export default class Search extends React.Component<SearchProps, any> {
     if (enterButton) {
       return (
         <Button className={`${prefixCls}-button`} type="primary" size={size} key="enterButton">
-          <IconLoading />
+          <LoadingOutlined />
         </Button>
       );
     }
-    return <IconLoading className={`${prefixCls}-icon`} key="loadingIcon" />;
+    return <LoadingOutlined className={`${prefixCls}-icon`} key="loadingIcon" />;
   };
 
   renderSuffix = (prefixCls: string) => {
@@ -82,7 +82,7 @@ export default class Search extends React.Component<SearchProps, any> {
     if (enterButton) return suffix;
 
     const icon = (
-      <IconSearch className={`${prefixCls}-icon`} key="searchIcon" onClick={this.onSearch} />
+      <SearchOutlined className={`${prefixCls}-icon`} key="searchIcon" onClick={this.onSearch} />
     );
 
     if (suffix) {
@@ -135,7 +135,7 @@ export default class Search extends React.Component<SearchProps, any> {
           key="enterButton"
           onClick={this.onSearch}
         >
-          {enterButton === true ? <IconSearch /> : enterButton}
+          {enterButton === true ? <SearchOutlined /> : enterButton}
         </Button>
       );
     }

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

@@ -12,7 +12,7 @@ exports[`Input.Password should change type when click 1`] = `
     className="ant-input-password"
     prefixCls="ant-input"
     suffix={
-      <EyeInvisible
+      <EyeInvisibleOutlined
         className="ant-input-password-icon"
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -36,7 +36,7 @@ exports[`Input.Password should change type when click 1`] = `
       inputType="input"
       prefixCls="ant-input"
       suffix={
-        <EyeInvisible
+        <EyeInvisibleOutlined
           className="ant-input-password-icon"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -60,7 +60,7 @@ exports[`Input.Password should change type when click 1`] = `
         <span
           className="ant-input-suffix"
         >
-          <EyeInvisible
+          <EyeInvisibleOutlined
             className="ant-input-password-icon"
             key="passwordIcon"
             onClick={[Function]}
@@ -159,7 +159,7 @@ exports[`Input.Password should change type when click 1`] = `
                 </IconReact>
               </span>
             </AntdIcon>
-          </EyeInvisible>
+          </EyeInvisibleOutlined>
         </span>
       </span>
     </ClearableLabeledInput>
@@ -179,7 +179,7 @@ exports[`Input.Password should change type when click 2`] = `
     className="ant-input-password"
     prefixCls="ant-input"
     suffix={
-      <Eye
+      <EyeOutlined
         className="ant-input-password-icon"
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -203,7 +203,7 @@ exports[`Input.Password should change type when click 2`] = `
       inputType="input"
       prefixCls="ant-input"
       suffix={
-        <Eye
+        <EyeOutlined
           className="ant-input-password-icon"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -227,7 +227,7 @@ exports[`Input.Password should change type when click 2`] = `
         <span
           className="ant-input-suffix"
         >
-          <Eye
+          <EyeOutlined
             className="ant-input-password-icon"
             key="passwordIcon"
             onClick={[Function]}
@@ -310,7 +310,7 @@ exports[`Input.Password should change type when click 2`] = `
                 </IconReact>
               </span>
             </AntdIcon>
-          </Eye>
+          </EyeOutlined>
         </span>
       </span>
     </ClearableLabeledInput>
@@ -330,7 +330,7 @@ exports[`Input.Password should change type when click 3`] = `
     className="ant-input-password"
     prefixCls="ant-input"
     suffix={
-      <EyeInvisible
+      <EyeInvisibleOutlined
         className="ant-input-password-icon"
         onClick={[Function]}
         onMouseDown={[Function]}
@@ -354,7 +354,7 @@ exports[`Input.Password should change type when click 3`] = `
       inputType="input"
       prefixCls="ant-input"
       suffix={
-        <EyeInvisible
+        <EyeInvisibleOutlined
           className="ant-input-password-icon"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -378,7 +378,7 @@ exports[`Input.Password should change type when click 3`] = `
         <span
           className="ant-input-suffix"
         >
-          <EyeInvisible
+          <EyeInvisibleOutlined
             className="ant-input-password-icon"
             key="passwordIcon"
             onClick={[Function]}
@@ -477,7 +477,7 @@ exports[`Input.Password should change type when click 3`] = `
                 </IconReact>
               </span>
             </AntdIcon>
-          </EyeInvisible>
+          </EyeInvisibleOutlined>
         </span>
       </span>
     </ClearableLabeledInput>

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

@@ -458,7 +458,7 @@ exports[`Input.Search should support suffix 1`] = `
     suffix={
       Array [
         null,
-        <Search
+        <SearchOutlined
           className="ant-input-search-icon"
           onClick={[Function]}
         />,
@@ -484,7 +484,7 @@ exports[`Input.Search should support suffix 1`] = `
       suffix={
         Array [
           null,
-          <Search
+          <SearchOutlined
             className="ant-input-search-icon"
             onClick={[Function]}
           />,
@@ -507,7 +507,7 @@ exports[`Input.Search should support suffix 1`] = `
         <span
           className="ant-input-suffix"
         >
-          <Search
+          <SearchOutlined
             className="ant-input-search-icon"
             key="searchIcon"
             onClick={[Function]}
@@ -587,7 +587,7 @@ exports[`Input.Search should support suffix 1`] = `
                 </IconReact>
               </span>
             </AntdIcon>
-          </Search>
+          </SearchOutlined>
         </span>
       </span>
     </ClearableLabeledInput>

components/input/demo/addon.md

@@ -15,7 +15,7 @@ Using pre & post tabs example.
 
 ```jsx
 import { Input, Select } from 'antd';
-import { Setting } from '@ant-design/icons';
+import { SettingOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
@@ -43,7 +43,7 @@ ReactDOM.render(
       <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
     </div>
     <div style={{ marginBottom: 16 }}>
-      <Input addonAfter={<Setting />} defaultValue="mysite" />
+      <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
     </div>
   </div>,
   mountNode,

components/input/demo/presuffix.md

@@ -15,16 +15,16 @@ Add prefix or suffix icons inside input.
 
 ```jsx
 import { Input, Tooltip } from 'antd';
-import { InfoCircle, User } from '@ant-design/icons';
+import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
     <Input
       placeholder="Enter your username"
-      prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />}
+      prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
       suffix={
         <Tooltip title="Extra information">
-          <InfoCircle style={{ color: 'rgba(0,0,0,.45)' }} />
+          <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
         </Tooltip>
       }
     />

components/layout/Sider.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import { Bars, Right, Left } from '@ant-design/icons';
+import { BarsOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons';
 
 import { LayoutContext, LayoutContextProps } from './layout';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -214,12 +214,12 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
           }`}
           style={zeroWidthTriggerStyle}
         >
-          <Bars />
+          <BarsOutlined />
         </span>
       ) : null;
     const iconObj = {
-      expanded: reverseArrow ? <Right /> : <Left />,
+      expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
-      collapsed: reverseArrow ? <Left /> : <Right />,
+      collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
     };
     const status = this.state.collapsed ? 'collapsed' : 'expanded';
     const defaultTrigger = iconObj[status];

components/layout/demo/custom-trigger-debug.md

@@ -12,7 +12,15 @@ debug: true
 
 ```jsx
 import { Layout, Menu } from 'antd';
-import { Team, User, File, Desktop, PieChart, MenuUnfold, MenuFold } from '@ant-design/icons';
+import {
+  TeamOutlined,
+  UserOutlined,
+  FileOutlined,
+  DesktopOutlined,
+  PieChartOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+} from '@ant-design/icons';
 
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;
@@ -35,18 +43,18 @@ class SiderDemo extends React.Component {
           <div className="logo" />
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
             <Menu.Item key="1">
-              <PieChart />
+              <PieChartOutlined />
               <span>Option 1</span>
             </Menu.Item>
             <Menu.Item key="2">
-              <Desktop />
+              <DesktopOutlined />
               <span>Option 2</span>
             </Menu.Item>
             <SubMenu
               key="sub1"
               title={
                 <span>
-                  <User />
+                  <UserOutlined />
                   <span>User</span>
                 </span>
               }
@@ -59,7 +67,7 @@ class SiderDemo extends React.Component {
               key="sub2"
               title={
                 <span>
-                  <Team />
+                  <TeamOutlined />
                   <span>Team</span>
                 </span>
               }
@@ -68,13 +76,13 @@ class SiderDemo extends React.Component {
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
             <Menu.Item key="9">
-              <File />
+              <FileOutlined />
             </Menu.Item>
           </Menu>
         </Sider>
         <Layout>
           <Header style={{ background: '#fff', padding: 0 }}>
-            {React.createElement(this.state.collapsed ? MenuUnfold : MenuFold, {
+            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
               className: 'trigger',
               onClick: this.toggle,
             })}

components/layout/demo/custom-trigger.md

@@ -15,7 +15,13 @@ If you want to use a customized trigger, you can hide the default one by setting
 
 ```jsx
 import { Layout, Menu } from 'antd';
-import { MenuUnfold, MenuFold, User, VideoCamera, Upload as IconUpload } from '@ant-design/icons';
+import {
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  UserOutlined,
+  VideoCameraOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
 
 const { Header, Sider, Content } = Layout;
 
@@ -37,22 +43,22 @@ class SiderDemo extends React.Component {
           <div className="logo" />
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
             <Menu.Item key="1">
-              <User />
+              <UserOutlined />
               <span>nav 1</span>
             </Menu.Item>
             <Menu.Item key="2">
-              <VideoCamera />
+              <VideoCameraOutlined />
               <span>nav 2</span>
             </Menu.Item>
             <Menu.Item key="3">
-              <IconUpload />
+              <UploadOutlined />
               <span>nav 3</span>
             </Menu.Item>
           </Menu>
         </Sider>
         <Layout>
           <Header style={{ background: '#fff', padding: 0 }}>
-            {React.createElement(this.state.collapsed ? MenuUnfold : MenuFold, {
+            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
               className: 'trigger',
               onClick: this.toggle,
             })}

components/layout/demo/fixed-sider.md

@@ -17,14 +17,14 @@ When dealing with long content, a fixed sider can provide a better user experien
 ```jsx
 import { Layout, Menu } from 'antd';
 import {
-  Appstore,
+  AppstoreOutlined,
-  BarChart,
+  BarChartOutlined,
-  Cloud,
+  CloudOutlined,
-  Shop,
+  ShopOutlined,
-  Team,
+  TeamOutlined,
-  User,
+  UserOutlined,
-  Upload as IconUpload,
+  UploadOutlined,
-  VideoCamera,
+  VideoCameraOutlined,
 } from '@ant-design/icons';
 
 const { Header, Content, Footer, Sider } = Layout;
@@ -42,35 +42,35 @@ ReactDOM.render(
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
         <Menu.Item key="1">
-          <User />
+          <UserOutlined />
           <span className="nav-text">nav 1</span>
         </Menu.Item>
         <Menu.Item key="2">
-          <VideoCamera />
+          <VideoCameraOutlined />
           <span className="nav-text">nav 2</span>
         </Menu.Item>
         <Menu.Item key="3">
-          <IconUpload />
+          <UploadOutlined />
           <span className="nav-text">nav 3</span>
         </Menu.Item>
         <Menu.Item key="4">
-          <BarChart />
+          <BarChartOutlined />
           <span className="nav-text">nav 4</span>
         </Menu.Item>
         <Menu.Item key="5">
-          <Cloud />
+          <CloudOutlined />
           <span className="nav-text">nav 5</span>
         </Menu.Item>
         <Menu.Item key="6">
-          <Appstore />
+          <AppstoreOutlined />
           <span className="nav-text">nav 6</span>
         </Menu.Item>
         <Menu.Item key="7">
-          <Team />
+          <TeamOutlined />
           <span className="nav-text">nav 7</span>
         </Menu.Item>
         <Menu.Item key="8">
-          <Shop />
+          <ShopOutlined />
           <span className="nav-text">nav 8</span>
         </Menu.Item>
       </Menu>

components/layout/demo/responsive.md

@@ -19,7 +19,7 @@ Layout.Sider supports responsive layout.
 
 ```jsx
 import { Layout, Menu } from 'antd';
-import { Upload as IconUpload, User, VideoCamera } from '@ant-design/icons';
+import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -38,19 +38,19 @@ ReactDOM.render(
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
         <Menu.Item key="1">
-          <User />
+          <UserOutlined />
           <span className="nav-text">nav 1</span>
         </Menu.Item>
         <Menu.Item key="2">
-          <VideoCamera />
+          <VideoCameraOutlined />
           <span className="nav-text">nav 2</span>
         </Menu.Item>
         <Menu.Item key="3">
-          <IconUpload />
+          <UploadOutlined />
           <span className="nav-text">nav 3</span>
         </Menu.Item>
         <Menu.Item key="4">
-          <User />
+          <UserOutlined />
           <span className="nav-text">nav 4</span>
         </Menu.Item>
       </Menu>

components/layout/demo/side.md

@@ -22,7 +22,13 @@ The level of the aside navigation is scalable. The first, second, and third leve
 
 ```jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
-import { Desktop, PieChart, File, Team, User } from '@ant-design/icons';
+import {
+  DesktopOutlined,
+  PieChartOutlined,
+  FileOutlined,
+  TeamOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 
 const { Header, Content, Footer, Sider } = Layout;
 const { SubMenu } = Menu;
@@ -44,18 +50,18 @@ class SiderDemo extends React.Component {
           <div className="logo" />
           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
             <Menu.Item key="1">
-              <PieChart />
+              <PieChartOutlined />
               <span>Option 1</span>
             </Menu.Item>
             <Menu.Item key="2">
-              <Desktop />
+              <DesktopOutlined />
               <span>Option 2</span>
             </Menu.Item>
             <SubMenu
               key="sub1"
               title={
                 <span>
-                  <User />
+                  <UserOutlined />
                   <span>User</span>
                 </span>
               }
@@ -68,7 +74,7 @@ class SiderDemo extends React.Component {
               key="sub2"
               title={
                 <span>
-                  <Team />
+                  <TeamOutlined />
                   <span>Team</span>
                 </span>
               }
@@ -77,7 +83,7 @@ class SiderDemo extends React.Component {
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
             <Menu.Item key="9">
-              <File />
+              <FileOutlined />
             </Menu.Item>
           </Menu>
         </Sider>

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

@@ -15,7 +15,7 @@ Both the top navigation and the sidebar, commonly used in application site.
 
 ```jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
-import { User, Laptop, Notification } from '@ant-design/icons';
+import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
@@ -47,7 +47,7 @@ ReactDOM.render(
             key="sub1"
             title={
               <span>
-                <User />
+                <UserOutlined />
                 subnav 1
               </span>
             }
@@ -61,7 +61,7 @@ ReactDOM.render(
             key="sub2"
             title={
               <span>
-                <Laptop />
+                <LaptopOutlined />
                 subnav 2
               </span>
             }
@@ -75,7 +75,7 @@ ReactDOM.render(
             key="sub3"
             title={
               <span>
-                <Notification />
+                <NotificationOutlined />
                 subnav 3
               </span>
             }

components/layout/demo/top-side.md

@@ -15,7 +15,7 @@ Both the top navigation and the sidebar, commonly used in documentation site.
 
 ```jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
-import { User, Laptop, Notification } from '@ant-design/icons';
+import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
 const { Header, Content, Footer, Sider } = Layout;
@@ -53,7 +53,7 @@ ReactDOM.render(
               key="sub1"
               title={
                 <span>
-                  <User />
+                  <UserOutlined />
                   subnav 1
                 </span>
               }
@@ -67,7 +67,7 @@ ReactDOM.render(
               key="sub2"
               title={
                 <span>
-                  <Laptop />
+                  <LaptopOutlined />
                   subnav 2
                 </span>
               }
@@ -81,7 +81,7 @@ ReactDOM.render(
               key="sub3"
               title={
                 <span>
-                  <Notification />
+                  <NotificationOutlined />
                   subnav 3
                 </span>
               }

components/list/__tests__/loading.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { Loading } from '@ant-design/icons';
+import { LoadingOutlined } from '@ant-design/icons';
 
 import List from '..';
 
@@ -26,7 +26,7 @@ describe('List', () => {
   });
 
   it('renders object loading with indicator', () => {
-    const antIcon = <Loading style={{ fontSize: 24 }} spin />;
+    const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
     const loading = {
       spinning: true,

components/list/demo/vertical.md

@@ -15,7 +15,7 @@ Set the `itemLayout` property to `vertical` to create a vertical list.
 
 ```jsx
 import { List, Avatar } from 'antd';
-import { Message, Like, Star } from '@ant-design/icons';
+import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
 
 const listData = [];
 for (let i = 0; i < 23; i++) {
@@ -57,9 +57,9 @@ ReactDOM.render(
       <List.Item
         key={item.title}
         actions={[
-          <IconText icon={Star} text="156" key="list-vertical-star-o" />,
+          <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
-          <IconText icon={Like} text="156" key="list-vertical-like-o" />,
+          <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
-          <IconText icon={Message} text="2" key="list-vertical-message" />,
+          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
         ]}
         extra={
           <img

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

@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('locale-provider');

components/locale-provider/__tests__/index.test.js

@@ -3,10 +3,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment';
 import MockDate from 'mockdate';
-import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import {
-  LocaleProvider,
   Pagination,
   DatePicker,
   TimePicker,
@@ -17,6 +15,7 @@ import {
   Select,
   Transfer,
 } from '../..';
+import LocaleProvider from '..';
 import arEG from '../ar_EG';
 import bgBG from '../bg_BG';
 import caES from '../ca_ES';
@@ -247,20 +246,4 @@ describe('Locale Provider', () => {
     wrapper.setState({ locale: null });
     expect(wrapper.render()).toMatchSnapshot();
   });
-
-  it('warning if use LocaleProvider', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    resetWarned();
-
-    mount(
-      <LocaleProvider locale={{}}>
-        <div />
-      </LocaleProvider>,
-    );
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale',
-    );
-
-    errorSpy.mockRestore();
-  });
 });

components/locale-provider/demo/all.md

@@ -1,187 +0,0 @@
----
-order: 2
-title:
-  zh-CN: 所有组件
-  en-US: All components
----
-
-## zh-CN
-
-此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
-
-## en-US
-
-Components which need localization support are listed here, you can toggle the language in the demo.
-
-```jsx
-import {
-  LocaleProvider,
-  Pagination,
-  DatePicker,
-  TimePicker,
-  Calendar,
-  Popconfirm,
-  Table,
-  Modal,
-  Button,
-  Select,
-  Transfer,
-  Radio,
-} from 'antd';
-import zhCN from 'antd/es/locale-provider/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-
-moment.locale('en');
-
-const { Option } = Select;
-const { RangePicker } = DatePicker;
-
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    filters: [
-      {
-        text: 'filter1',
-        value: 'filter1',
-      },
-    ],
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-  },
-];
-
-class Page extends React.Component {
-  state = {
-    visible: false,
-  };
-
-  showModal = () => {
-    this.setState({ visible: true });
-  };
-
-  hideModal = () => {
-    this.setState({ visible: false });
-  };
-
-  render() {
-    const info = () => {
-      Modal.info({
-        title: 'some info',
-        content: 'some info',
-      });
-    };
-    const confirm = () => {
-      Modal.confirm({
-        title: 'some info',
-        content: 'some info',
-      });
-    };
-    return (
-      <div className="locale-components">
-        <div className="example">
-          <Pagination defaultCurrent={1} total={50} showSizeChanger />
-        </div>
-        <div className="example">
-          <Select showSearch style={{ width: 200 }}>
-            <Option value="jack">jack</Option>
-            <Option value="lucy">lucy</Option>
-          </Select>
-          <DatePicker />
-          <TimePicker />
-          <RangePicker style={{ width: 200 }} />
-        </div>
-        <div className="example">
-          <Button type="primary" onClick={this.showModal}>
-            Show Modal
-          </Button>
-          <Button onClick={info}>Show info</Button>
-          <Button onClick={confirm}>Show confirm</Button>
-          <Popconfirm title="Question?">
-            <a href="#">Click to confirm</a>
-          </Popconfirm>
-        </div>
-        <div className="example">
-          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
-        </div>
-        <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
-          <Calendar fullscreen={false} value={moment()} />
-        </div>
-        <div className="example">
-          <Table dataSource={[]} columns={columns} />
-        </div>
-        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
-          <p>Locale Modal</p>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      locale: null,
-    };
-  }
-
-  changeLocale = e => {
-    const localeValue = e.target.value;
-    this.setState({ locale: localeValue });
-    if (!localeValue) {
-      moment.locale('en');
-    } else {
-      moment.locale('zh-cn');
-    }
-  };
-
-  render() {
-    const { locale } = this.state;
-    return (
-      <div>
-        <div className="change-locale">
-          <span style={{ marginRight: 16 }}>Change locale of components: </span>
-          <Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
-            <Radio.Button key="en" value={undefined}>
-              English
-            </Radio.Button>
-            <Radio.Button key="cn" value={zhCN}>
-              中文
-            </Radio.Button>
-          </Radio.Group>
-        </div>
-        <LocaleProvider locale={locale}>
-          <Page
-            key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
-          />
-        </LocaleProvider>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-```
-
-```css
-.locale-components {
-  border-top: 1px solid #d9d9d9;
-  padding-top: 16px;
-}
-
-.example {
-  margin: 16px 0;
-}
-
-.example > * {
-  margin-right: 8px;
-}
-
-.change-locale {
-  margin-bottom: 16px;
-}
-```

components/locale-provider/demo/basic.md

@@ -1,32 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 国际化
-  en-US: Localization
----
-
-## zh-CN
-
-用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
-
-## en-US
-
-Wrap your app with `LocaleProvider`, and apply the corresponding language package.
-
-```jsx
-import { Pagination, LocaleProvider } from 'antd';
-import zhCN from 'antd/es/locale-provider/zh_CN';
-
-const App = () => (
-  <div>
-    <Pagination defaultCurrent={1} total={50} showSizeChanger />
-  </div>
-);
-
-ReactDOM.render(
-  <LocaleProvider locale={zhCN}>
-    <App />
-  </LocaleProvider>,
-  mountNode,
-);
-```

components/locale-provider/index.en-US.md

@@ -1,56 +0,0 @@
----
-category: Components
-type: Deprecated
-cols: 1
-title: LocaleProvider (Deprecated)
----
-
-`LocaleProvider` component. Deprecated, please use [ConfigProvider](/components/config-provider) instead.
-
-## Usage
-
-`LocaleProvider` makes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
-
-```jsx
-import { LocaleProvider } from 'antd';
-import fr_FR from 'antd/es/locale-provider/fr_FR';
-import moment from 'moment';
-import 'moment/locale/fr';
-
-moment.locale('fr');
-...
-
-return <LocaleProvider locale={fr_FR}><App /></LocaleProvider>;
-```
-
-We provide some locales like English, Chinese, Russian, German, French etc. All locale packages can be found in [here](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/).
-
-Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
-
-```jsx
-const { LocaleProvider, locales } = window.antd;
-
-...
-
-return <LocaleProvider locale={locales.fr_FR}><App /></LocaleProvider>;
-```
-
-### Add a new language
-
-If you can't find your language, you are welcome to create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/en_US.tsx) and send us a pull request.
-
-### Other localization needs
-
-This component aims to provide localization of the built-in text. If you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
-
-## API
-
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| locale | language package setting, you can find the packages in [antd/es/locale-provider](http://unpkg.com/antd/es/locale-provider/) | object | - |  |
-
-## FAQ
-
-#### Locale problem is still existed even LocaleProvider is used?
-
-Please make sure you set moment locale by `moment.locale('zh-cn')`, or you don't have two moment of different version.

components/locale-provider/index.zh-CN.md

@@ -1,57 +0,0 @@
----
-category: Components
-subtitle: 国际化（废弃）
-cols: 1
-type: 废弃
-title: LocaleProvider
----
-
-国际化组件。已废弃，请使用 [ConfigProvider](/components/config-provider) 代替。
-
-## 使用
-
-LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
-
-```jsx
-import { LocaleProvider } from 'antd';
-import zh_CN from 'antd/es/locale-provider/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-
-moment.locale('zh-cn');
-...
-
-return <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;
-```
-
-我们提供了英语，中文，俄语，法语，德语等多种语言支持，所有语言包可以在 [这里](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/) 找到。
-
-注意：如果你需要使用 UMD 版的 dist 文件，应该引入 `antd/dist/antd-with-locales.js`，同时引入 moment 对应的 locale，然后按以下方式使用：
-
-```jsx
-const { LocaleProvider, locales } = window.antd;
-
-...
-
-return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
-```
-
-### 增加语言包
-
-如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale-provider/en_US.tsx) 的基础上创建一个新的语言包，并给我们 Pull Request。
-
-### 其他国际化需求
-
-本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [react-intl](https://github.com/yahoo/react-intl)，可参考示例：[Intl demo 1](http://github.com/ant-design/intl-example) 和 [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US)。
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| locale | 语言包配置，语言包可到 [antd/es/locale-provider](http://unpkg.com/antd/es/locale-provider/) 目录下寻找 | object | - |  |
-
-## FAQ
-
-#### 为什么我使用了 LocaleProvider 还有问题？
-
-请检查是否设置了 `moment.locale('zh-cn')`，或者是否有两个版本的 moment 共存。

components/locale/nl_NL.tsx

@@ -9,12 +9,18 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  global: {
+    placeholder: 'Maak een selectie',
+  },
   Table: {
     filterTitle: 'Filteren',
     filterConfirm: 'OK',
     filterReset: 'Reset',
     selectAll: 'Selecteer huidige pagina',
     selectInvert: 'Deselecteer huidige pagina',
+    sortTitle: 'Sorteren',
+    expand: 'Rij uitklappen',
+    collapse: 'Rij inklappen',
   },
   Modal: {
     okText: 'OK',
@@ -26,6 +32,7 @@ export default {
     cancelText: 'Annuleren',
   },
   Transfer: {
+    titles: ['', ''],
     searchPlaceholder: 'Zoeken',
     itemUnit: 'item',
     itemsUnit: 'items',
@@ -40,4 +47,16 @@ export default {
   Empty: {
     description: 'Geen gegevens',
   },
+  Icon: {
+    icon: 'icoon',
+  },
+  Text: {
+    edit: 'Bewerken',
+    copy: 'Kopieren',
+    copied: 'Gekopieerd',
+    expand: 'Uitklappen',
+  },
+  PageHeader: {
+    back: 'Terug',
+  },
 };

components/locale/sk_SK.tsx

@@ -9,12 +9,18 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  global: {
+    placeholder: 'Prosím vyberte',
+  },
   Table: {
     filterTitle: 'Filter',
     filterConfirm: 'OK',
     filterReset: 'Obnoviť',
     selectAll: 'Vybrať všetko',
     selectInvert: 'Vybrať opačné',
+    sortTitle: 'Zoradiť',
+    expand: 'Rozbaliť riadok',
+    collapse: 'Zbaliť riadok',
   },
   Modal: {
     okText: 'OK',
@@ -26,6 +32,7 @@ export default {
     cancelText: 'Zrušiť',
   },
   Transfer: {
+    titles: ['', ''],
     searchPlaceholder: 'Vyhľadávanie',
     itemUnit: 'položka',
     itemsUnit: 'položiek',
@@ -40,4 +47,16 @@ export default {
   Empty: {
     description: 'Žiadne dáta',
   },
+  Icon: {
+    icon: 'ikona',
+  },
+  Text: {
+    edit: 'Upraviť',
+    copy: 'Kopírovať',
+    copied: 'Skopírované',
+    expand: 'Zväčšiť',
+  },
+  PageHeader: {
+    back: 'Späť',
+  },
 };

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

@@ -1,796 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/mention/demo/async.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/avatar.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/basic.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span>
-                    <span
-                      data-offset-key="123-0-0"
-                    >
-                      <span
-                        data-text="true"
-                      >
-                        @afc163
-                      </span>
-                    </span>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/controllder-simple.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
->
-  <div
-    class="ant-mention-editor oneline"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span>
-                    <span
-                      data-offset-key="123-0-0"
-                    >
-                      <span
-                        data-text="true"
-                      >
-                        @afc163
-                      </span>
-                    </span>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
->
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-6 ant-form-item-label"
-    >
-      <label
-        class=""
-        for="mention"
-        title="Top coders"
-      >
-        Top coders
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-16 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <div
-          class="ant-mention-wrapper"
-        >
-          <div
-            class="ant-mention-editor oneline"
-          >
-            <div
-              class="ant-mention-toolbar"
-            />
-            <div
-              class="ant-mention-editor-wrapper"
-            >
-              <div
-                class="DraftEditor-root"
-              >
-                <div
-                  class="DraftEditor-editorContainer"
-                >
-                  <div
-                    aria-describedby="placeholder-123"
-                    class="notranslate public-DraftEditor-content"
-                    contenteditable="true"
-                    role="textbox"
-                    spellcheck="false"
-                    style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-                  >
-                    <div
-                      data-contents="true"
-                    >
-                      <div
-                        class=""
-                        data-block="true"
-                        data-editor="123"
-                        data-offset-key="123-0-0"
-                      >
-                        <div
-                          class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                          data-offset-key="123-0-0"
-                        >
-                          <span>
-                            <span
-                              data-offset-key="123-0-0"
-                            >
-                              <span
-                                data-text="true"
-                              >
-                                @afc163
-                              </span>
-                            </span>
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-row ant-form-item"
-  >
-    <div
-      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
-    >
-      <div
-        class="ant-form-item-control-input"
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="submit"
-        >
-          <span>
-            Submit
-          </span>
-        </button>
-           
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          <span>
-            Reset
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./components/mention/demo/custom-tag.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="public-DraftEditorPlaceholder-root"
-        >
-          <div
-            class="public-DraftEditorPlaceholder-inner"
-            id="placeholder-123"
-            style="white-space:pre-wrap"
-          >
-            @someone
-          </div>
-        </div>
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/multilines.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper multilines"
-  style="width:100%;height:100px"
->
-  <div
-    class="ant-mention-editor"
-    style="width:100%;height:100px"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%;height:100px"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/multiple-trigger.md correctly 1`] = `
-<div
-  class="ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="public-DraftEditorPlaceholder-root"
-        >
-          <div
-            class="public-DraftEditorPlaceholder-inner"
-            id="placeholder-123"
-            style="white-space:pre-wrap"
-          >
-            input @ to mention people, # to mention tag
-          </div>
-        </div>
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/placement.md correctly 1`] = `
-<div
-  class="ant-mention-placement-top ant-mention-wrapper"
-  style="width:100%"
->
-  <div
-    class="ant-mention-editor oneline"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-toolbar"
-    />
-    <div
-      class="ant-mention-editor-wrapper"
-      style="width:100%"
-    >
-      <div
-        class="DraftEditor-root"
-      >
-        <div
-          class="DraftEditor-editorContainer"
-        >
-          <div
-            aria-describedby="placeholder-123"
-            class="notranslate public-DraftEditor-content"
-            contenteditable="true"
-            role="textbox"
-            spellcheck="false"
-            style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-          >
-            <div
-              data-contents="true"
-            >
-              <div
-                class=""
-                data-block="true"
-                data-editor="123"
-                data-offset-key="123-0-0"
-              >
-                <div
-                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                  data-offset-key="123-0-0"
-                >
-                  <span
-                    data-offset-key="123-0-0"
-                  >
-                    <br
-                      data-text="true"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/mention/demo/popupContainer.md correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Click Me
-  </span>
-</button>
-`;
-
-exports[`renders ./components/mention/demo/readonly.md correctly 1`] = `
-<div>
-  <div
-    style="margin-bottom:10px"
-  >
-    <div
-      class="ant-mention-wrapper disabled"
-      style="width:100%"
-    >
-      <div
-        class="ant-mention-editor readonly oneline"
-        style="width:100%"
-      >
-        <div
-          class="ant-mention-toolbar"
-        />
-        <div
-          class="ant-mention-editor-wrapper"
-          style="width:100%"
-        >
-          <div
-            class="DraftEditor-root"
-          >
-            <div
-              class="public-DraftEditorPlaceholder-root"
-            >
-              <div
-                class="public-DraftEditorPlaceholder-inner"
-                id="placeholder-123"
-                style="white-space:pre-wrap"
-              >
-                this is disabled Mention
-              </div>
-            </div>
-            <div
-              class="DraftEditor-editorContainer"
-            >
-              <div
-                aria-describedby="placeholder-123"
-                class="public-DraftEditor-content"
-                contenteditable="false"
-                spellcheck="false"
-                style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-              >
-                <div
-                  data-contents="true"
-                >
-                  <div
-                    class=""
-                    data-block="true"
-                    data-editor="123"
-                    data-offset-key="123-0-0"
-                  >
-                    <div
-                      class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                      data-offset-key="123-0-0"
-                    >
-                      <span
-                        data-offset-key="123-0-0"
-                      >
-                        <br
-                          data-text="true"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <input
-            style="width:0;opacity:0;border:0;position:absolute;left:0;top:0"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-mention-wrapper readonly"
-    style="width:100%"
-  >
-    <div
-      class="ant-mention-editor readonly oneline"
-      style="width:100%"
-    >
-      <div
-        class="ant-mention-toolbar"
-      />
-      <div
-        class="ant-mention-editor-wrapper"
-        style="width:100%"
-      >
-        <div
-          class="DraftEditor-root"
-        >
-          <div
-            class="public-DraftEditorPlaceholder-root"
-          >
-            <div
-              class="public-DraftEditorPlaceholder-inner"
-              id="placeholder-123"
-              style="white-space:pre-wrap"
-            >
-              this is readOnly Mention
-            </div>
-          </div>
-          <div
-            class="DraftEditor-editorContainer"
-          >
-            <div
-              aria-describedby="placeholder-123"
-              class="public-DraftEditor-content"
-              contenteditable="false"
-              spellcheck="false"
-              style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
-            >
-              <div
-                data-contents="true"
-              >
-                <div
-                  class=""
-                  data-block="true"
-                  data-editor="123"
-                  data-offset-key="123-0-0"
-                >
-                  <div
-                    class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
-                    data-offset-key="123-0-0"
-                  >
-                    <span
-                      data-offset-key="123-0-0"
-                    >
-                      <br
-                        data-text="true"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <input
-          style="width:0;opacity:0;border:0;position:absolute;left:0;top:0"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;

components/mention/__tests__/demo.test.js

@@ -1,5 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-jest.mock('draft-js/lib/generateRandomKey', () => () => '123');
-
-demoTest('mention', { skip: process.env.LIB_DIR === 'dist' });

components/mention/__tests__/index.test.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Mention from '..';
-import mountTest from '../../../tests/shared/mountTest';
-
-const { toContentState } = Mention;
-
-describe('Mention', () => {
-  mountTest(Mention);
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('should has focus function', () => {
-    const handleFocus = jest.fn();
-    const wrapper = mount(
-      <Mention
-        defaultValue={toContentState('@afc163')}
-        onFocus={handleFocus}
-        suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-      />,
-    );
-    wrapper.instance().focus();
-    jest.runAllTimers();
-    expect(handleFocus).toHaveBeenCalled();
-  });
-
-  it('basic suggestion', () => {
-    const handleSearch = jest.fn();
-    const wrapper = mount(
-      <Mention suggestions={['afc163', 'raohai']} onSearchChange={handleSearch} />,
-    );
-    wrapper.find('DraftEditorContents').simulate('focus');
-    const ed = wrapper.find('.public-DraftEditor-content');
-    ed.simulate('beforeInput', { data: '@a' });
-    jest.runAllTimers();
-    expect(handleSearch).toHaveBeenCalledWith('a', '@');
-  });
-
-  it('change suggestions', () => {
-    const container = mount(<div id="container" />);
-    const wrapper = mount(
-      <Mention
-        suggestions={['afc163', 'raohai']}
-        getSuggestionContainer={() => container.getDOMNode()}
-      />,
-    );
-    wrapper.find('DraftEditorContents').simulate('focus');
-    const ed = wrapper.find('.public-DraftEditor-content');
-    ed.simulate('beforeInput', { data: '@' });
-    jest.runAllTimers();
-    expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item').length).toBe(2);
-    expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item')[0].innerHTML).toBe(
-      'afc163',
-    );
-    wrapper.setProps({ suggestions: ['yesmeck', 'yiminghe', 'lucy'] });
-    jest.runAllTimers();
-    expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item').length).toBe(3);
-    expect(container.getDOMNode().querySelectorAll('.ant-mention-dropdown-item')[0].innerHTML).toBe(
-      'yesmeck',
-    );
-  });
-
-  it('select item', () => {
-    const onChange = jest.fn();
-    const onSelect = jest.fn();
-    const wrapper = mount(
-      <Mention suggestions={['afc163', 'raohai']} onChange={onChange} onSelect={onSelect} />,
-    );
-    wrapper.find('DraftEditorContents').simulate('focus');
-    const ed = wrapper.find('.public-DraftEditor-content');
-    ed.simulate('beforeInput', { data: '@' });
-    jest.runAllTimers();
-    expect(onChange).toHaveBeenCalled();
-    expect(onSelect).not.toHaveBeenCalled();
-    wrapper
-      .find('.ant-mention-dropdown-item')
-      .at(0)
-      .simulate('mouseDown');
-    wrapper
-      .find('.ant-mention-dropdown-item')
-      .at(0)
-      .simulate('mouseUp');
-    wrapper
-      .find('.ant-mention-dropdown-item')
-      .at(0)
-      .simulate('click');
-    jest.runAllTimers();
-    expect(onSelect).toHaveBeenCalled();
-    expect(wrapper.find('.public-DraftStyleDefault-block').text()).toBe('@afc163 ');
-  });
-
-  it('defaultSuggestion filter', () => {
-    const wrapper = mount(<Mention defaultSuggestions={['light', 'bamboo']} />);
-
-    wrapper.find('DraftEditorContents').simulate('focus');
-    const ed = wrapper.find('.public-DraftEditor-content');
-    ed.simulate('beforeInput', { data: '@b' });
-    jest.runAllTimers();
-
-    const items = wrapper.find('div.ant-mention-dropdown-item');
-    expect(items.length).toBe(1);
-    expect(items.at(0).props().children).toBe('bamboo');
-  });
-
-  it('check filteredSuggestions', () => {
-    const wrapper = mount(
-      <Mention defaultSuggestions={[<Mention.Nav key="light" value="light" />]} />,
-    );
-    wrapper.find('DraftEditorContents').simulate('focus');
-    const ed = wrapper.find('.public-DraftEditor-content');
-    ed.simulate('beforeInput', { data: '@l' });
-    jest.runAllTimers();
-    const items = wrapper.find('div.ant-mention-dropdown-item');
-    expect(items.length).toBe(1);
-    expect(items.at(0).props().value).toBe('light');
-  });
-});

components/mention/demo/async.md

@@ -1,59 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 异步加载
-  en-US: Asynchronous loading
----
-
-## zh-CN
-
-匹配内容列表为异步返回时。
-
-## en-US
-
-async
-
-```jsx
-import { Mention } from 'antd';
-
-const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
-
-class AsyncMention extends React.Component {
-  state = {
-    suggestions: [],
-    loading: false,
-  };
-
-  fetchSuggestions = (value, callback) => {
-    setTimeout(() => {
-      callback(users.filter(item => item.indexOf(value) !== -1));
-    }, 500);
-  };
-
-  onSearchChange = value => {
-    this.fetchSuggestions(value, suggestions => {
-      this.setState({
-        suggestions,
-        loading: false,
-      });
-    });
-    this.setState({
-      loading: true,
-    });
-  };
-
-  render() {
-    const { suggestions, loading } = this.state;
-    return (
-      <Mention
-        style={{ width: '100%' }}
-        loading={loading}
-        suggestions={suggestions}
-        onSearchChange={this.onSearchChange}
-      />
-    );
-  }
-}
-
-ReactDOM.render(<AsyncMention />, mountNode);
-```

components/mention/demo/avatar.md

@@ -1,93 +0,0 @@
----
-order: 3
-title:
-  zh-CN: 头像
-  en-US: Icon Image
----
-
-## zh-CN
-
-自定义建议（含头像）
-
-注意，自定义建议时，onSearchChange 必须不能为空。
-
-## en-US
-
-Customize suggestions.
-
-```jsx
-import { Mention, Avatar } from 'antd';
-
-const { Nav } = Mention;
-
-const webFrameworks = [
-  {
-    name: 'React',
-    type: 'JavaScript',
-    icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg',
-  },
-  {
-    name: 'Angular',
-    type: 'JavaScript',
-    icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png',
-  },
-  {
-    name: 'Dva',
-    type: 'Javascript',
-    icon: 'https://zos.alipayobjects.com/rmsportal/EYPwSeEJKxDtVxI.png',
-  },
-  {
-    name: 'Flask',
-    type: 'Python',
-    icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png',
-  },
-];
-
-class CustomNavMention extends React.Component {
-  state = {
-    suggestions: [],
-  };
-
-  onSearchChange = value => {
-    const searchValue = value.toLowerCase();
-    const filtered = webFrameworks.filter(
-      item => item.name.toLowerCase().indexOf(searchValue) !== -1,
-    );
-    const suggestions = filtered.map(suggestion => (
-      <Nav
-        value={suggestion.name}
-        data={suggestion}
-        disabled={suggestion.disabled}
-        key="mention-avatar"
-      >
-        <Avatar
-          src={suggestion.icon}
-          size="small"
-          style={{
-            width: 14,
-            height: 14,
-            marginRight: 8,
-            top: -1,
-            position: 'relative',
-          }}
-        />
-        {suggestion.name} - {suggestion.type}
-      </Nav>
-    ));
-    this.setState({ suggestions });
-  };
-
-  render() {
-    const { suggestions } = this.state;
-    return (
-      <Mention
-        style={{ width: '100%' }}
-        suggestions={suggestions}
-        onSearchChange={this.onSearchChange}
-      />
-    );
-  }
-}
-
-ReactDOM.render(<CustomNavMention />, mountNode);
-```

components/mention/demo/basic.md

@@ -1,39 +0,0 @@
----
-order: 0
-title:
-  zh-CN: 基本使用
-  en-US: Basic
----
-
-## zh-CN
-
-基本使用
-
-## en-US
-
-Basic usage.
-
-```jsx
-import { Mention } from 'antd';
-
-const { toString, toContentState } = Mention;
-
-function onChange(contentState) {
-  console.log(toString(contentState));
-}
-
-function onSelect(suggestion) {
-  console.log('onSelect', suggestion);
-}
-
-ReactDOM.render(
-  <Mention
-    style={{ width: '100%' }}
-    onChange={onChange}
-    defaultValue={toContentState('@afc163')}
-    defaultSuggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-    onSelect={onSelect}
-  />,
-  mountNode,
-);
-```