feat(dropdown): add max-height prop of menu (#1436)

* feat(dropdown): add max-height prop of menu

* feat: delete demo

packages/dropdown/__tests__/dropdown.spec.tsx

@@ -313,6 +313,30 @@ describe('Dropdown', () => {
     })
     await sleep(TIMEOUT)
     expect(wrapper.findComponent({ ref: 'd' }).attributes('tabindex')).toBe('0')
+  })
 
+  test('max height', async () => {
+    const wrapper = _mount(
+      `
+      <el-dropdown ref="b" max-height="60px">
+        <span class="el-dropdown-link" ref="a">
+          dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>Apple</el-dropdown-item>
+            <el-dropdown-item>Orange</el-dropdown-item>
+            <el-dropdown-item>Cherry</el-dropdown-item>
+            <el-dropdown-item disabled>Peach</el-dropdown-item>
+            <el-dropdown-item divided>Pear</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      `,
+      () => ({}),
+    )
+    const content = wrapper.findComponent({ ref: 'b' })
+    const scrollbar = content.findComponent({ ref: 'scrollbar' })
+    expect(scrollbar.find('.el-scrollbar__wrap').attributes('style')).toContain('max-height: 60px;')
   })
 })

packages/dropdown/src/dropdown.vue

@@ -14,11 +14,18 @@
     :gpu-acceleration="false"
   >
     <template #default>
-      <slot name="dropdown"></slot>
+      <el-scrollbar
+        ref="scrollbar"
+        tag="ul"
+        :wrap-style="wrapStyle"
+        view-class="el-dropdown__list"
+      >
+        <slot name="dropdown"></slot>
+      </el-scrollbar>
     </template>
     <template #trigger>
       <div :class="['el-dropdown', dropdownSize ? 'el-dropdown--' + dropdownSize : '']">
-        <slot v-if="!splitButton" name="default"> </slot>
+        <slot v-if="!splitButton" name="default"></slot>
         <template v-else>
           <el-button-group>
             <el-button
@@ -55,14 +62,17 @@ import {
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
 import ElButton from '@element-plus/button'
 import ElButtonGroup from '@element-plus/button-group'
+import ElScrollbar from '@element-plus/scrollbar'
 import ElPopper from '@element-plus/popper'
 import { useDropdown } from './useDropdown'
+import { addUnit } from '@element-plus/utils/util'
 
 export default defineComponent({
   name: 'ElDropdown',
   components: {
     ElButton,
     ElButtonGroup,
+    ElScrollbar,
     ElPopper,
   },
   props: {
@@ -100,6 +110,10 @@ export default defineComponent({
       type: String,
       default: 'light',
     },
+    maxHeight: {
+      type: [Number, String],
+      default: '',
+    },
   },
   emits: ['visible-change', 'click', 'command'],
   setup(props, { emit }) {
@@ -109,6 +123,9 @@ export default defineComponent({
     const timeout = ref<Nullable<number>>(null)
 
     const visible = ref(false)
+    const scrollbar = ref(null)
+    const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)
+
     watch(
       () => visible.value,
       val => {
@@ -187,11 +204,13 @@ export default defineComponent({
     function triggerElmFocus() {
       triggerElm.value?.focus?.()
     }
+
     function triggerElmBlur() {
       triggerElm.value?.blur?.()
     }
 
     const dropdownSize = computed(() => props.size || ELEMENT.size)
+
     function commandHandler(...args) {
       emit('command', ...args)
     }
@@ -247,6 +266,8 @@ export default defineComponent({
 
     return {
       visible,
+      scrollbar,
+      wrapStyle,
       dropdownSize,
       handlerMainButtonClick,
       triggerVnode,

packages/theme-chalk/src/common/var.scss

@@ -741,6 +741,7 @@ $--tree-expand-icon-color: $--color-text-placeholder !default;
 $--dropdown-menu-box-shadow: $--box-shadow-light !default;
 $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
 $--dropdown-menuItem-hover-color: $--link-color !default;
+$--dropdown-menu-index: 10 !default;
 
 /* Badge
 -------------------------- */

packages/theme-chalk/src/dropdown.scss

@@ -13,9 +13,9 @@
     // using attributes selector to override
 
     @include picker-popper(
-      $--color-white,
+        $--color-white,
-      1px solid $--border-color-light,
+        1px solid $--border-color-light,
-      $--dropdown-menu-box-shadow,
+        $--dropdown-menu-box-shadow,
     );
 
     .#{$namespace}-dropdown-menu {
@@ -25,10 +25,22 @@
     #{& + '-selfdefine'} {
       outline: none;
     }
+
+    @include b(scrollbar__bar) {
+      z-index: #{$--dropdown-menu-index + 1};
+    }
+
+    @include b(dropdown__list) {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
   }
 
   .#{$namespace}-button-group {
     display: block;
+
     .#{$namespace}-button {
       float: none;
     }
@@ -82,7 +94,7 @@
   position: relative;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: $--dropdown-menu-index;
   padding: 10px 0;
   margin: 0;
   background-color: $--color-white;

website/docs/en-US/dropdown.md

@@ -306,12 +306,12 @@ Besides default size, Dropdown component provides three additional sizes for you
 ```
 :::
 
-
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |
 | size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |
+| max-height    | the max height of menu  | string / number  |     —    |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
 | placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | how to trigger     | string  |    hover/click/contextmenu  |  hover |

website/docs/es/dropdown.md

@@ -307,12 +307,12 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 ```
 :::
 
-
 ### Dropdown atributos
 | Atributo      | Descripción                              | Tipo    | Valores aceptados                        | Por defecto |
 | ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
 | type          | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string  | —                                        | —           |
 | size          | tamaño del menú, también funciona en `split-button` | string  | medium / small / mini                    | —           |
+| max-height    | the max height of menu  | string / number  |     —    |    —     |
 | split-button  | si se visualiza un grupo de botones      | boolean | —                                        | false       |
 | placement     | colocación del menú                      | string  | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end  |
 | trigger       | cómo detonar                             | string  | hover/click/contextmenu                              | hover       |

website/docs/fr-FR/dropdown.md

@@ -306,13 +306,13 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
 ```
 :::
 
-
 ### Attributs du Dropdown
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`.  | string  |  —   |    —     |
 | size          | Taille du menu, marche aussi avec `split button`.  | string  | medium / small / mini  |    —     |
+| max-height    | the max height of menu  | string / number  |     —    |    —     |
 | split-button | Si le bouton est séparé en deux. | boolean         |     —       | false   |
 | placement    | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | Comment déclencher l'ouverture du menu.     | string  |    hover/click/contextmenu  |  hover |

website/docs/jp/dropdown.md

@@ -305,12 +305,12 @@ dropdownリストを起動するには、ボタンを使用します。
 ```
 :::
 
-
 ### dropdown属性
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | `split-button` が `true`のとき、メニューボタンのタイプは `Button` コンポーネントを参照する。  | string  |  —   |    —     |
 | size          | メニューのサイズ(分割ボタンでも動作)  | string  | medium / small / mini  |    —     |
+| max-height    | the max height of menu  | string / number  |     —    |    —     |
 | split-button | ボタングループの表示の有無 | boolean         |     —       | false   |
 | placement    | ポップメニューの配置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | トリガーのきっかけ     | string  |    hover/click/contextmenu  |  hover |

website/docs/zh-CN/dropdown.md

@@ -315,6 +315,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
 | size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
+| max-height    | 菜单最大高度  | string / number |           —      | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | 触发下拉的行为     | string          | hover, click, contextmenu  | hover |