fix(layout): fix sider menu height

ant-design · Mar 12, 2023 · e8963cc · yee94 · Jun 26, 2023 · e8963cc
1 parent 5e956bd
commit e8963cc
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"