feat(components): add space between two characters in Chinese (#3992)

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

@@ -109,10 +109,11 @@ describe('Button.vue', () => {
 describe('Button Group', () => {
   it('create', () => {
     const wrapper = mount({
-      template: `<el-button-group>
+      template: `
+        <el-button-group>
         <el-button type="primary">Prev</el-button>
         <el-button type="primary">Next</el-button>
-      </el-button-group>`,
+        </el-button-group>`,
       components: {
         'el-button-group': ButtonGroup,
         'el-button': Button,
@@ -171,4 +172,16 @@ describe('Button Group', () => {
       wrapper.findAll('.el-button-group button.el-button--warning').length
     ).toBe(1)
   })
+
+  it('add space in two Chinese characters', async () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: '中文',
+      },
+    })
+    expect(wrapper.find('.el-button span').text()).toBe('中文')
+    expect(wrapper.find('.el-button span').classes()).toContain(
+      'el-button__text--expand'
+    )
+  })
 })

packages/components/button/src/button.vue

@@ -19,7 +19,12 @@
   >
     <i v-if="loading" class="el-icon-loading"></i>
     <i v-if="icon && !loading" :class="icon"></i>
-    <span v-if="$slots.default"><slot></slot></span>
+    <span
+      v-else-if="$slots.default"
+      :class="{ 'el-button__text--expand': shouldAddSpace }"
+    >
+      <slot></slot>
+    </span>
   </button>
 </template>
 
@@ -29,14 +34,30 @@ import { useFormItem } from '@element-plus/hooks'
 import { elButtonGroupKey, elFormKey } from '@element-plus/tokens'
 
 import { buttonEmits, buttonProps } from './button'
+
 export default defineComponent({
   name: 'ElButton',
 
   props: buttonProps,
   emits: buttonEmits,
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const elBtnGroup = inject(elButtonGroupKey, undefined)
+    // add space between two characters in Chinese
+    const shouldAddSpace = computed(() => {
+      const defaultSlot = slots.default?.()
+      if (defaultSlot?.length === 1) {
+        const slot = defaultSlot[0]
+        if (
+          typeof slot?.type === 'symbol' &&
+          slot.type.description === 'Text'
+        ) {
+          const text = slot.children
+          return /^\p{Unified_Ideograph}{2}$/u.test(text as string)
+        }
+      }
+      return false
+    })
     const { size: buttonSize, disabled: buttonDisabled } = useFormItem({
       size: computed(() => elBtnGroup?.size),
     })
@@ -58,6 +79,8 @@ export default defineComponent({
       buttonType,
       buttonDisabled,
 
+      shouldAddSpace,
+
       handleClick,
     }
   },

packages/theme-chalk/src/button.scss

@@ -150,6 +150,13 @@
     padding: map.get($button-padding-vertical, 'default');
   }
 
+  @include e(text) {
+    @include m(expand) {
+      letter-spacing: 0.3em;
+      margin-right: -0.3em;
+    }
+  }
+
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       --el-button-font-color: #{map.get($button-font-color, $type)};