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,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.

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">

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

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' },

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' },

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;

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

@@ -83,6 +83,11 @@
         'color',
         'white',
       ),
+      'link-text-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
       'bg-color': (
         'color',
         $type,