From b4fe39f7e16c434dfb669099c641b424ea4e0b53 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 26 Jun 2018 15:47:32 +0800
Subject: [PATCH] Button add ghost prop

---
 examples/routers/button.vue       | 76 ++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
 src/components/button/button.vue  | 12 +++++++++---
 src/styles/components/button.less | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/styles/custom.less            |  4 ++--
 src/styles/mixins/button.less     |  2 +-
 5 files changed, 115 insertions(+), 37 deletions(-)

diff --git a/examples/routers/button.vue b/examples/routers/button.vue
index c66e7fd..37c17a5 100644
--- a/examples/routers/button.vue
+++ b/examples/routers/button.vue
@@ -1,5 +1,25 @@
 <template>
     <div>
+        <Button type="default">Default</Button>
+        <Button type="primary">Primary</Button>
+        <Button type="dashed">Dashed</Button>
+        <Button type="info">Info</Button>
+        <Button type="success">Success</Button>
+        <Button type="warning">Warning</Button>
+        <Button type="error">Error</Button>
+        <Button type="text">Text</Button>
+        <br><br><br>
+        <div style="padding: 20px;background: #dddee1">
+            <Button type="default" ghost>Default</Button>
+            <Button type="primary" ghost>Primary</Button>
+            <Button type="dashed" ghost>Dashed</Button>
+            <Button type="info" ghost>Info</Button>
+            <Button type="success" ghost>Success</Button>
+            <Button type="warning" ghost>Warning</Button>
+            <Button type="error" ghost>Error</Button>
+            <Button type="text" ghost>Text</Button>
+        </div>
+        <br><br><br>
         <Button type="primary" icon="ios-information-circle" size="small">Search</Button>
         <Button type="primary" icon="ios-information-circle" size="default">Search</Button>
         <Button type="primary" icon="ios-information-circle" size="large">Search</Button>
@@ -19,7 +39,7 @@
         <hr>
         <Button>Default</Button>
         <Button type="primary">Primary</Button>
-        <Button type="ghost">Ghost</Button>
+        <Button type="default">Ghost</Button>
         <Button type="dashed">Dashed</Button>
         <Button type="text">Text</Button>
         <br><br>
@@ -33,10 +53,10 @@
         <Button type="primary" shape="circle" icon="ios-search">Search</Button>
         <Button type="primary" shape="circle">Circle</Button>
         <br><br>
-        <Button type="ghost" shape="circle" icon="ios-search"></Button>
-        <Button type="ghost" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
-        <Button type="ghost" shape="circle">Circle</Button>
+        <Button type="default" shape="circle" icon="ios-search"></Button>
+        <Button type="default" icon="ios-search">Search</Button>
+        <Button type="default" shape="circle" icon="ios-search">Search</Button>
+        <Button type="default" shape="circle">Circle</Button>
         <br><br>
         <Button>Default</Button>
         <Button disabled>Default(Disabled)</Button>
@@ -44,8 +64,8 @@
         <Button type="primary">Primary</Button>
         <Button type="primary" disabled>Primary(Disabled)</Button>
         <br>
-        <Button type="ghost">Ghost</Button>
-        <Button type="ghost" disabled>Ghost(Disabled)</Button>
+        <Button type="default">Ghost</Button>
+        <Button type="default" disabled>Ghost(Disabled)</Button>
         <br>
         <Button type="dashed">Dashed</Button>
         <Button type="dashed" disabled>Dashed(Disabled)</Button>
@@ -69,7 +89,7 @@
         <Button-group>
             <Button type="primary">L</Button>
             <Button>M</Button>
-            <Button type="ghost">M</Button>
+            <Button type="default">M</Button>
             <Button type="dashed">R</Button>
         </Button-group>
         <br><br>
@@ -90,10 +110,10 @@
             <Button type="primary" icon="ios-skipforward"></Button>
         </Button-group>
         <Button-group>
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+            <Button type="default" icon="ios-color-wand-outline"></Button>
+            <Button type="default" icon="ios-sunny-outline"></Button>
+            <Button type="default" icon="ios-crop"></Button>
+            <Button type="default" icon="ios-color-filter-outline"></Button>
         </Button-group>
         <br><br>
         <h4>圆角</h4>
@@ -113,38 +133,38 @@
             <Button type="primary" icon="ios-skipforward"></Button>
         </Button-group>
         <Button-group shape="circle">
-            <Button type="ghost" icon="ios-color-wand-outline"></Button>
-            <Button type="ghost" icon="ios-sunny-outline"></Button>
-            <Button type="ghost" icon="ios-crop"></Button>
-            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+            <Button type="default" icon="ios-color-wand-outline"></Button>
+            <Button type="default" icon="ios-sunny-outline"></Button>
+            <Button type="default" icon="ios-crop"></Button>
+            <Button type="default" icon="ios-color-filter-outline"></Button>
         </Button-group>
         <br><br>
         <h4>尺寸</h4>
         <br><br>
         <Button-group size="large">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
+            <Button type="default">Large</Button>
+            <Button type="default">Large</Button>
         </Button-group>
         <Button-group>
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
+            <Button type="default">Default</Button>
+            <Button type="default">Default</Button>
         </Button-group>
         <Button-group size="small">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
+            <Button type="default">Small</Button>
+            <Button type="default">Small</Button>
         </Button-group>
         <br><br>
         <Button-group size="large" shape="circle">
-            <Button type="ghost">Large</Button>
-            <Button type="ghost">Large</Button>
+            <Button type="default">Large</Button>
+            <Button type="default">Large</Button>
         </Button-group>
         <Button-group shape="circle">
-            <Button type="ghost">Default</Button>
-            <Button type="ghost">Default</Button>
+            <Button type="default">Default</Button>
+            <Button type="default">Default</Button>
         </Button-group>
         <Button-group size="small" shape="circle">
-            <Button type="ghost">Small</Button>
-            <Button type="ghost">Small</Button>
+            <Button type="default">Small</Button>
+            <Button type="default">Small</Button>
         </Button-group>
     </div>
 </template>
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index a0da17e..81228bc 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -35,8 +35,9 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
-                }
+                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
+                },
+                default: 'default'
             },
             shape: {
                 validator (value) {
@@ -68,6 +69,10 @@
                 type: Boolean,
                 default: false
             },
+            ghost: {
+                type: Boolean,
+                default: false
+            }
         },
         data () {
             return {
@@ -84,7 +89,8 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
+                        [`${prefixCls}-ghost`]: this.ghost
                     }
                 ];
             }
diff --git a/src/styles/components/button.less b/src/styles/components/button.less
index dd3c97c..5511825 100644
--- a/src/styles/components/button.less
+++ b/src/styles/components/button.less
@@ -60,9 +60,9 @@
         }
     }
 
-    &-ghost {
-        .btn-ghost;
-    }
+    //&-ghost {
+    //    .btn-ghost;
+    //}
 
     &-dashed{
         .btn-dashed;
@@ -125,4 +125,56 @@
     &-group-vertical {
         .btn-group-vertical(@btn-prefix-cls);
     }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
 }
diff --git a/src/styles/custom.less b/src/styles/custom.less
index eff7238..c5417d3 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -81,14 +81,14 @@
 @btn-disable-border     : @border-color-base;
 
 @btn-default-color      : @text-color;
-@btn-default-bg         : @background-color-base;
+@btn-default-bg         : #fff;
 @btn-default-border     : @border-color-base;
 
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
 
 @btn-ghost-color        : @text-color;
-@btn-ghost-bg           : transparent;
+@btn-ghost-bg           : #fff;
 @btn-ghost-border       : @border-color-base;
 
 @btn-circle-size        : 32px;
diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less
index 04bbdd8..980fc79 100644
--- a/src/styles/mixins/button.less
+++ b/src/styles/mixins/button.less
@@ -246,7 +246,7 @@
 
 // Text
 .btn-text() {
-    .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);
+    .button-variant(@btn-ghost-color, transparent, transparent);
 
     // for disabled
     &.disabled,
--
libgit2 0.21.4