From e8963cc28a7434ac8476e3d8321a9a74101a8ff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@outlook.com>
Date: Sun, 12 Mar 2023 19:33:42 +0800
Subject: [PATCH] fix(layout): fix sider menu height

---
 .../src/components/SiderMenu/SiderMenu.tsx    |  8 ++--
 .../src/components/SiderMenu/style/index.ts   |  1 +
 .../src/components/SiderMenu/style/menu.ts    |  4 +-
 tests/form/__snapshots__/demo.test.ts.snap    |  4 +-
 tests/form/lightFilter.test.tsx               | 44 ++++++++++++++-----
 tests/layout/__snapshots__/demo.test.ts.snap  | 12 ++---
 6 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/packages/layout/src/components/SiderMenu/SiderMenu.tsx b/packages/layout/src/components/SiderMenu/SiderMenu.tsx
index a8fd93f03465..3d15a5d4786d 100644
--- a/packages/layout/src/components/SiderMenu/SiderMenu.tsx
+++ b/packages/layout/src/components/SiderMenu/SiderMenu.tsx
@@ -205,10 +205,13 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
 
   const baseClassName = `${prefixCls}-sider`;
 
+  // 收起的宽度
+  const collapsedWidth = 64;
+
   // 之所以这样写是为了提升样式优先级，不然会被sider 自带的覆盖掉
   const stylishClassName = useStylish(`${baseClassName}.${baseClassName}-stylish`, {
     stylish,
-    proLayoutCollapsedWidth: 64,
+    proLayoutCollapsedWidth: collapsedWidth,
   });
 
   const siderClassName = classNames(`${baseClassName}`, hashId, {
@@ -338,8 +341,6 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
     );
   }, [actionsDom, avatarDom, baseClassName, collapsed, hashId]);
 
-  const collapsedWidth = 60;
-
   /* Using the useMemo hook to create a CSS class that will hide the menu when the menu is collapsed. */
   const hideMenuWhenCollapsedClassName = useMemo(() => {
     // 收起时完全隐藏菜单
@@ -474,7 +475,6 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
                 colorActiveBarWidth: 0,
                 colorActiveBarHeight: 0,
                 colorActiveBarBorderSize: 0,
-                controlHeightLG: 35,
                 colorItemText: token?.layout?.sider?.colorTextMenu || 'rgba(0, 0, 0, 0.65)',
                 colorItemTextHover:
                   token?.layout?.sider?.colorTextMenuActive || 'rgba(0, 0, 0, 0.85)',
diff --git a/packages/layout/src/components/SiderMenu/style/index.ts b/packages/layout/src/components/SiderMenu/style/index.ts
index a6aae1e0a756..6815f3ffff54 100644
--- a/packages/layout/src/components/SiderMenu/style/index.ts
+++ b/packages/layout/src/components/SiderMenu/style/index.ts
@@ -46,6 +46,7 @@ const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
             paddingInline: token.layout?.sider?.paddingInlineLayoutMenu,
             paddingBlock: token.layout?.sider?.paddingBlockLayoutMenu,
             borderInlineEnd: `1px solid ${token.colorSplit}`,
+            marginInlineEnd: -1,
           },
           [`${token.antCls}-menu`]: {
             [`${token.antCls}-menu-item-group-title`]: {
diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
index df89037bb416..cee52983e16b 100644
--- a/packages/layout/src/components/SiderMenu/style/menu.ts
+++ b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -61,8 +61,8 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (token)
         '&-collapsed': {
           flexDirection: 'column',
           justifyContent: 'center',
-          width: 35,
-          height: 35,
+          minWidth: 40,
+          height: 40,
           [`${token.componentCls}-item-icon`]: {
             height: '16px',
             width: '16px',
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
index ec3ea63f9a84..f94bfdee1f17 100644
--- a/tests/form/__snapshots__/demo.test.ts.snap
+++ b/tests/form/__snapshots__/demo.test.ts.snap
@@ -45403,11 +45403,11 @@ exports[`form demos 📸 renders ./packages/form/src/demos/layout-footer.tsx cor
         style="min-height: 100%; flex-direction: row;"
       >
         <div
-          style="width: 60px; overflow: hidden; flex: 0 0 60px; max-width: 60px; min-width: 60px; transition: all 0.2s ease 0s;"
+          style="width: 64px; overflow: hidden; flex: 0 0 64px; max-width: 64px; min-width: 64px; transition: all 0.2s ease 0s;"
         />
         <aside
           class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-pro-sider ant-pro-sider-fixed ant-pro-sider-collapsed ant-pro-sider-layout-mix ant-pro-sider-light ant-pro-sider-mix"
-          style="flex: 0 0 60px; max-width: 60px; min-width: 60px; width: 60px;"
+          style="flex: 0 0 64px; max-width: 64px; min-width: 64px; width: 64px;"
         >
           <div
             class="ant-layout-sider-children"
diff --git a/tests/form/lightFilter.test.tsx b/tests/form/lightFilter.test.tsx
index 20a6c8eddcf3..2b7c5f54f4e0 100644
--- a/tests/form/lightFilter.test.tsx
+++ b/tests/form/lightFilter.test.tsx
@@ -380,7 +380,14 @@ describe('LightFilter', () => {
       userEvent.click(await screen.findByText('日期范围'));
     });
 
-    await screen.findAllByPlaceholderText('请选择');
+    await waitFor(
+      () => {
+        return screen.findAllByPlaceholderText('请选择');
+      },
+      {
+        timeout: 2000,
+      },
+    );
 
     act(() => {
       userEvent.click(screen.getAllByPlaceholderText('请选择')[0]!.parentElement!);
@@ -411,7 +418,7 @@ describe('LightFilter', () => {
         expect(onOpenChange).toBeCalledWith(false);
       },
       {
-        timeout: 1000,
+        timeout: 2000,
       },
     );
 
@@ -421,9 +428,14 @@ describe('LightFilter', () => {
       );
     });
 
-    await waitFor(() => {
-      expect(onLoadingChange).toBeCalledWith(true);
-    });
+    await waitFor(
+      () => {
+        expect(onLoadingChange).toBeCalledWith(true);
+      },
+      {
+        timeout: 1000,
+      },
+    );
 
     await waitFor(
       () => {
@@ -434,10 +446,13 @@ describe('LightFilter', () => {
       },
     );
 
-    await waitFor(() => {
-      expect(onLoadingChange).toBeCalledWith(false);
-    });
-
+    await waitFor(
+      () => {
+        expect(onLoadingChange).toBeCalledWith(false);
+      },
+      { timeout: 2000 },
+    );
+    // 等待20s，等待loading消失
     await waitFor(() => {
       expect(container.querySelector('.ant-pro-core-field-label')?.textContent).toBe(
         '日期范围: 2016-11-01 ~ 2016-11-11',
@@ -448,9 +463,14 @@ describe('LightFilter', () => {
       userEvent.click(container.querySelector('.ant-pro-core-field-label .anticon-close')!);
     });
 
-    await waitFor(() => {
-      expect(onLoadingChange).toBeCalledWith(true);
-    });
+    await waitFor(
+      () => {
+        expect(onLoadingChange).toBeCalledWith(true);
+      },
+      {
+        timeout: 1000,
+      },
+    );
 
     await waitFor(
       () => {
diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
index a4123bbe5437..960f564bf0d2 100644
--- a/tests/layout/__snapshots__/demo.test.ts.snap
+++ b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -6670,11 +6670,11 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/api.tsx correctly
         style="min-height: 100%; flex-direction: row; height: 100vh;"
       >
         <div
-          style="width: 60px; overflow: hidden; flex: 0 0 60px; max-width: 60px; min-width: 60px; transition: all 0.2s ease 0s;"
+          style="width: 64px; overflow: hidden; flex: 0 0 64px; max-width: 64px; min-width: 64px; transition: all 0.2s ease 0s;"
         />
         <aside
           class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-pro-sider ant-pro-sider-fixed ant-pro-sider-collapsed ant-pro-sider-layout-side ant-pro-sider-light"
-          style="flex: 0 0 60px; max-width: 60px; min-width: 60px; width: 60px;"
+          style="flex: 0 0 64px; max-width: 64px; min-width: 64px; width: 64px;"
         >
           <div
             class="ant-layout-sider-children"
@@ -9388,11 +9388,11 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/collapsedShowTitl
         style="min-height: 100%; flex-direction: row;"
       >
         <div
-          style="width: 60px; overflow: hidden; flex: 0 0 60px; max-width: 60px; min-width: 60px; transition: all 0.2s ease 0s;"
+          style="width: 64px; overflow: hidden; flex: 0 0 64px; max-width: 64px; min-width: 64px; transition: all 0.2s ease 0s;"
         />
         <aside
           class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-pro-sider ant-pro-sider-fixed ant-pro-sider-collapsed ant-pro-sider-layout-side ant-pro-sider-light"
-          style="flex: 0 0 60px; max-width: 60px; min-width: 60px; width: 60px;"
+          style="flex: 0 0 64px; max-width: 64px; min-width: 64px; width: 64px;"
         >
           <div
             class="ant-layout-sider-children"
@@ -15291,11 +15291,11 @@ exports[`layout demos 📸 renders ./packages/layout/src/demos/footer.tsx correc
         style="min-height: 100%; flex-direction: row; height: 100vh;"
       >
         <div
-          style="width: 60px; overflow: hidden; flex: 0 0 60px; max-width: 60px; min-width: 60px; transition: all 0.2s ease 0s;"
+          style="width: 64px; overflow: hidden; flex: 0 0 64px; max-width: 64px; min-width: 64px; transition: all 0.2s ease 0s;"
         />
         <aside
           class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-pro-sider ant-pro-sider-fixed ant-pro-sider-collapsed ant-pro-sider-layout-side ant-pro-sider-light"
-          style="flex: 0 0 60px; max-width: 60px; min-width: 60px; width: 60px;"
+          style="flex: 0 0 64px; max-width: 64px; min-width: 64px; width: 64px;"
         >
           <div
             class="ant-layout-sider-children"