From ad3d998752ebe51e77427356ebbb1e29cb5f3591 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Sat, 14 May 2022 12:20:02 +0800
Subject: [PATCH] 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                    | 12 ++++++
 docs/en-US/component/button.md                |  1 +
 docs/examples/button/link.vue                 | 36 ++++++++++++++++++
 docs/examples/button/text.vue                 |  1 +
 .../button/__tests__/button.test.tsx          |  8 ++++
 packages/components/button/src/button.ts      |  1 +
 packages/components/button/src/button.vue     |  1 +
 packages/theme-chalk/src/button.scss          | 38 ++++++++++++++++++-
 packages/theme-chalk/src/mixins/_button.scss  |  3 +-
 9 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 breakings/2.2.1/button.yml
 create mode 100644 docs/examples/button/link.vue

diff --git a/breakings/2.2.1/button.yml b/breakings/2.2.1/button.yml
new file mode 100644
index 0000000000..6d5b5c74c0
--- /dev/null
+++ b/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'
diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md
index d7acaae93b..722df42ea5 100644
--- a/docs/en-US/component/button.md
+++ b/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   |
diff --git a/docs/examples/button/link.vue b/docs/examples/button/link.vue
new file mode 100644
index 0000000000..03538c58ce
--- /dev/null
+++ b/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>
diff --git a/docs/examples/button/text.vue b/docs/examples/button/text.vue
index cf35a5b31a..49a9430562 100644
--- a/docs/examples/button/text.vue
+++ b/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' },
diff --git a/packages/components/button/__tests__/button.test.tsx b/packages/components/button/__tests__/button.test.tsx
index 8cbe0076ce..e0efeed5c5 100644
--- a/packages/components/button/__tests__/button.test.tsx
+++ b/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: {
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 8535c2b45c..839051ad96 100644
--- a/packages/components/button/src/button.ts
+++ b/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,
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index bb577b2c73..d03476f21f 100644
--- a/packages/components/button/src/button.vue
+++ b/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"
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index a77a182bd0..a8ca48b575 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/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);
diff --git a/packages/theme-chalk/src/mixins/_button.scss b/packages/theme-chalk/src/mixins/_button.scss
index 4088b214f9..bcc7164a46 100644
--- a/packages/theme-chalk/src/mixins/_button.scss
+++ b/packages/theme-chalk/src/mixins/_button.scss
@@ -131,7 +131,8 @@
   }
 
   &.is-plain,
-  &.is-text {
+  &.is-text,
+  &.is-link {
     @include button-plain($type);
   }
 }