From c3d8db545f2e7706baec841abd309b33c31962ff Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 18 May 2020 18:48:23 +0800
Subject: [PATCH] fix(button): style fixes & code cleaning

---
 src/Button/src/Button.vue            | 59 ++++++++--------------------
 src/Button/src/styles/Button.cssr.js |  1 +
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/Button/src/Button.vue b/src/Button/src/Button.vue
index c44e8c1ce..37d0444d6 100644
--- a/src/Button/src/Button.vue
+++ b/src/Button/src/Button.vue
@@ -29,9 +29,19 @@
     @keyup.enter="handleKeyUpEnter"
     @keydown.enter="handleKeyDownEnter"
   >
+    <div
+      v-if="!circle && $scopedSlots.default && iconOnRight"
+      class="n-button__content"
+      :style="{
+        transition: hollowOutColorTransitionDisabled ? 'none' : null,
+        color: hollowText ? ascendantBackgroundColor : null
+      }"
+    >
+      <slot />
+    </div>
     <n-fade-in-height-expand-transition width>
       <div
-        v-if="(hasIcon || loading) && !iconOnRight"
+        v-if="(hasIcon || loading)"
         class="n-button__icon"
         :class="{ 'n-button__icon--slot': $scopedSlots.icon }"
       >
@@ -65,7 +75,7 @@
       </div>
     </n-fade-in-height-expand-transition>
     <div
-      v-if="!circle && $scopedSlots.default"
+      v-if="!circle && $scopedSlots.default && !iconOnRight"
       class="n-button__content"
       :style="{
         transition: hollowOutColorTransitionDisabled ? 'none' : null,
@@ -74,42 +84,6 @@
     >
       <slot />
     </div>
-    <n-fade-in-height-expand-transition width>
-      <div
-        v-if="(loading || hasIcon) && iconOnRight"
-        class="n-button__icon"
-        :class="{
-          'n-button__icon--slot': $scopedSlots.icon
-        }"
-      >
-        <n-icon-switch-transition>
-          <n-base-loading
-            v-if="loading"
-            key="loading"
-            :theme="syntheticTheme"
-            :style="{
-              transition: hollowOutColorTransitionDisabled ? 'none' : null
-            }"
-            :stroke="hollowText ? ascendantBackgroundColor : null"
-            :stroke-width="24"
-          />
-          <n-icon
-            v-else
-            key="icon"
-            class="n-icon-slot"
-            :style="{
-              transition: hollowOutColorTransitionDisabled ? 'none' : null,
-              fill: hollowText ? ascendantBackgroundColor : null,
-              stroke: hollowText ? ascendantBackgroundColor : null
-            }"
-          >
-            <slot
-              name="icon"
-            />
-          </n-icon>
-        </n-icon-switch-transition>
-      </div>
-    </n-fade-in-height-expand-transition>
     <div class="n-button__border-mask" />
   </button>
 </template>
@@ -164,7 +138,7 @@ function mountColorStyle (color, colorHash) {
 function unmountColorStyle (colorHash) {
   colorStyle.unmount({
     target: 'n-button-' + colorHash,
-    delay: 1000
+    delay: 3000
   })
 }
 
@@ -237,7 +211,6 @@ export default {
         return [
           'default',
           'primary',
-          'link',
           'info',
           'success',
           'warning',
@@ -252,8 +225,8 @@ export default {
     },
     iconPlacement: {
       default: 'left',
-      validator (iconPlacement) {
-        return ['left', 'right'].includes(iconPlacement)
+      validator (value) {
+        return ['left', 'right'].includes(value)
       }
     }
   },
@@ -348,7 +321,7 @@ export default {
           this.rippleTimer = null
           this.rippling = false
           this.$nextTick().then(() => {
-            this.$el.getBoundingClientRect()
+            void this.$el.offsetHeight
             this.rippling = true
             this.rippleTimer = window.setTimeout(() => {
               this.rippling = false
diff --git a/src/Button/src/styles/Button.cssr.js b/src/Button/src/styles/Button.cssr.js
index 14fee1356..c893c3a3c 100644
--- a/src/Button/src/styles/Button.cssr.js
+++ b/src/Button/src/styles/Button.cssr.js
@@ -62,6 +62,7 @@ export function createColorStyle () {
           cM(`${digest}-colored`, createBasicColorProps(
             pallete.textColor, pallete.color, pallete.borderColor || pallete.color
           ), [
+            createIconColorStyle(pallete.textColor),
             cNotM('disabled', [
               cM(
                 'enter-pressed',