Merge pull request #2577 from XiaoMi/feature/menu(add-size-api)

feat(menu): 增加 size API
XiaoMi · Sep 1, 2023 · 959bb14 · 959bb14
2 parents ddd2acf + 2f09456
commit 959bb14
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 22 deletions.
diff --git a/.changeset/cool-tables-check.md b/.changeset/cool-tables-check.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Menu feat: 增加 size API
diff --git a/.changeset/green-peas-deny.md b/.changeset/green-peas-deny.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Menu feat: 增加 render 和 extraHeader API
diff --git a/.changeset/tasty-pets-care.md b/.changeset/tasty-pets-care.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/menu": minor
+---
+
+feat: 增加 size API
diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx
@@ -9,19 +9,19 @@ import React, {
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@hi-ui/icons'
 import { __DEV__ } from '@hi-ui/env'
-import { MenuItem } from './MenuItem'
-import MenuContext from './context'
-import { getAncestorIds } from './util'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
-import { HiBaseHTMLProps } from '@hi-ui/core'
-import { MenuDataItem, MenuFooterRenderProps } from './types'
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core'
 import Tooltip from '@hi-ui/tooltip'
 import { useUncontrolledToggle } from '@hi-ui/use-toggle'
 import { getTreeNodesWithChildren } from '@hi-ui/tree-utils'
 import { isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion'
 import { useResizeObserver } from '@hi-ui/use-resize-observer'
 import { useMergeRefs } from '@hi-ui/use-merge-refs'
 import { uuid } from '@hi-ui/use-id'
+import { MenuDataItem, MenuFooterRenderProps } from './types'
+import { MenuItem } from './MenuItem'
+import MenuContext from './context'
+import { getAncestorIds } from './util'
 
 const MENU_PREFIX = getPrefixCls('menu')
 
@@ -61,6 +61,7 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
       render,
       extraHeader,
       onClick,
+      size = 'lg',
       ...rest
     },
     ref
@@ -230,6 +231,7 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
       prefixCls,
       className,
       `${prefixCls}--${placement}`,
+      `${prefixCls}--size-${size}`,
       mini && `${prefixCls}--mini`,
       (expandedType === 'pop' || showAllSubMenus || mini) && `${prefixCls}--popup`
     )
@@ -258,7 +260,13 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
             {mergedTagList.map((item, index) => {
               return showMini ? (
                 <Tooltip title={item.title} key={item.id} placement="right">
-                  <MenuItem {...item} level={1} render={renderMenuItemMini} raw={item} />
+                  <MenuItem
+                    {...item}
+                    level={1}
+                    render={renderMenuItemMini}
+                    raw={item}
+                    size={size}
+                  />
                 </Tooltip>
               ) : (
                 <MenuItem
@@ -268,6 +276,7 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
                   key={item.id}
                   level={1}
                   raw={item}
+                  size={size}
                 />
               )
             })}
@@ -368,6 +377,10 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
    * 额外的头部内容
    */
   extraHeader?: React.ReactNode
+  /**
+   * 设置菜单项的尺寸
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

diff --git a/packages/ui/menu/src/MenuItem.tsx b/packages/ui/menu/src/MenuItem.tsx
@@ -2,14 +2,14 @@ import React, { useRef, useContext, forwardRef } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { DownOutlined, UpOutlined, RightOutlined } from '@hi-ui/icons'
-import MenuContext from './context'
 import Popper from '@hi-ui/popper'
-import { Expander } from './Expander'
 import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion'
 import { times } from '@hi-ui/array-utils'
 import { useMergeRefs } from '@hi-ui/use-merge-refs'
-import { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core'
 import { MenuDataItem } from './types'
+import MenuContext from './context'
+import { Expander } from './Expander'
 
 const MENU_PREFIX = getPrefixCls('menu')
 
@@ -35,6 +35,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
       hidden = false,
       render,
       raw,
+      size = 'lg',
       ...rest
     },
     ref
@@ -165,6 +166,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -191,7 +193,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => {
                   return (
                     <MenuItem
@@ -201,6 +203,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                       parentIds={_parentIds}
                       raw={child}
                       render={render}
+                      size={size}
                     />
                   )
                 })}
@@ -220,7 +223,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => (
                   <MenuItem
                     {...child}
@@ -229,6 +232,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -252,7 +256,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => (
                   <MenuItem
                     {...child}
@@ -261,6 +265,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -279,7 +284,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => (
                   <MenuItem
                     {...child}
@@ -288,6 +293,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -357,7 +363,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => (
                   <MenuItem
                     {...child}
@@ -366,6 +372,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -384,7 +391,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                 }
               }}
             >
-              <ul className={`${prefixCls}-popmenu`}>
+              <ul className={`${prefixCls}-popmenu ${prefixCls}--size-${size}`}>
                 {children!.map((child) => (
                   <MenuItem
                     {...child}
@@ -393,6 +400,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                     parentIds={_parentIds}
                     raw={child}
                     render={render}
+                    size={size}
                   />
                 ))}
               </ul>
@@ -460,6 +468,7 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
   parentIds?: React.ReactText[]
   render?: (node: MenuDataItem) => React.ReactNode
   raw?: MenuDataItem
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

diff --git a/packages/ui/menu/src/styles/menu.scss b/packages/ui/menu/src/styles/menu.scss
@@ -127,7 +127,7 @@ $prefix: '#{$component-prefix}-menu' !default;
       color: use-color('gray', 500);
       margin-inline-end: use-spacing(4);
 
-      svg[class^=hi-v4-icon] {
+      svg[class^='hi-v4-icon'] {
         font-size: use-text-size('lg');
       }
     }
@@ -274,18 +274,12 @@ $prefix: '#{$component-prefix}-menu' !default;
     .#{$prefix}-item {
       &__inner {
         box-sizing: border-box;
-        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');
         transition: all 0.3s;
 
-        // &--mini {
-        //   justify-content: center;
-        // }
-
         &--active {
           color: use-color-mode('primary');
           background-color: use-color-mode('primary', 50);
@@ -317,4 +311,31 @@ $prefix: '#{$component-prefix}-menu' !default;
       }
     }
   }
+
+  &--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);
+      }
+    }
+  }
+
+  &--size-sm {
+    .#{$prefix}-item {
+      &__inner {
+        height: use-height-size(8);
+        margin-bottom: use-spacing(1);
+      }
+    }
+  }
 }
diff --git a/packages/ui/menu/stories/index.stories.tsx b/packages/ui/menu/stories/index.stories.tsx
@@ -10,6 +10,7 @@ export * from './vertical-fat.stories'
 export * from './expand-all.stories'
 export * from './footer-render.stories'
 export * from './render.stories'
+export * from './size.stories'
 
 export default {
   title: 'Navigation/Menu',