From 9f8eb99807dd5649c78538530714a180d9d1a176 Mon Sep 17 00:00:00 2001
From: Teng YANG <morenyang88@gmail.com>
Date: Mon, 1 Jun 2020 13:33:29 +0800
Subject: [PATCH] fix: #24614 text button style inconsistent in `danger`
 (#24622)

* fix: update button style when type="text" of danger

* update wording in danger button demo

* format code
---
 .../__tests__/__snapshots__/demo.test.ts.snap | 52 ++++++++++++++-----
 components/button/demo/danger.md              |  5 +-
 components/button/demo/disabled.md            | 23 +++++---
 components/button/style/index.less            |  6 ++-
 components/button/style/mixin.less            | 23 ++++++++
 5 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 83333b2081..b3b96ffd83 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -109,12 +109,20 @@ Array [
       Dashed
     </span>
   </button>,
+  <button
+    class="ant-btn ant-btn-text ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Text
+    </span>
+  </button>,
   <button
     class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
   >
     <span>
-      link
+      Link
     </span>
   </button>,
 ]
@@ -176,6 +184,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     </span>
   </button>
   <br />
+  <button
+    class="ant-btn ant-btn-text"
+    type="button"
+  >
+    <span>
+      Text
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-text"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Text(disabled)
+    </span>
+  </button>
+  <br />
   <button
     class="ant-btn ant-btn-link"
     type="button"
@@ -195,56 +221,56 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-text"
+    class="ant-btn ant-btn-dangerous"
     type="button"
   >
     <span>
-      Text
+      Danger Default
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-text"
+    class="ant-btn ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Text(disabled)
+      Danger Default(disabled)
     </span>
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-link ant-btn-dangerous"
+    class="ant-btn ant-btn-text ant-btn-dangerous"
     type="button"
   >
     <span>
-      Danger Link
+      Danger Text
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-link ant-btn-dangerous"
+    class="ant-btn ant-btn-text ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Danger Link(disabled)
+      Danger Text(disabled)
     </span>
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
   >
     <span>
-      Danger Default
+      Danger Link
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-link ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Danger Default(disabled)
+      Danger Link(disabled)
     </span>
   </button>
   <div
diff --git a/components/button/demo/danger.md b/components/button/demo/danger.md
index aeaa8ca43d..dd7167e6a1 100644
--- a/components/button/demo/danger.md
+++ b/components/button/demo/danger.md
@@ -25,8 +25,11 @@ ReactDOM.render(
     <Button type="dashed" danger>
       Dashed
     </Button>
+    <Button type="text" danger>
+      Text
+    </Button>
     <Button type="link" danger>
-      link
+      Link
     </Button>
   </>,
   mountNode,
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index 9242859f67..150511d443 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -31,14 +31,26 @@ ReactDOM.render(
       Dashed(disabled)
     </Button>
     <br />
+    <Button type="text">Text</Button>
+    <Button type="text" disabled>
+      Text(disabled)
+    </Button>
+    <br />
     <Button type="link">Link</Button>
     <Button type="link" disabled>
       Link(disabled)
     </Button>
     <br />
-    <Button type="text">Text</Button>
-    <Button type="text" disabled>
-      Text(disabled)
+    <Button danger>Danger Default</Button>
+    <Button danger disabled>
+      Danger Default(disabled)
+    </Button>
+    <br />
+    <Button danger type="text">
+      Danger Text
+    </Button>
+    <Button danger type="text" disabled>
+      Danger Text(disabled)
     </Button>
     <br />
     <Button type="link" danger>
@@ -47,11 +59,6 @@ ReactDOM.render(
     <Button type="link" danger disabled>
       Danger Link(disabled)
     </Button>
-    <br />
-    <Button danger>Danger Default</Button>
-    <Button danger disabled>
-      Danger Default(disabled)
-    </Button>
     <div className="site-button-ghost-wrapper">
       <Button ghost>Ghost</Button>
       <Button ghost disabled>
diff --git a/components/button/style/index.less b/components/button/style/index.less
index 5b92a3490f..3921840521 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -22,7 +22,7 @@
   line-height: @line-height-base;
   .btn;
   .btn-default;
-  
+
   // Fix loading button animation
   // https://github.com/ant-design/ant-design/issues/24323
   > span {
@@ -95,6 +95,10 @@
     .btn-danger-link;
   }
 
+  &-dangerous&-text {
+    .btn-danger-text;
+  }
+
   &-icon-only {
     .btn-square(@btn-prefix-cls);
     vertical-align: -0.5px;
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index 7ddc6fc09a..cbf8b5571b 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -375,6 +375,29 @@
 
   .button-disabled(@disabled-color; transparent; transparent);
 }
+.btn-danger-text() {
+  .button-variant-other(@error-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus {
+    & when (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
+    }
+    & when not (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
+    }
+  }
+
+  &:active {
+    & when (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
+    & when not (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
   .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);