feat(module:button): support link type (#3503)

* feat(module:button): support link type

close #3479

* docs(module:button): fix demo

* feat(module:core): wave directive support disable

components/button/demo/basic.ts

@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="default">Default</button>
     <button nz-button nzType="dashed">Dashed</button>
     <button nz-button nzType="danger">Danger</button>
+    <button nz-button nzType="link">Link</button>
   `,
   styles: [
     `

components/button/demo/block.ts

@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="default" nzBlock>Default</button>
     <button nz-button nzType="dashed" nzBlock>Dashed</button>
     <button nz-button nzType="danger" nzBlock>Danger</button>
+    <button nz-button nzType="link" nzBlock>Link</button>
   `,
   styles: [
     `

components/button/demo/disabled.ts

@@ -11,6 +11,9 @@ import { Component } from '@angular/core';
     <br />
     <button nz-button nzType="dashed">Dashed</button>
     <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
+    <br />
+    <button nz-button nzType="link">Link</button>
+    <button nz-button nzType="link" disabled>Link(disabled)</button>
     <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
       <button nz-button nzGhost>Ghost</button>
       <button nz-button nzGhost disabled>Ghost(disabled)</button>

components/button/demo/ghost.ts

@@ -8,6 +8,7 @@ import { Component } from '@angular/core';
       <button nz-button nzType="default" nzGhost>Default</button>
       <button nz-button nzType="dashed" nzGhost>Dashed</button>
       <button nz-button nzType="danger" nzGhost>Danger</button>
+      <button nz-button nzType="link" nzGhost>Link</button>
     </div>
   `,
   styles: [

components/button/demo/size.ts

@@ -14,6 +14,7 @@ import { Component } from '@angular/core';
     <button nz-button [nzSize]="size" nzType="default">Default</button>
     <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
     <button nz-button [nzSize]="size" nzType="danger">Danger</button>
+    <button nz-button [nzSize]="size" nzType="link">Link</button>
     <br />
     <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon type="download"></i></button>
     <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon type="download"></i>Download</button>

components/button/doc/index.en-US.md

@@ -30,5 +30,5 @@ To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`di
 | `[nzLoading]` | set the loading status of button | `boolean` | `false` |
 | `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'｜'round'` | - |
 | `[nzSize]` | can be set to `small` `large` or omitted | `'large'｜'small'｜'default'` | `'default'` |
-| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'｜'dashed'｜'danger'｜'default'` | `'default'` |
+| `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'｜'dashed'｜'danger'｜'default'｜'link'` | `'default'` |
 | `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |

components/button/doc/index.zh-CN.md

@@ -34,5 +34,5 @@ import { NzButtonModule } from 'ng-zorro-antd';
 | `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
 | `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'｜'round'` | - |
 | `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'｜'small'｜'default'` | `'default'` |
-| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'｜'dashed'｜'danger'｜'default'` | `'default'` |
+| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'｜'dashed'｜'danger'｜'default'｜'link'` | `'default'` |
 | `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |

components/button/nz-button.component.ts

@@ -43,7 +43,7 @@ import {
 } from 'ng-zorro-antd/core';
 import { NzIconDirective } from 'ng-zorro-antd/icon';
 
-export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default';
+export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default' | 'link';
 export type NzButtonShape = 'circle' | 'round' | null;
 
 @Component({

components/button/nz-button.spec.ts

@@ -40,6 +40,7 @@ describe('button', () => {
       expect(buttons[1].nativeElement.classList.contains('ant-btn-default')).toBe(true);
       expect(buttons[2].nativeElement.classList.contains('ant-btn-dashed')).toBe(true);
       expect(buttons[3].nativeElement.classList.contains('ant-btn-danger')).toBe(true);
+      expect(buttons[4].nativeElement.classList.contains('ant-btn-link')).toBe(true);
     });
   });
 
@@ -115,10 +116,7 @@ describe('button', () => {
 
     it('should have correct style', () => {
       fixture.detectChanges();
-      expect(buttons[0].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
-      expect(buttons[1].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
-      expect(buttons[2].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
-      expect(buttons[3].nativeElement.classList.contains('ant-btn-background-ghost')).toBe(true);
+      expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-background-ghost'))).toBe(true);
     });
   });
 
@@ -299,11 +297,9 @@ describe('button', () => {
       expect(buttons[1].nativeElement.classList.contains('ant-btn-default')).toBe(true);
       expect(buttons[2].nativeElement.classList.contains('ant-btn-dashed')).toBe(true);
       expect(buttons[3].nativeElement.classList.contains('ant-btn-danger')).toBe(true);
+      expect(buttons[4].nativeElement.classList.contains('ant-btn-link')).toBe(true);
 
-      expect(buttons[0].nativeElement.classList.contains('ant-btn-block')).toBe(true);
-      expect(buttons[1].nativeElement.classList.contains('ant-btn-block')).toBe(true);
-      expect(buttons[2].nativeElement.classList.contains('ant-btn-block')).toBe(true);
-      expect(buttons[3].nativeElement.classList.contains('ant-btn-block')).toBe(true);
+      expect(buttons.every(button => button.nativeElement.classList.contains('ant-btn-block'))).toBe(true);
     });
   });
 

components/button/style/index.less

@@ -69,6 +69,10 @@
     .btn-danger;
   }
 
+  &-link {
+    .btn-link;
+  }
+
   &-round {
     .btn-round(@btn-prefix-cls);
   }
@@ -90,8 +94,8 @@
     border-radius: inherit;
     opacity: 0.35;
     transition: opacity 0.2s;
-    pointer-events: none;
     content: '';
+    pointer-events: none;
   }
 
   .@{iconfont-css-prefix} {
@@ -107,14 +111,17 @@
     }
   }
 
+  &&-loading {
+    position: relative;
+    pointer-events: none;
+  }
+
   &&-loading::before {
     display: block;
   }
 
   &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
-    position: relative;
     padding-left: 29px;
-    pointer-events: none;
     .@{iconfont-css-prefix}:not(:last-child) {
       margin-left: -14px;
     }
@@ -162,6 +169,12 @@
     .button-variant-ghost(@btn-danger-color);
   }
 
+  &-background-ghost&-link {
+    .button-variant-ghost(@link-color; transparent);
+
+    color: @component-background;
+  }
+
   &-two-chinese-chars::first-letter {
     letter-spacing: 0.34em;
   }
@@ -189,4 +202,4 @@ a.@{btn-prefix-cls} {
   &-sm {
     line-height: @btn-height-sm - 2px;
   }
-}
+}

components/button/style/mixin.less

@@ -7,7 +7,7 @@
   border-radius: @border-radius;
 }
 
-.button-disabled() {
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
   &-disabled,
   &.disabled,
   &[disabled] {
@@ -16,7 +16,8 @@
     &:focus,
     &:active,
     &.active {
-      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      .button-color(@color; @background; @border);
+
       text-shadow: none;
       box-shadow: none;
     }
@@ -25,6 +26,7 @@
 
 .button-variant-primary(@color; @background) {
   .button-color(@color; @background; @background);
+
   text-shadow: @btn-text-shadow;
   box-shadow: @btn-primary-shadow;
 
@@ -84,16 +86,26 @@
   }
   .button-disabled();
 }
-.button-variant-ghost(@color) {
-  .button-color(@color; transparent; @color);
+.button-variant-ghost(@color; @border: @color) {
+  .button-color(@color; transparent; @border);
   text-shadow: none;
   &:hover,
   &:focus {
-    .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    }
   }
   &:active,
   &.active {
-    .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    }
   }
   .button-disabled();
 }
@@ -220,6 +232,17 @@
 .btn-danger() {
   .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 }
+// link button style
+.btn-link() {
+  .button-variant-other(@link-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: 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 + 2px; @btn-circle-size);
@@ -247,7 +270,7 @@
     .button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
   }
 }
-// Horizontal button groups styl
+// Horizontal button groups style
 // --------------------------------------------------
 .btn-group(@btnClassName: btn) {
   .button-group-base(@btnClassName);
@@ -322,4 +345,4 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-}
+}

components/core/wave/nz-wave-renderer.ts

@@ -14,16 +14,13 @@ export class NzWaveRenderer {
   private styleForPseudo: HTMLStyleElement | null;
   private extraNode: HTMLDivElement | null;
   private lastTime = 0;
-
+  private platform = new Platform();
   get waveAttributeName(): string {
     return this.insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
   }
 
   constructor(private triggerElement: HTMLElement, private ngZone: NgZone, private insertExtraNode: boolean) {
-    const platform = new Platform();
-    if (platform.isBrowser) {
-      this.bindTriggerEvent();
-    }
+    this.bindTriggerEvent();
   }
 
   onClick = (event: MouseEvent) => {
@@ -40,11 +37,13 @@ export class NzWaveRenderer {
   };
 
   bindTriggerEvent(): void {
-    this.ngZone.runOutsideAngular(() => {
-      if (this.triggerElement) {
-        this.triggerElement.addEventListener('click', this.onClick, true);
-      }
-    });
+    if (this.platform.isBrowser) {
+      this.ngZone.runOutsideAngular(() => {
+        if (this.triggerElement) {
+          this.triggerElement.addEventListener('click', this.onClick, true);
+        }
+      });
+    }
   }
 
   removeTriggerEvent(): void {

components/core/wave/nz-wave.directive.ts

@@ -47,6 +47,14 @@ export class NzWaveDirective implements OnInit, OnDestroy {
   private waveRenderer: NzWaveRenderer;
   private waveDisabled: boolean = false;
 
+  get disabled(): boolean {
+    return this.waveDisabled;
+  }
+
+  get rendererRef(): NzWaveRenderer {
+    return this.waveRenderer;
+  }
+
   constructor(
     private ngZone: NgZone,
     private elementRef: ElementRef,
@@ -76,4 +84,21 @@ export class NzWaveDirective implements OnInit, OnDestroy {
       this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode);
     }
   }
+
+  disable(): void {
+    this.waveDisabled = true;
+    if (this.waveRenderer) {
+      this.waveRenderer.removeTriggerEvent();
+      this.waveRenderer.removeStyleAndExtraNode();
+    }
+  }
+
+  enable(): void {
+    this.waveDisabled = false;
+    if (this.waveRenderer) {
+      this.waveRenderer.bindTriggerEvent();
+    } else {
+      this.renderWaveIfEnabled();
+    }
+  }
 }