feat(components): [config-provider/button] add text prop (#21806)

docs/en-US/component/config-provider.md

@@ -114,6 +114,7 @@ In this section, you can learn how to use Config Provider to provide experimenta
 | type ^(2.9.11)  | button type, when setting `color`, the latter prevails                                                                                               | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'text' (deprecated)` | —       |
 | autoInsertSpace | automatically insert a space between two chinese characters(this will only take effect when the text length is 2 and all characters are in Chinese.) | ^[boolean]                                                                                | false   |
 | plain ^(2.9.11) | determine whether it's a plain button                                                                                                                | ^[boolean]                                                                                | false   |
+| text ^(2.11.0)  | determine whether it's a text button                                                                                                                 | ^[boolean]                                                                                | false   |
 | round ^(2.9.11) | determine whether it's a round button                                                                                                                | ^[boolean]                                                                                | false   |
 
 ### Link Attribute

docs/examples/config-provider/button.vue

@@ -6,6 +6,7 @@
       </el-checkbox>
       <el-checkbox v-model="config.plain"> plain </el-checkbox>
       <el-checkbox v-model="config.round"> round </el-checkbox>
+      <el-checkbox v-model="config.text"> text </el-checkbox>
       <el-select v-model="config.type" class="ml-5" style="max-width: 150px">
         <el-option
           v-for="type in buttonTypes.filter(Boolean)"
@@ -30,5 +31,6 @@ const config = reactive({
   type: 'default',
   plain: true,
   round: true,
+  text: false,
 })
 </script>

packages/components/button/src/button.ts

@@ -72,7 +72,10 @@ export const buttonProps = buildProps({
   /**
    * @description determine whether it's a text button
    */
-  text: Boolean,
+  text: {
+    type: Boolean,
+    default: undefined,
+  },
   /**
    * @description determine whether it's a link button
    */
@@ -133,6 +136,7 @@ export type ButtonNativeType = ButtonProps['nativeType']
 export interface ButtonConfigContext {
   type?: string
   plain?: boolean
+  text?: boolean
   round?: boolean
   autoInsertSpace?: boolean
 }

packages/components/button/src/button.vue

@@ -51,6 +51,7 @@ const {
   _props,
   _plain,
   _round,
+  _text,
   shouldAddSpace,
   handleClick,
 } = useButton(props, emit)
@@ -63,7 +64,7 @@ const buttonKls = computed(() => [
   ns.is('plain', _plain.value),
   ns.is('round', _round.value),
   ns.is('circle', props.circle),
-  ns.is('text', props.text),
+  ns.is('text', _text.value),
   ns.is('link', props.link),
   ns.is('has-bg', props.bg),
 ])

packages/components/button/src/use-button.ts

@@ -47,6 +47,7 @@ export const useButton = (
   const _round = computed(
     () => props.round ?? globalConfig.value?.round ?? false
   )
+  const _text = computed(() => props.text ?? globalConfig.value?.text ?? false)
 
   const _props = computed(() => {
     if (props.tag === 'button') {
@@ -92,6 +93,7 @@ export const useButton = (
     _props,
     _plain,
     _round,
+    _text,
     shouldAddSpace,
     handleClick,
   }

packages/components/config-provider/__tests__/config-provider.test.tsx

@@ -139,6 +139,7 @@ describe('config-provider', () => {
         plain: true,
         round: true,
         autoInsertSpace: true,
+        text: true,
       })
 
       const wrapper = mount(() => (
@@ -150,7 +151,7 @@ describe('config-provider', () => {
       expect(
         wrapper
           .find(
-            '.el-button.el-button--warning.is-plain.is-round .el-button__text--expand'
+            '.el-button.el-button--warning.is-plain.is-round.is-text .el-button__text--expand'
           )
           .exists()
       ).toBe(true)