From 6d73349cc53a285c3fa5d2d16d7cee45c6c7bd3f Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Mon, 30 May 2022 21:38:18 +0800
Subject: [PATCH] fix(components): [button] link style and docs (#7996)

* fix(components): [button] link style and docs

* fix(components): [button] link style

Co-authored-by: xiaochenchen <xiaochen.chen@igg.com>
---
 docs/examples/table/fixed-column.vue                   | 6 ++++--
 docs/examples/table/fixed-header-with-fluid-header.vue | 7 ++++++-
 packages/theme-chalk/src/button.scss                   | 6 +++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/examples/table/fixed-column.vue b/docs/examples/table/fixed-column.vue
index e386acd3d4..0eee962c0d 100644
--- a/docs/examples/table/fixed-column.vue
+++ b/docs/examples/table/fixed-column.vue
@@ -8,8 +8,10 @@
     <el-table-column prop="zip" label="Zip" width="120" />
     <el-table-column fixed="right" label="Operations" width="120">
       <template #default>
-        <el-button text size="small" @click="handleClick">Detail</el-button>
-        <el-button text size="small">Edit</el-button>
+        <el-button link type="primary" size="small" @click="handleClick"
+          >Detail</el-button
+        >
+        <el-button link type="primary" size="small">Edit</el-button>
       </template>
     </el-table-column>
   </el-table>
diff --git a/docs/examples/table/fixed-header-with-fluid-header.vue b/docs/examples/table/fixed-header-with-fluid-header.vue
index f99dd417f4..53efeea5d4 100644
--- a/docs/examples/table/fixed-header-with-fluid-header.vue
+++ b/docs/examples/table/fixed-header-with-fluid-header.vue
@@ -8,7 +8,12 @@
     <el-table-column prop="zip" label="Zip" width="120" />
     <el-table-column fixed="right" label="Operations" width="120">
       <template #default="scope">
-        <el-button text size="small" @click.prevent="deleteRow(scope.$index)">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click.prevent="deleteRow(scope.$index)"
+        >
           Remove
         </el-button>
       </template>
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index dd25a61041..fb9703a1cf 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -202,10 +202,12 @@ $button-icon-span-gap: map.merge(
 
   @include when(link) {
     border-color: transparent;
-    // color: getCssVar('color', 'primary');
+    color: getCssVar('button', 'text-color');
     background: transparent;
     padding-left: 0;
     padding-right: 0;
+    outline: 0;
+    outline-offset: 0;
 
     &:hover {
       color: getCssVar('button', 'hover', 'link-text-color');
@@ -220,13 +222,11 @@ $button-icon-span-gap: map.merge(
     &: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;
       }