fix(components): input-number/input/dropdown/select/badge details (#4866)

docs/en-US/component/button.md

@@ -121,26 +121,3 @@ button/custom
 | Name | Description                    | Subtags |
 | ---- | ------------------------------ | ------- |
 | -    | customize button group content | Button  |
-
-<style lang="scss">
-.example-showcase {
-  .el-row {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  .el-button + .el-button {
-    margin-left: 10px;
-  }
-  .el-button-group {
-    .el-button + .el-button {
-      margin-left: 0;
-    }
-
-    & + .el-button-group {
-      margin-left: 10px;
-    }
-  }
-}
-
-</style>

docs/examples/badge/basic.vue

@@ -1,15 +1,15 @@
 <template>
   <el-badge :value="12" class="item">
-    <el-button size="small">comments</el-button>
+    <el-button>comments</el-button>
   </el-badge>
   <el-badge :value="3" class="item">
-    <el-button size="small">replies</el-button>
+    <el-button>replies</el-button>
   </el-badge>
   <el-badge :value="1" class="item" type="primary">
-    <el-button size="small">comments</el-button>
+    <el-button>comments</el-button>
   </el-badge>
   <el-badge :value="2" class="item" type="warning">
-    <el-button size="small">replies</el-button>
+    <el-button>replies</el-button>
   </el-badge>
 
   <el-dropdown trigger="click">

docs/examples/badge/customize.vue

@@ -1,9 +1,9 @@
 <template>
   <el-badge value="new" class="item">
-    <el-button size="small">comments</el-button>
+    <el-button>comments</el-button>
   </el-badge>
   <el-badge value="hot" class="item">
-    <el-button size="small">replies</el-button>
+    <el-button>replies</el-button>
   </el-badge>
 </template>
 

docs/examples/badge/max.vue

@@ -1,9 +1,9 @@
 <template>
   <el-badge :value="200" :max="99" class="item">
-    <el-button size="small">comments</el-button>
+    <el-button>comments</el-button>
   </el-badge>
   <el-badge :value="100" :max="10" class="item">
-    <el-button size="small">replies</el-button>
+    <el-button>replies</el-button>
   </el-badge>
 </template>
 

docs/examples/button/group.vue

@@ -6,12 +6,13 @@
     </el-button>
   </el-button-group>
 
-  <el-button-group>
+  <el-button-group class="ml-4">
     <el-button type="primary" :icon="Edit"></el-button>
     <el-button type="primary" :icon="Share"></el-button>
     <el-button type="primary" :icon="Delete"></el-button>
   </el-button-group>
 </template>
+
 <script setup lang="ts">
 import {
   ArrowLeft,

docs/examples/button/size.vue

@@ -3,6 +3,9 @@
     <el-button size="large">Large</el-button>
     <el-button>Default</el-button>
     <el-button size="small">Small</el-button>
+    <el-button size="large" type="primary" :icon="Search">Search</el-button>
+    <el-button type="primary" :icon="Search">Search</el-button>
+    <el-button size="small" type="primary" :icon="Search">Search</el-button>
   </el-row>
   <el-row class="my-4">
     <el-button size="large" round>Large</el-button>

docs/examples/checkbox/with-border.vue

@@ -13,7 +13,7 @@
       border
     ></el-checkbox>
   </div>
-  <div class="demo-with-border">
+  <div class="demo-with-border my-4">
     <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
     <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
   </div>
@@ -34,9 +34,3 @@ const checked3 = ref(false)
 const checked4 = ref(true)
 const checkboxGroup1 = ref([])
 </script>
-
-<style scoped>
-.demo-with-border {
-  margin-top: 24px;
-}
-</style>

docs/examples/input-number/size.vue

@@ -1,6 +1,6 @@
 <template>
   <el-input-number v-model="num1" size="large" />
-  <el-input-number v-model="num2" />
+  <el-input-number v-model="num2" class="mx-4" />
   <el-input-number v-model="num3" size="small" />
 </template>
 

docs/examples/tag/sizes.vue

@@ -1,5 +1,13 @@
 <template>
-  <el-tag class="mx-1" size="large">Large</el-tag>
+  <el-row>
-  <el-tag class="mx-1">Default</el-tag>
+    <el-tag class="mx-1" size="large">Large</el-tag>
-  <el-tag class="mx-1" size="small">Small</el-tag>
+    <el-tag class="mx-1">Default</el-tag>
+    <el-tag class="mx-1" size="small">Small</el-tag>
+  </el-row>
+
+  <el-row class="mt-4">
+    <el-tag class="mx-1" size="large" closable>Large</el-tag>
+    <el-tag class="mx-1" closable>Default</el-tag>
+    <el-tag class="mx-1" size="small" closable>Small</el-tag>
+  </el-row>
 </template>

docs/examples/upload/avatar.vue

@@ -57,9 +57,6 @@ const beforeAvatarUpload = (file: ElFile) => {
   height: 178px;
   text-align: center;
 }
-.avatar-uploader-icon svg {
-  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
-}
 .avatar {
   width: 178px;
   height: 178px;

docs/examples/upload/basic.vue

@@ -10,7 +10,7 @@
     :on-exceed="handleExceed"
     :file-list="fileList"
   >
-    <el-button size="small" type="primary">Click to upload</el-button>
+    <el-button type="primary">Click to upload</el-button>
     <template #tip>
       <div class="el-upload__tip">
         jpg/png files with a size less than 500kb

docs/examples/upload/file-list-with-thumbnail.vue

@@ -7,7 +7,7 @@
     :file-list="fileList"
     list-type="picture"
   >
-    <el-button size="small" type="primary">Click to upload</el-button>
+    <el-button type="primary">Click to upload</el-button>
     <template #tip>
       <div class="el-upload__tip">
         jpg/png files with a size less than 500kb

docs/examples/upload/file-list.vue

@@ -5,7 +5,7 @@
     :on-change="handleChange"
     :file-list="fileList"
   >
-    <el-button size="small" type="primary">Click to upload</el-button>
+    <el-button type="primary">Click to upload</el-button>
     <template #tip>
       <div class="el-upload__tip">
         jpg/png files with a size less than 500kb

docs/examples/upload/limit-cover.vue

@@ -8,13 +8,9 @@
     :auto-upload="false"
   >
     <template #trigger>
-      <el-button size="small" type="primary">select file</el-button>
+      <el-button type="primary">select file</el-button>
     </template>
-    <el-button
+    <el-button class="ml-3" type="success" @click="submitUpload"
-      style="margin-left: 10px"
-      size="small"
-      type="success"
-      @click="submitUpload"
       >upload to server</el-button
     >
     <template #tip>

docs/examples/upload/manual.vue

@@ -6,13 +6,9 @@
     :auto-upload="false"
   >
     <template #trigger>
-      <el-button size="small" type="primary">select file</el-button>
+      <el-button type="primary">select file</el-button>
     </template>
-    <el-button
+    <el-button class="ml-3" type="success" @click="submitUpload"
-      style="margin-left: 10px"
-      size="small"
-      type="success"
-      @click="submitUpload"
       >upload to server</el-button
     >
     <template #tip>

packages/components/button/__tests__/button.spec.ts

@@ -35,9 +35,9 @@ describe('Button.vue', () => {
   })
   it('size', () => {
     const wrapper = mount(Button, {
-      props: { size: 'default' },
+      props: { size: 'large' },
     })
-    expect(wrapper.classes()).toContain('el-button--default')
+    expect(wrapper.classes()).toContain('el-button--large')
   })
   it('plain', () => {
     const wrapper = mount(Button, {
@@ -140,11 +140,11 @@ describe('Button Group', () => {
       wrapper.findAll('.el-button-group button.el-button--small').length
     ).toBe(2)
 
-    size.value = 'default'
+    size.value = 'large'
     await nextTick()
 
     expect(
-      wrapper.findAll('.el-button-group button.el-button--default').length
+      wrapper.findAll('.el-button-group button.el-button--large').length
     ).toBe(2)
   })
 

packages/components/button/src/button.vue

@@ -87,7 +87,7 @@ export default defineComponent({
     const buttonSize = useSize(computed(() => buttonGroupContext?.size))
     const buttonDisabled = useDisabled()
     const buttonType = computed(
-      () => props.type || buttonGroupContext?.type || 'default'
+      () => props.type || buttonGroupContext?.type || ''
     )
 
     // calculate hover & active color by color

packages/components/date-picker/__tests__/date-time-picker.spec.ts

@@ -246,11 +246,7 @@ describe('Datetime Picker', () => {
       ) as HTMLElement
     ).click()
     // click confirm button
-    ;(
+    document.querySelectorAll('.el-picker-panel__footer .el-button')[1].click()
-      document.querySelector(
-        '.el-picker-panel__footer .el-button--default'
-      ) as HTMLElement
-    ).click()
     const vm = wrapper.vm as any
     expect(dayjs(vm.value).format(formatStr)).toBe('2000-10-01 12:00:00')
   })
@@ -424,9 +420,9 @@ describe('Datetimerange', () => {
     triggerEvent(rightCell, 'click', true)
     await nextTick()
     ;(
-      document.querySelector(
+      document.querySelectorAll(
-        '.el-picker-panel__footer .el-button--default'
+        '.el-picker-panel__footer .el-button'
-      ) as HTMLElement
+      )[1] as HTMLElement
     ).click()
     await nextTick()
     const vm = wrapper.vm as any
@@ -497,9 +493,9 @@ describe('Datetimerange', () => {
     triggerEvent(rightCell, 'mousemove', true)
     triggerEvent(rightCell, 'click', true)
     await nextTick()
-    const btn = document.querySelector(
+    const btn = document.querySelectorAll(
-      '.el-picker-panel__footer .el-button--default'
+      '.el-picker-panel__footer .el-button'
-    ) as HTMLElement
+    )[1] as HTMLElement
     btn.click()
     await nextTick()
     const vm = wrapper.vm as any
@@ -545,9 +541,9 @@ describe('Datetimerange', () => {
     ) as HTMLElement
     button.click()
     await nextTick()
-    const btn = document.querySelector(
+    const btn = document.querySelectorAll(
-      '.el-picker-panel__footer .el-button--default'
+      '.el-picker-panel__footer .el-button'
-    ) as HTMLElement
+    )[1] as HTMLElement
     btn.click()
     await nextTick()
     expect(vm.value).not.toBe('')
@@ -583,9 +579,9 @@ describe('Datetimerange', () => {
     triggerEvent(leftDateInput, 'input', true)
     triggerEvent(leftDateInput, 'change', true)
     await nextTick()
-    const btn = document.querySelector(
+    const btn = document.querySelectorAll(
-      '.el-picker-panel__footer .el-button--default'
+      '.el-picker-panel__footer .el-button'
-    ) as HTMLElement
+    )[1] as HTMLElement
     expect(btn.getAttribute('disabled')).not.toBeUndefined() // invalid input disables button
     btn.click()
     await nextTick()
@@ -742,9 +738,9 @@ describe('Datetimerange', () => {
     ).click()
     await nextTick()
     ;(
-      document.querySelector(
+      document.querySelectorAll(
-        '.el-picker-panel__footer .el-button--default'
+        '.el-picker-panel__footer .el-button'
-      ) as HTMLElement
+      )[1] as HTMLElement
     ).click()
     await nextTick()
     const vm = wrapper.vm as any

packages/components/tag/src/tag.vue

@@ -5,7 +5,9 @@
     :style="{ backgroundColor: color }"
     @click="handleClick"
   >
-    <slot></slot>
+    <span class="el-tag__content">
+      <slot></slot>
+    </span>
     <el-icon v-if="closable" class="el-tag__close" @click="handleClose">
       <close />
     </el-icon>
@@ -16,7 +18,9 @@
       :style="{ backgroundColor: color }"
       @click="handleClick"
     >
-      <slot></slot>
+      <span class="el-tag__content">
+        <slot></slot>
+      </span>
       <el-icon v-if="closable" class="el-tag__close" @click="handleClose">
         <close />
       </el-icon>
@@ -43,9 +47,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const tagSize = useSize()
     const classes = computed(() => {
-      const { type, hit, effect } = props
+      const { type, hit, effect, closable } = props
       return [
         'el-tag',
+        closable && 'is-closable',
         type ? `el-tag--${type}` : '',
         tagSize.value ? `el-tag--${tagSize.value}` : '',
         effect ? `el-tag--${effect}` : '',

packages/theme-chalk/src/button.scss

@@ -10,7 +10,15 @@
   @include set-component-css-var('button', $button);
 }
 
-$button-border-width: 1px;
+$button-icon-span-gap: () !default;
+$button-icon-span-gap: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $button-icon-span-gap
+);
 
 @include b(button) {
   display: inline-flex;
@@ -44,7 +52,7 @@ $button-border-width: 1px;
   }
 
   & + & {
-    margin-left: 10px;
+    margin-left: 12px;
   }
 
   @include button-size(
@@ -84,7 +92,7 @@ $button-border-width: 1px;
 
   & [class*='#{$namespace}-icon'] {
     & + span {
-      margin-left: 5px;
+      margin-left: map.get($button-icon-span-gap, 'default');
     }
     svg {
       vertical-align: bottom;
@@ -165,7 +173,7 @@ $button-border-width: 1px;
   }
   @include when(circle) {
     border-radius: 50%;
-    padding: map.get($button-padding-vertical, 'default');
+    padding: map.get($button-padding-vertical, 'default') - $button-border-width;
   }
 
   @include e(text) {
@@ -189,7 +197,14 @@ $button-border-width: 1px;
 
   @each $size in (large, small) {
     @include m($size) {
-      height: map.get($input-height, $size);
+      --el-button-size: #{map.get($input-height, $size)};
+      height: var(--el-button-size);
+
+      & [class*='#{$namespace}-icon'] {
+        & + span {
+          margin-left: map.get($button-icon-span-gap, $size);
+        }
+      }
 
       @include button-size(
         map.get($button-padding-vertical, $size) - $button-border-width,
@@ -199,7 +214,8 @@ $button-border-width: 1px;
       );
 
       @include when(circle) {
-        padding: map.get($button-padding-vertical, $size);
+        width: var(--el-button-size);
+        padding: map.get($button-padding-vertical, $size) - $button-border-width;
       }
     }
   }

packages/theme-chalk/src/checkbox-button.scss

@@ -35,8 +35,8 @@
     user-select: none;
 
     @include button-size(
-      map.get($button-padding-vertical, 'default'),
+      map.get($button-padding-vertical, 'default') - $button-border-width,
-      map.get($button-padding-horizontal, 'default'),
+      map.get($button-padding-horizontal, 'default') - $button-border-width,
       map.get($button-font-size, 'default'),
       0
     );
@@ -126,8 +126,8 @@
     @include m($size) {
       .#{$namespace}-checkbox-button__inner {
         @include button-size(
-          map.get($button-padding-vertical, $size),
+          map.get($button-padding-vertical, $size) - $button-border-width,
-          map.get($button-padding-horizontal, $size),
+          map.get($button-padding-horizontal, $size) - $button-border-width,
           map.get($button-font-size, $size),
           0
         );

packages/theme-chalk/src/checkbox.scss

@@ -7,23 +7,26 @@
 @use 'mixins/utils' as *;
 
 $checkbox-height: () !default;
-$checkbox-height: map.merge(
+$checkbox-height: map.merge($common-component-size, $checkbox-height);
+
+$checkbox-bordered-padding-left: () !default;
+$checkbox-bordered-padding-left: map.merge(
   (
-    'large': 40px,
+    'large': 12px,
-    'default': 32px,
+    'default': 10px,
-    'small': 24px,
+    'small': 8px,
   ),
-  $checkbox-height
+  $checkbox-bordered-padding-left
 );
 
-$checkbox-bordered-padding: () !default;
+$checkbox-bordered-padding-right: () !default;
-$checkbox-bordered-padding: map.merge(
+$checkbox-bordered-padding-right: map.merge(
   (
-    'large': 0 20px 0 10px,
+    'large': 20px,
-    'default': 0 15px 0 10px,
+    'default': 16px,
-    'small': 0 15px 0 10px,
+    'small': 12px,
   ),
-  $checkbox-bordered-padding
+  $checkbox-bordered-padding-right
 );
 
 $checkbox-bordered-input-height: () !default;
@@ -66,7 +69,8 @@ $checkbox-bordered-input-width: map.merge(
   }
 
   @include when(bordered) {
-    padding: map.get($checkbox-bordered-padding, 'default');
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
     border-radius: var(--el-border-radius-base);
     border: var(--el-border-base);
     box-sizing: border-box;
@@ -86,7 +90,11 @@ $checkbox-bordered-input-width: map.merge(
 
     @each $size in (large, small) {
       &.#{$namespace}-checkbox--#{$size} {
-        padding: map.get($checkbox-bordered-padding, $size);
+        padding: 0
+          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          0
+          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+
         border-radius: map.get($button-border-radius, $size);
 
         .#{$namespace}-checkbox__label {
@@ -251,7 +259,7 @@ $checkbox-bordered-input-width: map.merge(
 
   @include e(label) {
     display: inline-block;
-    padding-left: 10px;
+    padding-left: 8px;
     line-height: 1;
     font-size: var(--el-checkbox-font-size);
   }

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

@@ -4,14 +4,7 @@
 @use 'common/var' as *;
 
 $color-picker-size: () !default;
-$color-picker-size: map.merge(
+$color-picker-size: map.merge($common-component-size, $color-picker-size);
-  (
-    'large': 36px,
-    'default': 32px,
-    'small': 28px,
-  ),
-  $color-picker-size
-);
 
 @include b(color-predefine) {
   display: flex;
@@ -221,7 +214,7 @@ $color-picker-size: map.merge(
   }
 
   @include e(btns) {
-    margin-top: 6px;
+    margin-top: 12px;
     text-align: right;
   }
 

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

@@ -163,6 +163,16 @@ $disabled: map.merge(
   $disabled
 );
 
+$common-component-size: () !default;
+$common-component-size: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $common-component-size
+);
+
 // Checkbox
 // css3 var in packages/theme-chalk/src/checkbox.scss
 $checkbox: () !default;
@@ -221,14 +231,7 @@ $radio: map.merge(
 );
 
 $radio-height: () !default;
-$radio-height: map.merge(
+$radio-height: map.merge($common-component-size, $radio-height);
-  (
-    'large': 40px,
-    'default': 32px,
-    'small': 24px,
-  ),
-  $radio-height
-);
 
 $radio-button: () !default;
 $radio-button: map.merge(
@@ -453,7 +456,7 @@ $input-disabled: map.merge(
 $input-font-size: () !default;
 $input-font-size: map.merge(
   (
-    'large': 16px,
+    'large': 14px,
     'default': 14px,
     'small': 12px,
   ),
@@ -461,31 +464,17 @@ $input-font-size: map.merge(
 );
 
 $input-height: () !default;
-$input-height: map.merge(
+$input-height: map.merge($common-component-size, $input-height);
-  (
-    'large': 40px,
-    'default': 32px,
-    'small': 24px,
-  ),
-  $input-height
-);
 
 $input-line-height: () !default;
-$input-line-height: map.merge(
+$input-line-height: map.merge($common-component-size, $input-line-height);
-  (
-    'large': 40px,
-    'default': 32px,
-    'small': 24px,
-  ),
-  $input-line-height
-);
 
 $input-number-width: () !default;
 $input-number-width: map.merge(
   (
-    'large': 178px,
+    'large': 180px,
-    'default': 146px,
+    'default': 150px,
-    'small': 118px,
+    'small': 120px,
   ),
   $input-number-width
 );
@@ -533,7 +522,7 @@ $button: map.merge(
     'disabled-bg-color': var(--el-color-white),
     'disabled-border-color': var(--el-border-color-light),
     'divide-border-color': rgba($color-white, 0.5),
-    'hover-text-color': var(--el-color-white),
+    'hover-text-color': var(--el-color-primary),
     'hover-bg-color': var(--el-color-primary-light-9),
     'hover-border-color': var(--el-color-primary-light-7),
     'active-text-color': var(--el-button-hover-text-color),
@@ -543,6 +532,8 @@ $button: map.merge(
   $button
 );
 
+$button-border-width: $border-width-base !default;
+
 // need mix, so do not use css var
 $button-hover-tint-percent: 20%;
 $button-active-shade-percent: 10%;
@@ -602,7 +593,7 @@ $button-padding-horizontal: map.merge(
   (
     'large': 20px,
     'default': 16px,
-    'small': 8px,
+    'small': 12px,
   ),
   $button-padding-horizontal
 );
@@ -790,12 +781,22 @@ $tag-padding: () !default;
 $tag-padding: map.merge(
   (
     'large': 12px,
-    'default': 8px,
+    'default': 10px,
-    'small': 4px,
+    'small': 8px,
   ),
   $tag-padding
 );
 
+$tag-icon-size: () !default;
+$tag-icon-size: map.merge(
+  (
+    'large': 18px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $tag-icon-size
+);
+
 @each $type in $types {
   $tag-color: map.merge(
     (

packages/theme-chalk/src/dropdown.scss

@@ -25,14 +25,7 @@ $dropdown-item-padding: map.merge(
 );
 
 $dropdown-caret-width: () !default;
-$dropdown-caret-width: map.merge(
+$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
-  (
-    'large': 40px,
-    'default': 30px,
-    'small': 20px,
-  ),
-  $dropdown-caret-width
-);
 
 $dropdown-divider-width: 1px !default;
 

packages/theme-chalk/src/input-number.scss

@@ -7,7 +7,7 @@
 @include b(input-number) {
   position: relative;
   display: inline-block;
-  width: 180px;
+  width: map.get($input-number-width, 'default');
   line-height: #{map.get($input-height, 'default') - 2};
 
   .#{$namespace}-input {
@@ -27,17 +27,18 @@
     }
   }
 
-  .#{$namespace}-icon {
-    vertical-align: text-bottom;
-  }
-
   @include e((increase, decrease)) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+
     position: absolute;
     z-index: 1;
     top: 1px;
+    bottom: 1px;
+
     width: map.get($input-height, 'default');
-    height: auto;
-    text-align: center;
     background: var(--el-bg-color);
     color: var(--el-text-color-regular);
     cursor: pointer;

packages/theme-chalk/src/input.scss

@@ -143,7 +143,7 @@
     height: map.get($input-height, 'default');
     line-height: map.get($input-height, 'default');
     outline: none;
-    padding: 0 map.get($input-padding-horizontal, 'default');
+    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
     transition: var(--el-transition-border);
     width: 100%;
 
@@ -291,7 +291,7 @@
       @include e(inner) {
         height: map.get($input-height, $size);
         line-height: map.get($input-height, $size);
-        padding: 0 map.get($input-padding-horizontal, $size);
+        padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
       }
 
       .#{$namespace}-input__icon {

packages/theme-chalk/src/mixins/_button.scss

@@ -28,6 +28,7 @@
 
 @mixin button-variant($type) {
   --el-button-text-color: var(--el-color-white);
+  --el-button-hover-text-color: var(--el-color-white);
   --el-button-disabled-text-color: var(--el-color-white);
   &.is-plain {
     @include button-plain(var(--el-button-bg-color), $type);

packages/theme-chalk/src/popper.scss

@@ -9,7 +9,7 @@
 @include b(popper) {
   position: absolute;
   border-radius: var(--el-popper-border-radius);
-  padding: 10px;
+  padding: 12px;
   z-index: 2000;
   font-size: 12px;
   line-height: 1.2;

packages/theme-chalk/src/select.scss

@@ -96,10 +96,6 @@
     &.is-focus .#{$namespace}-input__inner {
       border-color: var(--el-select-input-focus-border-color);
     }
-
-    & .#{$namespace}-input__prefix-icon {
-      width: 25px;
-    }
   }
 
   @include e(input) {

packages/theme-chalk/src/tag.scss

@@ -10,6 +10,16 @@
 
 $tag-border-width: 1px;
 
+$tag-icon-span-gap: () !default;
+$tag-icon-span-gap: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $tag-icon-span-gap
+);
+
 @mixin genTheme(
   $backgroundColorWeight,
   $borderColorWeight,
@@ -90,7 +100,7 @@ $tag-border-width: 1px;
   align-items: center;
 
   height: map.get($tag-height, 'default');
-  padding: map.get($tag-padding, 'default');
+  padding: 0 map.get($tag-padding, 'default') - $border-width-base;
   font-size: var(--el-tag-font-size);
   line-height: 1;
   border-width: $tag-border-width;
@@ -99,15 +109,19 @@ $tag-border-width: 1px;
   box-sizing: border-box;
   white-space: nowrap;
 
+  --el-icon-size: 14px;
+
   .#{$namespace}-icon {
     border-radius: 50%;
     text-align: center;
     position: relative;
     cursor: pointer;
-    font-size: 12px;
+
-    height: 16px;
+    font-size: calc(var(--el-icon-size) - 2px);
-    width: 16px;
+
-    line-height: 16px;
+    height: var(--el-icon-size);
+    width: var(--el-icon-size);
+    line-height: var(--el-icon-size);
 
     svg {
       margin: 2px;
@@ -115,7 +129,7 @@ $tag-border-width: 1px;
   }
 
   .#{$namespace}-tag__close {
-    right: -5px;
+    margin-left: map.get($tag-icon-span-gap, 'default');
   }
 
   @include m(dark) {
@@ -126,10 +140,24 @@ $tag-border-width: 1px;
     @include genTheme(0, 40%, 100%, 100%);
   }
 
+  &.is-closable {
+    padding-right: map.get($tag-icon-span-gap, 'default') - $border-width-base;
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       padding: 0 map.get($tag-padding, $size) - $tag-border-width;
       height: map.get($tag-height, $size);
+
+      --el-icon-size: #{map.get($tag-icon-size, $size)};
+
+      .#{$namespace}-tag__close {
+        margin-left: map.get($tag-icon-span-gap, $size);
+      }
+
+      &.is-closable {
+        padding-right: map.get($tag-icon-span-gap, $size) - $border-width-base;
+      }
     }
   }