diff --git a/.jest.js b/.jest.js
index e360991e71..7ed3f25067 100644
--- a/.jest.js
+++ b/.jest.js
@@ -2,7 +2,9 @@ const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
   '/dist/',
-  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
+  // Ignore modules without es dir.
+  // Update: @babel/runtime should also be transformed
+  'node_modules/(?!.*@babel)[^/]+?/(?!(es|node_modules)/)',
 ];
 
 module.exports = {
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 2f01760638..b47e16a96b 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -120,7 +120,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     loading: false,
     ghost: false,
     block: false,
-    htmlType: 'button',
+    htmlType: 'button' as ButtonProps['htmlType'],
   };
 
   private delayTimeout: number;
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 436ccad3f1..0fe9c53221 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -40,7 +40,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
 
   static defaultProps = {
     bordered: true,
-    expandIconPosition: 'left',
+    expandIconPosition: 'left' as CollapseProps['expandIconPosition'],
   };
 
   renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => {
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index cac6dd6b34..c59018f772 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -6441,6 +6441,7 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
             <button
               aria-label="Close"
               class="config-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -6501,6 +6502,7 @@ exports[`ConfigProvider components Drawer normal 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -6561,6 +6563,7 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
             <button
               aria-label="Close"
               class="prefix-Drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 92bf557074..99c1b1859e 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -28,6 +28,7 @@ exports[`Drawer className is test_drawer 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -124,6 +125,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -186,6 +188,7 @@ exports[`Drawer have a footer 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -258,6 +261,7 @@ exports[`Drawer have a title 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -320,6 +324,7 @@ exports[`Drawer render correctly 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -382,6 +387,7 @@ exports[`Drawer render top drawer 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -449,6 +455,7 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 6b813632dc..1f1f021968 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -36,6 +36,7 @@ exports[`Drawer render correctly 1`] = `
               <button
                 aria-label="Close"
                 class="ant-drawer-close"
+                style="--scroll-bar: 0px;"
               >
                 <span
                   aria-label="close"
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 09d168f0de..4357a58124 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import RcDrawer from 'rc-drawer';
+import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'omit.js';
@@ -179,7 +180,16 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     return (
       closable && (
         // eslint-disable-next-line react/button-has-type
-        <button onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          className={`${prefixCls}-close`}
+          style={
+            {
+              '--scroll-bar': `${getScrollBarSize()}px`,
+            } as any
+          }
+        >
           <CloseOutlined />
         </button>
       )
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index 6abe5204b3..7ade50c46d 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -3,7 +3,11 @@
 @drawer-prefix-cls: ~'@{ant-prefix}-drawer';
 @picker-prefix-cls: ~'@{ant-prefix}-picker';
 
+
+
 .@{drawer-prefix-cls} {
+  @drawer-header-close-padding: ceil((@drawer-header-close-size - @font-size-lg) / 2);
+
   position: fixed;
   z-index: @zindex-modal;
   width: 0%;
@@ -157,14 +161,12 @@
     right: 0;
     z-index: @zindex-popup-close;
     display: block;
-    width: @drawer-header-close-size;
-    height: @drawer-header-close-size;
-    padding: 0;
+    padding: @drawer-header-close-padding;
     color: @text-color-secondary;
     font-weight: 700;
     font-size: @font-size-lg;
     font-style: normal;
-    line-height: @drawer-header-close-size;
+    line-height: 1;
     text-align: center;
     text-transform: none;
     text-decoration: none;
@@ -180,6 +182,11 @@
       color: @icon-color-hover;
       text-decoration: none;
     }
+
+    .@{drawer-prefix-cls}-header-no-title & {
+      margin-right: var(--scroll-bar);
+      padding-right: calc(@drawer-header-close-padding - var(--scroll-bar));
+    }
   }
 
   &-header {
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index e611a7b726..f7afdcc831 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -5,7 +5,11 @@ title: Icon
 toc: false
 ---
 
-Semantic vector graphics.
+Semantic vector graphics. Before use icons, you need to install `@ant-design/icons` package:
+
+```bash
+npm install --save @ant-design/icons
+```
 
 ## List of icons
 
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index 12edd603be..eff3ddfce8 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -6,7 +6,11 @@ title: Icon
 toc: false
 ---
 
-语义化的矢量图形。
+语义化的矢量图形。使用图标组件，你需要安装 `@ant-design/icons` 图标组件包：
+
+```bash
+npm install --save @ant-design/icons
+```
 
 ## 设计师专属
 
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index f4bcb662d7..c5b57651b5 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -43,14 +43,14 @@ export interface ProgressProps {
 
 export default class Progress extends React.Component<ProgressProps> {
   static defaultProps = {
-    type: 'line',
+    type: 'line' as ProgressProps['type'],
     percent: 0,
     showInfo: true,
     // null for different theme definition
     trailColor: null,
-    size: 'default',
+    size: 'default' as ProgressProps['size'],
     gapDegree: undefined,
-    strokeLinecap: 'round',
+    strokeLinecap: 'round' as ProgressProps['strokeLinecap'],
   };
 
   getPercentNumber() {
diff --git a/components/tabs/TabBar.tsx b/components/tabs/TabBar.tsx
index 0df600e9c6..27a93aebc0 100644
--- a/components/tabs/TabBar.tsx
+++ b/components/tabs/TabBar.tsx
@@ -12,7 +12,7 @@ import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
 export default class TabBar extends React.Component<TabsProps> {
   static defaultProps = {
     animated: true,
-    type: 'line',
+    type: 'line' as TabsProps['type'],
   };
 
   renderTabBar = ({ direction }: ConfigConsumerProps) => {
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 7f2f902c43..2bc67ccf8b 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -21,7 +21,7 @@ export default class Timeline extends React.Component<TimelineProps, any> {
 
   static defaultProps = {
     reverse: false,
-    mode: '',
+    mode: '' as TimelineProps['mode'],
   };
 
   renderTimeline = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx
index fd55d05750..13c0d758cc 100644
--- a/components/tree/DirectoryTree.tsx
+++ b/components/tree/DirectoryTree.tsx
@@ -39,7 +39,7 @@ function getTreeData({ treeData, children }: DirectoryTreeProps) {
 class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeState> {
   static defaultProps = {
     showIcon: true,
-    expandAction: 'click',
+    expandAction: 'click' as DirectoryTreeProps['expandAction'],
   };
 
   static getDerivedStateFromProps(nextProps: DirectoryTreeProps) {
diff --git a/package.json b/package.json
index 78c0fb6daa..1abbf72c19 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
   },
   "devDependencies": {
     "@ant-design/bisheng-plugin": "^2.3.0",
-    "@ant-design/colors": "^4.0.0-alpha.1",
+    "@ant-design/colors": "^4.0.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^8.0.4",
     "@packtracker/webpack-plugin": "^2.0.1",