chore: auto merge branches (#36772)

chore: sync master into feature

.github/workflows/size-limit.yml

@@ -0,0 +1,31 @@
+name: 📦 Compressed Size(size-limit)
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  compressed-size:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: andresz1/size-limit-action@v1
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+        pattern: "./dist/**/*.min.{js,css}"
+        build-script: "dist:esbuild-no-dup-check"
+        clean-script: "clean-lockfiles"

CHANGELOG.en-US.md

@@ -15,6 +15,22 @@ timeline: true
 
 ---
 
+## 4.22.2
+
+`2022-07-28`
+
+- 💄 Adjust Collapse title click region which will be fully width when `collapsible=default` now. [#36761](https://github.com/ant-design/ant-design/pull/36761)
+- Drawer
+  - 🐞 Fix Drawer not work in 360 browser. [#36748](https://github.com/ant-design/ant-design/pull/36748)
+  - 🐞 Revert back panel style into wrapper dom node in case developer use `contentWrapperStyle` for overwrite. [#36748](https://github.com/ant-design/ant-design/pull/36748)
+  - 🐞 Fix for the string type as `width/height` value and warning which should use number type instead. [#284](https://github.com/react-component/drawer/pull/284)
+
+## 4.22.1
+
+`2022-07-27`
+
+- 🐞 Fix Drawer with percentage width display issue. [#36729](https://github.com/ant-design/ant-design/pull/36729)
+
 ## 4.22.0
 
 `2022-07-26`

CHANGELOG.zh-CN.md

@@ -15,6 +15,22 @@ timeline: true
 
 ---
 
+## 4.22.2
+
+`2022-07-28`
+
+- 💄 调整 Collapse 标题文本在 `collapsible=default` 时为完整宽度点击区域。[#36761](https://github.com/ant-design/ant-design/pull/36761)
+- Drawer
+  - 🐞 修复 Drawer 在 360 浏览器不生效的问题。[#36748](https://github.com/ant-design/ant-design/pull/36748)
+  - 🐞 回滚将样式恢复至包裹层以防止原本通过 `contentWrapperStyle` 覆盖样式的用法。[#36748](https://github.com/ant-design/ant-design/pull/36748)
+  - 🐞 修复兼容以 string 类型作为 `width/height` 的用法，并且警告用户应当使用 number 类型。[#284](https://github.com/react-component/drawer/pull/284)
+
+## 4.22.1
+
+`2022-07-27`
+
+- 🐞 修复 Drawer 使用百分比宽度时的展示问题。[#36729](https://github.com/ant-design/ant-design/pull/36729)
+
 ## 4.22.0
 
 `2022-07-26`

components/collapse/style/index.less

@@ -43,6 +43,10 @@
         }
       }
 
+      .@{collapse-prefix-cls}-header-text {
+        flex: auto;
+      }
+
       .@{collapse-prefix-cls}-extra {
         margin-left: auto;
       }
@@ -55,6 +59,7 @@
     .@{collapse-prefix-cls}-header-collapsible-only {
       cursor: default;
       .@{collapse-prefix-cls}-header-text {
+        flex: none;
         cursor: pointer;
       }
     }

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

@@ -14431,12 +14431,12 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
   />
   <div
     class="config-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="config-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="config-drawer-wrapper-body"
@@ -14505,12 +14505,12 @@ exports[`ConfigProvider components Drawer configProvider componentDisabled 1`] =
   />
   <div
     class="config-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="config-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="config-drawer-wrapper-body"
@@ -14579,12 +14579,12 @@ exports[`ConfigProvider components Drawer configProvider componentSize large 1`]
   />
   <div
     class="config-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="config-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="config-drawer-wrapper-body"
@@ -14653,12 +14653,12 @@ exports[`ConfigProvider components Drawer configProvider componentSize middle 1`
   />
   <div
     class="config-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="config-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="config-drawer-wrapper-body"
@@ -14727,12 +14727,12 @@ exports[`ConfigProvider components Drawer configProvider virtual and dropdownMat
   />
   <div
     class="ant-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -14801,12 +14801,12 @@ exports[`ConfigProvider components Drawer normal 1`] = `
   />
   <div
     class="ant-drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -14875,12 +14875,12 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
   />
   <div
     class="prefix-Drawer-content-wrapper"
+    style="width:378px"
   >
     <div
       aria-modal="true"
       class="prefix-Drawer-content"
       role="dialog"
-      style="width:378px"
     >
       <div
         class="prefix-Drawer-wrapper-body"

components/drawer/__tests__/DrawerEvent.test.js

@@ -88,21 +88,21 @@ describe('Drawer', () => {
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
 
     // Show
     rerender(getDrawer({ visible: true, getContainer: false }));
-    expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeFalsy();
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
 
     // Hide
     rerender(getDrawer({ visible: false, getContainer: false }));
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
-    expect(container.querySelector('.ant-drawer-content-hidden')).toBeTruthy();
+    expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
   });
 
   it('test afterVisibleChange', async () => {
@@ -113,7 +113,7 @@ describe('Drawer', () => {
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
 
     expect(afterVisibleChange).toBeCalledTimes(1);
   });

components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -15,13 +15,13 @@ exports[`Drawer className is test_drawer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -91,13 +91,13 @@ exports[`Drawer closable is false 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -139,13 +139,13 @@ exports[`Drawer getContainer return undefined 2`] = `
       tabindex="0"
     />
     <div
-      class="ant-drawer-content-wrapper"
+      class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+      style="width: 400px;"
     >
       <div
         aria-modal="true"
         class="ant-drawer-content"
         role="dialog"
-        style="width: 400px;"
       >
         <div
           class="ant-drawer-wrapper-body"
@@ -216,13 +216,13 @@ exports[`Drawer have a footer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -297,13 +297,13 @@ exports[`Drawer have a title 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -378,13 +378,13 @@ exports[`Drawer render correctly 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 400px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 400px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -454,13 +454,13 @@ exports[`Drawer render top drawer 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-top-appear ant-drawer-panel-motion-top-appear-active ant-drawer-panel-motion-top"
+    style="height: 400px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="height: 400px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -533,13 +533,13 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"
@@ -612,13 +612,13 @@ exports[`Drawer support closeIcon 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-appear ant-drawer-panel-motion-right-appear-active ant-drawer-panel-motion-right"
+    style="width: 400px;"
   >
     <div
       aria-modal="true"
       class="ant-drawer-content"
       role="dialog"
-      style="width: 400px;"
     >
       <div
         class="ant-drawer-wrapper-body"

components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap

@@ -15,13 +15,13 @@ exports[`Drawer render correctly 1`] = `
     tabindex="0"
   />
   <div
-    class="ant-drawer-content-wrapper"
+    class="ant-drawer-content-wrapper ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
+    style="width: 378px;"
   >
     <div
       aria-modal="true"
-      class="ant-drawer-content ant-drawer-panel-motion-right-leave ant-drawer-panel-motion-right-leave-start ant-drawer-panel-motion-right"
+      class="ant-drawer-content"
       role="dialog"
-      style="width: 378px;"
     >
       <div
         class="ant-drawer-wrapper-body"

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

@@ -320,9 +320,6 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
       style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
       tabindex="0"
     />
-    <div
-      class="ant-drawer-content-wrapper"
-    />
     <div
       aria-hidden="true"
       data-sentinel="end"

components/drawer/__tests__/demo-extend.test.tsx

@@ -8,6 +8,7 @@ jest.mock('rc-drawer', () => {
     const newProps = {
       ...props,
       open: true,
+      getContainer: false,
     };
     return <MockDrawer {...newProps} />;
   };

components/drawer/demo/no-mask.md

@@ -40,6 +40,13 @@ const App: React.FC = () => {
         mask={false}
         onClose={onClose}
         visible={visible}
+        contentWrapperStyle={{
+          width: 333,
+          background: 'red',
+          borderRadius: 20,
+          boxShadow: '-5px 0 5px green',
+          overflow: 'hidden',
+        }}
       >
         <p>Some contents...</p>
         <p>Some contents...</p>

components/drawer/style/drawer.less

@@ -6,9 +6,12 @@
 
 .@{drawer-prefix-cls} {
   position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: @zindex-modal;
   pointer-events: none;
-  inset: 0;
 
   &-inline {
     position: absolute;
@@ -17,49 +20,20 @@
   // ====================== Mask ======================
   &-mask {
     position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: @zindex-modal;
     background: @modal-mask-bg;
     pointer-events: auto;
-    inset: 0;
   }
 
   // ==================== Content =====================
   &-content-wrapper {
     position: absolute;
     z-index: @zindex-modal;
-    transition: transform @animation-duration-slow;
+    transition: all @animation-duration-slow;
-
-    // Placement
-    .@{drawer-prefix-cls}-left & {
-      top: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    .@{drawer-prefix-cls}-right & {
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    .@{drawer-prefix-cls}-top & {
-      top: 0;
-      right: 0;
-      left: 0;
-    }
-
-    .@{drawer-prefix-cls}-bottom & {
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &-content {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    pointer-events: auto;
 
     &-hidden {
       display: none;
@@ -67,32 +41,48 @@
 
     // Placement
     .@{drawer-prefix-cls}-left & {
+      top: 0;
+      bottom: 0;
+      left: 0;
       box-shadow: @shadow-1-right;
     }
 
     .@{drawer-prefix-cls}-right & {
+      top: 0;
+      right: 0;
+      bottom: 0;
       box-shadow: @shadow-1-left;
     }
 
     .@{drawer-prefix-cls}-top & {
+      top: 0;
+      right: 0;
+      left: 0;
       box-shadow: @shadow-1-down;
     }
 
     .@{drawer-prefix-cls}-bottom & {
+      right: 0;
+      bottom: 0;
+      left: 0;
       box-shadow: @shadow-1-up;
     }
   }
 
-  // @drawer-footer-padding-vertical: @modal-footer-padding-vertical;
+  &-content {
-  // @drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
+    width: 100%;
-  // @drawer-header-close-size: 56px;
+    height: 100%;
+    overflow: auto;
+    background: @drawer-bg;
+    pointer-events: auto;
+  }
+
   // ===================== Panel ======================
   &-wrapper-body {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background: @drawer-bg;
   }
 
   // Header
@@ -168,247 +158,3 @@
     border-top: @border-width-base @border-style-base @border-color-split;
   }
 }
-
-// .@{drawer-prefix-cls} {
-//   @drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
-
-//   position: fixed;
-//   z-index: @zindex-modal;
-//   width: 0%;
-//   height: 100%;
-//   transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
-
-//   &-content-wrapper {
-//     position: absolute;
-//     width: 100%;
-//     height: 100%;
-//     transition: transform @animation-duration-slow @drawer-animation-ease,
-//       box-shadow @animation-duration-slow @drawer-animation-ease;
-//   }
-
-//   .@{drawer-prefix-cls}-content {
-//     width: 100%;
-//     height: 100%;
-//   }
-
-//   &-left,
-//   &-right {
-//     top: 0;
-//     width: 0%;
-//     height: 100%;
-//     .@{drawer-prefix-cls}-content-wrapper {
-//       height: 100%;
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       width: 100%;
-//       transition: transform @animation-duration-slow @drawer-animation-ease;
-//     }
-//   }
-
-//   &-left {
-//     left: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         left: 0;
-//       }
-//     }
-
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-right;
-//       }
-//     }
-//   }
-
-//   &-right {
-//     right: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         right: 0;
-//       }
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-left;
-//       }
-//       // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
-//       &.no-mask {
-//         right: 1px;
-//         transform: translateX(1px);
-//       }
-//     }
-//   }
-
-//   &-top,
-//   &-bottom {
-//     left: 0;
-//     width: 100%;
-//     height: 0%;
-
-//     .@{drawer-prefix-cls}-content-wrapper {
-//       width: 100%;
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       height: 100%;
-//       transition: transform @animation-duration-slow @drawer-animation-ease;
-//     }
-//   }
-
-//   &-top {
-//     top: 0;
-
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-down;
-//       }
-//     }
-//   }
-
-//   &-bottom {
-//     bottom: 0;
-
-//     .@{drawer-prefix-cls} {
-//       &-content-wrapper {
-//         bottom: 0;
-//       }
-//     }
-//     &.@{drawer-prefix-cls}-open {
-//       .@{drawer-prefix-cls}-content-wrapper {
-//         box-shadow: @shadow-1-up;
-//       }
-
-//       &.no-mask {
-//         bottom: 1px;
-//         transform: translateY(1px);
-//       }
-//     }
-//   }
-
-//   &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
-//     height: 100%;
-//     opacity: 1;
-//     transition: none;
-//     animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
-//     pointer-events: auto;
-//   }
-
-//   &-title {
-//     flex: 1;
-//     margin: 0;
-//     color: @heading-color;
-//     font-weight: 500;
-//     font-size: @drawer-title-font-size;
-//     line-height: @drawer-title-line-height;
-//   }
-
-//   &-content {
-//     position: relative;
-//     z-index: 1;
-//     overflow: auto;
-//     background-color: @drawer-bg;
-//     background-clip: padding-box;
-//     border: 0;
-//   }
-
-//   &-close {
-//     display: inline-block;
-//     margin-right: 12px;
-//     color: @modal-close-color;
-//     font-weight: 700;
-//     font-size: @font-size-lg;
-//     font-style: normal;
-//     line-height: 1;
-//     text-align: center;
-//     text-transform: none;
-//     text-decoration: none;
-//     background: transparent;
-//     border: 0;
-//     outline: 0;
-//     cursor: pointer;
-//     transition: color @animation-duration-slow;
-//     text-rendering: auto;
-
-//     &:focus,
-//     &:hover {
-//       color: @icon-color-hover;
-//       text-decoration: none;
-//     }
-//   }
-
-//   &-header {
-//     position: relative;
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     padding: @drawer-header-padding;
-//     color: @text-color;
-//     background: @drawer-bg;
-//     border-bottom: @border-width-base @border-style-base @border-color-split;
-//     border-radius: @border-radius-base @border-radius-base 0 0;
-
-//     &-title {
-//       display: flex;
-//       flex: 1;
-//       align-items: center;
-//       justify-content: space-between;
-//     }
-
-//     &-close-only {
-//       padding-bottom: 0;
-//       border: none;
-//     }
-//   }
-
-//   &-wrapper-body {
-//     display: flex;
-//     flex-flow: column nowrap;
-//     width: 100%;
-//     height: 100%;
-//   }
-
-//   &-body {
-//     flex-grow: 1;
-//     padding: @drawer-body-padding;
-//     overflow: auto;
-//     font-size: @font-size-base;
-//     line-height: @line-height-base;
-//     word-wrap: break-word;
-//   }
-
-//   &-footer {
-//     flex-shrink: 0;
-//     padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
-//     border-top: @border-width-base @border-style-base @border-color-split;
-//   }
-
-//   &-mask {
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 0;
-//     background-color: @modal-mask-bg;
-//     opacity: 0;
-//     transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
-//     pointer-events: none;
-//   }
-
-//   // =================== Hook Components ===================
-//   .@{picker-prefix-cls} {
-//     &-clear {
-//       background: @popover-background;
-//     }
-//   }
-// }
-
-// @keyframes antdDrawerFadeIn {
-//   0% {
-//     opacity: 0;
-//   }
-
-//   100% {
-//     opacity: 1;
-//   }
-// }

components/drawer/style/motion.less

@@ -6,6 +6,10 @@
   &-enter,
   &-appear,
   &-leave {
+    &-start {
+      transition: none;
+    }
+
     &-active {
       transition: all @animation-duration-slow;
     }

components/grid/style/index.less

@@ -6,6 +6,7 @@
 .@{row-prefix-cls} {
   display: flex;
   flex-flow: row wrap;
+  min-width: 0;
 
   &::before,
   &::after {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.22.0",
+  "version": "4.22.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -128,7 +128,7 @@
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.3.0",
     "rc-dialog": "~8.9.0",
-    "rc-drawer": "~5.0.0-alpha.7",
+    "rc-drawer": "~5.1.0-alpha.1",
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.7.0",

tests/shared/demoTest.tsx

@@ -68,8 +68,9 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
       doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`,
       () => {
         const errSpy = excludeWarning();
+        const mockDate = moment('2016-11-22').valueOf();
 
-        MockDate.set(moment('2016-11-22').valueOf());
+        MockDate.set(mockDate);
         let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
         // Inject Trigger status unless skipped
         Demo = typeof Demo === 'function' ? <Demo /> : Demo;
@@ -86,7 +87,7 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
         }
 
         if (options?.testingLib) {
-          jest.useFakeTimers();
+          jest.useFakeTimers().setSystemTime(mockDate);
 
           const { container } = render(Demo);
           act(() => {