feat: Button danger-link

components/button/button.tsx

@@ -65,14 +65,14 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   );
 }
 
-const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
+const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link', 'danger-link');
-export type ButtonType = (typeof ButtonTypes)[number];
+export type ButtonType = typeof ButtonTypes[number];
 const ButtonShapes = tuple('circle', 'circle-outline', 'round');
-export type ButtonShape = (typeof ButtonShapes)[number];
+export type ButtonShape = typeof ButtonShapes[number];
 const ButtonSizes = tuple('large', 'default', 'small');
-export type ButtonSize = (typeof ButtonSizes)[number];
+export type ButtonSize = typeof ButtonSizes[number];
 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
-export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number];
+export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
 
 export interface BaseButtonProps {
   type?: ButtonType;
@@ -296,7 +296,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
       </button>
     );
 
-    if (type === 'link') {
+    if (type === 'link' || type === 'danger-link') {
       return buttonNode;
     }
 

components/button/demo/basic.md

@@ -23,6 +23,7 @@ ReactDOM.render(
     <Button type="dashed">Dashed</Button>
     <Button type="danger">Danger</Button>
     <Button type="link">Link</Button>
+    <Button type="danger-link">Link</Button>
   </div>,
   mountNode,
 );

components/button/demo/block.md

@@ -31,6 +31,9 @@ ReactDOM.render(
     <Button type="link" block>
       Link
     </Button>
+    <Button type="danger-link" block>
+      Danger Link
+    </Button>
   </div>,
   mountNode,
 );

components/button/demo/disabled.md

@@ -35,6 +35,10 @@ ReactDOM.render(
     <Button type="link" disabled>
       Link(disabled)
     </Button>
+    <Button type="danger-link">Danger Link</Button>
+    <Button type="danger-link" disabled>
+      Danger Link(disabled)
+    </Button>
     <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
       <Button ghost>Ghost</Button>
       <Button ghost disabled>

components/button/demo/ghost.md

@@ -28,6 +28,9 @@ ReactDOM.render(
     <Button type="link" ghost>
       link
     </Button>
+    <Button type="danger-link" ghost>
+      Danger Link
+    </Button>
   </div>,
   mountNode,
 );

components/button/demo/size.md

@@ -54,6 +54,9 @@ class ButtonSize extends React.Component {
         <Button type="link" size={size}>
           Link
         </Button>
+        <Button type="danger-link" size={size}>
+          Danger Link
+        </Button>
         <br />
         <Button type="primary" icon={<Download />} size={size} />
         <Button type="primary" shape="circle" icon={<Download />} size={size} />
@@ -64,17 +67,6 @@ class ButtonSize extends React.Component {
         <Button type="primary" icon={<Download />} size={size}>
           Download
         </Button>
-        <br />
-        <Button.Group size={size}>
-          <Button type="primary">
-            <Left />
-            Backward
-          </Button>
-          <Button type="primary">
-            Forward
-            <Right />
-          </Button>
-        </Button.Group>
       </div>
     );
   }

components/button/style/index.less

@@ -71,6 +71,10 @@
     .btn-link;
   }
 
+  &-danger-link {
+    .btn-danger-link;
+  }
+
   &-icon-only {
     .btn-square(@btn-prefix-cls);
   }
@@ -175,6 +179,12 @@
     color: @component-background;
   }
 
+  &-background-ghost&-danger-link {
+    .button-variant-ghost(@error-color; transparent);
+
+    color: @component-background;
+  }
+
   &-two-chinese-chars::first-letter {
     letter-spacing: 0.34em;
   }

components/button/style/mixin.less

@@ -236,6 +236,19 @@
   }
   .button-disabled(@disabled-color; transparent; transparent);
 }
+// danger link button style
+.btn-danger-link() {
+  .button-variant-other(@error-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus {
+    .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
+  }
+  &:active {
+    .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
   .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size);