feat(components): [el-dropdown] add new "popper-class" prop (#4909)

Co-authored-by: João Gonçalves <joaogoncalves@pixelmatters.com>

docs/en-US/component/dropdown.md

@@ -19,10 +19,10 @@ Toggleable menu for displaying lists of links and actions.
     cursor: pointer;
     color: var(--el-color-primary);
   }
-.el-icon--right {
-  font-size: 12px;
-  vertical-align: middle;
-}
+  .el-icon--right {
+    font-size: 12px;
+    vertical-align: middle;
+  }
 }
 
 .block-col-2 {
@@ -122,6 +122,7 @@ dropdown/sizes
 | show-timeout  | Delay time before show a dropdown (only works when trigger is `hover`)                               | number          | —                                                    | 250     |
 | hide-timeout  | Delay time before hide a dropdown (only works when trigger is `hover`)                               | number          | —                                                    | 150     |
 | tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number          | —                                                    | 0       |
+| popper-class  | custom class name for Dropdown's dropdown                                                            | string          | —                                                    | —       |
 
 ## Dropdown Slots
 

packages/components/dropdown/__tests__/dropdown.spec.ts

@@ -364,4 +364,31 @@ describe('Dropdown', () => {
     await sleep(TIMEOUT)
     expect(content.visible).toBe(true)
   })
+
+  test('popperClass', async () => {
+    const wrapper = await _mount(
+      `
+      <el-dropdown ref="b" max-height="60px" popper-class="custom-popper-class">
+        <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' }) as any
+    const popperId = content?.componentVM?.triggerVnode?.popperId
+    const popperElement = document.getElementById(popperId)
+
+    expect(popperElement.classList.contains('custom-popper-class')).toBe(true)
+  })
 })

packages/components/dropdown/src/dropdown.vue

@@ -9,7 +9,7 @@
       pure
       :manual-mode="true"
       :trigger="[trigger]"
-      popper-class="el-dropdown__popper"
+      :popper-class="`el-dropdown__popper ${popperClass}`"
       append-to-body
       transition="el-zoom-in-top"
       :stop-popper-mouse-event="false"
@@ -127,6 +127,10 @@ export default defineComponent({
       type: [Number, String],
       default: '',
     },
+    popperClass: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['visible-change', 'click', 'command'],
   setup(props, { emit }) {