feat(module:typography): support success type (#5915)

close #5906
NG-ZORRO · Oct 23, 2020 · 93c0d46 · 93c0d46
1 parent f3f1aa9
commit 93c0d46
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 49 deletions.
diff --git a/components/typography/demo/ellipsis.ts b/components/typography/demo/ellipsis.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-typography-ellipsis',
   template: `
-    <p nz-typography nzEllipsis nzEllipsisRows="3">
+    <p nz-typography nzEllipsis>
       Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
       applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
       Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background

diff --git a/components/typography/demo/text.ts b/components/typography/demo/text.ts
@@ -3,30 +3,34 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-typography-text',
   template: `
-    <span nz-typography>Ant Design</span>
-    <br />
-    <span nz-typography nzType="secondary">Ant Design</span>
-    <br />
-    <span nz-typography nzType="warning">Ant Design</span>
-    <br />
-    <span nz-typography nzType="danger">Ant Design</span>
-    <br />
-    <span nz-typography nzDisabled>Ant Design</span>
-    <br />
-    <span nz-typography><mark>Ant Design</mark></span>
-    <br />
-    <span nz-typography><code>Ant Design</code></span>
-    <br />
-    <span nz-typography><kbd>Ant Design</kbd></span>
-    <br />
-    <span nz-typography><u>Ant Design</u></span>
-    <br />
-    <span nz-typography><del>Ant Design</del></span>
-    <br />
-    <span nz-typography><strong>Ant Design</strong></span>
-    <br />
-    <span nz-typography><a href="https://ng.ant.design/" target="_blank">Ant Design</a></span>
+    <span nz-typography>Ant Design (default)</span>
+    <span nz-typography nzType="secondary">Ant Design (secondary)</span>
+    <span nz-typography nzType="success">Ant Design (success)</span>
+    <span nz-typography nzType="warning">Ant Design (warning)</span>
+    <span nz-typography nzType="danger">Ant Design (danger)</span>
+    <span nz-typography nzDisabled>Ant Design (disabled)</span>
+    <span nz-typography><mark>Ant Design (mark)</mark></span>
+    <span nz-typography><code>Ant Design (code)</code></span>
+    <span nz-typography><kbd>Ant Design (keyboard)</kbd></span>
+    <span nz-typography><u>Ant Design (underline)</u></span>
+    <span nz-typography><del>Ant Design (delete)</del></span>
+    <span nz-typography><strong>Ant Design (strong)</strong></span>
+    <span nz-typography>
+      <a href="https://ng.ant.design/" target="_blank">
+        Ant Design
+        <Link />
+      </a>
+    </span>
   `,
-  styles: []
+  styles: [
+    `
+      span[nz-typography] {
+        display: block;
+      }
+      span[nz-typography] + span[nz-typography] {
+        margin-top: 8px;
+      }
+    `
+  ]
 })
 export class NzDemoTypographyTextComponent {}
diff --git a/components/typography/demo/title.ts b/components/typography/demo/title.ts
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
     <h2 nz-typography>h2. Ant Design</h2>
     <h3 nz-typography>h3. Ant Design</h3>
     <h4 nz-typography>h4. Ant Design</h4>
+    <h5 nz-typography>h5. Ant Design</h5>
   `,
   styles: []
 })

diff --git a/components/typography/doc/index.en-US.md b/components/typography/doc/index.en-US.md
@@ -32,7 +32,7 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 | `[nzDisabled]` | Disable content | `boolean` | `false` ||
 | `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` ||
 | `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ |
-| `[nzType]` | Content type | `'secondary'｜'warning'｜'danger'` | - ||
+| `[nzType]` | Content type | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - ||
 | `(nzContentChange)` | Trigger when user edit the content | `EventEmitter<string>` | - ||
 | `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter<void>` | - ||
 | `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter<boolean>` | - ||
diff --git a/components/typography/doc/index.zh-CN.md b/components/typography/doc/index.zh-CN.md
@@ -32,7 +32,7 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
 | `[nzCopyText]` | 自定义被拷贝的文本 | `string` | - ||
 | `[nzDisabled]` | 禁用文本 | `boolean` | `false` ||
 | `[nzEllipsisRows]` | 自动溢出省略时省略行数 | `number` | `1` | ✅ |
-| `[nzType]` | 文本类型 | `'secondary'｜'warning'｜'danger'` | - ||
+| `[nzType]` | 文本类型 | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - ||
 | `(nzContentChange)` | 当用户提交编辑内容时触发 | `EventEmitter<string>` | - ||
 | `(nzExpandChange)` | 展开省略文本时触发 | `EventEmitter<void>` | - ||
 | `(nzOnEllipsis)` | 当省略状态变化时触发 | `EventEmitter<boolean>` | - ||
diff --git a/components/typography/typography.component.ts b/components/typography/typography.component.ts
@@ -93,6 +93,7 @@ const EXPAND_ELEMENT_CLASSNAME = 'ant-typography-expand';
     '[class.ant-typography-secondary]': 'nzType === "secondary"',
     '[class.ant-typography-warning]': 'nzType === "warning"',
     '[class.ant-typography-danger]': 'nzType === "danger"',
+    '[class.ant-typography-success]': 'nzType === "success"',
     '[class.ant-typography-disabled]': 'nzDisabled',
     '[class.ant-typography-ellipsis]': 'nzEllipsis && !expanded',
     '[class.ant-typography-ellipsis-single-line]': 'canCssEllipsis && nzEllipsisRows === 1',
@@ -117,7 +118,7 @@ export class NzTypographyComponent implements OnInit, AfterViewInit, OnDestroy,
   @Input() @InputBoolean() nzEllipsis = false;
   @Input() nzContent?: string;
   @Input() @WithConfig() @InputNumber() nzEllipsisRows: number = 1;
-  @Input() nzType: 'secondary' | 'warning' | 'danger' | undefined;
+  @Input() nzType: 'secondary' | 'warning' | 'danger' | 'success' | undefined;
   @Input() nzCopyText: string | undefined;
   @Input() nzSuffix: string | undefined;
   @Output() readonly nzContentChange = new EventEmitter<string>();

diff --git a/components/typography/typography.spec.ts b/components/typography/typography.spec.ts
@@ -36,20 +36,17 @@ describe('typography', () => {
     });
 
     it('should selector work', () => {
-      const elements = componentElement.querySelectorAll(
-        'h1[nz-title],' + 'h2[nz-title],' + 'h3[nz-title],' + 'h4[nz-title],' + 'p[nz-paragraph],' + 'span[nz-text]'
-      );
+      const elements = componentElement.querySelectorAll('[nz-typography]');
       elements.forEach(el => {
         expect(el.classList).toContain('ant-typography');
       });
     });
 
     it('should [nzType] work', () => {
       expect(componentElement.querySelector('.test-secondary')!.classList).toContain('ant-typography-secondary');
-
       expect(componentElement.querySelector('.test-warning')!.classList).toContain('ant-typography-warning');
-
       expect(componentElement.querySelector('.test-danger')!.classList).toContain('ant-typography-danger');
+      expect(componentElement.querySelector('.test-success')!.classList).toContain('ant-typography-success');
     });
 
     it('should [nzDisabled] work', () => {
@@ -339,21 +336,23 @@ describe('typography', () => {
 
 @Component({
   template: `
-    <h1 nz-title>h1. Ant Design</h1>
-    <h2 nz-title>h2. Ant Design</h2>
-    <h3 nz-title>h3. Ant Design</h3>
-    <h4 nz-title>h4. Ant Design</h4>
-    <p nz-paragraph>Ant Design, a design language for background applications, is refined by Ant UED Team</p>
-    <span nz-text>Ant Design</span>
-    <span class="test-secondary" nz-text nzType="secondary">Ant Design</span>
-    <span class="test-warning" nz-text nzType="warning">Ant Design</span>
-    <span class="test-danger" nz-text nzType="danger">Ant Design</span>
-    <span class="test-disabled" nz-text nzDisabled>Ant Design</span>
-    <span nz-text><mark>Ant Design</mark></span>
-    <span nz-text><code>Ant Design</code></span>
-    <span nz-text><u>Ant Design</u></span>
-    <span nz-text><del>Ant Design</del></span>
-    <span nz-text><strong>Ant Design</strong></span>
+    <h1 nz-typography>h1. Ant Design</h1>
+    <h2 nz-typography>h2. Ant Design</h2>
+    <h3 nz-typography>h3. Ant Design</h3>
+    <h4 nz-typography>h4. Ant Design</h4>
+    <h5 nz-typography>h5. Ant Design</h5>
+    <p nz-typography>Ant Design, a design language for background applications, is refined by Ant UED Team</p>
+    <span nz-typography>Ant Design</span>
+    <span class="test-secondary" nz-typography nzType="secondary">Ant Design</span>
+    <span class="test-success" nz-typography nzType="success">Ant Design</span>
+    <span class="test-warning" nz-typography nzType="warning">Ant Design</span>
+    <span class="test-danger" nz-typography nzType="danger">Ant Design</span>
+    <span class="test-disabled" nz-typography nzDisabled>Ant Design</span>
+    <span nz-typography><mark>Ant Design</mark></span>
+    <span nz-typography><code>Ant Design</code></span>
+    <span nz-typography><u>Ant Design</u></span>
+    <span nz-typography><del>Ant Design</del></span>
+    <span nz-typography><strong>Ant Design</strong></span>
   `
 })
 export class NzTestTypographyComponent {}
@@ -373,7 +372,9 @@ export class NzTestTypographyCopyComponent {
 }
 
 @Component({
-  template: ` <p nz-paragraph nzEditable (nzContentChange)="onChange($event)" [nzContent]="str"></p> `
+  template: `
+    <p nz-paragraph nzEditable (nzContentChange)="onChange($event)" [nzContent]="str"></p>
+  `
 })
 export class NzTestTypographyEditComponent {
   @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent!: NzTypographyComponent;