feat(module:button): support text type

NG-ZORRO · Jul 14, 2020 · 3f5d10b · 3f5d10b
1 parent 5337652
commit 3f5d10b
Show file tree

Hide file tree

Showing 14 changed files with 169 additions and 105 deletions.
diff --git a/components/back-top/back-top.component.ts b/components/back-top/back-top.component.ts
@@ -40,7 +40,9 @@ const NZ_CONFIG_COMPONENT_NAME = 'backTop';
     <div class="ant-back-top" (click)="clickBackTop()" @fadeMotion *ngIf="visible">
       <ng-template #defaultContent>
         <div class="ant-back-top-content">
-          <div class="ant-back-top-icon"></div>
+          <div class="ant-back-top-icon">
+            <i nz-icon nzType="vertical-align-top"></i>
+          </div>
         </div>
       </ng-template>
       <ng-template [ngTemplateOutlet]="nzTemplate || defaultContent"></ng-template>

diff --git a/components/back-top/back-top.module.ts b/components/back-top/back-top.module.ts
@@ -5,12 +5,13 @@
 import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzBackTopComponent } from './back-top.component';
 
 @NgModule({
   declarations: [NzBackTopComponent],
   exports: [NzBackTopComponent],
-  imports: [CommonModule, PlatformModule]
+  imports: [CommonModule, PlatformModule, NzIconModule]
 })
 export class NzBackTopModule {}
diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -26,7 +26,7 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
 import { Subject } from 'rxjs';
 import { filter, startWith, takeUntil } from 'rxjs/operators';
 
-export type NzButtonType = 'primary' | 'default' | 'dashed' | 'danger' | 'link' | null;
+export type NzButtonType = 'primary' | 'default' | 'dashed' | 'danger' | 'link' | 'text' | null;
 export type NzButtonShape = 'circle' | 'round' | null;
 export type NzButtonSize = 'large' | 'default' | 'small';
 
@@ -47,6 +47,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'button';
     '[class.ant-btn-primary]': `nzType === 'primary'`,
     '[class.ant-btn-dashed]': `nzType === 'dashed'`,
     '[class.ant-btn-link]': `nzType === 'link'`,
+    '[class.ant-btn-text]': `nzType === 'text'`,
     '[class.ant-btn-danger]': `nzType === 'danger'`,
     '[class.ant-btn-circle]': `nzShape === 'circle'`,
     '[class.ant-btn-round]': `nzShape === 'round'`,

diff --git a/components/button/demo/basic.ts b/components/button/demo/basic.ts
@@ -3,10 +3,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-button-basic',
   template: `
-    <button nz-button nzType="primary">Primary</button>
-    <button nz-button nzType="default">Default</button>
-    <button nz-button nzType="dashed">Dashed</button>
-    <a nz-button nzType="link">Link</a>
+    <button nz-button nzType="primary">Primary Button</button>
+    <button nz-button nzType="default">Default Button</button>
+    <button nz-button nzType="dashed">Dashed Button</button>
+    <button nz-button nzType="text">Text Button</button>
+    <a nz-button nzType="link">Link Button</a>
   `,
   styles: [
     `

diff --git a/components/button/demo/block.ts b/components/button/demo/block.ts
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="primary" nzBlock>Primary</button>
     <button nz-button nzType="default" nzBlock>Default</button>
     <button nz-button nzType="dashed" nzBlock>Dashed</button>
+    <button nz-button nzType="text" nzBlock>Text</button>
     <a nz-button nzType="link" nzBlock>Link</a>
   `,
   styles: [

diff --git a/components/button/demo/danger.ts b/components/button/demo/danger.ts
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="primary" nzDanger>Primary</button>
     <button nz-button nzType="default" nzDanger>Default</button>
     <button nz-button nzType="dashed" nzDanger>Dashed</button>
+    <button nz-button nzType="text" nzDanger>Text</button>
     <a nz-button nzType="link" nzDanger>Link</a>
   `,
   styles: [

diff --git a/components/button/demo/disabled.ts b/components/button/demo/disabled.ts
@@ -12,9 +12,15 @@ import { Component } from '@angular/core';
     <button nz-button nzType="dashed">Dashed</button>
     <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
     <br />
+    <a nz-button nzType="text">Text</a>
+    <a nz-button nzType="text" disabled>Text(disabled)</a>
+    <br />
     <a nz-button nzType="link">Link</a>
     <a nz-button nzType="link" disabled>Link(disabled)</a>
     <br />
+    <a nz-button nzType="text" nzDanger>Danger Text</a>
+    <a nz-button nzType="text" disabled nzDanger>Danger Text(disabled)</a>
+    <br />
     <a nz-button nzType="link" nzDanger>Danger Link</a>
     <a nz-button nzType="link" disabled nzDanger>Danger Link(disabled)</a>
     <br />

diff --git a/components/button/doc/index.en-US.md b/components/button/doc/index.en-US.md
@@ -15,6 +15,7 @@ In Ant Design we provide 4 types of button.
 - Primary button: indicate the main action, one primary button at most in one section.
 - Default button: indicate a series of actions without priority.
 - Dashed button: used for adding action commonly.
+- Text button: used for the most secondary action.
 - Link button: used for external links.
 
 And 4 other properties additionally.
@@ -38,11 +39,12 @@ To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`di
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
+| `[disabled]` | prevents user from interacting with the button | `boolean` | `false` |
 | `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` |
 | `[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` `link` or omitted (meaning `default`) | `'primary'\|'dashed'\|'link'` | - |
+| `[nzType]` | can be set to `primary` `dashed` `text` `link` or omitted (meaning `default`) | `'primary'\|'dashed'\|'link'\|'text'` | - |
 | `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |
 | `[nzDanger]` | set the danger status of button | boolean | `false` |  |
 

diff --git a/components/button/doc/index.zh-CN.md b/components/button/doc/index.zh-CN.md
@@ -15,6 +15,7 @@ subtitle: 按钮
 - 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
 - 默认按钮：用于没有主次之分的一组行动点。
 - 虚线按钮：常用于添加操作。
+- 文本按钮：用于最次级的行动点。
 - 链接按钮：用于次要或外链的行动点。
 
 以及四种状态属性与上面配合使用。
@@ -41,11 +42,12 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
 
 | 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
 | --- | --- | --- | --- | --- |
+| `[disabled]` | 禁止与button交互 | `boolean` | `false` |
 | `[nzGhost]` | 幽灵属性，使按钮背景透明 | `boolean` | `false` |
 | `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
 | `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'\|'round'` | - | |
 | `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'\|'small'\|'default'` | `'default'` | ✅ |
-| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `link` 或者不设 | `'primary'\|'dashed'\|'link'` | - |
+| `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `text` `link` 或者不设 | `'primary'\|'dashed'\|'link'\|'text'` | - |
 | `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |
 | `[nzDanger]` | 设置危险按钮 | boolean | `false` |  |
 

diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts
@@ -25,7 +25,7 @@ export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig {
 }
 
 @Directive({
-  selector: '[nz-wave],button[nz-button]:not([nzType="link"])',
+  selector: '[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',
   exportAs: 'nzWave'
 })
 export class NzWaveDirective implements OnInit, OnDestroy {

diff --git a/components/icon/icons.ts b/components/icon/icons.ts
@@ -41,7 +41,8 @@ import {
   StarFill,
   SwapRightOutline,
   UploadOutline,
-  UpOutline
+  UpOutline,
+  VerticalAlignTopOutline
 } from '@ant-design/icons-angular/icons';
 
 export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [
@@ -81,6 +82,7 @@ export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [
   SearchOutline,
   StarFill,
   UploadOutline,
+  VerticalAlignTopOutline,
   UpOutline,
   SwapRightOutline
 ];
diff --git a/scripts/site/_site/doc/app/footer/footer.component.ts b/scripts/site/_site/doc/app/footer/footer.component.ts
@@ -7,102 +7,65 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
       <section class="rc-footer-container">
         <section class="rc-footer-columns">
           <div app-footer-col [title]="language === 'zh' ? '相关资源' : 'Resources'">
-            <app-footer-item
-              title="NG-ZORRO-MOBILE"
-              link="http://ng.mobile.ant.design/"
-              description="Angular">
-            </app-footer-item>
-            <app-footer-item
-              title="Ant Design"
-              link="https://ant.design/docs/react/introduce-cn"
-              description="React">
-            </app-footer-item>
-            <app-footer-item
-              title="Ant Design"
-              link="http://vue.ant.design/"
-              description="Vue">
-            </app-footer-item>
-            <app-footer-item
-              title="Angular"
-              link="https://angular.io/">
-            </app-footer-item>
-            <app-footer-item
-              title="Angular CLI"
-              link="https://cli.angular.io/">
-            </app-footer-item>
+            <app-footer-item title="NG-ZORRO-MOBILE" link="http://ng.mobile.ant.design/" description="Angular"> </app-footer-item>
+            <app-footer-item title="Ant Design" link="https://ant.design/docs/react/introduce-cn" description="React"> </app-footer-item>
+            <app-footer-item title="Ant Design" link="http://vue.ant.design/" description="Vue"> </app-footer-item>
+            <app-footer-item title="Angular" link="https://angular.io/"> </app-footer-item>
+            <app-footer-item title="Angular CLI" link="https://cli.angular.io/"> </app-footer-item>
           </div>
           <div app-footer-col [title]="language === 'zh' ? '社区' : 'Community'">
-            <app-footer-item
-              icon="ant-design"
-              title="Awesome Ant Design"
-              link="https://github.com/websemantics/awesome-ant-design">
-            </app-footer-item>
-            <app-footer-item
-              icon="global"
-              title="Blog"
-              link="https://ng.ant.design/blog">
+            <app-footer-item icon="ant-design" title="Awesome Ant Design" link="https://github.com/websemantics/awesome-ant-design">
             </app-footer-item>
-            <app-footer-item
-              icon="twitter"
-              title="Twitter"
-              link="https://twitter.com/ng_zorro">
-            </app-footer-item>
-            <app-footer-item
-              *ngIf="language === 'zh'"
-              icon="zhihu"
-              title="知乎专栏"
-              link="https://zhuanlan.zhihu.com/100000">
-            </app-footer-item>
-            <app-footer-item
-              icon="medium"
-              title="Medium"
-              link="https://medium.com/ng-zorro">
+            <app-footer-item icon="global" title="Blog" link="https://ng.ant.design/blog"> </app-footer-item>
+            <app-footer-item icon="twitter" title="Twitter" link="https://twitter.com/ng_zorro"> </app-footer-item>
+            <app-footer-item *ngIf="language === 'zh'" icon="zhihu" title="知乎专栏" link="https://zhuanlan.zhihu.com/100000">
             </app-footer-item>
+            <app-footer-item icon="medium" title="Medium" link="https://medium.com/ng-zorro"> </app-footer-item>
           </div>
           <div app-footer-col [title]="language === 'zh' ? '帮助' : 'Help'">
-            <app-footer-item
-              icon="github"
-              title="GitHub"
-              link="https://github.com/NG-ZORRO/ng-zorro-antd">
-            </app-footer-item>
+            <app-footer-item icon="github" title="GitHub" link="https://github.com/NG-ZORRO/ng-zorro-antd"> </app-footer-item>
             <app-footer-item
               icon="history"
-              [title]="language === 'zh' ? '更新日志': 'Changelog'"
-              [link]="language === 'zh' ? 'http://ng.ant.design/docs/changelog/zh' : 'http://ng.ant.design/docs/changelog/en'">
+              [title]="language === 'zh' ? '更新日志' : 'Changelog'"
+              [link]="language === 'zh' ? 'http://ng.ant.design/docs/changelog/zh' : 'http://ng.ant.design/docs/changelog/en'"
+            >
             </app-footer-item>
             <app-footer-item
               icon="profile"
-              [title]="language === 'zh' ? '常见问题': 'FAQ'"
-              [link]="language === 'zh' ? 'http://ng.ant.design/docs/faq/zh' : 'http://ng.ant.design/docs/faq/en'">
+              [title]="language === 'zh' ? '常见问题' : 'FAQ'"
+              [link]="language === 'zh' ? 'http://ng.ant.design/docs/faq/zh' : 'http://ng.ant.design/docs/faq/en'"
+            >
             </app-footer-item>
             <app-footer-item
               icon="bug"
-              [title]="language === 'zh' ? '报告 Bug': 'Bug Report'"
-              [link]="language === 'zh' ? 'https://ng.ant.design/issue-helper/#/zh' : 'https://ng.ant.design/issue-helper/#/en'">
+              [title]="language === 'zh' ? '报告 Bug' : 'Bug Report'"
+              [link]="language === 'zh' ? 'https://ng.ant.design/issue-helper/#/zh' : 'https://ng.ant.design/issue-helper/#/en'"
+            >
             </app-footer-item>
             <app-footer-item
               icon="issues-close"
-              [title]="language === 'zh' ? '讨论列表': 'Issue'"
-              [link]="language === 'zh' ? 'https://ng.ant.design/issue-helper/#/zh' : 'https://ng.ant.design/issue-helper/#/en'">
+              [title]="language === 'zh' ? '讨论列表' : 'Issue'"
+              [link]="language === 'zh' ? 'https://ng.ant.design/issue-helper/#/zh' : 'https://ng.ant.design/issue-helper/#/en'"
+            >
             </app-footer-item>
             <app-footer-item
               *ngIf="language === 'zh'"
               icon="book"
               title="NG-ZORRO 实战教程"
-              link="https://github.com/NG-ZORRO/today-ng-steps">
+              link="https://github.com/NG-ZORRO/today-ng-steps"
+            >
             </app-footer-item>
-            <app-footer-item
-              icon="question-circle"
-              title="StackOverflow"
-              link="https://stackoverflow.com/questions/tagged/ng-zorro-antd">
+            <app-footer-item icon="question-circle" title="StackOverflow" link="https://stackoverflow.com/questions/tagged/ng-zorro-antd">
             </app-footer-item>
             <div class="rc-footer-item" style="margin-top: 20px;">
-              <div class="theme-pick-wrap"
-                   nz-popover
-                   [nzPopoverTrigger]="'click'"
-                   nzOverlayClassName="theme-color-content"
-                   [nzPopoverContent]="colorTpl">
-                <div class="theme-pick" [ngStyle]="{'background': colorHex}"></div>
+              <div
+                class="theme-pick-wrap"
+                nz-popover
+                [nzPopoverTrigger]="'click'"
+                nzPopoverOverlayClassName="theme-color-content"
+                [nzPopoverContent]="colorTpl"
+              >
+                <div class="theme-pick" [ngStyle]="{ background: colorHex }"></div>
               </div>
               <ng-template #colorTpl>
                 <color-sketch [color]="colorHex" (onChangeComplete)="changeColor($event)"></color-sketch>
@@ -112,30 +75,24 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
         </section>
       </section>
       <section class="rc-footer-bottom">
-        <div class="rc-footer-bottom-container">
-          Made with <span style="color: rgb(255, 255, 255);">❤</span> by NG-ZORRO team
-        </div>
+        <div class="rc-footer-bottom-container">Made with <span style="color: rgb(255, 255, 255);">❤</span> by NG-ZORRO team</div>
       </section>
     </footer>
   `,
   styleUrls: ['./footer.component.less']
 })
 export class FooterComponent implements OnInit {
-
   @Input() language: string = 'zh';
   @Input() colorHex: string = '#1890ff';
   // tslint:disable-next-line:no-any
   @Output() colorChange = new EventEmitter<any>();
 
-  constructor() {
-  }
+  constructor() {}
 
   // tslint:disable-next-line:no-any
   changeColor(res: any): void {
     this.colorChange.emit(res);
   }
 
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }
diff --git a/scripts/site/_site/doc/app/header/header.component.ts b/scripts/site/_site/doc/app/header/header.component.ts
@@ -13,7 +13,7 @@ const RESPONSIVE_SM = 1200;
         class="nav-phone-icon"
         nzType="unordered-list"
         *ngIf="isMobile"
-        nzOverlayClassName="popover-menu"
+        nzPopoverOverlayClassName="popover-menu"
         nzPopoverPlacement="bottomLeft"
         nz-popover
         [nzPopoverContent]="menu"