fix: fix dropdown/select/picker popper position error when has line-height (#1349)

* fix(dropdown): fix dropdown popper position error when has line-height

* fix(date-picker): fix picker popper position error when has line-height

- xxx-picker

* fix(select): fix select popper position error when has line-height

* refactor(button): adjust height to meet standards

packages/dropdown/src/dropdown.vue

@@ -17,7 +17,7 @@
       <slot name="dropdown"></slot>
     </template>
     <template #trigger>
-      <div class="el-dropdown">
+      <div :class="['el-dropdown', dropdownSize ? 'el-dropdown--' + dropdownSize : '']">
         <slot v-if="!splitButton" name="default"> </slot>
         <template v-else>
           <el-button-group>

packages/theme-chalk/src/button.scss

@@ -7,6 +7,7 @@
 @include b(button) {
   display: inline-block;
   line-height: 1;
+  height: 40px;
   white-space: nowrap;
   cursor: pointer;
   background: $--button-default-background-color;
@@ -137,18 +138,24 @@
     @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
   }
   @include m(medium) {
+    height: $--input-medium-height;
+
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
     @include when(circle) {
       padding: $--button-medium-padding-vertical;
     }
   }
   @include m(small) {
+    height: $--input-small-height;
+
     @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
     @include when(circle) {
       padding: $--button-small-padding-vertical;
     }
   }
   @include m(mini) {
+    height: $--input-mini-height;
+
     @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
     @include when(circle) {
       padding: $--button-mini-padding-vertical;
@@ -234,7 +241,7 @@
       z-index: 1;
     }
   }
-  
+
   & > .el-dropdown {
     & > .el-button {
       border-top-left-radius: 0;

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

@@ -122,6 +122,8 @@
   }
 
   @include m(medium) {
+    line-height: $--input-medium-height;
+
     &.el-input__inner {
       height: $--input-medium-height;
     }
@@ -142,6 +144,8 @@
   }
 
   @include m(small) {
+    line-height: $--input-small-height;
+
     &.el-input__inner {
       height: $--input-small-height;
     }
@@ -162,6 +166,8 @@
   }
 
   @include m(mini) {
+    line-height: $--input-mini-height;
+
     &.el-input__inner {
       height: $--input-mini-height;
     }

packages/theme-chalk/src/dropdown.scss

@@ -7,6 +7,19 @@
   position: relative;
   color: $--color-text-regular;
   font-size: $--font-size-base;
+  line-height: 40px;
+
+  @include m(mini) {
+    line-height: $--input-mini-height;
+  }
+
+  @include m(small) {
+    line-height: $--input-small-height;
+  }
+
+  @include m(medium) {
+    line-height: $--input-medium-height;
+  }
 
   @include e(popper) {
     // using attributes selector to override

packages/theme-chalk/src/input.scss

@@ -76,6 +76,7 @@
   font-size: $--font-size-base;
   display: inline-block;
   width: 100%;
+  line-height: 40px;
   @include scroll-bar;
 
   & .el-input__clear {
@@ -230,10 +231,10 @@
 
   @include m(medium) {
     font-size: $--input-medium-font-size;
+    line-height: $--input-medium-height;
 
     @include e(inner) {
       height: $--input-medium-height;
-      line-height: $--input-medium-height;
     }
 
     .el-input__icon {
@@ -242,10 +243,10 @@
   }
   @include m(small) {
     font-size: $--input-small-font-size;
+    line-height: $--input-small-height;
 
     @include e(inner) {
       height: $--input-small-height;
-      line-height: $--input-small-height;
     }
 
     .el-input__icon {
@@ -254,10 +255,10 @@
   }
   @include m(mini) {
     font-size: $--input-mini-font-size;
+    line-height: $--input-mini-height;
 
     @include e(inner) {
       height: $--input-mini-height;
-      line-height: $--input-mini-height;
     }
 
     .el-input__icon {

packages/theme-chalk/src/select.scss

@@ -11,6 +11,7 @@
 @include b(select) {
   display: inline-block;
   position: relative;
+  line-height: 40px;
 
   @include e(popper) {
     @include picker-popper(
@@ -20,6 +21,18 @@
     );
   }
 
+  @include m(mini) {
+    line-height: $--input-mini-height;
+  }
+
+  @include m(small) {
+    line-height: $--input-small-height;
+  }
+
+  @include m(medium) {
+    line-height: $--input-medium-height;
+  }
+
   .el-select__tags > span {
     display: inline-block;
   }