fix: Drawer close btn style (#22710)

* fix: Drawer close btn style

* fix lint

* snapshot

* update snapshot

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

@@ -6477,6 +6477,7 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
             <button
               aria-label="Close"
               class="config-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -6537,6 +6538,7 @@ exports[`ConfigProvider components Drawer normal 1`] = `
             <button
               aria-label="Close"
               class="ant-drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"
@@ -6597,6 +6599,7 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
             <button
               aria-label="Close"
               class="prefix-Drawer-close"
+              style="--scroll-bar:0px"
             >
               <span
                 aria-label="close"

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"

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"

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>
       )

components/drawer/style/drawer.less

@@ -157,14 +157,12 @@
     right: 0;
     z-index: @zindex-popup-close;
     display: block;
-    width: 56px;
-    height: 56px;
-    padding: 0;
+    padding: 20px;
     color: @text-color-secondary;
     font-weight: 700;
     font-size: @font-size-lg;
     font-style: normal;
-    line-height: 56px;
+    line-height: 1;
     text-align: center;
     text-transform: none;
     text-decoration: none;
@@ -180,6 +178,11 @@
       color: @icon-color-hover;
       text-decoration: none;
     }
+
+    .@{drawer-prefix-cls}-header-no-title & {
+      margin-right: var(--scroll-bar);
+      padding-right: calc(20px - var(--scroll-bar));
+    }
   }
 
   &-header {