fix(components): input-number/input/dropdown/select/badge details (el…

…ement-plus#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-tag class="mx-1">Default</el-tag>
-  <el-tag class="mx-1" size="small">Small</el-tag>
+  <el-row>
+    <el-tag class="mx-1" size="large">Large</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
-      style="margin-left: 10px"
-      size="small"
-      type="success"
-      @click="submitUpload"
+    <el-button class="ml-3" 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
-      style="margin-left: 10px"
-      size="small"
-      type="success"
-      @click="submitUpload"
+    <el-button class="ml-3" 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.querySelector(
-        '.el-picker-panel__footer .el-button--default'
-      ) as HTMLElement
-    ).click()
+    document.querySelectorAll('.el-picker-panel__footer .el-button')[1].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(
-        '.el-picker-panel__footer .el-button--default'
-      ) as HTMLElement
+      document.querySelectorAll(
+        '.el-picker-panel__footer .el-button'
+      )[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(
-      '.el-picker-panel__footer .el-button--default'
-    ) as HTMLElement
+    const btn = document.querySelectorAll(
+      '.el-picker-panel__footer .el-button'
+    )[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(
-      '.el-picker-panel__footer .el-button--default'
-    ) as HTMLElement
+    const btn = document.querySelectorAll(
+      '.el-picker-panel__footer .el-button'
+    )[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(
-      '.el-picker-panel__footer .el-button--default'
-    ) as HTMLElement
+    const btn = document.querySelectorAll(
+      '.el-picker-panel__footer .el-button'
+    )[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(
-        '.el-picker-panel__footer .el-button--default'
-      ) as HTMLElement
+      document.querySelectorAll(
+        '.el-picker-panel__footer .el-button'
+      )[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}` : '',