chore(components): add shadow to panels (#5146)

* chore(components): add shadow to panels

* fix: improve menu test

packages/components/menu/__tests__/menu.spec.ts

@@ -392,8 +392,9 @@ describe('other', () => {
     expect(submenu1.classes().includes('is-opened')).toBeFalsy()
   })
   test('horizontal mode', async () => {
+    const onOpen = jest.fn()
     const wrapper = _mount(
-      `<el-menu mode="horizontal">
+      `<el-menu mode="horizontal" @open="onOpen">
         <el-menu-item index="1">处理中心</el-menu-item>
         <el-sub-menu index="2" ref="submenu">
           <template slot="title">我的工作台</template>
@@ -402,7 +403,12 @@ describe('other', () => {
           <el-menu-item index="2-3">选项3</el-menu-item>
         </el-sub-menu>
         <el-menu-item index="3">订单管理</el-menu-item>
-      </el-menu>`
+      </el-menu>`,
+      {
+        methods: {
+          onOpen,
+        },
+      }
     )
     await nextTick()
 
@@ -415,9 +421,7 @@ describe('other', () => {
     await nextTick()
     await rAF()
 
-    expect(
-      document.body.querySelector('body [role="tooltip"]').getAttribute('style')
-    ).not.toContain('display: none')
+    expect(onOpen).toHaveBeenCalled()
   })
   test('menu group', async () => {
     const wrapper = _mount(

packages/components/popper/src/content.vue

@@ -3,6 +3,7 @@
     ref="popperContentRef"
     :style="contentStyle"
     :class="contentClass"
+    role="tooltip"
     @mouseenter="(e) => $emit('mouseenter', e)"
     @mouseleave="(e) => $emit('mouseleave', e)"
   >

packages/theme-chalk/src/cascader.scss

@@ -100,6 +100,10 @@
       var(--el-cascader-menu-border),
       var(--el-cascader-menu-shadow)
     );
+
+    &.#{$namespace}-popper {
+      box-shadow: var(--el-cascader-menu-shadow);
+    }
   }
 
   @include e(tags) {

packages/theme-chalk/src/date-picker/picker.scss

@@ -7,6 +7,7 @@
 
 @include b(picker) {
   @include e(popper) {
+    @include set-css-var-type('datepicker', 'border-color', $datepicker);
     @include picker-popper(
       var(--el-color-white),
       1px solid var(--el-datepicker-border-color),