3.6.0

2026-02-15 13:59:19 +08:00 · 2018-06-08 16:45:00 +08:00
1601 changed files with 38382 additions and 254065 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@@ -1,70 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const packageInfo = require('./package.json');
-
-// We need compile additional content for antd user
-function finalizeCompile() {
-  if (fs.existsSync(path.join(__dirname, './lib'))) {
-    // Build package.json version to lib/version/index.js
-    // prevent json-loader needing in user-side
-    const versionFilePath = path.join(process.cwd(), 'lib', 'version', 'index.js');
-    const versionFileContent = fs.readFileSync(versionFilePath).toString();
-    fs.writeFileSync(
-      versionFilePath,
-      versionFileContent.replace(
-        /require\(('|")\.\.\/\.\.\/package\.json('|")\)/,
-        `{ version: '${packageInfo.version}' }`,
-      ),
-    );
-    // eslint-disable-next-line
-    console.log('Wrote version into lib/version/index.js');
-
-    // Build package.json version to lib/version/index.d.ts
-    // prevent https://github.com/ant-design/ant-design/issues/4935
-    const versionDefPath = path.join(process.cwd(), 'lib', 'version', 'index.d.ts');
-    fs.writeFileSync(
-      versionDefPath,
-      `declare var _default: "${packageInfo.version}";\nexport default _default;\n`,
-    );
-    // eslint-disable-next-line
-    console.log('Wrote version into lib/version/index.d.ts');
-
-    // Build a entry less file to dist/antd.less
-    const componentsPath = path.join(process.cwd(), 'components');
-    let componentsLessContent = '';
-    // Build components in one file: lib/style/components.less
-    fs.readdir(componentsPath, (err, files) => {
-      files.forEach(file => {
-        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
-          componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
-        }
-      });
-      fs.writeFileSync(
-        path.join(process.cwd(), 'lib', 'style', 'components.less'),
-        componentsLessContent,
-      );
-    });
-  }
-}
-
-function finalizeDist() {
-  if (fs.existsSync(path.join(__dirname, './dist'))) {
-    // Build less entry file: dist/antd.less
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'antd.less'),
-      '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a entry less file to dist/antd.less');
-  }
-}
-
-module.exports = {
-  compile: {
-    finalize: finalizeCompile,
-  },
-  dist: {
-    finalize: finalizeDist,
-  },
-};
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,258 +0,0 @@
-version: 2
-
-references:
-  container_config: &container_config
-    docker:
-      - image: circleci/node:lts
-    working_directory: ~/ant-design
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: ~/ant-design
-
-  install_react: &install_react
-    run: REACT=15 ./scripts/install-react.sh
-
-  react_15: &react_15
-    environment:
-      REACT: 15
-
-  react_16: &react_16
-    environment:
-      REACT: 16
-
-  workflow: &workflow
-    jobs:
-      - setup:
-          filters:
-            branches:
-              ignore: gh-pages
-      - dist:
-          requires:
-          - setup
-      - compile:
-          requires:
-          - setup
-      - lint:
-          requires:
-            - setup
-      - test_dist:
-          requires:
-            - dist
-      - test_lib:
-          requires:
-            - compile
-      - test_es:
-          requires:
-            - compile
-      - test_dom:
-          requires:
-            - setup
-      - test_node:
-          requires:
-            - setup
-      - test_dist_15:
-          requires:
-            - dist
-      - test_lib_15:
-          requires:
-            - compile
-      - test_es_15:
-          requires:
-            - compile
-      - test_dom_15:
-          requires:
-            - setup
-      - test_node_15:
-          requires:
-            - setup
-      - check_metadata:
-          requires:
-            - setup
-
-jobs:
-  setup:
-    <<: *container_config
-    steps:
-      - checkout
-      - run: node -v
-      - run: npm -v
-      - run: npm install
-      - run:
-          command: |
-            set +eo
-            npm ls
-            true
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - node_modules
-      - store_artifacts:
-          path: package-lock.json
-
-  dist:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run dist
-      - run: node ./tests/dekko/dist.test.js
-      - run: npm run bundlesize
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - dist
-
-  compile:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run compile
-      - run: node ./tests/dekko/lib.test.js
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - lib
-            - es
-
-  lint:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run lint
-
-  test_dist:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: dist
-
-  test_lib:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: lib
-
-  test_es:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: es
-
-  test_dom:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm test -- -w 1 --coverage
-      - run: bash <(curl -s https://codecov.io/bash)
-
-  test_node:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run test-node -- -w 1
-
-  test_dist_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: dist
-            REACT: 15
-
-  test_lib_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: lib
-            REACT: 15
-
-  test_es_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: es
-            REACT: 15
-
-  test_dom_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            REACT: 15
-
-  test_node_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm run test-node -- -w 1 -u
-          environment:
-            REACT: 15
-
-  check_metadata:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: node ./scripts/check-demo.js
-
-workflows:
-  version: 2
-  build_test:
-    <<: *workflow
-  nightly:
-    <<: *workflow
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
-          filters:
-            branches:
-              only:
-                - master
--- a/.codecov.yml
+++ b/.codecov.yml
@@ -1,9 +1,2 @@
 codecov:
  branch: master
-
-coverage:
-  status:
-    project:
-      default:
-        # Fail the status if coverage drops by >= 0.1%
-        threshold: 0.1
--- a/.depslintrc.js
+++ b/.depslintrc.js
@@ -1,18 +0,0 @@
-module.exports = {
-  ignore: [
-    '**/~*/**',
-    '**/_*/**',
-    '**/icon/**',
-    '**/__tests__/**',
-    '**/style/**',
-    '**/locale/**',
-    '**/*-provider/**',
-    '**/*.json',
-  ],
-  modulePattern: [
-    {
-      pattern: /ConfigConsumer.*renderEmpty/ms,
-      module: '../empty',
-    },
-  ],
-};
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-# 🎨 editorconfig.org
+# editorconfig.org

 root = true

--- a/.eslintignore
+++ b/.eslintignore
@@ -1,16 +1,6 @@
 components/**/*.js
 components/**/*.jsx
 components/*/__tests__/type.tsx
+!.eslintrc.js
 !components/*/__tests__/**/*.js
 !components/*/demo/*
-!.*.js
-# Docs templates
-site/theme/template/IconDisplay/*.js
-site/theme/template/IconDisplay/*.jsx
-typings
-es/**/*
-lib/**/*
-node_modules
-_site
-dist
-**/*.d.ts
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,12 +1,5 @@
 const eslintrc = {
-  extends: [
-    'airbnb',
-    'prettier',
-    'plugin:jest/recommended',
-    'plugin:react/recommended',
-    'plugin:import/typescript',
-    'prettier/react',
-  ],
+  extends: ['eslint-config-airbnb'],
  env: {
    browser: true,
    node: true,
@@ -14,88 +7,54 @@ const eslintrc = {
    jest: true,
    es6: true,
  },
-  settings: {
-    react: {
-      version: '16.9',
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
    },
  },
-  parser: '@typescript-eslint/parser',
-  plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint'],
-  // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
-      },
-    },
+  plugins: [
+    'markdown',
+    'react',
+    'babel',
  ],
  rules: {
-    camelcase: 0,
-    'react/jsx-one-expression-per-line': 0,
+    'func-names': 0,
+    'arrow-body-style': 0,
+    'react/sort-comp': 0,
    'react/prop-types': 0,
-    'react/forbid-prop-types': 0,
-    'react/jsx-indent': 0,
-    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'site/**',
-          'tests/**',
-          'scripts/**',
-          '**/*.test.js',
-          '**/__tests__/*',
-          '*.config.js',
-          '**/*.md',
-        ],
-      },
-    ],
+    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
+    'import/extensions': 0,
+    'import/no-unresolved': 0,
+    'import/no-extraneous-dependencies': 0,
+    'prefer-destructuring': 0,
+    'no-param-reassign': 0,
+    'no-return-assign': 0,
+    'max-len': 0,
+    'consistent-return': 0,
+    'no-redeclare': 0,
+    'react/require-extension': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/anchor-has-content': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/anchor-is-valid': 0,
+    'react/no-danger': 0,
    'comma-dangle': ['error', 'always-multiline'],
-    'react/jsx-filename-extension': 0,
-    'react/state-in-constructor': 0,
-    'react/jsx-props-no-spreading': 0,
-    'prefer-destructuring': 0, // TODO: remove later
-    'consistent-return': 0, // TODO: remove later
-    'no-return-assign': 0, // TODO: remove later
-    'no-param-reassign': 0, // TODO: remove later
-    'react/destructuring-assignment': 0, // TODO: remove later
-    'react/no-did-update-set-state': 0, // TODO: remove later
-    'react/require-default-props': 0,
-    'react/default-props-match-prop-types': 0,
-    'import/no-cycle': 0,
-    'react/no-find-dom-node': 0,
-    'no-underscore-dangle': 0,
-    'react/sort-comp': 0,
-    // label-has-for has been deprecated
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
-    'jsx-a11y/label-has-for': 0,
-    // for (let i = 0; i < len; i++)
-    'no-plusplus': 0,
-    // https://eslint.org/docs/rules/no-continue
-    // labeledLoop is conflicted with `eslint . --fix`
-    'no-continue': 0,
-    'react/display-name': 0,
-    // ban this for Number.isNaN needs polyfill
+    'function-paren-newline': 0,
+    'object-curly-newline': 0,
    'no-restricted-globals': 0,
-    'max-classes-per-file': 0,
-    'react/static-property-placement': 0,
-  },
-  globals: {
-    gtag: true,
  },
 };

 if (process.env.RUN_ENV === 'DEMO') {
-  eslintrc.globals = Object.assign(eslintrc.globals, {
+  eslintrc.globals = {
    React: true,
    ReactDOM: true,
    mountNode: true,
-  });
+  };

  Object.assign(eslintrc.rules, {
    indent: 0,
@@ -104,13 +63,10 @@ if (process.env.RUN_ENV === 'DEMO') {
    'eol-last': 0,
    'no-script-url': 0,
    'prefer-rest-params': 0,
-    'react/no-access-state-in-setstate': 0,
-    'react/destructuring-assignment': 0,
    'react/no-multi-comp': 0,
+    'react/prefer-stateless-function': 0,
    'jsx-a11y/href-no-hash': 0,
-    'import/no-extraneous-dependencies': 0,
-    'import/no-unresolved': 0,
-    'jsx-a11y/control-has-associated-label': 0,
+    'import/newline-after-import': 0,
  });
 }

--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,8 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-open_collective: ant-design
-patreon: ant_design
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: # Replace with a single custom sponsorship URL
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,5 +1,5 @@
 <!--
- ⚠️ ⚠️ ⚠️  IMPORTANT: Please use the following link to create a new issue: ⚠️ ⚠️ ⚠️
+IMPORTANT: Please use the following link to create a new issue:

  http://new-issue.ant.design

@@ -7,7 +7,7 @@ If your issue was not created using the app above, it will be closed immediately
 -->

 <!--
- ⚠️ ⚠️ ⚠️  注意：请使用下面的链接来新建 issue： ⚠️ ⚠️ ⚠️
+注意：请使用下面的链接来新建 issue：

  http://new-issue.ant.design

--- a/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
+++ b/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
@@ -1,11 +0,0 @@
---
-name: '⚠️  Please use new-issue.ant.design ⚠️'
-about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
-labels:
---
-
-The issue which is not created via http://new-issue.ant.design will be closed immediately.
-
---
-
-注意：不是用 http://new-issue.ant.design 创建的 issue 会被立即关闭。
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,54 +1,22 @@
-<!--
-First of all, thank you for your contribution! 😄
+First of all, thank you for your contribution! :-)

-New feature please send pull request to feature branch, and rest to master branch.
-Pull request will be merged after one of collaborators approve.
-Please makes sure that these form are filled before submitting your pull request, thank you!
+Please makes sure that these checkboxes are checked before submitting your PR, thank you!

-[[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
-->
+* [ ] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
+* [ ] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
+* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
+* [ ] Rebase before creating a PR to keep commit history clear.
+* [ ] Add some descriptions and refer relative issues for you PR.

-### 🤔 This is a ...
+Extra checklist:

- [ ] New feature
- [ ] Bug fix
- [ ] Site / document update
- [ ] Component style update
- [ ] TypeScript definition update
- [ ] Refactoring
- [ ] Code style optimization
- [ ] Test Case
- [ ] Branch merge
- [ ] Other (about what?)
+**if** *isBugFix* **:**

-### 🔗 Related issue link
+  * [ ] Make sure that you add at least one unit test for the bug which you had fixed.

-<!--
-1. Describe the source of requirement, like related issue link.
-->
+**elif** *isNewFeature* **:**

-### 💡 Background and solution
-
-<!--
-1. Describe the problem and the scenario.
-2. GIF or snapshot should be provided if includes UI/interactive modification.
-3. How to fix the problem, and list final API implementation and usage sample if that is an new feature.
-->
-
-### 📝 Changelog
-
-<!--
-Describe changes from userside, and list all potential break changes or other risks.
--->
-
-| Language   | Changelog |
-| ---------- | --------- |
-| 🇺🇸 English |           |
-| 🇨🇳 Chinese |           |
-
-### ☑️ Self Check before Merge
-
- [ ] Doc is updated/provided or not needed
- [ ] Demo is updated/provided or not needed
- [ ] TypeScript definition is updated/provided or not needed
- [ ] Changelog is provided or not needed
+  * [ ] Update API docs for the component.
+  * [ ] Update/Add demo to demonstrate new feature.
+  * [ ] Update TypeScript definition for the component.
+  * [ ] Add unit tests for the feature.
--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@@ -1,56 +0,0 @@
-<!--
-首先，感谢你的贡献！😄
-
-新特性请提交至 feature 分支，其余可提交至 master 分支。
-在一个维护者审核通过后合并。
-请确保填写以下 pull request 的信息，谢谢！~
-
-[[English Template / 英文模板](?expand=1)]
-->
-
-### 🤔 这个变动的性质是？
-
- [ ] 新特性提交
- [ ] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 组件样式改进
- [ ] TypeScript 定义更新
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他改动（是关于什么的改动？）
-
-### 🔗 相关 Issue
-
-<!--
-1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->
-
-### 💡 需求背景和解决方案
-
-<!--
-1. 要解决的具体问题。
-2. 列出最终的 API 实现和用法。
-3. 涉及UI/交互变动需要有截图或 GIF。
-->
-
-### 📝 更新日志怎么写？
-
-<!--
-> 从用户角度描述具体变化，以及可能的 breaking change 和其他风险？
-->
-
-| 语言    | 更新描述 |
-| ------- | -------- |
-| 🇺🇸 英文 |          |
-| 🇨🇳 中文 |          |
-
- 中文（可选）:
-
-### ☑️ 请求合并前的自查清单
-
- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供
--- a/.github/config.yml
+++ b/.github/config.yml
@@ -1,10 +0,0 @@
-# Configuration for request-info - https://github.com/behaviorbot/request-info
-
-# *Required* Comment to reply with
-requestInfoReplyComment: >
-  We would appreciate it if you could provide us with more info about this issue/pr!
-  Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository.
-  Issues labeled by Need Reproduce will be closed if no activities in 7 days.
-
-# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
-requestInfoLabelToAdd: needs-more-info
--- a/.github/weekly-digest.yml
+++ b/.github/weekly-digest.yml
@@ -1,7 +0,0 @@
-# Configuration for weekly-digest - https://github.com/apps/weekly-digest
-publishDay: sun
-canPublishIssues: true
-canPublishPullRequests: true
-canPublishContributors: true
-canPublishStargazers: true
-canPublishCommits: true
--- a/.github/workflows/deploy-site.yml
+++ b/.github/workflows/deploy-site.yml
@@ -1,21 +0,0 @@
-name: Deploy website
-on:
-  release:
-    types: [published]
-    branches:
-      - master
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@master
-
-    - name: Deploy website
-      uses: JamesIves/github-pages-deploy-action@master
-      env:
-        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-        BRANCH: gh-pages
-        FOLDER: _site
-        BUILD_SCRIPT: npm install && npm run predeploy
--- a/.github/workflows/rebase.yml
+++ b/.github/workflows/rebase.yml
@@ -1,14 +0,0 @@
-on:
-  issue_comment:
-    types: [created]
-name: Automatic Rebase
-jobs:
-  rebase:
-    name: Rebase
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@master
-    - name: Automatic Rebase
-      uses: cirrus-actions/rebase@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,18 +0,0 @@
-name: test
-
-on: [push]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: install
-        run: npm install
-
-      - name: test
-        run: npm run test-all
--- a/.gitignore
+++ b/.gitignore
@@ -35,11 +35,6 @@ yarn.lock
 package-lock.json
 components/**/*.js
 components/**/*.jsx
-!components/**/__tests__/**/*.js
-!components/**/__tests__/**/*.js.snap
+!components/**/__tests__/*.js
+!components/**/__tests__/*.js.snap
 /.history
-# Docs templates
-site/theme/template/IconDisplay/*.js
-site/theme/template/IconDisplay/*.jsx
-site/theme/template/IconDisplay/fields.js
-*.tmp
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,8 +0,0 @@
-ports:
- port: 8001
-  onOpen: open-preview
-tasks:
- before: >
-    export DEV_HOST=$(gp url 8001)
-  init: npm install
-  command: npm start
--- a/.jest.js
+++ b/.jest.js
@@ -2,30 +2,35 @@ const libDir = process.env.LIB_DIR;

 const transformIgnorePatterns = [
  '/dist/',
-  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
+  'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
 ];

 module.exports = {
-  verbose: true,
-  setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
-  modulePathIgnorePatterns: ['/_site/'],
-  moduleNameMapper: {
-    '^dnd-core$': 'dnd-core/dist/cjs',
-    '^react-dnd$': 'react-dnd/dist/cjs',
-    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
-    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
-    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
-    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
-  },
-  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node'],
+  setupFiles: [
+    './tests/setup.js',
+  ],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'md',
+  ],
+  modulePathIgnorePatterns: [
+    '/_site/',
+  ],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    'dekko',
+    'node',
+  ],
  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
+    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
  },
-  testRegex: `${libDir === 'dist' ? 'demo' : '.*'}\\.test\\.js$`,
+  testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
  collectCoverageFrom: [
    'components/**/*.{ts,tsx}',
    '!components/*/style/index.tsx',
@@ -35,11 +40,12 @@ module.exports = {
    '!components/**/*/interface.{ts,tsx}',
  ],
  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
  globals: {
    'ts-jest': {
-      tsConfig: './tsconfig.test.json',
-    },
+      tsConfigFile: './tsconfig.test.json',
+    }
  },
-  testURL: 'http://localhost',
 };
--- a/.jest.node.js
+++ b/.jest.node.js
@@ -1,23 +1,26 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for server render environment
 module.exports = {
-  setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
-  moduleNameMapper,
+  setupFiles: [
+    './tests/setup.js',
+  ],
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'md',
+  ],
  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
+    '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',
+    '\\.md$': './node_modules/antd-tools/lib/jest/demoPreprocessor',
  },
  testRegex: 'demo\\.test\\.js$',
  testEnvironment: 'node',
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer'
+  ],
  globals: {
    'ts-jest': {
      tsConfigFile: './tsconfig.test.json',
-    },
+    }
  },
 };
--- a/.jest.site.js
+++ b/.jest.site.js
@@ -1,22 +0,0 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for server render environment
-module.exports = {
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
-  moduleNameMapper,
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
-  },
-  testRegex: 'check-site\\.js$',
-  testEnvironment: 'node',
-  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  globals: {
-    'ts-jest': {
-      tsConfigFile: './tsconfig.test.json',
-    },
-  },
-};
--- a/.npmignore
+++ b/.npmignore
@@ -1 +0,0 @@
-~*
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,27 +0,0 @@
-**/*.svg
-package.json
-.umi
-.umi-production
-AUTHORS.txt
-lib/
-es/
-dist/
-_site/
-coverage/
-CNAME
-LICENSE
-yarn.lock
-netlify.toml
-yarn-error.log
-*.sh
-*.snap
-components/*/*.js
-components/*/*.jsx
-.gitignore
-.npmignore
-.prettierignore
-.DS_Store
-.editorconfig
-.eslintignore
-**/*.yml
-components/style/color/*.less
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,14 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100,
-  "proseWrap": "never",
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -0,0 +1,23 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "comment-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "function-comma-newline-after": null,
+    "function-name-case": null,
+    "function-parentheses-newline-inside": null,
+    "function-max-empty-lines": null,
+    "function-whitespace-after": null,
+    "indentation": null,
+    "number-leading-zero": null,
+    "number-no-trailing-zeros": null,
+    "rule-empty-line-before": null,
+    "selector-combinator-space-after": null,
+    "selector-list-comma-newline-after": null,
+    "selector-pseudo-element-colon-notation": null,
+    "unit-no-unknown": null,
+    "value-list-max-empty-lines": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "no-descending-specificity": null
+  }
+}
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,16 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-rational-order",
-    "stylelint-config-prettier"
-  ],
-  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
-  "rules": {
-    "comment-empty-line-before": null,
-    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
-    "no-invalid-double-slash-comments": null,
-    "no-descending-specificity": null,
-    "declaration-empty-line-before": null
-  },
-  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
-}
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,26 +3,22 @@ sudo: false
 language: node_js

 node_js:
-  - 11
-
-cache:
-  directories:
-    - $HOME/.npm
+  - 8

 matrix:
  fast_finish: true
  include:
-    - env: TEST_TYPE=lint
-    - env: REACT=16 TEST_TYPE=test:dist
-    - env: REACT=16 TEST_TYPE=test:lib
-    - env: REACT=16 TEST_TYPE=test:es
-    - env: REACT=16 TEST_TYPE=test:dom
-    - env: REACT=16 TEST_TYPE=test:node
-    - env: REACT=15 TEST_TYPE=test:dist
-    - env: REACT=15 TEST_TYPE=test:lib
-    - env: REACT=15 TEST_TYPE=test:es
-    - env: REACT=15 TEST_TYPE=test:dom
-    - env: REACT=15 TEST_TYPE=test:node
+      - env: TEST_TYPE=lint
+      - env: REACT=16 TEST_TYPE=test:dist
+      - env: REACT=16 TEST_TYPE=test:lib
+      - env: REACT=16 TEST_TYPE=test:es
+      - env: REACT=16 TEST_TYPE=test:dom
+      - env: REACT=16 TEST_TYPE=test:node
+      - env: REACT=15 TEST_TYPE=test:dist
+      - env: REACT=15 TEST_TYPE=test:lib
+      - env: REACT=15 TEST_TYPE=test:es
+      - env: REACT=15 TEST_TYPE=test:dom
+      - env: REACT=15 TEST_TYPE=test:node

 before_script:
  - scripts/install-react.sh
--- a/AUTHORS.txt
+++ b/AUTHORS.txt
@@ -1,259 +1,147 @@
-+v <ljw@live.jp>
-17073025 <17073025@cnsuning.com>
-282159468 <282159468@qq.com>
 778758944 <778758944@qq.com>
 Aaron Planell López <aaronplanell@gmail.com>
-Aditya Padhi <aditya.padhi@outlook.com>
 Adrian Dimitrov <dimitrov.adrian@gmail.com>
-Ahmed AlSammany <ahmed.alsammany@incorta.com>
-Alan Braithwaite <asbraithwaite@gmail.com>
 Albert Zheng <lisong.zheng@gmail.com>
 Albert 理斯特 <shuaizhexu@gmail.com>
 Aleck Landgraf <aleck.landgraf@gmail.com>
 Alexander <labriko@yandex.ru>
-Alexander Anpleenko <vaeum@yandex.com>
 Alexander Suevalov <suevalov.work@gmail.com>
 Alexandre Kirszenberg <a.kirszenberg@gmail.com>
-Alexey Yakovlev <yallie@yandex.ru>
-Alfred Qiu <sc941203@gmail.com>
-Ali Zhdanov <makedonec88@gmail.com>
-Alireza <alireza.mh@gmail.com>
-Alvin Abia <alvin.abia@icloud.com>
 Amorites <751809522@qq.com>
-Amumu <yoyo837@hotmail.com>
 Anas Tawfeek <anas.tawfeek@outlook.com>
-Andre Perunicic <andre@intoli.com>
 Andrew Murray <radarhere@gmail.com>
-Andrew Shearer <andrew@ashearer.com>
 Andrey G <plandem@gmail.com>
-Andrzej Dybionka <andrzej@arabel.la>
-André <mazoni.andre@gmail.com>
-Ardo Kusuma <ardo@uber.com>
 Arnab Sen <arnabsen@gmail.com>
 Arthur Denner Oliveira Santos <arthurdenner7@gmail.com>
 Arvin Xu <arvinx@foxmail.com>
-Ash Kumar <kumar.ashwin@outlook.com>
 BK Heleth <bon.hoo@hotmail.com>
 Babajide Fowotade <jide.b.tade@gmail.com>
-Barry <barry.yansh@gmail.com>
 Bartek <bartek.kozera@gmail.com>
-Benedikt Franke <benedikt@franke.tech>
 Benjamin Kniffler <bkniffler@me.com>
 Benjy Cui <benjytrys@gmail.com>
-Benoît Latinier <benoit@latinier.fr>
 Bernie <bernie.wangbj@gmail.com>
 Bilal Sirazitdinov <bilalsir@yandex.ru>
 Bill Sheikh <bilawals22@gmail.com>
 Bo Chen <bochen2014@yahoo.com>
-Bolun Zhang <rzhangbolun@gmail.com>
-Bora Ikizoglu <boraikizoglu@gmail.com>
 Bozhao <yubz86@gmail.com>
-Bradley Xu <xgheaven@gmail.com>
 Brett Lamy <bel423@me.com>
 Brook Shi <iwxiaot@gmail.com>
 Bruce Mitchener <bruce.mitchener@gmail.com>
 Bruno Maia <bruno.mm.maia@gmail.com>
 Bryan Berger <bb@ga.co>
 C <4019980@qq.com>
-C.J. Winslow <whoaa512@gmail.com>
-CORP\lianyufeng <15275222711@163.com>
 Cam Song <neosoyn@gmail.com>
 Camol <kwwnjujlc@sina.com>
-Cang Ta <hoksilato176@gmail.com>
 Canwen Xu <canwenxu@126.com>
-Carter Feldman <carter@carter.at>
 Catalin Miron <mironcatalin@gmail.com>
 Cee Cirno <i@cee.moe>
-Chandler Moisen <chandlermoisen@gmail.com>
 Chang Wang <cheapsteak@gmail.com>
-Charles Covey-Brandt <chazcb@gmail.com>
-Chelsea Huang <chelsea.huang@sap.com>
-Cheng Liu <liucheng.tech@outlook.com>
-Chenjia <ariesjia00@hotmail.com>
 Chikara Chan <chenhongtu@51xianqu.net>
 Chris Kelly <cjke.7777@gmail.com>
 ChrisFan <chris.fan.dev@gmail.com>
-Christian <chr.vadala@gmail.com>
-Christian Vadalà <chr.vadala@gmail.com>
 Christopher Deutsch <cd@cdeutsch.com>
 Chuang Yu <cyu9960@gmail.com>
 Claudio Restifo <claudio.restifo@gmail.com>
 Cody Chan <int64ago@gmail.com>
 Colton Pierson <colton@coltonpierson.com>
 Confiks <confiks@scriptbase.org>
-Cong Zhang <dancerphil1994@gmail.com>
 Conway Anderson <hello@conwayanderson.com>
 Cordaro <elvis07@163.com>
 D & R <jdz321@qq.com>
-Daewoong Moon <wiziple@gmail.com>
 Damian Green <damian.green@microlease.com>
-Damian Green <damian@gcoders.com>
 Dan Minshew <ofenixculpa@gmail.com>
 Dane David <dndavid102@gmail.com>
-Daniel Gomez <dgomez@orangeloops.com>
 Danny Hoower Antonio Viasus Avila <danjavia@gmail.com>
 Daqi Song <dqaria@gmail.com>
 Darren Poon <dyhpoon@gmail.com>
-David Hatten <dhatten@covermymeds.com>
 David Schneider <davschne@gmail.com>
 DengYun <tdzl2003@gmail.com>
 Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
-Dmitriy Mironov <dima.dev01@gmail.com>
 Dmitry Bolotin <bolotin.dmitriy@gmail.com>
-Dmitry Gladkikh <abdurahmanus@gmail.com>
-Dmitry Guryev <dmitry.gurjev@gmail.com>
-Dmitry Manannikov <email@slonoed.net>
-Dmitry Snegirev <rikkitp@gmail.com>
 Dorian <dorian@doma.io>
 DosLin <doslino@gmail.com>
-Douglas Mason <Demasonjr@gmail.com>
-Eager <1226393396@qq.com>
-Eager Wei <1226393396@qq.com>
 EcmaProSrc.P/ka <asoiso@foxmail.com>
-Ed Moore <ed@90seconds.tv>
 Edd Hannay <accounts@edd.fm>
 Eddie Xie <oeddyo@gmail.com>
 Eden Wang <Eden.Wang@Akmii.com>
 Eden Wang <yociduo@vip.qq.com>
-Eduardo Ludi <eduludi@gmail.com>
-Edward <7047924@qq.com>
 Egor Yurtaev <yurtaev.egor@gmail.com>
 Eli White <github@eli-white.com>
-Emerson Laurentino <emersonlaurentino@hotmail.com>
 Emma <sima.zhang1990@gmail.com>
 Eric <84263800@qq.com>
-Eric Celeste <efc@clst.org>
-Eric Turriff <eric.turriff@gmail.com>
 Erwann Mest <m+github@kud.io>
 Evgeny Kuznetsov <jackk@ya.ru>
 Eward Song <eward.song@gmail.com>
-Federico Marcos <marcosfede@gmail.com>
-Fergus Leung <fergusleung96@gmail.com>
-Fernando Giarritiello <fgiarritiello@gmail.com>
-Florian Orpelière <florian.orpeliere@gmail.com>
 Flynn <li.fulin@foxmail.com>
 For177 <mengqiang.q@gmail.com>
-Gabe Medrash <gabeme@alleninstitute.org>
-Gabriel Nunes <gabriel@multiverso.me>
-Gao Jiangmiao <tolbkni@gmail.com>
-Gautier <rollingautier2@gmail.com>
 Geoff Holden <geoff@brightloudnoise.com>
 George Gray <george@ummodesign.com>
-Go7hic <gtfx0209@qq.com>
 Graeme Yeates <gyeates@clearpath.ai>
 Graeme Yeates <yeatesgraeme@gmail.com>
-Grant Klinsing <gklinsing@gmail.com>
 Gray Choi <gray.choi.1988@gmail.com>
 Guan Hao <raptium@gmail.com>
 Guan Yu Pan (Jacky) <jackypan1989@gmail.com>
 HJin.me <hjin.me@gmail.com>
 Hai Phan Nguyen <pnghai@gmail.com>
 Haibin Yu <haibin.yu@oceanwing.com>
-Hal-pan <hms181231@gmail.com>
 Hanai <ihanai1991@gmail.com>
-Hanz Luo <lhz0516@gmail.com>
-Harlan <luoxwen@gmail.com>
-HarlanLuo <luoxwen@gmail.com>
 Haroen Viaene <fingebimus@me.com>
 Harshit Mehrotra <harshitmehrotra@hotmail.com>
-Heaven <ne_smalltown@163.com>
 Henri Normak <henri.normak@gmail.com>
-HeskeyBaozi <hezhiyu233@foxmail.com>
-Hieu Ho <hieu.ho.le@lazada.com>
-Higor Araújo dos Anjos <higor.araujo.anjos@gmail.com>
 Hubert Argasinski <argasinski.hubert@gmail.com>
 Hughen <446370503@163.com>
 Hugo LEHMANN <shogi31@gmail.com>
-Igor <nemytyshew@yandex.ru>
 Igor G <i.gaidai4uk@gmail.com>
-Ilan <hasanovtk@gmail.com>
-Ilan Hasanov <hasanovtk@gmail.com>
 ImJoeHs <865439601@qq.com>
 Inclined.Z <zjq0717@163.com>
 Infinity <305870677@qq.com>
 Ivan Kravets <me@ikravets.com>
-Ivan Trofimov <ivan@trofimov.link>
 Ivo Stratev <ivo.stratev.tues@gmail.com>
-Jack Hsieh <jack@egenware.com>
-Jack Lo <jack-lo@foxmail.com>
-Jack Works <zjwpeter@gmail.com>
-Jackie.Ls <418292038@qq.com>
-Jacques Kvam <jwkvam@gmail.com>
 JaePil Jung <jjp5023@gmail.com>
-Jake Richards <jake.richards@genesys.com>
 James <james@schoolshape.com>
-JamesYin <elantion@gmail.com>
-Jaroslav Bereza <github.com@bereza.cz>
-Jason Chen <ceocjy@vip.qq.com>
-Jean-Luc Sorak <jlsorak@icloud.com>
 Jeffrey Carl Faden <jeffreyatw@gmail.com>
-JeromeLin <jerome.lin@zhongan.com>
 Jerry Bendy <jerry@icewingcc.com>
 Jesper We <jesper@journeyman.se>
 Jiabin Peng <png.inside@gmail.com>
 Jialei <jialeicui@126.com>
 Jieraaa <842533841@qq.com>
-Jin ZHANG <jz.zhangjin@gmail.com>
 Jing Ma <mjingm87@qq.com>
-Jinxuan Zhu <zhujinxuan@gmail.com>
-Joao Rabelo <jrabelo@tech6.com.br>
 Joe <qiaolibo@126.com>
 Joe Hsu <jhsu.x1@gmail.com>
-Johannes Loewe <johannes@loewe.pm>
 John Johnson III <john@johnjohnson.cc>
 John Nguyen <jtnguyen236@gmail.com>
 Jonatas Walker <jonataswalker@gmail.com>
 Jonny Buchanan <jonathan.buchanan@gmail.com>
 Jordan Hornblow <jordan@jch254.com>
-Josue Peralta <jperal77@gmail.com>
 Josué <ujosuegt@outlook.com>
-JribiBelhassen <belha9inzaghi@gmail.com>
 Juan Rodrigo Venegas Boesch <jrvboesch@gmail.com>
-Julia Passynkova <ipassynk@hotmail.com>
 Junyu Zhan <irrigator@yeah.net>
-Justin Reich <reich.justin@gmail.com>
 Kaien Liao <liaokaien@gmail.com>
-Kasra Bigdeli <kasra85@gmail.com>
 Kenaniah Cerny <kenaniah@gmail.com>
-Kenneth Luján Rosas <elgenio.03@gmail.com>
 Kenneth Truong <kenneth.e.truong@gmail.com>
-KentonYu <975853613@qq.com>
 Kevin Ivan <info@kevinivan.com>
-Kevin Wang <gumtree200@gmail.com>
 KgTong <kgtong1992@gmail.com>
 Khalifa Lame <khalibloo@gmail.com>
-Kian <kian@vsu.cc>
 Kiho · Cham <monkindey@163.com>
 Kimmo Saari <kimmo.saari@revolt.fi>
-Kirill Alexander Khalitov <voronar@gmail.com>
 Kirill Stiopin <kirill.stiopin@hotmail.com>
 Knacktus <knacktus@gmail.com>
-Konrad Machlowski <konrad.machlowski@gmail.com>
 Kyle Kelley <rgbkrk@gmail.com>
 Kyle Rosenberg <kyle.rosenberg@gmail.com>
-LLinFan- <catfoursi@qq.com>
-Laith <laith24@gmail.com>
 Larry Laski <larry.laski@gmail.com>
 LeeHarlan <709886167@qq.com>
 LeezQ <lizhenq2009@gmail.com>
 Leo <clinyong@gmail.com>
 Leon Shi <superRaytin@163.com>
 Leon Shi <superRaytin@gmail.com>
-Li Chao <rftstars@qq.com>
 Liu Yang <zation1@gmail.com>
 LongYinan <lynweklm@gmail.com>
-Lucien Lee <lkiral7903@gmail.com>
-Ludwig Bäcklund <ludli839@student.liu.se>
 Lyndon001 <lld207@126.com>
 MG12 <wuzhao.mail@gmail.com>
 Ma Tianxiao <matx2215@outlook.com>
-Maciej Czekaj <natanielcz@gmail.com>
 Madis Väin <madisvain@gmail.com>
-Maksym Mosyura <wmornotwm@gmail.com>
 Manjit Kumar <manjit1727@gmail.com>
 Manweill <mic.liangwenwei@foxmail.com>
-MaoYiWei <137308365@qq.com>
-Marcela Bomfim <mbomfim@live.com>
 Marco Afonso <mafonso333@gmail.com>
 Marcus Bransbury <marcus.bransbury@gmail.com>
 Marius Ileana <visvadw@gmail.com>
@@ -262,35 +150,22 @@ Marshall Chen <Juniors.fei@gmail.com>
 Martin Litvaj <kamahl19@gmail.com>
 Martin Novák <martinnovak@outlook.com>
 Mathew <khayaanimations@gmail.com>
-Matt Lein <matt.lein@code42.com>
-Max <maksym.mosyura@kruschecompany.com>
 Maximilian Meyer <Maximilian.Meyer@br.de>
 Meck <yesmeck@gmail.com>
 MeiLin <postget.me@gmail.com>
 Meow-z <372086270@qq.com>
 Miaow <i@zfeng.net>
-Michael Krog <mic@apaq.dk>
-Michael Salaverry <barakplasma@gmail.com>
-Michael Wang <ylzcylx@gmail.com>
 Michalis Macheras <diodosier@gmail.com>
-Michelle Zhang <michelle.chsy@gmail.com>
-Mikasa33 <mikasa33@qq.com>
 Min <dicklwm@163.com>
 MinJeong Kim <min7859@gmail.com>
-Ming Hann <eldy8888@gmail.com>
 Minqi Pan <pmq2001@gmail.com>
 Minsung Ryu <ryums0227@gmail.com>
 Mitchell Demler <mitchell.demler@harcourts.net>
 Mohamed Seada <mohamed.seada.1994@gmail.com>
-Mohammad Faisal <faisalhmohd@gmail.com>
-Mohan Ban <banmohan@outlook.com>
-Mounish Sai <pvsmounish@gmail.com>
 Mr.Tone <vector@malubei.com>
 MuYu <mr.muzea@gmail.com>
 Mário Gonçalves <mario.mc.goncalves@gmail.com>
-Nathan Broadbent <git@ndbroadbent.com>
 Nathan Griffin <nathan@gatherhere.com>
-Nathan Schneider <n.l.schneider@gmail.com>
 Nathan Tavares Nascimento <nathan.tnascimento@gmail.com>
 Nathan Wells <nwwells@gmail.com>
 Neekey <ni184775761@gmail.com>
@@ -298,251 +173,150 @@ Nekron <nekron.hyt@gmail.com>
 Neverland <chenjiahan@buaa.edu.cn>
 Nico <nicolas@freddelacompta.com>
 Nidhi Agarwal <nidhi.agarwal@zomato.com>
-Niko Autio <niko.autio@fenten.fi>
-Nikolay <veseliy07@gmail.com>
-Nikolay Solovyov <i@mr-ozio.ru>
-Nima Dehnashi <nima@getaround.com>
 Nimo <nimo.jser@gmail.com>
 Nishant Arora <na.nishantarora@gmail.com>
 Nokecy <Nokecy@163.com>
 OAwan <georgio.wan@gmail.com>
-Oleg Kuzava <olegkuzava@gmail.com>
 Oleksandr Kovalchuk <me.olexandr.kovalchuk@gmail.com>
-Ooi Yee Wei <ywooi@yahoo.com>
-Open Next <opennext@126.com>
-Oren Kosto <oren@panda-os.com>
-Oren Kosto <orenkosto86@gmail.com>
 OuYancey <ou.yancey@gmail.com>
 Panjie Setiawan Wicaksono <panjie@panjiesw.com>
 Patrick Gidich <patrick.gidich@simnova.com>
 Patryk <longer44@gmail.com>
 Peter <usstpeter@gmail.com>
 Peter Berg <atticusberg@gmail.com>
-Phanupong Janthapoon <panupong.jtp@gmail.com>
-Philip Oliver <philipodev@gmail.com>
 Pierre <pierre@bazoge.com>
 Pierre Neter <pierreneter@gmail.com>
 Piper Chester <piperchester@gmail.com>
 Pixy Yuan <pixy.bupt@gmail.com>
-Pooya Parsa <pyapar@gmail.com>
 Pyiner <lijiuyang1992@gmail.com>
 Pyroboomka <qwaarty@mail.ru>
-QC-L <github@liqichang.com>
 Qiaosen Huang <joesonw@gmail.com>
 Qingrong Ke <keqingrong1992@gmail.com>
 Rafael Cosman <rafaelcosman@alumni.stanford.edu>
-Rahul Gurung <gurungrahul2@gmail.com>
-Rallets <rallet@rallets.com>
 Ramsés Moreno <ramses@cuatromedios.com>
-Ran Byron <ranbena@gmail.com>
 Randy <randypriv@gmail.com>
 RaoHai <surgesoft@gmail.com>
-Raphael Chauveau <raph.chauveau@gmail.com>
 Reed Sun <superreedsun@gmail.com>
 Rex <zhangzilong.zzl@163.com>
 Ricardo Raphael Joson <rrjoson08@gmail.com>
 Richard D. Worth <rdworth@gmail.com>
-Rick Zhou <rinick@gmail.com>
 Robert Wilkinson <wilkinson.robert.a@gmail.com>
 Rohan Malhotra <rohan.root@gmail.com>
-Rongjian Zhang <pd4d10@gmail.com>
 Rrrandom <emanonhere@gmail.com>
-RunningCoderLee <sprint_l@aliyun.com>
-RyanHui <ryanhui1996@gmail.com>
 SHEN Lin <shenlin192@gmail.com>
 Sakol Assawasagool <koobitor@gmail.com>
 Sam Chen <chenxsan@gmail.com>
-Sam Lanning <sam@samlanning.com>
 Sam Maxwell <sam@paybase.io>
-Samuel Gaus <sam@gaus.co.uk>
 Sangle <whb97@163.com>
 Sanjay Kumar <kris.gooner@gmail.com>
 Sanjay Kumar <sk@tectusdreamlab.com>
-Scott Sturgeon <scott@tugboatlogic.com>
 Sean Lin <sean@ejoy.com>
 Sean Sun <pinggodstudio@gmail.com>
 Sebastian Blade <blade254353074@hotmail.com>
-Sebastian Busch <mail@sebastian-bus.ch>
-Sebastian Busch <s.busch@qbus-enet.de>
-Sergey Volynkin <sergey.volynkin@akvelon.com>
 Sergio Crisostomo <sergiosbox@gmail.com>
 Shawn Sit <xueqingxiao@gmail.com>
 ShiTengFei <shitengfei@goyoo.com>
-Shuai Chen <wasd2144@hotmail.com>
 Shubham Kanodia <shubhamsizzles@gmail.com>
-Shun <polytechnics.shun@gmail.com>
-Shuvalov Anton <anton@shuvalov.info>
 SimaQ <sima.zhang1990@gmail.com>
-Simo Aleksandrov <simo3003@me.com>
-Sivaraj S <sivaraj@sdev.in>
 Spencer <spjy@hawaii.edu>
 Stephen Esser <Stephen.Esser@gmail.com>
-Subroto <shub1493biswas@gmail.com>
-Sven Efftinge <sven.efftinge@typefox.io>
 Tao <magicdawn@qq.com>
 Tao Zhang <windse7en@gmail.com>
 Taylor Sabell <taylorsabell@gmail.com>
-Teng YANG <morenyang88@gmail.com>
-Teng YANG <yangteng@me.com>
 Tengjiao Cai <caitengjiao1987@gmail.com>
 Terence <trence320@163.com>
 The Rock <zhoguoxin@126.com>
-Thibault Derousseaux <tde@activeviam.com>
-Thiebaud Thomas <thiebaud.tom@gmail.com>
-Thomas <tom@axisj.com>
 Tino D <ginodeis@gmail.com>
 Tom Gao <tom@zoomsoft.cc>
-Tom Xu <tom.xu@antcosa.com>
-Tom Xu <ycxzhkx@gmail.com>
-TomIsion <isiontom@gmail.com>
-Tomás Francisco <mail@tomasfrancisco.com>
-Tomáš Szabo <tomas.szabo@deftomat.com>
 Trotyl Yu <trotyl@qq.com>
 Troy Thompson <troynt@gmail.com>
 Tyler <chaotyler@gmail.com>
 Ubaldo Quintana <blkdr@hotmail.com>
 Vadim Macagon <vadim.macagon@gmail.com>
 Valentin Vichnal <valentin@vichnal.com>
-Van Nguyen <vnguyen94@gmail.com>
 Vemund Santi <vemund@santi.no>
 Vic <709147950@qq.com>
 Vincent Zhang <vxzhong@qq.com>
-Vitaliy Mazurenko <vitaliymazurenko@gmail.com>
 ViviaRui <zr1450995198@163.com>
-Vu Hoang Minh <vuhminh@gmail.com>
-Walter Barbagallo <brb.walter@gmail.com>
 Walter Barbagallo <turbometalskater@gmail.com>
 Wang Jun <amos.callmexyz@gmail.com>
-Wang Riwu <riwu0730@gmail.com>
-Wang Zhengchen <wang909208@163.com>
-Wang yb <wangyibu123@gmail.com>
 Warren Seymour <warren@fountainhead.tech>
 Wei Zhu <yesmeck@gmail.com>
 Wenchao Hu <zjuhwc@gmail.com>
-Wendell <wendzhue@gmail.com>
 Will Chen <willchen90@gmail.com>
 WingGao <wing.gao@live.com>
 Wu Haotian <whtsky@gmail.com>
 XBTop1! <xbtop1@gmail.com>
-Xiaoming <yokiming1994@gmail.com>
 Xie Guanglei <xieguanglei@hotmail.com>
-Xiping.wang <527409987@qq.com>
 XuMM_12 <owiatsq@sina.cn>
-Yang <504021398@qq.com>
 Yang Bin <yangkghjh@gmail.com>
-Yangzhedi <uiryzd@163.com>
 Yasin Uslu <nepjua@gmail.com>
-Yevhen Hryhorevskyi <evgeniygrigorevskiy@gmail.com>
 Yiming <ymjrcc@qq.com>
 Yogesh <yogeshkumar180592@gmail.com>
-Yu <yutingzhao1991@sina.com>
 YuChao Liang <l.yuch@foxmail.com>
-Yuhang Liu <644186735@qq.com>
 Yunus EŞ <yunus@yunuses.com>
-Yuri Pirola <yuri.pirola@unimi.it>
 Yury Kozyrev <urakozz@me.com>
 Yusuke Ito <novi.mad@gmail.com>
 Yuwei Ba <i@xiaoba.me>
-Yuxuan Huo <yuxuan.huo2011@gmail.com>
 YuyingWu <wuyuying1128@gmail.com>
 Zack Craig <zack@zack6849.com>
 Zap <a124116186@qq.com>
 Zhang Zhi <fytriht@gmail.com>
 Zheeeng <hi@zheeeng.me>
-Zhiqiang Gong <elory0513@hotmail.com>
 Ziluo <gyfzzu@gmail.com>
-Zohaib Ijaz <mzohaib.qc@gmail.com>
-aashutoshrathi <aashutoshrathi@gmail.com>
 afc163 <afc163@gmail.com>
-agent-z <1607291079@qq.com>
 ahalimkara <ahalimkara@gmail.com>
-alex <379118572@qq.com>
-alexchen <alexchen@easyops.cn>
-amedora <americandragsterracing@gmail.com>
-arifemrecelik <ce.arifemre@gmail.com>
 ascoders <576625322@qq.com>
 ashishg-qburst <ashishg@qburst.com>
-bLue <tbdblue@gmail.com>
 bang <sqibang@gmail.com>
 bang88 <sqibang@gmail.com>
-baozefeng <727751065@qq.com>
 blankzust <450811238@qq.com>
-bukas <yhz1219@gmail.com>
 byuanama <byuan@ama.com.au>
-byzyk <bohdan.kh@gmail.com>
 bzone <yarnbcoder@gmail.com>
 caoyi <caoyi0905@mail.hfut.edu.cn>
-carrie-tanminyi <12mytan@gmail.com>
 cathayandy <wzm_andy@126.com>
-cc189 <cc189dev@gmail.com>
 chaofeis <408067385@qq.com>
 chchen <cc272309126@gmail.com>
 chencheng (云谦) <sorrycc@gmail.com>
 chencheng <sorrycc@gmail.com>
-chunlea <ichunlea@me.com>
 cjahv <cjahv@qq.com>
 clinyong <clinyong@gmail.com>
-codesign <zuishiguang@126.com>
 corneyl <cornieljoosse@gmail.com>
-david.lv <code4funlnyx@gmail.com>
-davidhatten <david.r.hatten@gmail.com>
 ddcat1115 <ddcat1115@gmail.com>
-decade <decadef20@gmail.com>
 delesseps <andrewlessels@gmail.com>
 denzw <denzw@21cn.com>
-dependabot[bot] <support@dependabot.com>
 detailyang <detailyang@gmail.com>
 devqin <devqin@gmail.com>
-digz6666 <digz6666@gmail.com>
 djorkaeff <djorkae55@gmail.com>
 duzliang <duzliang@gmail.com>
 ecofe <150641329@qq.com>
 edgji <j.edgji@gmail.com>
-eidonjoe <806488716@qq.com>
 elios <elios264@hotmail.com>
 elrrrrrrr <elrrrrrrr@gmail.com>
 ezpub <ez.foro@gmail.com>
 feng zhi hao <fzhihao@outlook.com>
 fengmk2 <m@fengmk2.com>
 flashback313 <windmark2012@gmail.com>
-frezc <504021398@qq.com>
 genie <genie88@163.com>
 gregahren <grega.hren@gmail.com>
-guifu <picodoth@gmail.com>
-gyh9457 <gyh9457@163.com>
 handycode <lihandi@gmail.com>
-hank <stonehank310@gmail.com>
-hanpei <75189218@qq.com>
 hansnow <hansnow2012@gmail.com>
 haoxin <coderhaoxin@outlook.com>
 hardfist <yangjianzju@gmail.com>
 hauwa123 <hauwa.aminu@outlook.com>
-hehe <xpc_kacl@163.com>
-hengkx <ycxzhkx@gmail.com>
 henryv0 <henryvo94@gmail.com>
 hi-caicai <hi@cai-cai.me>
-hongxuWei <hongxu.wei@outlook.com>
-huangyan.py <huangyan.py@bytedance.com>
-huishiyi <zhou1maple@gmail.com>
 huzzbuzz <huzzbuzz@outlook.com>
 iamcastelli <sowed@cyberdude.com>
-ilanus <hasanovtk@gmail.com>
-imhele <work@imhele.com>
 imosapatryk <imosa.patryk@gmail.com>
 infeng <fzhihao@outlook.com>
 int2d <int2d@qq.com>
-iojichervo <ioji@chervonagura.com.ar>
 ioldfish <fish.wangl@gmail.com>
-iugo <iugogogo@gmail.com>
-j3l11234 <297259024@qq.com>
 jasonslyvia <jasonslyvia@gmail.com>
 jasonxia23 <xia.jason23@gmail.com>
-jiajiangxu <minesaner@163.com>
 jiang <155259966@qq.com>
 jim <wasd2144@hotmail.com>
 jinouwuque <ee2win@gmail.com>
-jinyaqiao1102 <405782493@QQ.com>
-jojoLockLock <miffyschou@sina.com>
 junjing.zhang <zhangjunjing@gmail.com>
 kacjay <45483388@qq.com>
 kagawagao <kingsongao1221@gmail.com>
@@ -552,26 +326,20 @@ kayw <kayw@outlook.com>
 kdenz <ksnz93@gmail.com>
 kdepp <kdepp.cd@gmail.com>
 keng <keng@renderinghouse.com>
-kenve <zwei.xie@gmail.com>
 keqingrong <keqingrong1992@gmail.com>
 ko <git@yaksok.net>
 konakona <lovekonakona@gmail.com>
 kossel <lis.yichao@gmail.com>
-kristof0425 <dombi.kristof@gmail.com>
 kuang <p2227@hotmail.com>
-kuitos <kuitos.lau@gmail.com>
 kun sam <kunsam624@icloud.com>
 leadream <857098475@qq.com>
 lehug <zcszuo5811@126.com>
-leijingdao <leijingdao@163.com>
 leon.shi <superRaytin@163.com>
 lgmcolin <gengmin.lgm@gmail.com>
 lgmcolin <lgmcolin@gmail.com>
 liangfei <njliangfei@gmail.com>
 liekkas <zjq0717@163.com>
 lihqi <455711093@qq.com>
-lilun <lilun_cd@keruyun.com>
-littleLane <857183384@qq.com>
 lixiaochou077 <qi.liqi07@gmail.com>
 lixiaoyang <lixiaoyang2345@gmail.com>
 lixiaoyang1992 <lixiaoyang2345@gmail.com>
@@ -580,198 +348,109 @@ lizhen <lizhen@youzan.com>
 loganpowell <loganp@tepper.cmu.edu>
 luyiming <luyimingchn@gmail.com>
 lvren <luren6049@qq.com>
-lyhper <lyhper@gmail.com>
 mArker <252133226@qq.com>
-maks <pine3ree@gmail.com>
 memoryza <jincai.wang@foxmail.com>
 mgrdevport <mgrdevport@gmail.com>
 mitchell.demler <mitchell.demler@harcourts.net>
 mkermani144 <mkermani144@gmail.com>
-mmmveggies <jakeselig@gmail.com>
-mofelee <mofe@me.com>
 monkindey <monkindey@163.com>
-mraiguo <810158465@qq.com>
-mraiguo <mraiguo@gmail.com>
-mushan0x0 <mushan0x0@gmail.com>
-muzea <mr.muzea@gmail.com>
 muzuiget <muzuiget@gmail.com>
 natergj <nater_nater@me.com>
 neekey <ni184775761@gmail.com>
-nick-ChenZe <chenze2168@gmail.com>
 niko <644506165@qq.com>
 nikogu <644506165@qq.com>
-nuintun <nuintun@qq.com>
-ohhoney1 <1269075501@qq.com>
-orzorzorzorz <zy410419243@gmail.com>
 paranoidjk <hust2012jiangkai@gmail.com>
 parlop <parlop@gmail.com>
-pbrink231 <pbrink231@gmail.com>
 pd4d10 <pd4d10@gmail.com>
 peiming <hyrijk@gmail.com>
-picodoth <picodoth@gmail.com>
-picodoth <pikaleize@gmail.com>
 pinggod <pinggodstudio@gmail.com>
 pizn <pizner@gmail.com>
 plandem <plandem@gmail.com>
 popomore <sakura9515@gmail.com>
-qiaojie <1454763497@qq.com>
-qixian.cs@outlook.com <wasd2144@hotmail.com>
-qliu <1403927509@qq.com>
 qubaoming <qubaoming@didichuxing.com>
 ravirambles <ravirambles@gmail.com>
-richardison <richard.ison@carleton.ca>
 ryangun <ryangun@foxmail.com>
 ryanhoho <hswacoal@gmail.com>
-ryannz <c5e1856@gmail.com>
 sadmark <zhoubin@laidian360.com>
 sallen450 <jqh101@sina.com>
-sdli <1669375803@qq.com>
-sfturing <sfturing@gmail.com>
-shangyuan.ning <shangyuan.ning@manaowan.com>
-shawtung <shawtung@qq.com>
 shelwin <wxfans@gmail.com>
 shenlin192@gmail.com <shenlin192@gmail.com>
 shlice <licesh@gmail.com>
 shouyong <enlangs@163.com>
 simaQ <sima.zhang1990@gmail.com>
-siyu77 <xwzhang1986@gmail.com>
 slientcloud <rjmuqiang@gmail.com>
-sliwey <qlw1009@gmail.com>
 snadn <snadn@snadn.cn>
-snail <120216220@qq.com>
 sojournerc <cmeyer@zvelo.com>
 sorrycc <sorrycc@gmail.com>
-sosohime <theziming@126.com>
-spideeee <spideeee@github.com>
-stevenyuysy <stevenyuysy@gmail.com>
-stickmy <stickmyc@gmail.com>
 swindme <swindme@163.com>
-sylvanasGone <397009765@qq.com>
 syssam <s.y.s.sam.sys@gmail.com>
-tangjinzhou <415800467@qq.com>
-tangjinzhou <tangjinzhou@yidian-inc.com>
-taoweicn <twchn@live.com>
 thegatheringstorm <tgs@tgs.blue>
-thilo-behnke <jan-thilo.behnke@gmx.de>
 tianli.zhao <275287902@qq.com>
 tom <caolvchong@gmail.com>
 twobin <twobin@live.com>
 u3u <qwq@qwq.cat>
-undefined <undefined>
 ustccjw <317713370@qq.com>
 valleykid <valleykiddy@gmail.com>
 vgeyi <vgeyiz@126.com>
-wangshantao <605682551@qq.com>
-wangshuai <wangshuai@momenta.ai>
 wangtao0101 <yuecjn@gmail.com>
 wangxiaolei <fatelei@gmail.com>
-wangxingkang <156148958@qq.com>
-wangxingkang <wangxingkang@sensoro.com>
-wangxueliang <wangxueliang@yidian-inc.com>
-wanli <wanli@qunhemail.com>
 warmhug <hualei5280@gmail.com>
 whtang906 <whtang906@gmail.com>
 wizawu <wizawu@gmail.com>
 wonyun <wy393767068@163.com>
-wwwxy80s <xiaowangziwxy@gmail.com>
-wx1322 <289758716@qq.com>
 xiaofan2406 <xiaofan2406@gmail.com>
-y-take <y.takey@gmail.com>
 yangwukang <yangwukang@boco.com.cn>
-yangxiaolin <yangxiao2810279802@gmail.com>
-ycjcl868 <45808948@qq.com>
 yeliex <yeliex@yeliex.com>
-yibu.wang <yibu.wang@orion.co.com>
-yiminanci <yiminanci@gmail.com>
 yiminghe <yiminghe@gmail.com>
 yociduo <yociduo@vip.qq.com>
-yoyo837 <yoyo837@hotmail.com>
 yubozhao <yubz86@gmail.com>
 yuche <i@yuche.me>
 z <haig8@msn.com>
 zack <zxyah@126.com>
-zelongc <nickcong123@gmail.com>
 zerob4wl <zerob4wl@gmail.com>
-zhangguanyu02 <zhangguanyu02@meituan.com>
 zhangpc <zhangpc@tenxcloud.com>
-zhangyangxue <383632607@qq.com>
 zhaocai <lzc09008@gmail.com>
-zhaopeidong <lwindscar@gmail.com>
 zhujun24 <zhujun87654321@gmail.com>
 zhuyue <fuping.dfp@antfin.com>
 zilong <jzlxiaohei@163.com>
 zinkey <yaya@uloveit.com.cn>
-zlljqn <zlljqn@gmail.com>
 zollero <corona7@163.com>
-zombieJ <smith3816@gmail.com>
 zombiej <smith3816@gmail.com>
-zongzi531 <zongzi.xy@gmail.com>
-ztplz <mysticzt@gmail.com>
 zuiidea <zuiiidea@gmail.com>
-zy410419243 <zy410419243@gmail.com>
-°))))彡 <fisherspy@live.com>
 邦 <sqibang@gmail.com>
 爱but的苍蝇 <354788473@qq.com>
-高力 <3071730@qq.com>
-郑旭 <332171564@qq.com>
 拷钉 <41830859@qq.com>
-苏秦 <646382806@qq.com>
 竹尔 <Juelchiang@gmail.com>
 偏右 <afc163@gmail.com>
 英布 <chaoren1641@gmail.com>
 朮厃 <cn.ah.liu@gmail.com>
-张聪 <dancerphil1994@gmail.com>
 诸岳 <dengfuping_develop@163.com>
 逸达 <dqaria@gmail.com>
-诸岳 <fuping.dfp@antfin.com>
-二哲 <kodo@forchange.cn>
-廖星 <liaoxing.lx@bytedance.com>
-刘红 <liuhong1.happy@163.com>
-宝码 <noyobo@gmail.com>
-陈帅 <qixian.cs@outlook.com>
 蔡伦 <sliuqin@gmail.com>
 陆离 <surgesoft@gmail.com>
 愚道 <tingzhao.ytz@antfin.com>
 陈帅 <wasd2144@hotmail.com>
 松子 <window.pibarr@gmail.com>
-何乐 <work@imhele.com>
-付引 <xxxquotes@gmail.com>
 可乐 <zaxlct@foxmail.com>
 山客 <zeakhold@gmail.com>
 曾凯 <zengkai2009@foxmail.com>
 低位 <zhujun87654321@gmail.com>
-信鑫-King <45808948@qq.com>
 广彬-梁 <326741518@qq.com>
-小哈husky <951565664@qq.com>
-何志勇 <15988134176@163.com>
 徐坤龙 <272992168@qq.com>
 黄子毅 <576625322@qq.com>
 翁润雨 <593110501@qq.com>
 崔宏森 <948346354@qq.com>
-黄文鉴 <concefly@foxmail.com>
-董天成 <dongtiangche@outlook.com>
-方剑成 <fjc0kb@gmail.com>
-陈广亮 <geraldchen890806@gmail.com>
-包子熊 <hezhiyu233@foxmail.com>
 闲耘™ <hotoo.cn@gmail.com>
 一喵呜 <hyb628@gmail.com>
-黄俊亮 <jayhuang@easyops.cn>
 吕立青 <jimmy.jinglv@gmail.com>
 隋鑫磊 <joshuasui@gmail.com>
-米老朱 <laozhu.me@gmail.com>
 乔奕轩 <qiao_yixuan@163.com>
 马斯特 <sd4399340@126.com>
 王集鹄 <wjhu111@21cn.com>
-徐新航 <xuxinhang@bytedance.com>
-杨哲迪 <yangzhedi@yidian-inc.com>
 柚子男 <yozman@sina.com>
 愚指导 <yutingzhao1991@sina.com>
-郭延豪(708674) <gyh9457@163.com>
 愚指导-TZ <yutingzhao1991@sina.com>
-杨小事er <Uiryzd@163.com>
-杨小事er <uiryzd@163.com>
 超能刚哥 <margox@foxmail.com>
 马金花儿 <o.o@mug.dog>
 रोहन मल्होत्रा <rohan.malhotra@adwyze.com>
 白羊座小葛 <abeyuhang@gmail.com>
-薛定谔的猫 <hh_2013@foxmail.com>
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
--- a/1
+++ b/1
@@ -1 +0,0 @@
-ant.design
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo

 Examples of behavior that contributes to creating a positive environment include:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members

 Examples of unacceptable behavior by participants include:

- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting

 ## Our Responsibilities

@@ -40,7 +40,7 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai

 ## Attribution

-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]

 [homepage]: http://contributor-covenant.org
 [version]: http://contributor-covenant.org/version/1/4/
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 MIT LICENSE

-Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/

 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -1,55 +1,50 @@
 <p align="center">
  <a href="http://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+    <img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
  </a>
 </p>

-<h1 align="center">Ant Design</h1>
+# Ant Design

-<div align="center">
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![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)
+[![bitHound [![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
+[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design#info=devDependencies&view=list)

-一套企业级 UI 设计语言和 React 组件库。
+[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://www.npmtrends.com/antd)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）

-[![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)
+一套企业级的 UI 设计语言和 React 实现。

-[![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)
+[README in English](README.md)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-</div>
-
-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design/index-cn)
-
-[English](./README.md) | 简体中文
-
-## ✨ 特性
+## 特性

 - 提炼自企业级中后台产品的交互语言和视觉风格。
 - 开箱即用的高质量 React 组件。
 - 使用 TypeScript 构建，提供完整的类型定义文件。
 - 全链路开发和设计工具体系。

-## 🖥 支持环境
+## 支持环境

- 现代浏览器和 IE9 及以上。
- 支持服务端渲染。
- [Electron](http://electron.atom.io/)
+* 现代浏览器和 IE9 及以上。
+* 支持服务端渲染。
+* [Electron](http://electron.atom.io/)

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+## 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

-## 📦 安装
+请参考[贡献指南](https://ant.design/docs/react/contributing-cn).
+
+## 安装

 ```bash
 npm install antd --save
 ```

-```bash
-yarn add antd
-```
-
-## 🔨 示例
+## 示例

 ```jsx
 import { DatePicker } from 'antd';
@@ -59,50 +54,38 @@ ReactDOM.render(<DatePicker />, mountNode);
 引入样式：

 ```jsx
-import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```

-你也可以 [按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
+你也可以[按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。

-### TypeScript
+## TypeScript

 参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)

-## 🌍 国际化
+## 国际化

 参考 [国际化文档](http://ant.design/docs/react/i18n-cn)。

-## 🔗 链接
+## 链接

 - [首页](http://ant.design/)
 - [组件库](http://ant.design/docs/react/introduce)
 - [Ant Design Pro](http://pro.ant.design/)
 - [更新日志](CHANGELOG.en-US.md)
+- [脚手架市场](http://scaffold.ant.design)
 - [React 底层基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
- [Ant Design 图标](https://github.com/ant-design/ant-design-icons)
- [Ant Design 色彩](https://github.com/ant-design/ant-design-colors)
- [Ant Design Pro 布局组件](https://github.com/ant-design/ant-design-pro-layout)
- [Ant Design Pro 区块集](https://github.com/ant-design/pro-blocks)
- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
- [首页模板集](https://landing.ant.design)
 - [动效](https://motion.ant.design)
- [脚手架市场](http://scaffold.ant.design)
 - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [常见问题](https://ant.design/docs/react/faq-cn)
+- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
 - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [定制主题](http://ant.design/docs/react/customize-theme-cn)

-## ⌨️ 本地开发
-
-你可以使用 Gitpod 进行在线开发：
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-或者克隆到本地开发:
+## 本地开发

 ```bash
 $ git clone git@github.com:ant-design/ant-design.git
@@ -111,16 +94,14 @@ $ npm install
 $ npm start
 ```

-打开浏览器访问 http://127.0.0.1:8001 ，更多[本地开发文档](https://github.com/ant-design/ant-design/wiki/Development)。
+打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。

-## 🤝 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+## 如何贡献

-请参考[贡献指南](https://ant.design/docs/react/contributing-cn).
+阅读我们的[贡献指南](./.github/CONTRIBUTING.md).

 > 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
 ## 社区互助

 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
@@ -130,9 +111,3 @@ $ npm start
 1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
 2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
 3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-## ❤️ 赞助者 ![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen) ![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
--- a/README.md
+++ b/README.md
@@ -1,55 +1,54 @@
 <p align="center">
  <a href="http://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+    <img width="230" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
  </a>
 </p>

-<h1 align="center">Ant Design</h1>
+# Ant Design

-<div align="center">
+[![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
+[![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)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design)
+[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg)](https://david-dm.org/ant-design/ant-design#info=devDependencies&view=list)

-An enterprise-class UI design language and React UI library.
+[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://www.npmtrends.com/antd)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
+[![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）

-[![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)
+An enterprise-class UI design language and React-based implementation.

-[![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)
+[中文 README](README-zh_CN.md)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+## 3.0 Released Now! :tada::tada::tada:

-</div>
+[Announcing Ant Design 3.0](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)

-[![](https://cdn-images-1.medium.com/max/2000/1*NIlj0-TdLMbo_hzSBP8tmg.png)](http://ant.design)
+## Features

-English | [简体中文](./README-zh_CN.md)
-
-## ✨ Features
-
- An enterprise-class UI design system for web applications.
+- An enterprise-class UI design system for desktop applications.
 - A set of high-quality React components out of the box.
 - Written in TypeScript with predictable static types.
 - The whole package of development and design resources and tools.

-## 🖥 Environment Support
+## Environment Support

- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
- Server-side Rendering
- [Electron](http://electron.atom.io/)
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+* Server-side Rendering
+* [Electron](http://electron.atom.io/)

-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

-## 📦 Install
+Read our [contributing guide](https://ant.design/docs/react/contributing).
+
+## Install

 ```bash
-npm install antd
+npm install antd --save
 ```

-```bash
-yarn add antd
-```
-
-## 🔨 Usage
+## Usage

 ```jsx
 import { DatePicker } from 'antd';
@@ -59,49 +58,38 @@ ReactDOM.render(<DatePicker />, mountNode);
 And import style manually:

 ```jsx
-import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```

-Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand).
+Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand)

 ### TypeScript

-See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript).
+See [Use in TypeScript](https://ant.design/docs/react/use-in-typescript)

-## 🌍 Internationalization
+
+## Internationalization

 See [i18n](http://ant.design/docs/react/i18n).

-## 🔗 Links
+## Links

 - [Home page](http://ant.design/)
 - [Components](http://ant.design/docs/react/introduce)
 - [Ant Design Pro](http://pro.ant.design/)
 - [Change Log](CHANGELOG.en-US.md)
+- [Scaffold Market](http://scaffold.ant.design)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks)
- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
- [Landing Pages](https://landing.ant.design)
 - [Motion](https://motion.ant.design)
- [Scaffold Market](http://scaffold.ant.design)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://ant.design/docs/react/faq)
+- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
 - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [Customize Theme](http://ant.design/docs/react/customize-theme)

-## ⌨️ Development
-
-Use Gitpod, a free online dev environment for GitHub.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-Or clone locally:
+## Development

 ```bash
 $ git clone git@github.com:ant-design/ant-design.git
@@ -110,20 +98,8 @@ $ npm install
 $ npm start
 ```

-Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
+Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .

-## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
+## Contributing

 We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
-
-If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request by [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -1,69 +0,0 @@
-# Node.js
-# Build a general Node.js project with npm.
-# Add steps that analyze code, save build artifacts, deploy, and more:
-# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
-name: ant design
-
-trigger:
-  batch: true
-  branches:
-    exclude:
-      - gh-pages
-
-jobs:
-  - job: test_
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    strategy:
-      matrix:
-        Lint:
-          TEST_TYPE: lint
-        dist-react@16:
-          REACT: 16
-          TEST_TYPE: test:dist
-        lib-react@16:
-          REACT: 16
-          TEST_TYPE: test:lib
-        es-react@16:
-          REACT: 16
-          TEST_TYPE: test:es
-        dom-react@16:
-          REACT: 16
-          TEST_TYPE: test:dom
-        node-react@16:
-          REACT: 16
-          TEST_TYPE: test:node
-        dist-react@15:
-          REACT: 15
-          TEST_TYPE: test:dist
-        lib-react@15:
-          REACT: 15
-          TEST_TYPE: test:lib
-        es-react@15:
-          REACT: 15
-          TEST_TYPE: test:es
-        dom-react@15:
-          REACT: 15
-          TEST_TYPE: test:dom
-        node-react@15:
-          REACT: 15
-          TEST_TYPE: test:node
-    steps:
-      - checkout: self
-        fetchDepth: 1
-        clean: false
-      - task: NodeTool@0
-        inputs:
-          versionSpec: '10.x'
-      - script: npm install
-        displayName: install
-      - script: scripts/install-react.sh
-        displayName: install-react
-      - script: scripts/travis-script.sh
-        displayName: test
-      - task: PublishBuildArtifacts@1
-        # 主分支，并且运行成功
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
-        inputs:
-          pathtoPublish: './package-lock.json'
-          artifactName: lock
--- a/components/tests/snapshots/index.test.js.snap
+++ b/components/tests/snapshots/index.test.js.snap
@@ -18,14 +18,9 @@ Array [
  "Cascader",
  "Checkbox",
  "Col",
-  "Comment",
-  "ConfigProvider",
  "DatePicker",
-  "Descriptions",
  "Divider",
  "Dropdown",
-  "Drawer",
-  "Empty",
  "Form",
  "Icon",
  "Input",
@@ -35,21 +30,16 @@ Array [
  "LocaleProvider",
  "message",
  "Menu",
-  "Mentions",
  "Modal",
-  "Statistic",
  "notification",
-  "PageHeader",
  "Pagination",
  "Popconfirm",
  "Popover",
  "Progress",
  "Radio",
  "Rate",
-  "Result",
  "Row",
  "Select",
-  "Skeleton",
  "Slider",
  "Spin",
  "Steps",
@@ -63,7 +53,6 @@ Array [
  "TimePicker",
  "Timeline",
  "Tooltip",
-  "Typography",
  "Mention",
  "Upload",
  "version",
--- a/components/tests/index.test.js
+++ b/components/tests/index.test.js
@@ -13,8 +13,8 @@ describe('antd', () => {
  });

  it('should hint when import all components in dev mode', () => {
-    expect(warnSpy).toHaveBeenCalledWith(
-      'You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.',
+    expect(warnSpy).toBeCalledWith(
+      'You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.'
    );
    warnSpy.mockRestore();
  });
--- a/components/tests/util/domHook.js
+++ b/components/tests/util/domHook.js
@@ -1,58 +0,0 @@
-const __NULL__ = { notExist: true };
-
-export function spyElementPrototypes(Element, properties) {
-  const propNames = Object.keys(properties);
-  const originDescriptors = {};
-
-  propNames.forEach(propName => {
-    const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
-    originDescriptors[propName] = originDescriptor || __NULL__;
-
-    const spyProp = properties[propName];
-
-    if (typeof spyProp === 'function') {
-      // If is a function
-      Element.prototype[propName] = function spyFunc(...args) {
-        return spyProp.call(this, originDescriptor, ...args);
-      };
-    } else {
-      // Otherwise tread as a property
-      Object.defineProperty(Element.prototype, propName, {
-        ...spyProp,
-        set(value) {
-          if (spyProp.set) {
-            return spyProp.set.call(this, originDescriptor, value);
-          }
-          return originDescriptor.set(value);
-        },
-        get() {
-          if (spyProp.get) {
-            return spyProp.get.call(this, originDescriptor);
-          }
-          return originDescriptor.get();
-        },
-      });
-    }
-  });
-
-  return {
-    mockRestore() {
-      propNames.forEach(propName => {
-        const originDescriptor = originDescriptors[propName];
-        if (originDescriptor === __NULL__) {
-          delete Element.prototype[propName];
-        } else if (typeof originDescriptor === 'function') {
-          Element.prototype[propName] = originDescriptor;
-        } else {
-          Object.defineProperty(Element.prototype, propName, originDescriptor);
-        }
-      });
-    },
-  };
-}
-
-export function spyElementPrototype(Element, propName, property) {
-  return spyElementPrototypes(Element, {
-    [propName]: property,
-  });
-}
--- a/components/_util/tests/easings.test.js
+++ b/components/_util/tests/easings.test.js
@@ -1,13 +0,0 @@
-import { easeInOutCubic } from '../easings';
-
-describe('Test easings', () => {
-  it('easeInOutCubic return value', () => {
-    const nums = [];
-    // eslint-disable-next-line no-plusplus
-    for (let index = 0; index < 5; index++) {
-      nums.push(easeInOutCubic(index, 1, 5, 4));
-    }
-
-    expect(nums).toEqual([1, 1.25, 3, 4.75, 5]);
-  });
-});
--- a/components/_util/tests/scrollTo.test.js
+++ b/components/_util/tests/scrollTo.test.js
@@ -1,56 +0,0 @@
-import scrollTo from '../scrollTo';
-
-describe('Test ScrollTo function', () => {
-  let dateNowMock;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  beforeEach(() => {
-    dateNowMock = jest
-      .spyOn(Date, 'now')
-      .mockImplementationOnce(() => 0)
-      .mockImplementationOnce(() => 1000);
-  });
-
-  afterEach(() => {
-    dateNowMock.mockRestore();
-  });
-
-  it('test scrollTo', async () => {
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
-      window.scrollY = y;
-      window.pageYOffset = y;
-    });
-
-    scrollTo(1000);
-
-    jest.runAllTimers();
-    expect(window.pageYOffset).toBe(1000);
-
-    scrollToSpy.mockRestore();
-  });
-
-  it('test callback - option', async () => {
-    const cbMock = jest.fn();
-    scrollTo(1000, {
-      callback: cbMock,
-    });
-    jest.runAllTimers();
-    expect(cbMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('test getContainer - option', async () => {
-    const div = document.createElement('div');
-    scrollTo(1000, {
-      getContainer: () => div,
-    });
-    jest.runAllTimers();
-    expect(div.scrollTop).toBe(1000);
-  });
-});
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@@ -1,14 +1,4 @@
-import raf from 'raf';
-import React from 'react';
-import { mount } from 'enzyme';
-import KeyCode from 'rc-util/lib/KeyCode';
-import delayRaf from '../raf';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
-import getDataOrAriaProps from '../getDataOrAriaProps';
-import triggerEvent from '../triggerEvent';
-import Wave from '../wave';
-import TransButton from '../transButton';
-import openAnimation from '../openAnimation';

 describe('Test utils function', () => {
  beforeAll(() => {
@@ -22,13 +12,13 @@ describe('Test utils function', () => {
  it('throttle function should work', () => {
    const callback = jest.fn();
    const throttled = throttleByAnimationFrame(callback);
-    expect(callback).not.toHaveBeenCalled();
+    expect(callback).not.toBeCalled();

    throttled();
    throttled();

    jest.runAllTimers();
-    expect(callback).toHaveBeenCalled();
+    expect(callback).toBeCalled();
    expect(callback.mock.calls.length).toBe(1);
  });

@@ -40,188 +30,6 @@ describe('Test utils function', () => {
    throttled.cancel();

    jest.runAllTimers();
-    expect(callback).not.toHaveBeenCalled();
-  });
-
-  describe('getDataOrAriaProps', () => {
-    it('returns all data-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-test': 'test-id',
-        'data-id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'data-test': 'test-id',
-        'data-id': 1234,
-      });
-    });
-
-    it('does not return data-__ properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'data-__test': 'test-id',
-        'data-__id': 1234,
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({});
-    });
-
-    it('returns all aria-* properties from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({
-        'aria-labelledby': 'label-id',
-        'aria-label': 'some-label',
-      });
-    });
-
-    it('returns role property from an object', () => {
-      const props = {
-        onClick: () => {},
-        isOpen: true,
-        role: 'search',
-      };
-      const results = getDataOrAriaProps(props);
-      expect(results).toEqual({ role: 'search' });
-    });
-  });
-
-  it('delayRaf', done => {
-    jest.useRealTimers();
-
-    let bamboo = false;
-    delayRaf(() => {
-      bamboo = true;
-    }, 3);
-
-    // Do nothing, but insert in the frame
-    // https://github.com/ant-design/ant-design/issues/16290
-    delayRaf(() => {}, 3);
-
-    // Variable bamboo should be false in frame 2 but true in frame 4
-    raf(() => {
-      expect(bamboo).toBe(false);
-
-      // Frame 2
-      raf(() => {
-        expect(bamboo).toBe(false);
-
-        // Frame 3
-        raf(() => {
-          // Frame 4
-          raf(() => {
-            expect(bamboo).toBe(true);
-            done();
-          });
-        });
-      });
-    });
-  });
-
-  it('triggerEvent', () => {
-    const button = document.createElement('button');
-    button.addEventListener(
-      'click',
-      () => {
-        button.style.width = '100px';
-      },
-      true,
-    );
-    triggerEvent(button, 'click');
-    expect(button.style.width).toBe('100px');
-  });
-
-  describe('wave', () => {
-    it('bindAnimationEvent should return when node is null', () => {
-      const wrapper = mount(
-        <Wave>
-          <button type="button" disabled>
-            button
-          </button>
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('bindAnimationEvent.onClick should return when children is hidden', () => {
-      const wrapper = mount(
-        <Wave>
-          <button type="button" style={{ display: 'none' }}>
-            button
-          </button>
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('bindAnimationEvent.onClick should return when children is input', () => {
-      const wrapper = mount(
-        <Wave>
-          <input />
-        </Wave>,
-      ).instance();
-      expect(wrapper.bindAnimationEvent()).toBe(undefined);
-    });
-
-    it('should not throw when click it', () => {
-      expect(() => {
-        const wrapper = mount(
-          <Wave>
-            <div />
-          </Wave>,
-        );
-        wrapper.simulate('click');
-      }).not.toThrow();
-    });
-
-    it('should not throw when no children', () => {
-      if (process.env.REACT === '15') {
-        return;
-      }
-      expect(() => mount(<Wave />)).not.toThrow();
-    });
-  });
-
-  describe('TransButton', () => {
-    it('can be focus/blur', () => {
-      const wrapper = mount(<TransButton>TransButton</TransButton>);
-      expect(typeof wrapper.instance().focus).toBe('function');
-      expect(typeof wrapper.instance().blur).toBe('function');
-    });
-
-    it('should trigger onClick when press enter', () => {
-      const onClick = jest.fn();
-      const preventDefault = jest.fn();
-      const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
-      wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalled();
-      wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
-      expect(preventDefault).toHaveBeenCalled();
-    });
-  });
-
-  describe('openAnimation', () => {
-    it('should support openAnimation', () => {
-      const done = jest.fn();
-      const domNode = document.createElement('div');
-      expect(typeof openAnimation.enter).toBe('function');
-      expect(typeof openAnimation.leave).toBe('function');
-      expect(typeof openAnimation.appear).toBe('function');
-      const appear = openAnimation.appear(domNode, done);
-      const enter = openAnimation.enter(domNode, done);
-      const leave = openAnimation.leave(domNode, done);
-      expect(typeof appear.stop).toBe('function');
-      expect(typeof enter.stop).toBe('function');
-      expect(typeof leave.stop).toBe('function');
-      expect(done).toHaveBeenCalled();
-    });
+    expect(callback).not.toBeCalled();
  });
 });
--- a/components/_util/colors.ts
+++ b/components/_util/colors.ts
@@ -1,20 +0,0 @@
-import { tuple } from './type';
-
-// eslint-disable-next-line import/prefer-default-export
-export const PresetColorTypes = tuple(
-  'pink',
-  'red',
-  'yellow',
-  'orange',
-  'cyan',
-  'green',
-  'blue',
-  'purple',
-  'geekblue',
-  'magenta',
-  'volcano',
-  'gold',
-  'lime',
-);
-
-export type PresetColorType = (typeof PresetColorTypes)[number];
--- a/components/_util/easings.ts
+++ b/components/_util/easings.ts
@@ -1,9 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export function easeInOutCubic(t: number, b: number, c: number, d: number) {
-  const cc = c - b;
-  t /= d / 2;
-  if (t < 1) {
-    return (cc / 2) * t * t * t + b;
-  }
-  return (cc / 2) * ((t -= 2) * t * t + 2) + b;
-}
--- a/components/_util/getDataOrAriaProps.ts
+++ b/components/_util/getDataOrAriaProps.ts
@@ -1,11 +0,0 @@
-export default function getDataOrAriaProps(props: any) {
-  return Object.keys(props).reduce((prev: any, key: string) => {
-    if (
-      (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') &&
-      key.substr(0, 7) !== 'data-__'
-    ) {
-      prev[key] = props[key];
-    }
-    return prev;
-  }, {});
-}
--- a/components/_util/getScroll.tsx
+++ b/components/_util/getScroll.tsx
@@ -1,4 +1,4 @@
-export default function getScroll(target: HTMLElement | Window | null, top: boolean): number {
+export default function getScroll(target: any, top: boolean): number {
  if (typeof window === 'undefined') {
    return 0;
  }
@@ -7,10 +7,10 @@ export default function getScroll(target: HTMLElement | Window | null, top: bool
  const method = top ? 'scrollTop' : 'scrollLeft';
  const isWindow = target === window;

-  let ret = isWindow ? (target as Window)[prop] : (target as HTMLElement)[method];
+  let ret = isWindow ? target[prop] : target[method];
  // ie6,7,8 standard mode
  if (isWindow && typeof ret !== 'number') {
-    ret = (document.documentElement as HTMLElement)[method];
+    ret = window.document.documentElement[method];
  }

  return ret;
--- a/components/_util/interopDefault.ts
+++ b/components/_util/interopDefault.ts
@@ -1,5 +1,4 @@
 // https://github.com/moment/moment/issues/3650
-// since we are using ts 3.5.1, it should be safe to remove.
 export default function interopDefault(m: any) {
  return m.default || m;
 }
--- a/components/_util/isFlexSupported.tsx
+++ b/components/_util/isFlexSupported.tsx
@@ -0,0 +1,10 @@
+export default function isFlexSupported() {
+  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+    const { documentElement } = window.document;
+    return 'flex' in documentElement.style ||
+      'webkitFlex' in documentElement.style ||
+      'Flex' in documentElement.style ||
+      'msFlex' in documentElement.style;
+  }
+  return false;
+}
--- a/components/_util/isNumeric.ts
+++ b/components/_util/isNumeric.ts
@@ -1,5 +0,0 @@
-const isNumeric = (value: any): boolean => {
-  return !isNaN(parseFloat(value)) && isFinite(value);
-};
-
-export default isNumeric;
--- a/components/_util/motion.tsx
+++ b/components/_util/motion.tsx
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-type MotionFunc = (element: HTMLElement) => React.CSSProperties;
-
-interface Motion {
-  visible?: boolean;
-  motionName?: string; // It also support object, but we only use string here.
-  motionAppear?: boolean;
-  motionEnter?: boolean;
-  motionLeave?: boolean;
-  motionLeaveImmediately?: boolean; // Trigger leave motion immediately
-  removeOnLeave?: boolean;
-  leavedClassName?: string;
-  onAppearStart?: MotionFunc;
-  onAppearActive?: MotionFunc;
-  onAppearEnd?: MotionFunc;
-  onEnterStart?: MotionFunc;
-  onEnterActive?: MotionFunc;
-  onEnterEnd?: MotionFunc;
-  onLeaveStart?: MotionFunc;
-  onLeaveActive?: MotionFunc;
-  onLeaveEnd?: MotionFunc;
-}
-
-// ================== Collapse Motion ==================
-const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
-const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
-
-const collapseMotion: Motion = {
-  motionName: 'ant-motion-collapse',
-  onAppearStart: getCollapsedHeight,
-  onEnterStart: getCollapsedHeight,
-  onAppearActive: getRealHeight,
-  onEnterActive: getRealHeight,
-  onLeaveStart: getCurrentHeight,
-  onLeaveActive: getCollapsedHeight,
-};
-
-export default collapseMotion;
--- a/components/_util/openAnimation.tsx
+++ b/components/_util/openAnimation.tsx
@@ -1,14 +1,10 @@
-/**
- * Deprecated. We should replace the animation with pure react motion instead of modify style directly.
- * If you are creating new component with animation, please use `./motion`.
- */
 import cssAnimation from 'css-animation';
 import raf from 'raf';

 function animate(node: HTMLElement, show: boolean, done: () => void) {
  let height: number;
  let requestAnimationFrameId: number;
-  return cssAnimation(node, 'ant-motion-collapse-legacy', {
+  return cssAnimation(node, 'ant-motion-collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
--- a/components/_util/raf.ts
+++ b/components/_util/raf.ts
@@ -1,38 +0,0 @@
-import raf from 'raf';
-
-interface RafMap {
-  [id: number]: number;
-}
-
-let id: number = 0;
-const ids: RafMap = {};
-
-// Support call raf with delay specified frame
-export default function wrapperRaf(callback: () => void, delayFrames: number = 1): number {
-  const myId: number = id++;
-  let restFrames: number = delayFrames;
-
-  function internalCallback() {
-    restFrames -= 1;
-
-    if (restFrames <= 0) {
-      callback();
-      delete ids[myId];
-    } else {
-      ids[myId] = raf(internalCallback);
-    }
-  }
-
-  ids[myId] = raf(internalCallback);
-
-  return myId;
-}
-
-wrapperRaf.cancel = function cancel(pid?: number) {
-  if (pid === undefined) return;
-
-  raf.cancel(ids[pid]);
-  delete ids[pid];
-};
-
-wrapperRaf.ids = ids; // export this for test usage
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-// eslint-disable-next-line import/prefer-default-export
-export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
-  if (!React.isValidElement(element)) return element;
-
-  return React.cloneElement(element, ...restArgs);
-}
--- a/components/_util/ref.ts
+++ b/components/_util/ref.ts
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export function fillRef<T>(ref: React.Ref<T>, node: T) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (typeof ref === 'object' && ref && 'current' in ref) {
-    (ref as any).current = node;
-  }
-}
-
-export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
-  return (node: T) => {
-    refs.forEach(ref => {
-      fillRef(ref, node);
-    });
-  };
-}
--- a/components/_util/responsiveObserve.ts
+++ b/components/_util/responsiveObserve.ts
@@ -1,104 +0,0 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire: any;
-
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
-
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
-
-export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-export const responsiveMap: BreakpointMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-};
-
-type SubscribeFunc = (screens: BreakpointMap) => void;
-
-let subscribers: Array<{
-  token: string;
-  func: SubscribeFunc;
-}> = [];
-let subUid = -1;
-let screens = {};
-
-const responsiveObserve = {
-  dispatch(pointMap: BreakpointMap) {
-    screens = pointMap;
-    if (subscribers.length < 1) {
-      return false;
-    }
-
-    subscribers.forEach(item => {
-      item.func(screens);
-    });
-
-    return true;
-  },
-  subscribe(func: SubscribeFunc) {
-    if (subscribers.length === 0) {
-      this.register();
-    }
-    const token = (++subUid).toString();
-    subscribers.push({
-      token,
-      func,
-    });
-    func(screens);
-    return token;
-  },
-  unsubscribe(token: string) {
-    subscribers = subscribers.filter(item => item.token !== token);
-    if (subscribers.length === 0) {
-      this.unregister();
-    }
-  },
-  unregister() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.unregister(responsiveMap[screen]),
-    );
-  },
-  register() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.register(responsiveMap[screen], {
-        match: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: true,
-          };
-          this.dispatch(pointMap);
-        },
-        unmatch: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: false,
-          };
-          this.dispatch(pointMap);
-        },
-        // Keep a empty destory to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
-  },
-};
-
-export default responsiveObserve;
--- a/components/_util/scrollTo.ts
+++ b/components/_util/scrollTo.ts
@@ -1,37 +0,0 @@
-import raf from 'raf';
-import getScroll from './getScroll';
-import { easeInOutCubic } from './easings';
-
-interface ScrollToOptions {
-  /** Scroll container, default as window */
-  getContainer?: () => HTMLElement | Window;
-  /** Scroll end callback */
-  callback?: () => any;
-  /** Animation duration, default as 450 */
-  duration?: number;
-}
-
-export default function scrollTo(y: number, options: ScrollToOptions = {}) {
-  const { getContainer = () => window, callback, duration = 450 } = options;
-
-  const container = getContainer();
-  const scrollTop = getScroll(container, true);
-  const startTime = Date.now();
-
-  const frameFunc = () => {
-    const timestamp = Date.now();
-    const time = timestamp - startTime;
-    const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
-    if (container === window) {
-      window.scrollTo(window.pageXOffset, nextScrollTop);
-    } else {
-      (container as HTMLElement).scrollTop = nextScrollTop;
-    }
-    if (time < duration) {
-      raf(frameFunc);
-    } else if (typeof callback === 'function') {
-      callback();
-    }
-  };
-  raf(frameFunc);
-}
--- a/components/_util/styleChecker.tsx
+++ b/components/_util/styleChecker.tsx
@@ -1,13 +0,0 @@
-const isStyleSupport = (styleName: string | Array<string>): boolean => {
-  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
-    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
-    const { documentElement } = window.document;
-
-    return styleNameList.some(name => name in documentElement.style);
-  }
-  return false;
-};
-
-export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
-
-export default isStyleSupport;
--- a/components/_util/throttleByAnimationFrame.tsx
+++ b/components/_util/throttleByAnimationFrame.tsx
@@ -20,19 +20,17 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
 }

 export function throttleByAnimationFrameDecorator() {
-  // eslint-disable-next-line func-names
  return function(target: any, key: string, descriptor: any) {
-    const fn = descriptor.value;
+    let fn = descriptor.value;
    let definingProperty = false;
    return {
      configurable: true,
      get() {
-        // eslint-disable-next-line no-prototype-builtins
        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
          return fn;
        }

-        const boundFn = throttleByAnimationFrame(fn.bind(this));
+        let boundFn = throttleByAnimationFrame(fn.bind(this));
        definingProperty = true;
        Object.defineProperty(this, key, {
          value: boundFn,
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@@ -1,74 +0,0 @@
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- * This helps accessibility reader to tread as a interactive button to operation.
- */
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
-  noStyle?: boolean;
-}
-
-const inlineStyle: React.CSSProperties = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-block',
-};
-
-class TransButton extends React.Component<TransButtonProps> {
-  div?: HTMLDivElement;
-
-  lastKeyCode?: number;
-
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
-    const { keyCode } = event;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-
-  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
-    const { keyCode } = event;
-    const { onClick } = this.props;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-
-  setRef = (btn: HTMLDivElement) => {
-    this.div = btn;
-  };
-
-  focus() {
-    if (this.div) {
-      this.div.focus();
-    }
-  }
-
-  blur() {
-    if (this.div) {
-      this.div.blur();
-    }
-  }
-
-  render() {
-    const { style, noStyle, ...restProps } = this.props;
-
-    return (
-      <div
-        role="button"
-        tabIndex={0}
-        ref={this.setRef}
-        {...restProps}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-        style={{ ...(!noStyle ? inlineStyle : null), ...style }}
-      />
-    );
-  }
-}
-
-export default TransButton;
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -1,5 +1 @@
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
-export const tuple = <T extends string[]>(...args: T) => args;
-
-export const tupleNum = <T extends number[]>(...args: T) => args;
--- a/components/_util/warning.ts
+++ b/components/_util/warning.ts
@@ -1,7 +0,0 @@
-import warning, { resetWarned } from 'rc-util/lib/warning';
-
-export { resetWarned };
-
-export default (valid: boolean, component: string, message: string): void => {
-  warning(valid, `[antd: ${component}] ${message}`);
-};
--- a/components/_util/warning.tsx
+++ b/components/_util/warning.tsx
@@ -0,0 +1,9 @@
+import warning from 'warning';
+
+const warned: { [msg: string]: boolean} = {};
+export default (valid: boolean, message: string): void => {
+  if (!valid && !warned[message]) {
+    warning(false, message);
+    warned[message] = true;
+  }
+};
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -1,195 +0,0 @@
-import * as React from 'react';
-import { findDOMNode } from 'react-dom';
-import TransitionEvents from 'css-animation/lib/Event';
-import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig } from '../config-provider';
-
-let styleForPesudo: HTMLStyleElement | null;
-
-// Where el is the DOM element you'd like to test for visibility
-function isHidden(element: HTMLElement) {
-  if (process.env.NODE_ENV === 'test') {
-    return false;
-  }
-  return !element || element.offsetParent === null;
-}
-
-function isNotGrey(color: string) {
-  // eslint-disable-next-line no-useless-escape
-  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
-  if (match && match[1] && match[2] && match[3]) {
-    return !(match[1] === match[2] && match[2] === match[3]);
-  }
-  return true;
-}
-
-export default class Wave extends React.Component<{ insertExtraNode?: boolean }> {
-  private instance?: {
-    cancel: () => void;
-  };
-
-  private extraNode: HTMLDivElement;
-
-  private clickWaveTimeoutId: number;
-
-  private animationStartId: number;
-
-  private animationStart: boolean = false;
-
-  private destroy: boolean = false;
-
-  private csp?: CSPConfig;
-
-  componentDidMount() {
-    const node = findDOMNode(this) as HTMLElement;
-    if (!node || node.nodeType !== 1) {
-      return;
-    }
-    this.instance = this.bindAnimationEvent(node);
-  }
-
-  componentWillUnmount() {
-    if (this.instance) {
-      this.instance.cancel();
-    }
-    if (this.clickWaveTimeoutId) {
-      clearTimeout(this.clickWaveTimeoutId);
-    }
-
-    this.destroy = true;
-  }
-
-  onClick = (node: HTMLElement, waveColor: string) => {
-    if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
-      return;
-    }
-    const { insertExtraNode } = this.props;
-    this.extraNode = document.createElement('div');
-    const { extraNode } = this;
-    extraNode.className = 'ant-click-animating-node';
-    const attributeName = this.getAttributeName();
-    node.setAttribute(attributeName, 'true');
-    // Not white or transparnt or grey
-    styleForPesudo = styleForPesudo || document.createElement('style');
-    if (
-      waveColor &&
-      waveColor !== '#ffffff' &&
-      waveColor !== 'rgb(255, 255, 255)' &&
-      isNotGrey(waveColor) &&
-      !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
-      waveColor !== 'transparent'
-    ) {
-      // Add nonce if CSP exist
-      if (this.csp && this.csp.nonce) {
-        styleForPesudo.nonce = this.csp.nonce;
-      }
-
-      extraNode.style.borderColor = waveColor;
-      styleForPesudo.innerHTML = `
-      [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node {
-        --antd-wave-shadow-color: ${waveColor};
-      }`;
-      if (!document.body.contains(styleForPesudo)) {
-        document.body.appendChild(styleForPesudo);
-      }
-    }
-    if (insertExtraNode) {
-      node.appendChild(extraNode);
-    }
-    TransitionEvents.addStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
-  };
-
-  onTransitionStart = (e: AnimationEvent) => {
-    if (this.destroy) return;
-
-    const node = findDOMNode(this) as HTMLElement;
-    if (!e || e.target !== node) {
-      return;
-    }
-
-    if (!this.animationStart) {
-      this.resetEffect(node);
-    }
-  };
-
-  onTransitionEnd = (e: AnimationEvent) => {
-    if (!e || e.animationName !== 'fadeEffect') {
-      return;
-    }
-    this.resetEffect(e.target as HTMLElement);
-  };
-
-  getAttributeName() {
-    const { insertExtraNode } = this.props;
-    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
-  }
-
-  bindAnimationEvent = (node: HTMLElement) => {
-    if (
-      !node ||
-      !node.getAttribute ||
-      node.getAttribute('disabled') ||
-      node.className.indexOf('disabled') >= 0
-    ) {
-      return;
-    }
-    const onClick = (e: MouseEvent) => {
-      // Fix radio button click twice
-      if ((e.target as HTMLElement).tagName === 'INPUT' || isHidden(e.target as HTMLElement)) {
-        return;
-      }
-      this.resetEffect(node);
-      // Get wave color from target
-      const waveColor =
-        getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
-        getComputedStyle(node).getPropertyValue('border-color') ||
-        getComputedStyle(node).getPropertyValue('background-color');
-      this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
-
-      raf.cancel(this.animationStartId);
-      this.animationStart = true;
-
-      // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
-      this.animationStartId = raf(() => {
-        this.animationStart = false;
-      }, 10);
-    };
-    node.addEventListener('click', onClick, true);
-    return {
-      cancel: () => {
-        node.removeEventListener('click', onClick, true);
-      },
-    };
-  };
-
-  resetEffect(node: HTMLElement) {
-    if (!node || node === this.extraNode || !(node instanceof Element)) {
-      return;
-    }
-    const { insertExtraNode } = this.props;
-    const attributeName = this.getAttributeName();
-    node.setAttribute(attributeName, 'false'); // edge has bug on `removeAttribute` #14466
-
-    if (styleForPesudo) {
-      styleForPesudo.innerHTML = '';
-    }
-
-    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
-      node.removeChild(this.extraNode);
-    }
-    TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
-  }
-
-  renderWave = ({ csp }: ConfigConsumerProps) => {
-    const { children } = this.props;
-    this.csp = csp;
-
-    return children;
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderWave}</ConfigConsumer>;
-  }
-}
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Affix from '..';
-import { getObserverEntities } from '../utils';
 import Button from '../../button';
-import { spyElementPrototype } from '../../__tests__/util/domHook';

 const events = {};

@@ -13,27 +11,35 @@ class AffixMounter extends React.Component {
      events[event] = cb;
    });
  }
-
-  getTarget = () => this.container;
-
+  getTarget = () => {
+    return this.container;
+  }
  render() {
    return (
      <div
-        ref={node => {
-          this.container = node;
+        style={{
+          height: 100,
+          overflowY: 'scroll',
        }}
-        className="container"
+        ref={(node) => { this.container = node; }}
      >
-        <Affix
-          className="fixed"
-          target={this.getTarget}
-          ref={ele => {
-            this.affix = ele;
+        <div
+          className="background"
+          style={{
+            paddingTop: 60,
+            height: 300,
          }}
-          {...this.props}
        >
-          <Button type="primary">Fixed at the top of container</Button>
-        </Affix>
+          <Affix
+            target={() => this.container}
+            ref={ele => this.affix = ele}
+            {...this.props}
+          >
+            <Button type="primary" >
+              Fixed at the top of container
+            </Button>
+          </Affix>
+        </div>
      </div>
    );
  }
@@ -41,36 +47,22 @@ class AffixMounter extends React.Component {

 describe('Affix Render', () => {
  let wrapper;
-  let domMock;
-
-  const classRect = {
-    container: {
-      top: 0,
-      bottom: 100,
-    },
-  };

  beforeAll(() => {
    jest.useFakeTimers();
-    domMock = spyElementPrototype(HTMLElement, 'getBoundingClientRect', function mockBounding() {
-      return (
-        classRect[this.className] || {
-          top: 0,
-          bottom: 0,
-        }
-      );
-    });
  });

  afterAll(() => {
    jest.useRealTimers();
-    domMock.mockRestore();
  });
-  const movePlaceholder = top => {
-    classRect.fixed = {
-      top,
-      bottom: top,
-    };
+
+  const scrollTo = (top) => {
+    wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
+      return {
+        bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195,
+      };
+    });
+    wrapper.instance().container.scrollTop = top;
    events.scroll({
      type: 'scroll',
    });
@@ -83,116 +75,29 @@ describe('Affix Render', () => {
    wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
    jest.runAllTimers();

-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);

-    movePlaceholder(-100);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
+    scrollTo(100);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);

-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);
  });

  it('support offsetBottom', () => {
    document.body.innerHTML = '<div id="mounter" />';

-    wrapper = mount(<AffixMounter offsetBottom={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-
+    wrapper = mount(<AffixMounter offsetBottom={0} />, { attachTo: document.getElementById('mounter') });
    jest.runAllTimers();

-    movePlaceholder(300);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);

-    movePlaceholder(0);
-    expect(wrapper.instance().affix.state.affixStyle).toBeFalsy();
+    scrollTo(100);
+    expect(wrapper.instance().affix.state.affixStyle).toBe(null);

-    movePlaceholder(300);
-    expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-  });
-
-  it('updatePosition when offsetTop changed', () => {
-    document.body.innerHTML = '<div id="mounter" />';
-
-    wrapper = mount(<AffixMounter offsetTop={0} />, {
-      attachTo: document.getElementById('mounter'),
-    });
-    jest.runAllTimers();
-
-    movePlaceholder(-100);
-    expect(wrapper.instance().affix.state.affixStyle.top).toBe(0);
-    wrapper.setProps({
-      offsetTop: 10,
-    });
-    jest.runAllTimers();
-    expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
-  });
-
-  describe('updatePosition when target changed', () => {
-    it('function change', () => {
-      document.body.innerHTML = '<div id="mounter" />';
-      const container = document.querySelector('#id');
-      const getTarget = () => container;
-      wrapper = mount(<Affix target={getTarget} />);
-      wrapper.setProps({ target: null });
-      expect(wrapper.instance().state.status).toBe(0);
-      expect(wrapper.instance().state.affixStyle).toBe(undefined);
-      expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
-    });
-
-    it('instance change', () => {
-      const getObserverLength = () => Object.keys(getObserverEntities()).length;
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      let target = container;
-
-      const originLength = getObserverLength();
-      const getTarget = () => target;
-      wrapper = mount(<Affix target={getTarget} />);
-      jest.runAllTimers();
-
-      expect(getObserverLength()).toBe(originLength + 1);
-      target = null;
-      wrapper.setProps({});
-      wrapper.update();
-      jest.runAllTimers();
-      expect(getObserverLength()).toBe(originLength);
-    });
-  });
-
-  describe('updatePosition when size changed', () => {
-    function test(name, index) {
-      it(name, () => {
-        document.body.innerHTML = '<div id="mounter" />';
-
-        const updateCalled = jest.fn();
-        wrapper = mount(<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, {
-          attachTo: document.getElementById('mounter'),
-        });
-
-        jest.runAllTimers();
-
-        movePlaceholder(300);
-        expect(wrapper.instance().affix.state.affixStyle).toBeTruthy();
-        jest.runAllTimers();
-        wrapper.update();
-
-        // Mock trigger resize
-        updateCalled.mockReset();
-        wrapper
-          .find('ResizeObserver')
-          .at(index)
-          .instance()
-          .onResize([{ target: { getBoundingClientRect: () => ({ width: 99, height: 99 }) } }]);
-        jest.runAllTimers();
-
-        expect(updateCalled).toHaveBeenCalled();
-      });
-    }
-
-    test('inner', 0);
-    test('outer', 1);
+    scrollTo(0);
+    expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
  });
 });
--- a/components/affix/tests/snapshots/demo.test.js.snap
+++ b/components/affix/tests/snapshots/demo.test.js.snap
@@ -34,37 +34,6 @@ exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
-<div
-  style="height:10000px"
->
-  <div>
-    Top
-  </div>
-  <div>
-    <div
-      class=""
-    >
-      <div
-        style="background:red"
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          <span>
-            Affix top
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div>
-    Bottom
-  </div>
-</div>
-`;
-
 exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
 <div>
  <div
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -13,47 +13,19 @@ title:

 The simplest usage.

-```jsx
+````jsx
 import { Affix, Button } from 'antd';

-class Demo extends React.Component {
-  state = {
-    top: 10,
-    bottom: 10,
-  };
-
-  render() {
-    return (
-      <div>
-        <Affix offsetTop={this.state.top}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                top: this.state.top + 10,
-              });
-            }}
-          >
-            Affix top
-          </Button>
-        </Affix>
-        <br />
-        <Affix offsetBottom={this.state.bottom}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                bottom: this.state.bottom + 10,
-              });
-            }}
-          >
-            Affix bottom
-          </Button>
-        </Affix>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Demo />, mountNode);
-```
+ReactDOM.render(
+  <div>
+    <Affix>
+      <Button type="primary">Affix top</Button>
+    </Affix>
+    <br />
+    <Affix offsetBottom={0}>
+      <Button type="primary">Affix bottom</Button>
+    </Affix>
+  </div>,
+  mountNode
+);
+````
--- a/components/affix/demo/debug.md
+++ b/components/affix/demo/debug.md
@@ -1,50 +0,0 @@
---
-order: 99
-title:
-  zh-CN: 调试
-  en-US: Debug
-debug: true
---
-
-## zh-CN
-
-DEBUG
-
-## en-US
-
-DEBUG
-
-```jsx
-import { Affix, Button } from 'antd';
-
-class Demo extends React.Component {
-  state = {
-    top: 10,
-  };
-
-  render() {
-    return (
-      <div style={{ height: 10000 }}>
-        <div>Top</div>
-        <Affix offsetTop={this.state.top}>
-          <div style={{ background: 'red' }}>
-            <Button
-              type="primary"
-              onClick={() => {
-                this.setState({
-                  top: this.state.top + 10,
-                });
-              }}
-            >
-              Affix top
-            </Button>
-          </div>
-        </Affix>
-        <div>Bottom</div>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Demo />, mountNode);
-```
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -13,13 +13,13 @@ title:

 Callback with affixed state.

-```jsx
+````jsx
 import { Affix, Button } from 'antd';

 ReactDOM.render(
  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
    <Button>120px to affix top</Button>
  </Affix>,
-  mountNode,
+  mountNode
 );
-```
+````
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -13,21 +13,18 @@ title:

 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).

-```jsx
+````jsx
 import { Affix, Button } from 'antd';

 class Demo extends React.Component {
  render() {
    return (
-      <div
-        className="scrollable-container"
-        ref={node => {
-          this.container = node;
-        }}
-      >
+      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
        <div className="background">
          <Affix target={() => this.container}>
-            <Button type="primary">Fixed at the top of container</Button>
+            <Button type="primary">
+              Fixed at the top of container
+            </Button>
          </Affix>
        </div>
      </div>
@@ -36,7 +33,7 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-```
+````

 <style>
 #components-affix-demo-target .scrollable-container {
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -14,23 +14,17 @@ Please note that Affix should not cover other content on the page, especially wh

 ## API

-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
-| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
-| target | specifies the scrollable area dom node | () => HTMLElement | () => window |  |
-| onChange | Callback for when affix state is changed | Function(affixed) | - |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
+| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
+| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
+| onChange | Callback for when affix state is changed | Function(affixed) | - |

 **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x}}>
+  ...
+</Affix>
 ```
-
-## FAQ
-
-### Affix bind container with `target`, sometime move out of container.
-
-We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
-
-Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -1,19 +1,41 @@
 import * as React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
+import * as ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
+import shallowequal from 'shallowequal';
 import omit from 'omit.js';
-import ResizeObserver from 'rc-resize-observer';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import getScroll from '../_util/getScroll';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';

-import warning from '../_util/warning';
-import {
-  addObserveTarget,
-  removeObserveTarget,
-  getTargetRect,
-  getFixedTop,
-  getFixedBottom,
-} from './utils';
+function getTargetRect(target: HTMLElement | Window | null): ClientRect {
+  return target !== window ?
+    (target as HTMLElement).getBoundingClientRect() :
+    { top: 0, left: 0, bottom: 0 } as ClientRect;
+}
+
+function getOffset(element: HTMLElement, target: HTMLElement | Window | null) {
+  const elemRect = element.getBoundingClientRect();
+  const targetRect = getTargetRect(target);
+
+  const scrollTop = getScroll(target, true);
+  const scrollLeft = getScroll(target, false);
+
+  const docElem = window.document.body;
+  const clientTop = docElem.clientTop || 0;
+  const clientLeft = docElem.clientLeft || 0;
+
+  return {
+    top: elemRect.top - targetRect.top +
+      scrollTop - clientTop,
+    left: elemRect.left - targetRect.left +
+      scrollLeft - clientLeft,
+    width: elemRect.width,
+    height: elemRect.height,
+  };
+}
+
+function noop() {}

 function getDefaultTarget() {
  return typeof window !== 'undefined' ? window : null;
@@ -34,271 +56,233 @@ export interface AffixProps {
  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
  target?: () => Window | HTMLElement | null;
  prefixCls?: string;
-  className?: string;
-  children: React.ReactElement;
-}
-
-enum AffixStatus {
-  None,
-  Prepare,
 }

 export interface AffixState {
-  affixStyle?: React.CSSProperties;
-  placeholderStyle?: React.CSSProperties;
-  status: AffixStatus;
-  lastAffix: boolean;
-
-  prevTarget: Window | HTMLElement | null;
+  affixStyle: React.CSSProperties | undefined;
+  placeholderStyle: React.CSSProperties | undefined;
 }

-class Affix extends React.Component<AffixProps, AffixState> {
-  static defaultProps = {
-    target: getDefaultTarget,
+export default class Affix extends React.Component<AffixProps, AffixState> {
+  static propTypes = {
+    offsetTop: PropTypes.number,
+    offsetBottom: PropTypes.number,
+    target: PropTypes.func,
  };

+  scrollEvent: any;
+  resizeEvent: any;
+  timeout: any;
+
+  events = [
+    'resize',
+    'scroll',
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'pageshow',
+    'load',
+  ];
+
+  eventHandlers: {
+    [key: string]: any;
+  } = {};
+
  state: AffixState = {
-    status: AffixStatus.None,
-    lastAffix: false,
-    prevTarget: null,
+    affixStyle: undefined,
+    placeholderStyle: undefined,
  };

-  placeholderNode: HTMLDivElement;
+  private fixedNode: HTMLElement;
+  private placeholderNode: HTMLElement;

-  fixedNode: HTMLDivElement;
+  setAffixStyle(e: any, affixStyle: React.CSSProperties | null) {
+    const { onChange = noop, target = getDefaultTarget } = this.props;
+    const originalAffixStyle = this.state.affixStyle;
+    const isWindow = target() === window;
+    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+      return;
+    }
+    if (shallowequal(affixStyle, originalAffixStyle)) {
+      return;
+    }
+    this.setState({ affixStyle: affixStyle as React.CSSProperties }, () => {
+      const affixed = !!this.state.affixStyle;
+      if ((affixStyle && !originalAffixStyle) ||
+          (!affixStyle && originalAffixStyle)) {
+        onChange(affixed);
+      }
+    });
+  }

-  private timeout: number;
+  setPlaceholderStyle(placeholderStyle: React.CSSProperties | null) {
+    const originalPlaceholderStyle = this.state.placeholderStyle;
+    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
+      return;
+    }
+    this.setState({ placeholderStyle: placeholderStyle as React.CSSProperties });
+  }

-  // Event handler
-  componentDidMount() {
-    const { target } = this.props;
-    if (target) {
-      // [Legacy] Wait for parent component ref has its value.
-      // We should use target as directly element instead of function which makes element check hard.
-      this.timeout = setTimeout(() => {
-        addObserveTarget(target(), this);
-        // Mock Event object.
-        this.updatePosition();
+  syncPlaceholderStyle(e: any) {
+    const { affixStyle } = this.state;
+    if (!affixStyle) {
+      return;
+    }
+    this.placeholderNode.style.cssText = '';
+    this.setAffixStyle(e, {
+      ...affixStyle,
+      width: this.placeholderNode.offsetWidth,
+    });
+    this.setPlaceholderStyle({
+      width: this.placeholderNode.offsetWidth,
+    });
+  }
+
+  @throttleByAnimationFrameDecorator()
+  updatePosition(e: any) {
+    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
+    const targetNode = target();
+
+    // Backwards support
+    // Fix: if offsetTop === 0, it will get undefined,
+    //   if offsetBottom is type of number, offsetMode will be { top: false, ... }
+    offsetTop = typeof offsetTop === 'undefined' ? offset : offsetTop;
+    const scrollTop = getScroll(targetNode, true);
+    const affixNode = ReactDOM.findDOMNode(this) as HTMLElement;
+    const elemOffset = getOffset(affixNode, targetNode);
+    const elemSize = {
+      width: this.fixedNode.offsetWidth,
+      height: this.fixedNode.offsetHeight,
+    };
+
+    const offsetMode = {
+      top: false,
+      bottom: false,
+    };
+    // Default to `offsetTop=0`.
+    if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
+      offsetMode.top = true;
+      offsetTop = 0;
+    } else {
+      offsetMode.top = typeof offsetTop === 'number';
+      offsetMode.bottom = typeof offsetBottom === 'number';
+    }
+
+    const targetRect = getTargetRect(targetNode);
+    const targetInnerHeight =
+      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
+    if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
+      // Fixed Top
+      const width = elemOffset.width;
+      const top = targetRect.top + (offsetTop as number);
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        top,
+        left: targetRect.left + elemOffset.left,
+        width,
      });
+      this.setPlaceholderStyle({
+        width,
+        height: elemSize.height,
+      });
+    } else if (
+      scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
+        offsetMode.bottom
+    ) {
+      // Fixed Bottom
+      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
+      const width = elemOffset.width;
+      this.setAffixStyle(e, {
+        position: 'fixed',
+        bottom: targetBottomOffet + (offsetBottom as number),
+        left: targetRect.left + elemOffset.left,
+        width,
+      });
+      this.setPlaceholderStyle({
+        width,
+        height: elemOffset.height,
+      });
+    } else {
+      const { affixStyle } = this.state;
+      if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
+        this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth });
+      } else {
+        this.setAffixStyle(e, null);
+      }
+      this.setPlaceholderStyle(null);
+    }
+
+    if (e.type === 'resize') {
+      this.syncPlaceholderStyle(e);
    }
  }

-  componentDidUpdate(prevProps: AffixProps) {
-    const { prevTarget } = this.state;
-    const { target } = this.props;
-    let newTarget = null;
-    if (target) {
-      newTarget = target() || null;
+  componentDidMount() {
+    const target = this.props.target || getDefaultTarget;
+    // Wait for parent component ref has its value
+    this.timeout = setTimeout(() => {
+      this.setTargetEventListeners(target);
+    });
+  }
+
+  componentWillReceiveProps(nextProps: AffixProps) {
+    if (this.props.target !== nextProps.target) {
+      this.clearEventListeners();
+      this.setTargetEventListeners(nextProps.target!);
+
+      // Mock Event object.
+      this.updatePosition({});
    }
-
-    if (prevTarget !== newTarget) {
-      removeObserveTarget(this);
-      if (newTarget) {
-        addObserveTarget(newTarget, this);
-        // Mock Event object.
-        this.updatePosition();
-      }
-
-      this.setState({ prevTarget: newTarget });
-    }
-
-    if (
-      prevProps.offsetTop !== this.props.offsetTop ||
-      prevProps.offsetBottom !== this.props.offsetBottom
-    ) {
-      this.updatePosition();
-    }
-
-    this.measure();
  }

  componentWillUnmount() {
+    this.clearEventListeners();
    clearTimeout(this.timeout);
-    removeObserveTarget(this);
    (this.updatePosition as any).cancel();
  }

-  getOffsetTop = () => {
-    const { offset, offsetBottom } = this.props;
-    let { offsetTop } = this.props;
-    if (typeof offsetTop === 'undefined') {
-      offsetTop = offset;
-      warning(
-        typeof offset === 'undefined',
-        'Affix',
-        '`offset` is deprecated. Please use `offsetTop` instead.',
-      );
+  setTargetEventListeners(getTarget: () => HTMLElement | Window | null) {
+    const target = getTarget();
+    if (!target) {
+      return;
    }
+    this.clearEventListeners();

-    if (offsetBottom === undefined && offsetTop === undefined) {
-      offsetTop = 0;
-    }
-    return offsetTop;
-  };
+    this.events.forEach(eventName => {
+      this.eventHandlers[eventName] = addEventListener(target, eventName, this.updatePosition);
+    });
+  }

-  getOffsetBottom = () => {
-    return this.props.offsetBottom;
-  };
-
-  savePlaceholderNode = (node: HTMLDivElement) => {
-    this.placeholderNode = node;
-  };
+  clearEventListeners() {
+    this.events.forEach(eventName => {
+      const handler = this.eventHandlers[eventName];
+      if (handler && handler.remove) {
+        handler.remove();
+      }
+    });
+  }

  saveFixedNode = (node: HTMLDivElement) => {
    this.fixedNode = node;
-  };
-
-  // =================== Measure ===================
-  measure = () => {
-    const { status, lastAffix } = this.state;
-    const { target, onChange } = this.props;
-    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
-      return;
-    }
-
-    const offsetTop = this.getOffsetTop();
-    const offsetBottom = this.getOffsetBottom();
-
-    const targetNode = target();
-    if (!targetNode) {
-      return;
-    }
-
-    const newState: Partial<AffixState> = {
-      status: AffixStatus.None,
-    };
-    const targetRect = getTargetRect(targetNode);
-    const placeholderReact = getTargetRect(this.placeholderNode);
-    const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
-    const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
-
-    if (fixedTop !== undefined) {
-      newState.affixStyle = {
-        position: 'fixed',
-        top: fixedTop,
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-      newState.placeholderStyle = {
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-    } else if (fixedBottom !== undefined) {
-      newState.affixStyle = {
-        position: 'fixed',
-        bottom: fixedBottom,
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-      newState.placeholderStyle = {
-        width: placeholderReact.width,
-        height: placeholderReact.height,
-      };
-    }
-
-    newState.lastAffix = !!newState.affixStyle;
-    if (onChange && lastAffix !== newState.lastAffix) {
-      onChange(newState.lastAffix);
-    }
-
-    this.setState(newState as AffixState);
-  };
-
-  // @ts-ignore TS6133
-  prepareMeasure = () => {
-    // event param is used before. Keep compatible ts define here.
-    this.setState({
-      status: AffixStatus.Prepare,
-      affixStyle: undefined,
-      placeholderStyle: undefined,
-    });
-
-    // Test if `updatePosition` called
-    if (process.env.NODE_ENV === 'test') {
-      const { onTestUpdatePosition } = this.props as any;
-      if (onTestUpdatePosition) {
-        onTestUpdatePosition();
-      }
-    }
-  };
-
-  // Handle realign logic
-  @throttleByAnimationFrameDecorator()
-  updatePosition() {
-    this.prepareMeasure();
  }

-  @throttleByAnimationFrameDecorator()
-  lazyUpdatePosition() {
-    const { target } = this.props;
-    const { affixStyle } = this.state;
-
-    // Check position change before measure to make Safari smooth
-    if (target && affixStyle) {
-      const offsetTop = this.getOffsetTop();
-      const offsetBottom = this.getOffsetBottom();
-
-      const targetNode = target();
-      if (targetNode) {
-        const targetRect = getTargetRect(targetNode);
-        const placeholderReact = getTargetRect(this.placeholderNode);
-        const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
-        const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
-
-        if (
-          (fixedTop !== undefined && affixStyle.top === fixedTop) ||
-          (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
-        ) {
-          return;
-        }
-      }
-    }
-
-    // Directly call prepare measure since it's already throttled.
-    this.prepareMeasure();
+  savePlaceholderNode = (node: HTMLDivElement) => {
+    this.placeholderNode = node;
  }

-  // =================== Render ===================
-  renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { affixStyle, placeholderStyle } = this.state;
-    const { prefixCls, children } = this.props;
-    const className = classNames({
-      [getPrefixCls('affix', prefixCls)]: affixStyle,
-    });
-
-    let props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
-    // Omit this since `onTestUpdatePosition` only works on test.
-    if (process.env.NODE_ENV === 'test') {
-      props = omit(props, ['onTestUpdatePosition']);
-    }
-
-    return (
-      <ResizeObserver
-        onResize={() => {
-          this.updatePosition();
-        }}
-      >
-        <div {...props} ref={this.savePlaceholderNode}>
-          {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
-          <div className={className} ref={this.saveFixedNode} style={affixStyle}>
-            <ResizeObserver
-              onResize={() => {
-                this.updatePosition();
-              }}
-            >
-              {children}
-            </ResizeObserver>
-          </div>
-        </div>
-      </ResizeObserver>
-    );
-  };
-
  render() {
-    return <ConfigConsumer>{this.renderAffix}</ConfigConsumer>;
+    const className = classNames({
+      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
+    });
+
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
+    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
+    return (
+      <div {...props} style={placeholderStyle} ref={this.savePlaceholderNode}>
+        <div className={className} ref={this.saveFixedNode} style={this.state.affixStyle}>
+          {this.props.children}
+        </div>
+      </div>
+    );
  }
 }
-
-polyfill(Affix);
-
-export default Affix;
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 固钉
-type: 导航
+type: Navigation
 title: Affix
 ---

@@ -15,23 +15,17 @@ title: Affix

 ## API

-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |  |
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |

 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x}}>
+  ...
+</Affix>
 ```
-
-## FAQ
-
-### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
-
-从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>
-
-相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
--- a/components/affix/style/index.less
+++ b/components/affix/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import "../../style/themes/default";

 .@{ant-prefix}-affix {
  position: fixed;
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@@ -1,106 +0,0 @@
-import addEventListener from 'rc-util/lib/Dom/addEventListener';
-import Affix from '.';
-
-export type BindElement = HTMLElement | Window | null | undefined;
-export type Rect = ClientRect | DOMRect;
-
-export function getTargetRect(target: BindElement): ClientRect {
-  return target !== window
-    ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
-}
-
-export function getFixedTop(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetTop: number | undefined,
-) {
-  if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
-    return offsetTop + targetRect.top;
-  }
-  return undefined;
-}
-
-export function getFixedBottom(
-  placeholderReact: Rect,
-  targetRect: Rect,
-  offsetBottom: number | undefined,
-) {
-  if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
-    const targetBottomOffset = window.innerHeight - targetRect.bottom;
-    return offsetBottom + targetBottomOffset;
-  }
-  return undefined;
-}
-
-// ======================== Observer ========================
-const TRIGGER_EVENTS = [
-  'resize',
-  'scroll',
-  'touchstart',
-  'touchmove',
-  'touchend',
-  'pageshow',
-  'load',
-];
-
-interface ObserverEntity {
-  target: HTMLElement | Window;
-  affixList: Affix[];
-  eventHandlers: { [eventName: string]: any };
-}
-
-let observerEntities: ObserverEntity[] = [];
-
-export function getObserverEntities() {
-  // Only used in test env. Can be removed if refactor.
-  return observerEntities;
-}
-
-export function addObserveTarget(target: HTMLElement | Window | null, affix: Affix): void {
-  if (!target) return;
-
-  let entity: ObserverEntity | undefined = observerEntities.find(item => item.target === target);
-
-  if (entity) {
-    entity.affixList.push(affix);
-  } else {
-    entity = {
-      target,
-      affixList: [affix],
-      eventHandlers: {},
-    };
-    observerEntities.push(entity);
-
-    // Add listener
-    TRIGGER_EVENTS.forEach(eventName => {
-      entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
-        entity!.affixList.forEach(targetAffix => {
-          targetAffix.lazyUpdatePosition();
-        });
-      });
-    });
-  }
-}
-
-export function removeObserveTarget(affix: Affix): void {
-  const observerEntity = observerEntities.find(oriObserverEntity => {
-    const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
-    if (hasAffix) {
-      oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
-    }
-    return hasAffix;
-  });
-
-  if (observerEntity && observerEntity.affixList.length === 0) {
-    observerEntities = observerEntities.filter(item => item !== observerEntity);
-
-    // Remove listener
-    TRIGGER_EVENTS.forEach(eventName => {
-      const handler = observerEntity.eventHandlers[eventName];
-      if (handler && handler.remove) {
-        handler.remove();
-      }
-    });
-  }
-}
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@@ -7,24 +7,8 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-        />
-      </svg>
-    </i>
+    />
    <span
      class="ant-alert-message"
    >
@@ -36,28 +20,12 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
  </div>
  <br />
  <div
-    class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable"
+    class="ant-alert ant-alert-warning ant-alert-banner"
    data-show="true"
  >
    <i
-      aria-label="icon: exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-        />
-      </svg>
-    </i>
+    />
    <span
      class="ant-alert-message"
    >
@@ -66,31 +34,13 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-    <button
+    <a
      class="ant-alert-close-icon"
-      tabindex="0"
-      type="button"
    >
      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
-    </button>
+        class="anticon anticon-cross"
+      />
+    </a>
  </div>
  <br />
  <div
@@ -112,24 +62,8 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-cross-circle ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -161,7 +95,7 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
 exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
 <div>
  <div
-    class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"
+    class="ant-alert ant-alert-warning ant-alert-no-icon"
    data-show="true"
  >
    <span
@@ -172,34 +106,16 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-    <button
+    <a
      class="ant-alert-close-icon"
-      tabindex="0"
-      type="button"
    >
      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
-    </button>
+        class="anticon anticon-cross"
+      />
+    </a>
  </div>
  <div
-    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"
+    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
    data-show="true"
  >
    <span
@@ -212,38 +128,20 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
    >
      Error Description Error Description Error Description Error Description Error Description Error Description
    </span>
-    <button
+    <a
      class="ant-alert-close-icon"
-      tabindex="0"
-      type="button"
    >
      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
-    </button>
+        class="anticon anticon-cross"
+      />
+    </a>
  </div>
 </div>
 `;

 exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
 <div
-  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"
+  class="ant-alert ant-alert-info ant-alert-no-icon"
  data-show="true"
 >
  <span
@@ -254,299 +152,11 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
  <span
    class="ant-alert-description"
  />
-  <button
+  <a
    class="ant-alert-close-icon"
-    tabindex="0"
-    type="button"
  >
-    <span
-      class="ant-alert-close-text"
-    >
-      Close Now
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
-<div>
-  <div
-    class="ant-alert ant-alert-success ant-alert-no-icon"
-    data-show="true"
-  >
-    <span
-      class="ant-alert-message"
-    >
-      showIcon = false
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-success"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Success Tips
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-info"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Informational Notes
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-warning"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Warning
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-error"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Error
-    </span>
-    <span
-      class="ant-alert-description"
-    />
-  </div>
-  <div
-    class="ant-alert ant-alert-success ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Success Tips
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Detailed description and advices about successful copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-info ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Informational Notes
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      Additional description and informations about copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-warning ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Warning
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      This is a warning notice about copywriting.
-    </span>
-  </div>
-  <div
-    class="ant-alert ant-alert-error ant-alert-with-description"
-    data-show="true"
-  >
-    <i
-      aria-label="icon: smile"
-      class="anticon anticon-smile ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
-        />
-      </svg>
-    </i>
-    <span
-      class="ant-alert-message"
-    >
-      Error
-    </span>
-    <span
-      class="ant-alert-description"
-    >
-      This is an error message about copywriting.
-    </span>
-  </div>
+    Close Now
+  </a>
 </div>
 `;

@@ -622,24 +232,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: check-circle"
      class="anticon anticon-check-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
-    </i>
+    />
    <span
      class="ant-alert-message"
    >
@@ -654,24 +248,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: info-circle"
      class="anticon anticon-info-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-        />
-      </svg>
-    </i>
+    />
    <span
      class="ant-alert-message"
    >
@@ -686,24 +264,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-        />
-      </svg>
-    </i>
+    />
    <span
      class="ant-alert-message"
    >
@@ -718,24 +280,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-cross-circle ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -750,27 +296,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
-        />
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-check-circle-o ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -779,7 +306,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    >
-      Detailed description and advice about successful copywriting.
+      Detailed description and advices about successful copywriting.
    </span>
  </div>
  <div
@@ -787,27 +314,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-        <path
-          d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-info-circle-o ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -816,7 +324,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    >
-      Additional description and information about copywriting.
+      Additional description and informations about copywriting.
    </span>
  </div>
  <div
@@ -824,27 +332,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-        <path
-          d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-exclamation-circle-o ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -861,27 +350,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    data-show="true"
  >
    <i
-      aria-label="icon: close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
-        />
-        <path
-          d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-      </svg>
-    </i>
+      class="anticon anticon-cross-circle-o ant-alert-icon"
+    />
    <span
      class="ant-alert-message"
    >
@@ -899,7 +369,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
 exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
 <div>
  <div
-    class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"
+    class="ant-alert ant-alert-success ant-alert-no-icon"
    data-show="true"
  >
    <span
@@ -910,31 +380,13 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-    <button
+    <a
      class="ant-alert-close-icon"
-      tabindex="0"
-      type="button"
    >
      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
-    </button>
+        class="anticon anticon-cross"
+      />
+    </a>
  </div>
  <p>
    placeholder text here
--- a/components/alert/tests/index.test.js
+++ b/components/alert/tests/index.test.js
@@ -21,47 +21,11 @@ describe('Alert', () => {
        closable
        onClose={onClose}
        afterClose={afterClose}
-      />,
+      />
    );
    wrapper.find('.ant-alert-close-icon').simulate('click');
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toBeCalled();
    jest.runAllTimers();
-    expect(afterClose).toHaveBeenCalled();
-  });
-
-  describe('data and aria props', () => {
-    it('sets data attributes on input', () => {
-      const wrapper = mount(<Alert data-test="test-id" data-id="12345" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('data-test')).toBe('test-id');
-      expect(input.getAttribute('data-id')).toBe('12345');
-    });
-
-    it('sets aria attributes on input', () => {
-      const wrapper = mount(<Alert aria-describedby="some-label" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('aria-describedby')).toBe('some-label');
-    });
-
-    it('sets role attribute on input', () => {
-      const wrapper = mount(<Alert role="status" />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
-      expect(input.getAttribute('role')).toBe('status');
-    });
-  });
-
-  it('warning for props#iconType', () => {
-    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
-      <Alert
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
-        iconType="up"
-      />,
-    );
-    expect(warnSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Alert] `iconType` is deprecated. Please use `icon` instead.',
-    );
-    warnSpy.mockRestore();
+    expect(afterClose).toBeCalled();
  });
 });
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -14,23 +14,18 @@ title:

 Display Alert as a banner at top of page.

-```jsx
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
  <div>
    <Alert message="Warning text" banner />
    <br />
-    <Alert
-      message="Very long warning text warning text text text text text text text"
-      banner
-      closable
-    />
+    <Alert message="Very long warning text warning text text text text text text text" banner closable />
    <br />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <br />
    <Alert type="error" message="Error text" banner />
-  </div>,
-  mountNode,
-);
-```
+  </div>
+, mountNode);
+````
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -13,11 +13,13 @@ title:

 The simplest usage for short messages.

-```jsx
+````jsx
 import { Alert } from 'antd';

-ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
-```
+ReactDOM.render(
+  <Alert message="Success Text" type="success" />
+, mountNode);
+````

 <style>
 .ant-alert {
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -13,10 +13,10 @@ title:

 To show close button.

-```jsx
+````jsx
 import { Alert } from 'antd';

-const onClose = e => {
+const onClose = function (e) {
  console.log(e, 'I was closed.');
 };

@@ -35,7 +35,6 @@ ReactDOM.render(
      closable
      onClose={onClose}
    />
-  </div>,
-  mountNode,
-);
-```
+  </div>
+, mountNode);
+````
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -13,8 +13,10 @@ title:

 Replace the default icon with customized text.

-```jsx
+````jsx
 import { Alert } from 'antd';

-ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
-```
+ReactDOM.render(
+  <Alert message="Info Text" type="info" closeText="Close Now" />
+, mountNode);
+````
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@@ -1,60 +0,0 @@
---
-order: 12
-debug: true
-title:
-  zh-CN: 自定义图标
-  en-US: Custom Icon
---
-
-## zh-CN
-
-可口的图标让信息类型更加醒目。
-
-## en-US
-
-A relevant icon makes information clearer and more friendly.
-
-```jsx
-import { Alert, Icon } from 'antd';
-
-const icon = <Icon type="smile" />;
-
-ReactDOM.render(
-  <div>
-    <Alert icon={icon} message="showIcon = false" type="success" />
-    <Alert icon={icon} message="Success Tips" type="success" showIcon />
-    <Alert icon={icon} message="Informational Notes" type="info" showIcon />
-    <Alert icon={icon} message="Warning" type="warning" showIcon />
-    <Alert icon={icon} message="Error" type="error" showIcon />
-    <Alert
-      icon={icon}
-      message="Success Tips"
-      description="Detailed description and advices about successful copywriting."
-      type="success"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Informational Notes"
-      description="Additional description and informations about copywriting."
-      type="info"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Warning"
-      description="This is a warning notice about copywriting."
-      type="warning"
-      showIcon
-    />
-    <Alert
-      icon={icon}
-      message="Error"
-      description="This is an error message about copywriting."
-      type="error"
-      showIcon
-    />
-  </div>,
-  mountNode,
-);
-```
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -13,7 +13,7 @@ title:

 Additional description for alert message.

-```jsx
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@@ -38,7 +38,6 @@ ReactDOM.render(
      description="Error Description Error Description Error Description Error Description"
      type="error"
    />
-  </div>,
-  mountNode,
-);
-```
+  </div>
+, mountNode);
+````
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -11,9 +11,9 @@ title:

 ## en-US

-A relevant icon will make information clearer and more friendly.
+Decent icon make information more clear and more friendly.

-```jsx
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@@ -24,13 +24,13 @@ ReactDOM.render(
    <Alert message="Error" type="error" showIcon />
    <Alert
      message="Success Tips"
-      description="Detailed description and advice about successful copywriting."
+      description="Detailed description and advices about successful copywriting."
      type="success"
      showIcon
    />
    <Alert
      message="Informational Notes"
-      description="Additional description and information about copywriting."
+      description="Additional description and informations about copywriting."
      type="info"
      showIcon
    />
@@ -46,7 +46,6 @@ ReactDOM.render(
      type="error"
      showIcon
    />
-  </div>,
-  mountNode,
-);
-```
+  </div>
+, mountNode);
+````
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@@ -7,40 +7,42 @@ title:

 ## zh-CN

-平滑、自然的卸载提示。
+平滑、自然的卸载提示

 ## en-US

-Smoothly unmount Alert upon close.
+Smoothly and unaffectedly unmount Alert.

-```jsx
+````jsx
 import { Alert } from 'antd';

 class App extends React.Component {
  state = {
    visible: true,
-  };
-
+  }
  handleClose = () => {
    this.setState({ visible: false });
-  };
-
+  }
  render() {
    return (
      <div>
-        {this.state.visible ? (
-          <Alert
-            message="Alert Message Text"
-            type="success"
-            closable
-            afterClose={this.handleClose}
-          />
-        ) : null}
+        {
+          this.state.visible ? (
+            <Alert
+              message="Alert Message Text"
+              type="success"
+              closable
+              afterClose={this.handleClose}
+            />
+          ) : null
+        }
        <p>placeholder text here</p>
      </div>
    );
  }
 }

-ReactDOM.render(<App />, mountNode);
-```
+ReactDOM.render(
+  <App />
+, mountNode);
+````
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -13,7 +13,7 @@ title:

 There are 4 types of Alert: `success`, `info`, `warning`, `error`.

-```jsx
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@@ -22,7 +22,6 @@ ReactDOM.render(
    <Alert message="Info Text" type="info" />
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
-  </div>,
-  mountNode,
-);
-```
+  </div>
+, mountNode);
+````
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -13,15 +13,15 @@ Alert component for feedback.

 ## API

-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| afterClose | Called when close animation is finished | () => void | - | 3.3.1 |
-| banner | Whether to show as banner | boolean | false |  |
-| closable | Whether Alert can be closed | boolean | - |  |
-| closeText | Close text to show | string\|ReactNode | - |  |
-| description | Additional content of Alert | string\|ReactNode | - |  |
-| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - | 3.10.0 |
-| message | Content of Alert | string\|ReactNode | - |  |
-| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |  |
-| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |  |
-| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| afterClose | Called when close animation is finished | () => void | - |
+| banner | Whether to show as banner | boolean | false |
+| closable | Whether Alert can be closed | boolean | - |
+| closeText | Close text to show | string\|ReactNode | - |
+| description | Additional content of Alert | string\|ReactNode | - |
+| message | Content of Alert | string\|ReactNode | - |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| iconType | Icon type, effective when `showIcon` is `true` | string | - |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
+| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -1,13 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
+import Icon from '../icon';
 import classNames from 'classnames';
-import Icon, { ThemeType } from '../icon';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import getDataOrAriaProps from '../_util/getDataOrAriaProps';
-import warning from '../_util/warning';

-function noop() {}
+function noop() { }

 export interface AlertProps {
  /**
@@ -23,7 +20,7 @@ export interface AlertProps {
  /** Additional content of Alert */
  description?: React.ReactNode;
  /** Callback when close Alert */
-  onClose?: React.MouseEventHandler<HTMLButtonElement>;
+  onClose?: React.MouseEventHandler<HTMLAnchorElement>;
  /** Trigger when animation ending of Alert */
  afterClose?: () => void;
  /** Whether to show icon */
@@ -33,33 +30,19 @@ export interface AlertProps {
  prefixCls?: string;
  className?: string;
  banner?: boolean;
-  icon?: React.ReactNode;
 }

-export interface AlertState {
-  closing: boolean;
-  closed: boolean;
-}
-
-export default class Alert extends React.Component<AlertProps, AlertState> {
+export default class Alert extends React.Component<AlertProps, any> {
  constructor(props: AlertProps) {
    super(props);
-
-    warning(
-      !('iconType' in props),
-      'Alert',
-      '`iconType` is deprecated. Please use `icon` instead.',
-    );
-
    this.state = {
      closing: true,
      closed: false,
    };
  }
-
-  handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
+  handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
-    const dom = ReactDOM.findDOMNode(this) as HTMLElement;
+    let dom = ReactDOM.findDOMNode(this) as HTMLElement;
    dom.style.height = `${dom.offsetHeight}px`;
    // Magic code
    // 重复一次后才能正确设置 height
@@ -69,37 +52,25 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
      closing: false,
    });
    (this.props.onClose || noop)(e);
-  };
-
+  }
  animationEnd = () => {
    this.setState({
      closed: true,
      closing: true,
    });
    (this.props.afterClose || noop)();
-  };
-
-  renderAlert = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const {
-      description,
-      prefixCls: customizePrefixCls,
-      message,
-      closeText,
-      banner,
-      className = '',
-      style,
-      icon,
+  }
+  render() {
+    let {
+      closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
+      className = '', style, iconType,
    } = this.props;
-    let { closable, type, showIcon, iconType } = this.props;
-
-    const prefixCls = getPrefixCls('alert', customizePrefixCls);

    // banner模式默认有 Icon
    showIcon = banner && showIcon === undefined ? true : showIcon;
    // banner模式默认为警告
    type = banner && type === undefined ? 'warning' : type || 'info';

-    let iconTheme: ThemeType = 'filled';
    if (!iconType) {
      switch (type) {
        case 'success':
@@ -109,7 +80,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
          iconType = 'info-circle';
          break;
        case 'error':
-          iconType = 'close-circle';
+          iconType = 'cross-circle';
          break;
        case 'warning':
          iconType = 'exclamation-circle';
@@ -119,58 +90,30 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
      }

      // use outline icon in alert with description
-      if (description) {
-        iconTheme = 'outlined';
+      if (!!description) {
+        iconType += '-o';
      }
    }

+    let alertCls = classNames(prefixCls, {
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-close`]: !this.state.closing,
+      [`${prefixCls}-with-description`]: !!description,
+      [`${prefixCls}-no-icon`]: !showIcon,
+      [`${prefixCls}-banner`]: !!banner,
+    }, className);
+
    // closeable when closeText is assigned
    if (closeText) {
      closable = true;
    }

-    const alertCls = classNames(
-      prefixCls,
-      `${prefixCls}-${type}`,
-      {
-        [`${prefixCls}-close`]: !this.state.closing,
-        [`${prefixCls}-with-description`]: !!description,
-        [`${prefixCls}-no-icon`]: !showIcon,
-        [`${prefixCls}-banner`]: !!banner,
-        [`${prefixCls}-closable`]: closable,
-      },
-      className,
-    );
-
    const closeIcon = closable ? (
-      <button
-        type="button"
-        onClick={this.handleClose}
-        className={`${prefixCls}-close-icon`}
-        tabIndex={0}
-      >
-        {closeText ? (
-          <span className={`${prefixCls}-close-text`}>{closeText}</span>
-        ) : (
-          <Icon type="close" />
-        )}
-      </button>
+      <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
+        {closeText || <Icon type="cross" />}
+      </a>
    ) : null;

-    const dataOrAriaProps = getDataOrAriaProps(this.props);
-
-    const iconNode = (icon &&
-      (React.isValidElement<{ className?: string }>(icon) ? (
-        React.cloneElement(icon, {
-          className: classNames({
-            [icon.props.className as string]: icon.props.className,
-            [`${prefixCls}-icon`]: true,
-          }),
-        })
-      ) : (
-        <span className={`${prefixCls}-icon`}>{icon}</span>
-      ))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
-
    return this.state.closed ? null : (
      <Animate
        component=""
@@ -178,17 +121,13 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
        transitionName={`${prefixCls}-slide-up`}
        onEnd={this.animationEnd}
      >
-        <div data-show={this.state.closing} className={alertCls} style={style} {...dataOrAriaProps}>
-          {showIcon ? iconNode : null}
+        <div data-show={this.state.closing} className={alertCls} style={style}>
+          {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
          <span className={`${prefixCls}-message`}>{message}</span>
          <span className={`${prefixCls}-description`}>{description}</span>
          {closeIcon}
        </div>
      </Animate>
    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderAlert}</ConfigConsumer>;
  }
 }
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 警告提示
-type: 反馈
+type: Feedback
 title: Alert
 ---

@@ -14,15 +14,15 @@ title: Alert

 ## API

-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | 3.3.1 |
-| banner | 是否用作顶部公告 | boolean | false |  |
-| closable | 默认不显示关闭按钮 | boolean | 无 |  |
-| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |  |
-| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |  |
-| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - | 3.10.0 |
-| message | 警告提示内容 | string\|ReactNode | 无 |  |
-| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |  |
-| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |  |
-| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
+| banner | 是否用作顶部公告 | boolean | false |
+| closable | 默认不显示关闭按钮 | boolean | 无 |
+| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
+| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
+| message | 警告提示内容 | string\|ReactNode | 无 |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
+| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -1,107 +1,94 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
+@import "../../style/themes/default";
+@import "../../style/mixins/index";

-@alert-prefix-cls: ~'@{ant-prefix}-alert';
+@alert-prefix-cls: ~"@{ant-prefix}-alert";

@alert-message-color: @heading-color;
@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: @icon-color-hover;

 .@{alert-prefix-cls} {
  .reset-component;
-
  position: relative;
  padding: 8px 15px 8px 37px;
-  word-wrap: break-word;
  border-radius: @border-radius-base;

  &&-no-icon {
    padding: 8px 15px;
  }

-  &&-closable {
-    padding-right: 30px;
-  }
-
  &-icon {
-    position: absolute;
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
    left: 16px;
+    position: absolute;
  }

  &-description {
-    display: none;
    font-size: @font-size-base;
    line-height: 22px;
+    display: none;
  }

  &-success {
-    background-color: @alert-success-bg-color;
-    border: @border-width-base @border-style-base @alert-success-border-color;
+    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+    background-color: ~`colorPalette("@{success-color}", 1)`;
    .@{alert-prefix-cls}-icon {
-      color: @alert-success-icon-color;
+      color: @success-color;
    }
  }

  &-info {
-    background-color: @alert-info-bg-color;
-    border: @border-width-base @border-style-base @alert-info-border-color;
+    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
+    background-color: ~`colorPalette("@{info-color}", 1)`;
    .@{alert-prefix-cls}-icon {
-      color: @alert-info-icon-color;
+      color: @info-color;
    }
  }

  &-warning {
-    background-color: @alert-warning-bg-color;
-    border: @border-width-base @border-style-base @alert-warning-border-color;
+    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+    background-color: ~`colorPalette("@{warning-color}", 1)`;
    .@{alert-prefix-cls}-icon {
-      color: @alert-warning-icon-color;
+      color: @warning-color;
    }
  }

  &-error {
-    background-color: @alert-error-bg-color;
-    border: @border-width-base @border-style-base @alert-error-border-color;
+    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+    background-color: ~`colorPalette("@{error-color}", 1)`;
    .@{alert-prefix-cls}-icon {
-      color: @alert-error-icon-color;
+      color: @error-color;
    }
  }

  &-close-icon {
-    position: absolute;
-    top: 8px;
-    right: 16px;
-    overflow: hidden;
    font-size: @font-size-sm;
+    position: absolute;
+    right: 16px;
+    top: 8px;
    line-height: 22px;
-    background-color: transparent;
-    border: none;
+    overflow: hidden;
    cursor: pointer;

-    .@{iconfont-css-prefix}-close {
-      color: @alert-close-color;
-      transition: color 0.3s;
+    .@{iconfont-css-prefix}-cross {
+      color: @text-color-secondary;
+      transition: color .3s;
      &:hover {
-        color: @alert-close-hover-color;
+        color: #404040;
      }
    }
  }

  &-close-text {
-    color: @alert-close-color;
-    transition: color 0.3s;
-    &:hover {
-      color: @alert-close-hover-color;
-    }
+    position: absolute;
+    right: 16px;
  }

  &-with-description {
-    position: relative;
    padding: 15px 15px 15px 64px;
-    color: @alert-text-color;
-    line-height: @line-height-base;
+    position: relative;
    border-radius: @border-radius-base;
+    color: @text-color;
+    line-height: @line-height-base;
  }

  &-with-description&-no-icon {
@@ -119,19 +106,15 @@
    position: absolute;
    top: 16px;
    right: 16px;
-    font-size: @font-size-base;
    cursor: pointer;
+    font-size: @font-size-base;
  }

  &-with-description &-message {
+    font-size: @font-size-lg;
+    color: @alert-message-color;
    display: block;
    margin-bottom: 4px;
-    color: @alert-message-color;
-    font-size: @font-size-lg;
-  }
-
-  &-message {
-    color: @alert-message-color;
  }

  &-with-description &-description {
@@ -143,44 +126,44 @@
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
+    transition: all .3s @ease-in-out-circ;
    transform-origin: 50% 0;
-    transition: all 0.3s @ease-in-out-circ;
  }

  &-slide-up-leave {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
+    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-banner {
-    margin-bottom: 0;
-    border: 0;
    border-radius: 0;
+    border: 0;
+    margin-bottom: 0;
  }
 }

@keyframes antAlertSlideUpIn {
  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
  }
  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
  }
 }

@keyframes antAlertSlideUpOut {
  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
  }
  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
  }
 }
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
 import AnchorLink from './AnchorLink';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
+import raf from 'raf';

 function getDefaultContainer() {
  return window;
@@ -26,7 +25,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number

  if (rect.width || rect.height) {
    if (container === window) {
-      container = element.ownerDocument!.documentElement!;
+      container = element.ownerDocument.documentElement;
      return rect.top - container.clientTop;
    }
    return rect.top - (container as HTMLElement).getBoundingClientRect().top;
@@ -35,14 +34,53 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
  return rect.top;
 }

+function easeInOutCubic(t: number, b: number, c: number, d: number) {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  }
+  return cc / 2 * ((t -= 2) * t * t + 2) + b;
+}
+
 const sharpMatcherRegx = /#([^#]+)$/;
+function scrollTo(href: string, offsetTop = 0, getContainer: () => AnchorContainer, callback = () => { }) {
+  const container = getContainer();
+  const scrollTop = getScroll(container, true);
+  const sharpLinkMatch = sharpMatcherRegx.exec(href);
+  if (!sharpLinkMatch) { return; }
+  const targetElement = document.getElementById(sharpLinkMatch[1]);
+  if (!targetElement) {
+    return;
+  }
+  const eleOffsetTop = getOffsetTop(targetElement, container);
+  const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
+  const startTime = Date.now();
+  const frameFunc = () => {
+    const timestamp = Date.now();
+    const time = timestamp - startTime;
+    const nextScrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
+    if (container === window) {
+      window.scrollTo(window.pageXOffset, nextScrollTop);
+    } else {
+      (container as HTMLElement).scrollTop = nextScrollTop;
+    }
+    if (time < 450) {
+      raf(frameFunc);
+    } else {
+      callback();
+    }
+  };
+  raf(frameFunc);
+  history.pushState(null, '', href);
+}

 type Section = {
-  link: string;
+  link: String;
  top: number;
 };

-export type AnchorContainer = HTMLElement | Window;
+export type AnchorContainer =  HTMLElement | Window;

 export interface AnchorProps {
  prefixCls?: string;
@@ -54,20 +92,6 @@ export interface AnchorProps {
  affix?: boolean;
  showInkInFixed?: boolean;
  getContainer?: () => AnchorContainer;
-  /** Return customize highlight anchor */
-  getCurrentAnchor?: () => string;
-  onClick?: (
-    e: React.MouseEvent<HTMLElement>,
-    link: { title: React.ReactNode; href: string },
-  ) => void;
-  /** Scroll to target offset value, if none, it's offsetTop prop value or 0. */
-  targetOffset?: number;
-  /** Listening event when scrolling change active link */
-  onChange?: (currentActiveLink: string) => void;
-}
-
-export interface AnchorState {
-  activeLink: null | string;
 }

 export interface AnchorDefaultProps extends AnchorProps {
@@ -77,21 +101,11 @@ export interface AnchorDefaultProps extends AnchorProps {
  getContainer: () => AnchorContainer;
 }

-export interface AntAnchor {
-  registerLink: (link: string) => void;
-  unregisterLink: (link: string) => void;
-  activeLink: string | null;
-  scrollTo: (link: string) => void;
-  onClick?: (
-    e: React.MouseEvent<HTMLElement>,
-    link: { title: React.ReactNode; href: string },
-  ) => void;
-}
-
-export default class Anchor extends React.Component<AnchorProps, AnchorState> {
+export default class Anchor extends React.Component<AnchorProps, any> {
  static Link: typeof AnchorLink;

  static defaultProps = {
+    prefixCls: 'ant-anchor',
    affix: true,
    showInkInFixed: false,
    getContainer: getDefaultContainer,
@@ -101,78 +115,77 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
    antAnchor: PropTypes.object,
  };

-  state = {
-    activeLink: null,
-  };
-
  private inkNode: HTMLSpanElement;

-  // scroll scope's container
-  private scrollContainer: HTMLElement | Window;
-
-  private links: string[] = [];
-
+  private links: String[];
  private scrollEvent: any;
-
  private animating: boolean;

-  private prefixCls?: string;
+  constructor(props: AnchorProps) {
+    super(props);
+    this.state = {
+      activeLink: null,
+    };
+    this.links = [];
+  }

  getChildContext() {
-    const antAnchor: AntAnchor = {
-      registerLink: (link: string) => {
-        if (!this.links.includes(link)) {
-          this.links.push(link);
-        }
+    return {
+      antAnchor: {
+        registerLink: (link: String) => {
+          if (!this.links.includes(link)) {
+            this.links.push(link);
+          }
+        },
+        unregisterLink: (link: String) => {
+          const index = this.links.indexOf(link);
+          if (index !== -1) {
+            this.links.splice(index, 1);
+          }
+        },
+        activeLink: this.state.activeLink,
+        scrollTo: this.handleScrollTo,
      },
-      unregisterLink: (link: string) => {
-        const index = this.links.indexOf(link);
-        if (index !== -1) {
-          this.links.splice(index, 1);
-        }
-      },
-      activeLink: this.state.activeLink,
-      scrollTo: this.handleScrollTo,
-      onClick: this.props.onClick,
    };
-    return { antAnchor };
  }

  componentDidMount() {
    const { getContainer } = this.props as AnchorDefaultProps;
-    this.scrollContainer = getContainer();
-    this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
+    this.scrollEvent = addEventListener(getContainer(), 'scroll', this.handleScroll);
    this.handleScroll();
  }

-  componentDidUpdate() {
-    if (this.scrollEvent) {
-      const { getContainer } = this.props as AnchorDefaultProps;
-      const currentContainer = getContainer();
-      if (this.scrollContainer !== currentContainer) {
-        this.scrollContainer = currentContainer;
-        this.scrollEvent.remove();
-        this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
-        this.handleScroll();
-      }
-    }
-    this.updateInk();
-  }
-
  componentWillUnmount() {
    if (this.scrollEvent) {
      this.scrollEvent.remove();
    }
  }

-  getCurrentAnchor(offsetTop = 0, bounds = 5): string {
-    const { getCurrentAnchor } = this.props;
+  componentDidUpdate() {
+    this.updateInk();
+  }

-    if (typeof getCurrentAnchor === 'function') {
-      return getCurrentAnchor();
+  handleScroll = () => {
+    if (this.animating) {
+      return;
    }
+    const { offsetTop, bounds } = this.props;
+    this.setState({
+      activeLink: this.getCurrentAnchor(offsetTop, bounds),
+    });
+  }

-    const activeLink = '';
+  handleScrollTo = (link: string) => {
+    const { offsetTop, getContainer } = this.props as AnchorDefaultProps;
+    this.animating = true;
+    this.setState({ activeLink: link });
+    scrollTo(link, offsetTop, getContainer, () => {
+      this.animating = false;
+    });
+  }
+
+  getCurrentAnchor(offsetTop = 0, bounds = 5) {
+    let activeLink = '';
    if (typeof document === 'undefined') {
      return activeLink;
    }
@@ -182,9 +195,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
    const container = getContainer();
    this.links.forEach(link => {
      const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
-      if (!sharpLinkMatch) {
-        return;
-      }
+      if (!sharpLinkMatch) { return; }
      const target = document.getElementById(sharpLinkMatch[1]);
      if (target) {
        const top = getOffsetTop(target, container);
@@ -198,102 +209,40 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
    });

    if (linkSections.length) {
-      const maxSection = linkSections.reduce((prev, curr) => (curr.top > prev.top ? curr : prev));
+      const maxSection = linkSections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
      return maxSection.link;
    }
    return '';
  }

-  handleScrollTo = (link: string) => {
-    const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps;
-
-    this.setCurrentActiveLink(link);
-    const container = getContainer();
-    const scrollTop = getScroll(container, true);
-    const sharpLinkMatch = sharpMatcherRegx.exec(link);
-    if (!sharpLinkMatch) {
-      return;
-    }
-    const targetElement = document.getElementById(sharpLinkMatch[1]);
-    if (!targetElement) {
-      return;
-    }
-
-    const eleOffsetTop = getOffsetTop(targetElement, container);
-    let y = scrollTop + eleOffsetTop;
-    y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
-    this.animating = true;
-
-    scrollTo(y, {
-      callback: () => {
-        this.animating = false;
-      },
-      getContainer,
-    });
-  };
-
-  saveInkNode = (node: HTMLSpanElement) => {
-    this.inkNode = node;
-  };
-
-  setCurrentActiveLink = (link: string) => {
-    const { activeLink } = this.state;
-    const { onChange } = this.props;
-
-    if (activeLink !== link) {
-      this.setState({
-        activeLink: link,
-      });
-      if (onChange) {
-        onChange(link);
-      }
-    }
-  };
-
-  handleScroll = () => {
-    if (this.animating) {
-      return;
-    }
-    const { offsetTop, bounds, targetOffset } = this.props;
-    const currentActiveLink = this.getCurrentAnchor(
-      targetOffset !== undefined ? targetOffset : offsetTop || 0,
-      bounds,
-    );
-    this.setCurrentActiveLink(currentActiveLink);
-  };
-
  updateInk = () => {
    if (typeof document === 'undefined') {
      return;
    }
-    const { prefixCls } = this;
+    const { prefixCls } = this.props;
    const anchorNode = ReactDOM.findDOMNode(this) as Element;
    const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
    if (linkNode) {
      this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
    }
-  };
+  }

-  renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => {
+  saveInkNode = (node: HTMLSpanElement) => {
+    this.inkNode = node;
+  }
+
+  render() {
    const {
-      prefixCls: customizePrefixCls,
+      prefixCls,
      className = '',
      style,
      offsetTop,
      affix,
      showInkInFixed,
      children,
-      getContainer,
    } = this.props;
    const { activeLink } = this.state;

-    const prefixCls = getPrefixCls('anchor', customizePrefixCls);
-
-    // To support old version react.
-    // Have to add prefixCls on the instance.
-    // https://github.com/facebook/react/issues/12397
-    this.prefixCls = prefixCls;
-
    const inkClass = classNames(`${prefixCls}-ink-ball`, {
      visible: activeLink,
    });
@@ -301,7 +250,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
    const wrapperClass = classNames(className, `${prefixCls}-wrapper`);

    const anchorClass = classNames(prefixCls, {
-      fixed: !affix && !showInkInFixed,
+      'fixed': !affix && !showInkInFixed,
    });

    const wrapperStyle = {
@@ -310,9 +259,12 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
    };

    const anchorContent = (
-      <div className={wrapperClass} style={wrapperStyle}>
+      <div
+        className={wrapperClass}
+        style={wrapperStyle}
+      >
        <div className={anchorClass}>
-          <div className={`${prefixCls}-ink`}>
+          <div className={`${prefixCls}-ink`} >
            <span className={inkClass} ref={this.saveInkNode} />
          </div>
          {children}
@@ -320,16 +272,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
      </div>
    );

-    return !affix ? (
-      anchorContent
-    ) : (
-      <Affix offsetTop={offsetTop} target={getContainer}>
+    return !affix ? anchorContent : (
+      <Affix offsetTop={offsetTop}>
        {anchorContent}
      </Affix>
    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderAnchor}</ConfigConsumer>;
  }
 }
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { AntAnchor } from './Anchor';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

 export interface AnchorLinkProps {
  prefixCls?: string;
  href: string;
-  target?: string;
  title: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
+  children?: any;
 }

-class AnchorLink extends React.Component<AnchorLinkProps, any> {
+export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
  static defaultProps = {
+    prefixCls: 'ant-anchor',
    href: '#',
  };

@@ -24,39 +20,30 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
  };

  context: {
-    antAnchor: AntAnchor;
+    antAnchor: any;
  };

  componentDidMount() {
    this.context.antAnchor.registerLink(this.props.href);
  }

-  componentDidUpdate({ href: prevHref }: AnchorLinkProps) {
-    const { href } = this.props;
-    if (prevHref !== href) {
-      this.context.antAnchor.unregisterLink(prevHref);
-      this.context.antAnchor.registerLink(href);
-    }
-  }
-
  componentWillUnmount() {
    this.context.antAnchor.unregisterLink(this.props.href);
  }

-  handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    const { scrollTo, onClick } = this.context.antAnchor;
-    const { href, title } = this.props;
-    if (onClick) {
-      onClick(e, { title, href });
-    }
-    scrollTo(href);
-  };
+  handleClick = () => {
+    this.context.antAnchor.scrollTo(this.props.href);
+  }

-  renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
-    const prefixCls = getPrefixCls('anchor', customizePrefixCls);
+  render() {
+    const {
+      prefixCls,
+      href,
+      title,
+      children,
+    } = this.props;
    const active = this.context.antAnchor.activeLink === href;
-    const wrapperClassName = classNames(className, `${prefixCls}-link`, {
+    const wrapperClassName = classNames(`${prefixCls}-link`, {
      [`${prefixCls}-link-active`]: active,
    });
    const titleClassName = classNames(`${prefixCls}-link-title`, {
@@ -68,7 +55,6 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
          className={titleClassName}
          href={href}
          title={typeof title === 'string' ? title : ''}
-          target={target}
          onClick={this.handleClick}
        >
          {title}
@@ -76,13 +62,5 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
        {children}
      </div>
    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderAnchorLink}</ConfigConsumer>;
  }
 }
-
-polyfill(AnchorLink);
-
-export default AnchorLink;
--- a/components/anchor/tests/Anchor.test.js
+++ b/components/anchor/tests/Anchor.test.js
@@ -1,34 +1,15 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Anchor from '..';
-import { spyElementPrototypes } from '../../__tests__/util/domHook';
-import { sleep } from '../../../tests/utils';

 const { Link } = Anchor;

 describe('Anchor Render', () => {
-  const getBoundingClientRectMock = jest.fn(() => ({
-    width: 100,
-    height: 100,
-    top: 1000,
-  }));
-  const getClientRectsMock = jest.fn(() => ({
-    length: 1,
-  }));
-  const headingSpy = spyElementPrototypes(HTMLHeadingElement, {
-    getBoundingClientRect: getBoundingClientRectMock,
-    getClientRects: getClientRectsMock,
-  });
-
-  afterAll(() => {
-    headingSpy.mockRestore();
-  });
-
  it('Anchor render perfectly', () => {
    const wrapper = mount(
      <Anchor>
        <Link href="#API" title="API" />
-      </Anchor>,
+      </Anchor>
    );

    wrapper.find('a[href="#API"]').simulate('click');
@@ -41,7 +22,7 @@ describe('Anchor Render', () => {
    const wrapper = mount(
      <Anchor>
        <Link href="http://www.example.com/#API" title="API" />
-      </Anchor>,
+      </Anchor>
    );
    wrapper.find('a[href="http://www.example.com/#API"]').simulate('click');
    expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
@@ -58,7 +39,7 @@ describe('Anchor Render', () => {
    const wrapper = mount(
      <Anchor>
        <Link href="http://www.example.com/#API" title="API" />
-      </Anchor>,
+      </Anchor>
    );
    wrapper.instance().handleScroll();
    expect(wrapper.instance().state.activeLink).toBe('http://www.example.com/#API');
@@ -76,20 +57,23 @@ describe('Anchor Render', () => {
    const wrapper = mount(
      <Anchor>
        <Link href="##API" title="API" />
-      </Anchor>,
+      </Anchor>
    );
    wrapper.instance().handleScrollTo('##API');
    expect(wrapper.instance().state.activeLink).toBe('##API');
    expect(scrollToSpy).not.toHaveBeenCalled();
-    await sleep(1000);
+    await new Promise(resolve => setTimeout(resolve, 50));
    expect(scrollToSpy).toHaveBeenCalled();
+    expect(wrapper.instance().animating).toBe(true);
+    await new Promise(resolve => setTimeout(resolve, 500));
+    expect(wrapper.instance().animating).toBe(false);
  });

  it('should remove listener when unmount', async () => {
    const wrapper = mount(
      <Anchor>
        <Link href="#API" title="API" />
-      </Anchor>,
+      </Anchor>
    );
    const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
    wrapper.unmount();
@@ -100,240 +84,10 @@ describe('Anchor Render', () => {
    const wrapper = mount(
      <Anchor>
        <Link href="#API" title="API" />
-      </Anchor>,
+      </Anchor>
    );
    expect(wrapper.instance().links).toEqual(['#API']);
    wrapper.setProps({ children: null });
    expect(wrapper.instance().links).toEqual([]);
  });
-
-  it('should update links when link href update', async () => {
-    let anchorInstance = null;
-    function AnchorUpdate({ href }) {
-      return (
-        <Anchor
-          ref={c => {
-            anchorInstance = c;
-          }}
-        >
-          <Link href={href} title="API" />
-        </Anchor>
-      );
-    }
-    const wrapper = mount(<AnchorUpdate href="#API" />);
-
-    expect(anchorInstance.links).toEqual(['#API']);
-    wrapper.setProps({ href: '#API_1' });
-    expect(anchorInstance.links).toEqual(['#API_1']);
-  });
-
-  it('Anchor onClick event', () => {
-    let event;
-    let link;
-    const handleClick = (...arg) => {
-      [event, link] = arg;
-    };
-
-    const href = '#API';
-    const title = 'API';
-
-    const wrapper = mount(
-      <Anchor onClick={handleClick}>
-        <Link href={href} title={title} />
-      </Anchor>,
-    );
-
-    wrapper.find(`a[href="${href}"]`).simulate('click');
-
-    wrapper.instance().handleScroll();
-    expect(event).not.toBe(undefined);
-    expect(link).toEqual({ href, title });
-  });
-
-  it('Different function returns the same DOM', async () => {
-    let root = document.getElementById('root');
-    if (!root) {
-      root = document.createElement('div', { id: 'root' });
-      root.id = 'root';
-      document.body.appendChild(root);
-    }
-    mount(<div id="API">Hello</div>, { attachTo: root });
-    const getContainerA = () => {
-      return document.getElementById('API');
-    };
-    const getContainerB = () => {
-      return document.getElementById('API');
-    };
-
-    const wrapper = mount(
-      <Anchor getContainer={getContainerA}>
-        <Link href="#API" title="API" />
-      </Anchor>,
-    );
-    const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
-    await sleep(1000);
-    wrapper.setProps({ getContainer: getContainerB });
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-  });
-
-  it('Different function returns different DOM', async () => {
-    let root = document.getElementById('root');
-    if (!root) {
-      root = document.createElement('div', { id: 'root' });
-      root.id = 'root';
-      document.body.appendChild(root);
-    }
-    mount(
-      <div>
-        <div id="API1">Hello</div>
-        <div id="API2">World</div>
-      </div>,
-      { attachTo: root },
-    );
-    const getContainerA = () => {
-      return document.getElementById('API1');
-    };
-    const getContainerB = () => {
-      return document.getElementById('API2');
-    };
-    const wrapper = mount(
-      <Anchor getContainer={getContainerA}>
-        <Link href="#API1" title="API1" />
-        <Link href="#API2" title="API2" />
-      </Anchor>,
-    );
-    const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-    await sleep(1000);
-    wrapper.setProps({ getContainer: getContainerB });
-    expect(removeListenerSpy).toHaveBeenCalled();
-  });
-
-  it('Same function returns the same DOM', () => {
-    let root = document.getElementById('root');
-    if (!root) {
-      root = document.createElement('div', { id: 'root' });
-      root.id = 'root';
-      document.body.appendChild(root);
-    }
-    mount(<div id="API">Hello</div>, { attachTo: root });
-    const getContainer = () => document.getElementById('API');
-    const wrapper = mount(
-      <Anchor getContainer={getContainer}>
-        <Link href="#API" title="API" />
-      </Anchor>,
-    );
-    wrapper.find('a[href="#API"]').simulate('click');
-    wrapper.instance().handleScroll();
-    expect(wrapper.instance().state).not.toBe(null);
-  });
-
-  it('Same function returns different DOM', async () => {
-    let root = document.getElementById('root');
-    if (!root) {
-      root = document.createElement('div', { id: 'root' });
-      root.id = 'root';
-      document.body.appendChild(root);
-    }
-    mount(
-      <div>
-        <div id="API1">Hello</div>
-        <div id="API2">World</div>
-      </div>,
-      { attachTo: root },
-    );
-    const holdContainer = {
-      container: document.getElementById('API1'),
-    };
-    const getContainer = () => {
-      return holdContainer.container;
-    };
-    const wrapper = mount(
-      <Anchor getContainer={getContainer}>
-        <Link href="#API1" title="API1" />
-        <Link href="#API2" title="API2" />
-      </Anchor>,
-    );
-    const removeListenerSpy = jest.spyOn(wrapper.instance().scrollEvent, 'remove');
-    expect(removeListenerSpy).not.toHaveBeenCalled();
-    await sleep(1000);
-    holdContainer.container = document.getElementById('API2');
-    wrapper.setProps({ 'data-only-trigger-re-render': true });
-    expect(removeListenerSpy).toHaveBeenCalled();
-  });
-
-  it('Anchor getCurrentAnchor prop', () => {
-    const getCurrentAnchor = () => '#API2';
-    const wrapper = mount(
-      <Anchor getCurrentAnchor={getCurrentAnchor}>
-        <Link href="#API1" title="API1" />
-        <Link href="#API2" title="API2" />
-      </Anchor>,
-    );
-    expect(wrapper.instance().state.activeLink).toBe('#API2');
-  });
-
-  it('Anchor targetOffset prop', () => {
-    jest.useFakeTimers();
-
-    let dateNowMock;
-
-    function dataNowMockFn() {
-      let start = 0;
-
-      const handler = () => {
-        return (start += 1000);
-      };
-
-      return jest.spyOn(Date, 'now').mockImplementation(handler);
-    }
-
-    dateNowMock = dataNowMockFn();
-
-    const scrollToSpy = jest.spyOn(window, 'scrollTo');
-    let root = document.getElementById('root');
-    if (!root) {
-      root = document.createElement('div', { id: 'root' });
-      root.id = 'root';
-      document.body.appendChild(root);
-    }
-    mount(<h1 id="API">Hello</h1>, { attachTo: root });
-    const wrapper = mount(
-      <Anchor>
-        <Link href="#API" title="API" />
-      </Anchor>,
-    );
-    wrapper.instance().handleScrollTo('#API');
-    jest.runAllTimers();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 1000);
-    dateNowMock = dataNowMockFn();
-
-    wrapper.setProps({ offsetTop: 100 });
-    wrapper.instance().handleScrollTo('#API');
-    jest.runAllTimers();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 900);
-    dateNowMock = dataNowMockFn();
-
-    wrapper.setProps({ targetOffset: 200 });
-    wrapper.instance().handleScrollTo('#API');
-    jest.runAllTimers();
-    expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
-
-    dateNowMock.mockRestore();
-    jest.useRealTimers();
-  });
-
-  it('Anchor onChange prop', async () => {
-    const onChange = jest.fn();
-    const wrapper = mount(
-      <Anchor onChange={onChange}>
-        <Link href="#API1" title="API1" />
-        <Link href="#API2" title="API2" />
-      </Anchor>,
-    );
-    expect(onChange).toHaveBeenCalledTimes(1);
-    wrapper.instance().handleScrollTo('#API2');
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledWith('#API2');
-  });
 });
--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ b/components/anchor/tests/snapshots/demo.test.js.snap
@@ -35,22 +35,10 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
        >
          <a
            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
+            href="#components-anchor-demo-fixed"
+            title="Fixed demo"
          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            target="_blank"
-            title="Basic demo with Target"
-          >
-            Basic demo with Target
+            Fixed demo
          </a>
        </div>
        <div
@@ -92,228 +80,6 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] = `
-<div
-  class="ant-anchor-wrapper"
-  style="max-height:100vh"
->
-  <div
-    class="ant-anchor fixed"
-  >
-    <div
-      class="ant-anchor-ink"
-    >
-      <span
-        class="ant-anchor-ink-ball"
-      />
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
-        title="Basic demo"
-      >
-        Basic demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
-        title="Static demo"
-      >
-        Static demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#API"
-        title="API"
-      >
-        API
-      </a>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Anchor-Props"
-          title="Anchor Props"
-        >
-          Anchor Props
-        </a>
-      </div>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Link-Props"
-          title="Link Props"
-        >
-          Link Props
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
-<div
-  class="ant-anchor-wrapper"
-  style="max-height:100vh"
->
-  <div
-    class="ant-anchor fixed"
-  >
-    <div
-      class="ant-anchor-ink"
-    >
-      <span
-        class="ant-anchor-ink-ball"
-      />
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
-        title="Basic demo"
-      >
-        Basic demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
-        title="Static demo"
-      >
-        Static demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#API"
-        title="API"
-      >
-        API
-      </a>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Anchor-Props"
-          title="Anchor Props"
-        >
-          Anchor Props
-        </a>
-      </div>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Link-Props"
-          title="Link Props"
-        >
-          Link Props
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
-<div
-  class="ant-anchor-wrapper"
-  style="max-height:100vh"
->
-  <div
-    class="ant-anchor fixed"
-  >
-    <div
-      class="ant-anchor-ink"
-    >
-      <span
-        class="ant-anchor-ink-ball"
-      />
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
-        title="Basic demo"
-      >
-        Basic demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
-        title="Static demo"
-      >
-        Static demo
-      </a>
-    </div>
-    <div
-      class="ant-anchor-link"
-    >
-      <a
-        class="ant-anchor-link-title"
-        href="#API"
-        title="API"
-      >
-        API
-      </a>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Anchor-Props"
-          title="Anchor Props"
-        >
-          Anchor Props
-        </a>
-      </div>
-      <div
-        class="ant-anchor-link"
-      >
-        <a
-          class="ant-anchor-link-title"
-          href="#Link-Props"
-          title="Link Props"
-        >
-          Link Props
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
@@ -345,10 +111,10 @@ exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
    >
      <a
        class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
-        title="Static demo"
+        href="#components-anchor-demo-fixed"
+        title="Fixed demo"
      >
-        Static demo
+        Fixed demo
      </a>
    </div>
    <div
@@ -387,83 +153,3 @@ exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
  </div>
 </div>
 `;
-
-exports[`renders ./components/anchor/demo/targetOffset.md correctly 1`] = `
-<div>
-  <div
-    class=""
-  >
-    <div
-      class="ant-anchor-wrapper"
-      style="max-height:100vh"
-    >
-      <div
-        class="ant-anchor"
-      >
-        <div
-          class="ant-anchor-ink"
-        >
-          <span
-            class="ant-anchor-ink-ball"
-          />
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
-            title="Basic demo"
-          >
-            Basic demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
-            title="Static demo"
-          >
-            Static demo
-          </a>
-        </div>
-        <div
-          class="ant-anchor-link"
-        >
-          <a
-            class="ant-anchor-link-title"
-            href="#API"
-            title="API"
-          >
-            API
-          </a>
-          <div
-            class="ant-anchor-link"
-          >
-            <a
-              class="ant-anchor-link-title"
-              href="#Anchor-Props"
-              title="Anchor Props"
-            >
-              Anchor Props
-            </a>
-          </div>
-          <div
-            class="ant-anchor-link"
-          >
-            <a
-              class="ant-anchor-link-title"
-              href="#Link-Props"
-              title="Link Props"
-            >
-              Link Props
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -15,21 +15,18 @@ The simplest usage.

 ```jsx
 import { Anchor } from 'antd';
-
 const { Link } = Anchor;

 ReactDOM.render(
  <Anchor>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
+    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
-  </Anchor>,
-  mountNode,
-);
+  </Anchor>
+, mountNode);
 ```

 <style>
--- a/components/anchor/demo/customizeHighlight.md
+++ b/components/anchor/demo/customizeHighlight.md
@@ -1,36 +0,0 @@
---
-order: 4
-title:
-  zh-CN: 自定义锚点高亮
-  en-US: Customize the anchor highlight
---
-
-## zh-CN
-
-自定义锚点高亮。
-
-## en-US
-
-Customize the anchor highlight.
-
-```jsx
-import { Anchor } from 'antd';
-
-const { Link } = Anchor;
-
-const getCurrentAnchor = () => {
-  return '#components-anchor-demo-static';
-};
-
-ReactDOM.render(
-  <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#API" title="API">
-      <Link href="#Anchor-Props" title="Anchor Props" />
-      <Link href="#Link-Props" title="Link Props" />
-    </Link>
-  </Anchor>,
-  mountNode,
-);
-```
--- a/components/anchor/demo/onChange.md
+++ b/components/anchor/demo/onChange.md
@@ -1,36 +0,0 @@
---
-order: 6
-title:
-  zh-CN: 监听锚点链接改变
-  en-US: Listening for anchor link change
---
-
-## zh-CN
-
-监听锚点链接改变
-
-## en-US
-
-Listening for anchor link change.
-
-```jsx
-import { Anchor } from 'antd';
-
-const { Link } = Anchor;
-
-const onChange = link => {
-  console.log('Anchor:OnChange', link);
-};
-
-ReactDOM.render(
-  <Anchor affix={false} onChange={onChange}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#API" title="API">
-      <Link href="#Anchor-Props" title="Anchor Props" />
-      <Link href="#Link-Props" title="Link Props" />
-    </Link>
-  </Anchor>,
-  mountNode,
-);
-```
--- a/components/anchor/demo/onClick.md
+++ b/components/anchor/demo/onClick.md
@@ -1,37 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 自定义 onClick 事件
-  en-US: Customize the onClick event
---
-
-## zh-CN
-
-点击锚点不记录历史。
-
-## en-US
-
-Clicking on an anchor does not record history.
-
-```jsx
-import { Anchor } from 'antd';
-
-const { Link } = Anchor;
-
-const handleClick = (e, link) => {
-  e.preventDefault();
-  console.log(link);
-};
-
-ReactDOM.render(
-  <Anchor affix={false} onClick={handleClick}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
-    <Link href="#API" title="API">
-      <Link href="#Anchor-Props" title="Anchor Props" />
-      <Link href="#Link-Props" title="Link Props" />
-    </Link>
-  </Anchor>,
-  mountNode,
-);
-```
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@@ -15,18 +15,16 @@ Do not change state when page is scrolling.

 ```jsx
 import { Anchor } from 'antd';
-
 const { Link } = Anchor;

 ReactDOM.render(
  <Anchor affix={false}>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
    </Link>
-  </Anchor>,
-  mountNode,
-);
+  </Anchor>
+, mountNode);
 ```
--- a/components/anchor/demo/targetOffset.md
+++ b/components/anchor/demo/targetOffset.md
@@ -1,47 +0,0 @@
---
-order: 5
-title:
-  zh-CN: 设置锚点滚动偏移量
-  en-US: Set Anchor scroll offset
---
-
-## zh-CN
-
-锚点目标滚动到屏幕正中间。
-
-## en-US
-
-Anchor target scroll to screen center.
-
-```jsx
-import { Anchor } from 'antd';
-
-const { Link } = Anchor;
-
-class AnchorExample extends React.Component {
-  state = {
-    targetOffset: undefined,
-  };
-
-  componentDidMount() {
-    this.setState({
-      targetOffset: window.innerHeight / 2,
-    });
-  }
-
-  render() {
-    return (
-      <Anchor targetOffset={this.state.targetOffset}>
-        <Link href="#components-anchor-demo-basic" title="Basic demo" />
-        <Link href="#components-anchor-demo-static" title="Static demo" />
-        <Link href="#API" title="API">
-          <Link href="#Anchor-Props" title="Anchor Props" />
-          <Link href="#Link-Props" title="Link Props" />
-        </Link>
-      </Anchor>
-    );
-  }
-}
-
-ReactDOM.render(<AnchorExample />, mountNode);
-```
--- a/Show More
+++ b/Show More