From 4ed51fd8597152b9058e4348cb2cb7279587dc44 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Sat, 15 Feb 2020 16:14:39 +0800
Subject: [PATCH] fix(GoodsActionButton): fix style error (#2762)

---
 packages/button/index.less              | 24 ++++++-------
 packages/common/style/var.less          |  1 +
 packages/goods-action-button/index.less | 46 ++++++++++++-------------
 packages/goods-action-button/index.ts   |  5 ---
 packages/goods-action-button/index.wxml |  4 +--
 5 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/packages/button/index.less b/packages/button/index.less
index 2d8fb29b..356b203e 100644
--- a/packages/button/index.less
+++ b/packages/button/index.less
@@ -8,13 +8,13 @@
   justify-content: center;
   box-sizing: border-box;
   padding: 0;
-  line-height: @button-line-height;
   text-align: center;
   vertical-align: middle;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 
   .theme(height, '@button-default-height');
+  .theme(line-height, '@button-line-height');
   .theme(font-size, '@button-default-font-size');
   .theme(transition, 'opacity @animation-duration-fast');
   .theme(border-radius, '@button-border-radius');
@@ -50,36 +50,36 @@
 
   &--default {
     .theme(color, '@button-default-color');
-    .theme(background-color, '@button-default-background-color');
-    .theme(border, '1px solid @button-default-border-color');
+    .theme(background, '@button-default-background-color');
+    .theme(border, '@button-border-width solid @button-default-border-color');
   }
 
   &--primary {
     .theme(color, '@button-primary-color');
-    .theme(background-color, '@button-primary-background-color');
-    .theme(border, '1px solid @button-primary-border-color');
+    .theme(background, '@button-primary-background-color');
+    .theme(border, '@button-border-width solid @button-primary-border-color');
   }
 
   &--info {
     .theme(color, '@button-info-color');
-    .theme(background-color, '@button-info-background-color');
-    .theme(border, '1px solid @button-info-border-color');
+    .theme(background, '@button-info-background-color');
+    .theme(border, '@button-border-width solid @button-info-border-color');
   }
 
   &--danger {
     .theme(color, '@button-danger-color');
-    .theme(background-color, '@button-danger-background-color');
-    .theme(border, '1px solid @button-danger-border-color');
+    .theme(background, '@button-danger-background-color');
+    .theme(border, '@button-border-width solid @button-danger-border-color');
   }
 
   &--warning {
     .theme(color, '@button-warning-color');
-    .theme(background-color, '@button-warning-background-color');
-    .theme(border, '1px solid @button-warning-border-color');
+    .theme(background, '@button-warning-background-color');
+    .theme(border, '@button-border-width solid @button-warning-border-color');
   }
 
   &--plain {
-    .theme(background-color, '@button-plain-background-color');
+    .theme(background, '@button-plain-background-color');
 
     &.van-button--primary {
       .theme(color, '@button-primary-background-color');
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index f46d0bc3..0c8b9345 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -101,6 +101,7 @@
 @button-warning-background-color: @orange;
 @button-warning-border-color: @orange;
 @button-line-height: 20px;
+@button-border-width: 1px;
 @button-border-radius: @border-radius-sm;
 @button-round-border-radius: @border-radius-max;
 @button-plain-background-color: @white;
diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less
index a4de88ca..a65d8d2e 100644
--- a/packages/goods-action-button/index.less
+++ b/packages/goods-action-button/index.less
@@ -6,42 +6,40 @@
 }
 
 .van-goods-action-button {
-  .theme(height, '@goods-action-button-height') !important;
-  .theme(font-weight, '@font-weight-bold') !important;
-  .theme(line-height, '@goods-action-button-height') !important;
+  .theme(--button-warning-background-color, '@goods-action-button-warning-color');
+  .theme(--button-danger-background-color, '@goods-action-button-danger-color');
+  .theme(--button-default-height, '@goods-action-button-height');
+  .theme(--button-line-height, '@goods-action-button-height');
+  .theme(--button-plain-background-color, '@goods-action-button-plain-color');
+
+  display: block;
+
+  --button-border-width: 0;
 
   &--first {
-    display: block !important;
     margin-left: 5px;
-    .theme(border-top-left-radius, '@goods-action-button-border-radius') !important;
-    .theme(border-bottom-left-radius, '@goods-action-button-border-radius') !important;
+
+    .theme(
+      --button-border-radius,
+      '@goods-action-button-border-radius 0 0 @goods-action-button-border-radius'
+    );
   }
 
   &--last {
-    display: block !important;
     margin-right: 5px;
-    .theme(border-top-right-radius, '@goods-action-button-border-radius') !important;
-    .theme(border-bottom-right-radius, '@goods-action-button-border-radius') !important;
-  }
-
-  &--warning {
-    .theme(background, '@goods-action-button-warning-color');
-  }
-
-  &--danger {
-    .theme(background, '@goods-action-button-danger-color');
-  }
-
-  &--ordinary {
-    border: none !important;
+    .theme(
+      --button-border-radius,
+      '0 @goods-action-button-border-radius @goods-action-button-border-radius 0'
+    );
   }
 
   &--plain {
-    .theme(background, '@goods-action-button-plain-color');
+    --button-border-width: @button-border-width;
   }
 
-  &--no-right-border {
-    border-right-width: 0px !important;
+  &__inner {
+    width: 100%;
+    .theme(font-weight, '@font-weight-bold') !important;
   }
 
   @media (max-width: 321px) {
diff --git a/packages/goods-action-button/index.ts b/packages/goods-action-button/index.ts
index 67606ebd..5b2d963c 100644
--- a/packages/goods-action-button/index.ts
+++ b/packages/goods-action-button/index.ts
@@ -37,13 +37,8 @@ VantComponent({
       const { children = [] } = this.parent;
       const { length } = children;
       const index = children.indexOf(this);
-      let rightBorderLess = false;
-      if (length > 1) {
-        rightBorderLess = index !== length - 1;
-      }
       this.setData({
         isFirst: index === 0,
-        rightBorderLess,
         isLast: index === length - 1
       });
     }
diff --git a/packages/goods-action-button/index.wxml b/packages/goods-action-button/index.wxml
index 392b96d9..69ed5aa3 100644
--- a/packages/goods-action-button/index.wxml
+++ b/packages/goods-action-button/index.wxml
@@ -1,6 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 <van-button
-  square
   id="{{ id }}"
   lang="{{ lang }}"
   type="{{ type }}"
@@ -9,7 +8,8 @@
   loading="{{ loading }}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"
-  custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain : plain, ordinary: !plain }])}} {{ rightBorderLess ?'van-goods-action-button--no-right-border': ''}}"
+  class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain: plain }])}}"
+  custom-class="van-goods-action-button__inner"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"