From 5d2daca24877c66a8354ec9aecc505e75d53da36 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Sat, 14 May 2022 12:58:09 +0800
Subject: [PATCH] docs(components): [button] link button (#7694)

- Update docs for link button.
- Update vp-translation wrong usage of button.
- Update doc show cases examples.
- Update commit hash value for `link button`
---
 breakings/2.2.1/button.yml                            |  2 +-
 .../components/full-screen/vp-translation.vue         |  2 +-
 docs/en-US/component/button.md                        | 11 +++++++++++
 docs/examples/button/link.vue                         |  5 ++---
 docs/examples/button/text.vue                         |  7 +++----
 packages/theme-chalk/src/button.scss                  |  4 ++++
 packages/theme-chalk/src/mixins/_button.scss          |  5 +++++
 7 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/breakings/2.2.1/button.yml b/breakings/2.2.1/button.yml
index 6d5b5c74c0..12c91efd69 100644
--- a/breakings/2.2.1/button.yml
+++ b/breakings/2.2.1/button.yml
@@ -2,7 +2,7 @@
   name: 'el-button'
   type: 'props'
   version: '2.2.1'
-  commit_hash: '4a364f9'
+  commit_hash: 'ad3d998'
   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.
diff --git a/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue b/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
index 6a28fdc056..33339c67d4 100644
--- a/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
+++ b/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
@@ -19,8 +19,8 @@ const onSwitchLang = (lang: string) => {
 <template>
   <div class="full-screen-translation">
     <ElButton
-      type="text"
       style="width: 100%; color: var(--text-color)"
+      text
       @click="toggle"
     >
       <div class="translation-toggler">
diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md
index 722df42ea5..b64bfd9e8f 100644
--- a/docs/en-US/component/button.md
+++ b/docs/en-US/component/button.md
@@ -25,6 +25,17 @@ button/disabled
 
 :::
 
+## Link Button <VersionTag version="2.2.1" />
+
+Since the last version, we deleted `type="link"` which was not really a smooth transition, so we added back `Link Button`,
+for some users `Link Button` is the suitable choice. Notably we would suggest using `Link` component to be more accessible.
+
+:::demo
+
+button/link
+
+:::
+
 ## Text Button
 
 :::tip
diff --git a/docs/examples/button/link.vue b/docs/examples/button/link.vue
index 03538c58ce..fdfb9d9349 100644
--- a/docs/examples/button/link.vue
+++ b/docs/examples/button/link.vue
@@ -1,6 +1,6 @@
 <template>
   <p>Basic link button</p>
-  <div class="flex justify-space-between mb-4">
+  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
     <el-button
       v-for="button in buttons"
       :key="button.text"
@@ -11,7 +11,7 @@
   </div>
 
   <p>Disabled link button</p>
-  <div class="flex justify-space-between">
+  <div class="flex justify-space-between flex-wrap gap-4">
     <el-button
       v-for="button in buttons"
       :key="button.text"
@@ -25,7 +25,6 @@
 
 <script setup lang="ts">
 const buttons = [
-  { type: 'link', text: 'link' },
   { type: '', text: 'plain' },
   { type: 'primary', text: 'primary' },
   { type: 'success', text: 'success' },
diff --git a/docs/examples/button/text.vue b/docs/examples/button/text.vue
index 49a9430562..055197d6b7 100644
--- a/docs/examples/button/text.vue
+++ b/docs/examples/button/text.vue
@@ -1,6 +1,6 @@
 <template>
   <p>Basic text button</p>
-  <div class="flex justify-space-between mb-4">
+  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
     <el-button
       v-for="button in buttons"
       :key="button.text"
@@ -11,7 +11,7 @@
   </div>
 
   <p>Background color always on</p>
-  <div class="flex justify-space-between mb-4">
+  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
     <el-button
       v-for="button in buttons"
       :key="button.text"
@@ -23,7 +23,7 @@
   </div>
 
   <p>Disabled text button</p>
-  <div class="flex justify-space-between">
+  <div class="flex justify-space-between flex-wrap gap-4">
     <el-button
       v-for="button in buttons"
       :key="button.text"
@@ -37,7 +37,6 @@
 
 <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/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index a8ca48b575..7ddae9d8a1 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -198,6 +198,10 @@ $button-icon-span-gap: map.merge(
     padding-left: 0;
     padding-right: 0;
 
+    &:hover {
+      color: getCssVar('button', 'hover', 'link-text-color');
+    }
+
     @include when(disabled) {
       color: getCssVar('button', 'disabled', 'text-color');
       background-color: transparent !important;
diff --git a/packages/theme-chalk/src/mixins/_button.scss b/packages/theme-chalk/src/mixins/_button.scss
index bcc7164a46..5bc4fe19c2 100644
--- a/packages/theme-chalk/src/mixins/_button.scss
+++ b/packages/theme-chalk/src/mixins/_button.scss
@@ -83,6 +83,11 @@
         'color',
         'white',
       ),
+      'link-text-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
       'bg-color': (
         'color',
         $type,