From 56fb18e9d13b0e9c785015a569443810f04b1d77 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 6 Oct 2021 13:16:56 +0800
Subject: [PATCH] feat(menu): item-height theme variable

---
 src/menu/src/Menu.tsx             |  6 ++++--
 src/menu/src/styles/index.cssr.ts | 19 ++++++++++---------
 src/menu/styles/light.ts          |  1 +
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx
index 1e733faad..550678956 100644
--- a/src/menu/src/Menu.tsx
+++ b/src/menu/src/Menu.tsx
@@ -292,12 +292,14 @@ export default defineComponent({
           common: { cubicBezierEaseInOut },
           self
         } = themeRef.value
-        const { borderRadius, borderColorHorizontal, fontSize } = self
+        const { borderRadius, borderColorHorizontal, fontSize, itemHeight } =
+          self
         const vars: any = {
           '--bezier': cubicBezierEaseInOut,
           '--font-size': fontSize,
           '--border-color-horizontal': borderColorHorizontal,
-          '--border-radius': borderRadius
+          '--border-radius': borderRadius,
+          '--item-height': itemHeight
         }
         if (inverted) {
           vars['--group-text-color'] = self.groupTextColorInverted
diff --git a/src/menu/src/styles/index.cssr.ts b/src/menu/src/styles/index.cssr.ts
index 0d0e337d5..b7e512597 100644
--- a/src/menu/src/styles/index.cssr.ts
+++ b/src/menu/src/styles/index.cssr.ts
@@ -24,6 +24,7 @@ import fadeInHeightExpandTransition from '../../../_styles/transitions/fade-in-h
 // --item-icon-color-active
 // --item-icon-color-collapsed
 // --item-icon-color-child-active
+// --item-height
 export default c([
   cB('menu', `
     background-color: var(--color);
@@ -91,12 +92,12 @@ export default c([
         })
       ])
     ]),
-    cB('menu-item', {
-      transition: 'background-color .3s var(--bezier)',
-      height: '42px',
-      marginTop: '6px',
-      position: 'relative'
-    }, [
+    cB('menu-item', `
+      transition: background-color .3s var(--bezier);
+      height: var(--item-height);
+      margin-top: 6px;
+      position: relative;
+    `, [
       c('&::before', `
         z-index: auto;
         content: "";
@@ -253,9 +254,9 @@ export default c([
       position: 'relative',
       marginTop: '6px'
     }, [
-      cB('menu-item-content', {
-        height: '42px'
-      }),
+      cB('menu-item-content', `
+        height: var(--item-height);
+      `),
       cB('submenu-children', {
         overflow: 'hidden',
         padding: 0
diff --git a/src/menu/styles/light.ts b/src/menu/styles/light.ts
index 54f810f2a..8b780846d 100644
--- a/src/menu/styles/light.ts
+++ b/src/menu/styles/light.ts
@@ -52,6 +52,7 @@ export const self = (vars: ThemeCommonVars) => {
     itemIconColorActive: primaryColor,
     itemIconColorChildActive: primaryColor,
     itemIconColorCollapsed: textColor1,
+    itemHeight: '42px',
     arrowColor: primaryColor,
     arrowColorHover: primaryColorHover,
     arrowColorChildActive: primaryColor,