feat(components): [button] add link api (#7652)

* feat: button add link type

* fix: code lint

* feat: button add link api

* docs: edit word

Co-authored-by: xiaochenchen <xiaochen.chen@igg.com>

breakings/2.2.1/button.yml

@@ -0,0 +1,12 @@
+- scope: 'component'
+  name: 'el-button'
+  type: 'props'
+  version: '2.2.1'
+  commit_hash: '4a364f9'
+  description: |
+    Per [Link Button Request](https://github.com/element-plus/element-plus/issues/7610), we need to
+    add a `link` like button back for those uses link button.
+  props:
+    - api: 'link'
+      before: ''
+      after: 'boolean'

docs/en-US/component/button.md

@@ -116,6 +116,7 @@ button/custom
 | plain                               | determine whether it's a plain button                           | boolean            | —                                                             | false   |
 | text <VersionTag version="2.2.0" /> | determine whether it's a text button                            | boolean            | —                                                             | false   |
 | bg <VersionTag version="2.2.0" />   | determine whether the text button background color is always on | boolean            | —                                                             | false   |
+| link <VersionTag version="2.2.1" /> | determine whether it's a link button                            | boolean            | —                                                             | false   |
 | round                               | determine whether it's a round button                           | boolean            | —                                                             | false   |
 | circle                              | determine whether it's a circle button                          | boolean            | —                                                             | false   |
 | loading                             | determine whether it's loading                                  | boolean            | —                                                             | false   |

docs/examples/button/link.vue

@@ -0,0 +1,36 @@
+<template>
+  <p>Basic link button</p>
+  <div class="flex justify-space-between mb-4">
+    <el-button
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      link
+      >{{ button.text }}</el-button
+    >
+  </div>
+
+  <p>Disabled link button</p>
+  <div class="flex justify-space-between">
+    <el-button
+      v-for="button in buttons"
+      :key="button.text"
+      :type="button.type"
+      link
+      disabled
+      >{{ button.text }}</el-button
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+const buttons = [
+  { type: 'link', text: 'link' },
+  { type: '', text: 'plain' },
+  { type: 'primary', text: 'primary' },
+  { type: 'success', text: 'success' },
+  { type: 'info', text: 'info' },
+  { type: 'warning', text: 'warning' },
+  { type: 'danger', text: 'danger' },
+] as const
+</script>

docs/examples/button/text.vue

@@ -37,6 +37,7 @@
 
 <script setup lang="ts">
 const buttons = [
+  { type: 'link', text: 'link' },
   { type: '', text: 'plain' },
   { type: 'primary', text: 'primary' },
   { type: 'success', text: 'success' },

packages/components/button/__tests__/button.test.tsx

@@ -72,6 +72,14 @@ describe('Button.vue', () => {
     expect(wrapper.classes()).toContain('is-has-bg')
   })
 
+  it('link', async () => {
+    const wrapper = mount(Button, {
+      props: { link: true },
+    })
+
+    expect(wrapper.classes()).toContain('is-link')
+  })
+
   test('render text', () => {
     const wrapper = mount(Button, {
       slots: {

packages/components/button/src/button.ts

@@ -39,6 +39,7 @@ export const buttonProps = buildProps({
   },
   plain: Boolean,
   text: Boolean,
+  link: Boolean,
   bg: Boolean,
   autofocus: Boolean,
   round: Boolean,

packages/components/button/src/button.vue

@@ -11,6 +11,7 @@
       ns.is('round', round),
       ns.is('circle', circle),
       ns.is('text', text),
+      ns.is('link', link),
       ns.is('has-bg', bg),
     ]"
     :aria-disabled="_disabled || loading"

packages/theme-chalk/src/button.scss

@@ -40,7 +40,7 @@ $button-icon-span-gap: map.merge(
   vertical-align: middle;
   -webkit-appearance: none;
 
-  &:not(.is-text) {
+  &:not(.is-text, .is-link) {
     background-color: getCssVar('button', 'bg-color');
     border: getCssVar('border');
     border-color: getCssVar('button', 'border-color');
@@ -191,6 +191,42 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include when(link) {
+    border-color: transparent;
+    // color: getCssVar('color', 'primary');
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    @include when(disabled) {
+      color: getCssVar('button', 'disabled', 'text-color');
+      background-color: transparent !important;
+      border-color: transparent !important;
+    }
+
+    &:not(.is-disabled) {
+      &:hover,
+      &:focus {
+        // color: getCssVar('color', 'primary', 'light-3');
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      &:active {
+        // color: getCssVar('color', 'primary', 'dark-2');
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+  }
+
+  @include e(link) {
+    @include m(expand) {
+      letter-spacing: 0.3em;
+      margin-right: -0.3em;
+    }
+  }
+
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       @include button-variant($type);

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

@@ -131,7 +131,8 @@
   }
 
   &.is-plain,
-  &.is-text {
+  &.is-text,
+  &.is-link {
     @include button-plain($type);
   }
 }