fix(menu): 修复样式问题,去掉最后一个菜单下边距 (#2675)

XiaoMi · Nov 23, 2023 · 7f8cfcc · 7f8cfcc
1 parent c715705
commit 7f8cfcc
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 39 deletions.
diff --git a/.changeset/popular-rockets-cover.md b/.changeset/popular-rockets-cover.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/menu": patch
+---
+
+fix: 修复样式问题,去掉最后一个菜单下边距
diff --git a/.changeset/spotty-rings-tease.md b/.changeset/spotty-rings-tease.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(menu): 修复样式问题,去掉最后一个菜单下边距
diff --git a/packages/ui/menu/src/styles/menu.scss b/packages/ui/menu/src/styles/menu.scss
@@ -82,7 +82,6 @@ $disabled-color: use-color('gray', 400) !default;
       height: 40px;
       display: flex;
       align-items: center;
-      margin-bottom: use-spacing(4);
       padding: 0 use-spacing(4) 0 use-spacing(6);
       border-radius: use-border-radius('normal');
 
@@ -267,6 +266,14 @@ $disabled-color: use-color('gray', 400) !default;
     .#{$prefix}__wrapper {
       flex: 1;
       overflow: auto;
+
+      > .#{$prefix}-item {
+        &:last-child {
+          .#{$prefix}-item__inner {
+            margin-bottom: 0;
+          }
+        }
+      }
     }
 
     &.#{$prefix}--mini {
@@ -283,14 +290,15 @@ $disabled-color: use-color('gray', 400) !default;
     }
 
     .#{$prefix}__toggle {
-      width: 40px;
+      width: use-height-size(10);
+      height: use-height-size(10);
+      margin-top: use-spacing(4);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: use-border-radius('normal');
       color: use-color('gray', 500);
-      height: 40px;
       flex-shrink: 0;
 
       // @animation
@@ -346,31 +354,31 @@ $disabled-color: use-color('gray', 400) !default;
         @include menu-item-disabled;
       }
     }
-  }
 
-  &--size-lg {
-    .#{$prefix}-item {
-      &__inner {
-        height: use-height-size(10);
-        margin-bottom: use-spacing(4);
+    &.#{$prefix}--size-lg {
+      .#{$prefix}-item {
+        &__inner {
+          height: use-height-size(10);
+          margin-bottom: use-spacing(4);
+        }
       }
     }
-  }
 
-  &--size-md {
-    .#{$prefix}-item {
-      &__inner {
-        height: use-height-size(9);
-        margin-bottom: use-spacing(2);
+    &.#{$prefix}--size-md {
+      .#{$prefix}-item {
+        &__inner {
+          height: use-height-size(9);
+          margin-bottom: use-spacing(2);
+        }
       }
     }
-  }
 
-  &--size-sm {
-    .#{$prefix}-item {
-      &__inner {
-        height: use-height-size(8);
-        margin-bottom: use-spacing(1);
+    &.#{$prefix}--size-sm {
+      .#{$prefix}-item {
+        &__inner {
+          height: use-height-size(8);
+          margin-bottom: use-spacing(1);
+        }
       }
     }
   }

diff --git a/packages/ui/menu/stories/expand-all.stories.tsx b/packages/ui/menu/stories/expand-all.stories.tsx
@@ -39,7 +39,6 @@ export const DefaultExpandAll = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -53,7 +52,6 @@ export const DefaultExpandAll = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
 
                   children: [

diff --git a/packages/ui/menu/stories/fat.stories.tsx b/packages/ui/menu/stories/fat.stories.tsx
@@ -41,7 +41,6 @@ export const HorizontalFat = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -71,7 +70,6 @@ export const HorizontalFat = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {

diff --git a/packages/ui/menu/stories/footer-render.stories.tsx b/packages/ui/menu/stories/footer-render.stories.tsx
@@ -26,7 +26,7 @@ export const FooterRender = () => {
                 }}
               >
                 {collapseNode}
-                {collapsed ? null : <div style={{ paddingRight: 10 }}>我是谁</div>}
+                {collapsed ? null : <div style={{ margin: '8px 8px 0 0' }}>我是谁</div>}
               </div>
             )
           }}
@@ -52,7 +52,6 @@ export const FooterRender = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -66,7 +65,6 @@ export const FooterRender = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {

diff --git a/packages/ui/menu/stories/horizontal.stories.tsx b/packages/ui/menu/stories/horizontal.stories.tsx
@@ -53,7 +53,6 @@ export const Horizontal = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -84,7 +83,6 @@ export const Horizontal = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
 
                   children: [

diff --git a/packages/ui/menu/stories/mini.stories.tsx b/packages/ui/menu/stories/mini.stories.tsx
@@ -35,7 +35,6 @@ export const Mini = () => {
             {
               title: '小米8',
               id: 'xiaomi8',
-              disabled: true,
             },
             {
               title: '小米7',
@@ -65,7 +64,6 @@ export const Mini = () => {
         },
         {
           title: '小米note',
-          disabled: true,
           id: 'xiaominote',
 
           children: [

diff --git a/packages/ui/menu/stories/pop.stories.tsx b/packages/ui/menu/stories/pop.stories.tsx
@@ -37,7 +37,6 @@ export const Pop = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -67,7 +66,6 @@ export const Pop = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {

diff --git a/packages/ui/menu/stories/size.stories.tsx b/packages/ui/menu/stories/size.stories.tsx
@@ -44,7 +44,6 @@ export const Size = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {
@@ -108,7 +107,6 @@ export const Size = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {
@@ -172,7 +170,6 @@ export const Size = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {

diff --git a/packages/ui/menu/stories/vertical-fat.stories.tsx b/packages/ui/menu/stories/vertical-fat.stories.tsx
@@ -41,7 +41,6 @@ export const VerticalFat = () => {
                     {
                       title: '小米8',
                       id: 'xiaomi8',
-                      disabled: true,
                     },
                     {
                       title: '小米7',
@@ -71,7 +70,6 @@ export const VerticalFat = () => {
                 },
                 {
                   title: '小米note',
-                  disabled: true,
                   id: 'xiaominote',
                   children: [
                     {