Dropdown: add chalk theme (#7089)

* Dropdown: add chalk theme

* Dropdown: update doc

* Update dropdown.md

examples/docs/en-US/dropdown.md

@@ -199,12 +199,61 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```
 :::
 
+### Sizes
+
+Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-dropdown  split-button type="primary">
+  Default
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  Medium
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  Small
+  <el-dropdown-menu slot="dropdown">
+   <el-dropdown-item>Action 1</el-dropdown-item>
+   <el-dropdown-item>Action 2</el-dropdown-item>
+   <el-dropdown-item>Action 3</el-dropdown-item>
+   <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  Mini
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
 
 ### 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 button size, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
+| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |
+| size          | menu size, refer to `Button` Component, also works on the Split-button  | string  | large / small / mini  |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
 | size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
 | placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |

examples/docs/zh-CN/dropdown.md

@@ -201,11 +201,64 @@
 ```
 :::
 
+### 不同尺寸
+
+Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-dropdown  split-button type="primary">
+  默认尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  中等尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  小型尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  超小尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
 ### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
-| size          | 菜单按钮尺寸，同 Button 组件(只在`split-button`为 true 的情况下有效)     | string          | — | — |
+| size          | 菜单尺寸，同 Button 组件，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |

packages/dropdown/src/dropdown-menu.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="el-zoom-in-top" @after-leave="doDestroy">
-    <ul class="el-dropdown-menu" v-show="showPopper">
+    <ul class="el-dropdown-menu el-popper" :class="[size && `el-dropdown-menu--${size}`]" v-show="showPopper">
       <slot></slot>
     </ul>
   </transition>
@@ -17,7 +17,8 @@
 
     data() {
       return {
-        placement: this.dropdown.placement
+        visibleArrow: this.dropdown.visibleArrow,
+        size: this.dropdown.size
       };
     },
 

packages/dropdown/src/dropdown.vue

@@ -30,7 +30,10 @@
         default: 'hover'
       },
       type: String,
-      size: String,
+      size: {
+        type: String,
+        default: ''
+      },
       splitButton: Boolean,
       hideOnClick: {
         type: Boolean,
@@ -39,6 +42,9 @@
       placement: {
         type: String,
         default: 'bottom-end'
+      },
+      visibleArrow: {
+        default: true
       }
     },
 
@@ -112,6 +118,7 @@
 
       var handleMainButtonClick = (event) => {
         this.$emit('click', event);
+        hide();
       };
 
       let triggerElm = !splitButton

packages/popover/src/main.vue

@@ -2,7 +2,7 @@
   <span>
     <transition :name="transition" @after-leave="doDestroy">
       <div
-        class="el-popover"
+        class="el-popover el-popper"
         :class="[popperClass, content && 'el-popover--plain']"
         ref="popper"
         v-show="!disabled && showPopper"

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

@@ -546,7 +546,7 @@ $--tree-expand-icon-color: $--color-text-placeholder;
 /* Dropdown
 -------------------------- */
 $--dropdown-menu-box-shadow: $--box-shadow-light;
-$--dropdown-menuItem-hover-fill: $--color-text-secondary;
+$--dropdown-menuItem-hover-fill: $--color-primary-light-9;
 $--dropdown-menuItem-hover-color: $--link-color;
 
 /* Badge

packages/theme-chalk/src/dropdown.scss

@@ -5,7 +5,7 @@
 @include b(dropdown) {
   display: inline-block;
   position: relative;
-  color: $--color-black;
+  color: $--color-text-regular;
   font-size: $--font-size-base;
 
   .el-button-group {
@@ -28,46 +28,112 @@
     margin: 0 3px;
   }
 }
+
 @include b(dropdown-menu) {
-  margin: 5px 0;
-  background-color: $--color-white;
-  border: 1px solid $--color-black;
-  box-shadow: $--dropdown-menu-box-shadow;
-  padding: 6px 0;
-  z-index: 10;
   position: absolute;
   top: 0;
   left: 0;
-  min-width: 100px;
+  z-index: 10;
+  padding: 10px 0;
+  margin: 5px 0;
+  background-color: $--color-white;
+  border: 1px solid $--border-color-lighter;
+  box-shadow: $--dropdown-menu-box-shadow;
 
   @include e(item) {
     list-style: none;
     line-height: 36px;
-    padding: 0 10px;
+    padding: 0 20px;
     margin: 0;
+    font-size: $--font-size-base;
+    color: $--font-color-base;
     cursor: pointer;
 
     &:not(.is-disabled):hover {
       background-color: $--dropdown-menuItem-hover-fill;
       color: $--dropdown-menuItem-hover-color;
     }
+
     @include m(divided) {
+      $divided-offset: 6px;
+
       position: relative;
-      margin-top: 6px;
-      border-top: 1px solid $--color-black;
+      margin-top: $divided-offset;
+      border-top: 1px solid $--border-color-lighter;
 
       &:before {
         content: '';
-        height: 6px;
+        height: $divided-offset;
         display: block;
-        margin: 0 -10px;
+        margin: 0 -20px;
         background-color: $--color-white;
       }
     }
+
     @include when(disabled) {
       cursor: default;
-      color: $--color-black;
+      color: $--font-color-disabled-base;
       pointer-events: none;
     }
   }
+
+  @include m(medium) {
+    padding: 6px 0;
+
+    @include e(item) {
+      line-height: 30px;
+      padding: 0 17px;
+      font-size: 14px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 6px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -17px;
+        }
+      }
+    }
+  }
+
+  @include m(small) {
+    padding: 6px 0;
+
+    @include e(item) {
+      line-height: 27px;
+      padding: 0 15px;
+      font-size: 13px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 4px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -15px;
+        }
+      }
+    }
+  }
+
+  @include m(mini) {
+    padding: 3px 0;
+
+    @include e(item) {
+      line-height: 24px;
+      padding: 0 10px;
+      font-size: 12px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 3px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -10px;
+        }
+      }
+    }
+  }
 }

packages/theme-chalk/src/popover.scss

@@ -20,6 +20,15 @@
     padding: $--popover-padding-large;
   }
 
+  @include e(title) {
+    color: $--popover-title-color;
+    font-size: $--popover-title-font-size;
+    line-height: 1;
+    margin-bottom: 15px;
+  }
+}
+
+@include b(popper) {
   .popper__arrow,
   .popper__arrow::after {
     position: absolute;
@@ -116,11 +125,4 @@
       border-left-color: $--popover-fill;
     }
   }
-
-  @include e(title) {
-    color: $--popover-title-color;
-    font-size: $--popover-title-font-size;
-    line-height: 1;
-    margin-bottom: 15px;
-  }
-}
+}