refactor(module:button): migrate demo to standalone mode (NG-ZORRO#8740)

Laffery · Sep 11, 2024 · 99b6b15 · 99b6b15
1 parent c64e1a1
commit 99b6b15
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 26 deletions.
diff --git a/components/button/button-group.spec.ts b/components/button/button-group.spec.ts
@@ -1,4 +1,4 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Component, Input, ViewChild } from '@angular/core';
 import { fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -48,5 +48,5 @@ export class TestButtonGroupComponent {
 })
 export class NzTestButtonGroupRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
diff --git a/components/button/button.spec.ts b/components/button/button.spec.ts
@@ -1,4 +1,4 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { ApplicationRef, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -360,13 +360,6 @@ export class TestButtonIconOnlyWithoutIconComponent {}
 })
 export class TestButtonIconOnlyLoadingComponent {}
 
-@Component({
-  template: `<button nz-button [nzLoading]="nzLoading" (click)="buttonClick()">click me</button> `
-})
-export class TestButtonWithLoadingComponent {
-  @Input() nzLoading: boolean = false;
-}
-
 @Component({
   template: `
     <div [dir]="direction">
@@ -388,7 +381,7 @@ export class TestButtonWithLoadingComponent {
 })
 export class TestButtonRtlComponent extends TestButtonComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
 
 @Component({

diff --git a/components/button/demo/basic.ts b/components/button/demo/basic.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'nz-demo-button-basic',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <button nz-button nzType="primary">Primary Button</button>
     <button nz-button nzType="default">Default Button</button>

diff --git a/components/button/demo/block.ts b/components/button/demo/block.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'nz-demo-button-block',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <button nz-button nzType="primary" nzBlock>Primary</button>
     <button nz-button nzType="default" nzBlock>Default</button>

diff --git a/components/button/demo/button-group.ts b/components/button/demo/button-group.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: 'nz-demo-button-button-group',
+  standalone: true,
+  imports: [NzButtonModule, NzIconModule],
   template: `
     <h4>Basic</h4>
     <nz-button-group>
@@ -55,6 +60,7 @@ import { Component } from '@angular/core';
       nz-button-group {
         margin-bottom: 8px;
         margin-right: 8px;
+        vertical-align: bottom;
       }
     `
   ]

diff --git a/components/button/demo/danger.ts b/components/button/demo/danger.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'nz-demo-button-danger',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <button nz-button nzType="primary" nzDanger>Primary</button>
     <button nz-button nzType="default" nzDanger>Default</button>

diff --git a/components/button/demo/disabled.ts b/components/button/demo/disabled.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'nz-demo-button-disabled',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <button nz-button nzType="primary">Primary</button>
     <button nz-button nzType="primary" disabled>Primary(disabled)</button>
@@ -26,7 +30,7 @@ import { Component } from '@angular/core';
     <br />
     <button nz-button nzType="default" nzDanger>Danger Default</button>
     <button nz-button nzType="default" disabled nzDanger>Danger Default(disabled)</button>
-    <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
+    <div class="ghost-background">
       <button nz-button nzGhost>Ghost</button>
       <button nz-button nzGhost disabled>Ghost(disabled)</button>
     </div>
@@ -37,6 +41,16 @@ import { Component } from '@angular/core';
         margin-right: 8px;
         margin-bottom: 12px;
       }
+
+      .ghost-background {
+        padding: 8px;
+        background: rgb(190, 200, 200);
+      }
+
+      .ghost-background [nz-button] {
+        margin-right: 8px;
+        margin-bottom: 0;
+      }
     `
   ]
 })

diff --git a/components/button/demo/ghost.ts b/components/button/demo/ghost.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'nz-demo-button-ghost',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
-    <div style="background: rgb(190, 200, 200);padding: 26px 16px 16px;">
+    <div class="ghost-background">
       <button nz-button nzType="primary" nzGhost>Primary</button>
       <button nz-button nzType="default" nzGhost>Default</button>
       <button nz-button nzType="dashed" nzGhost>Dashed</button>
@@ -12,9 +16,13 @@ import { Component } from '@angular/core';
   `,
   styles: [
     `
+      .ghost-background {
+        padding: 8px;
+        background: rgb(190, 200, 200);
+      }
+
       [nz-button] {
         margin-right: 8px;
-        margin-bottom: 12px;
       }
     `
   ]

diff --git a/components/button/demo/icon.ts b/components/button/demo/icon.ts
@@ -1,15 +1,24 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: 'nz-demo-button-icon',
+  standalone: true,
+  imports: [NzButtonModule, NzIconModule],
   template: `
-    <button nz-button nzType="primary" nzShape="circle"><span nz-icon nzType="search"></span></button>
+    <button nz-button nzType="primary" nzShape="circle">
+      <span nz-icon nzType="search"></span>
+    </button>
     <button nz-button nzType="primary" nzShape="circle">A</button>
     <button nz-button nzType="primary">
       <span nz-icon nzType="search"></span>
       Search
     </button>
-    <button nz-button nzType="default" nzShape="circle"><span nz-icon nzType="search"></span></button>
+    <button nz-button nzType="default" nzShape="circle">
+      <span nz-icon nzType="search"></span>
+    </button>
     <button nz-button nzType="default">
       <span nz-icon nzType="search"></span>
       Search

diff --git a/components/button/demo/loading.ts b/components/button/demo/loading.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: 'nz-demo-button-loading',
+  standalone: true,
+  imports: [NzButtonModule, NzIconModule],
   template: `
     <button nz-button nzType="primary" nzLoading>
       <span nz-icon nzType="poweroff"></span>

diff --git a/components/button/demo/module b/components/button/demo/module
diff --git a/components/button/demo/multiple.ts b/components/button/demo/multiple.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: 'nz-demo-button-multiple',
+  standalone: true,
+  imports: [NzButtonModule, NzDropDownModule, NzIconModule],
   template: `
     <button nz-button nzType="primary">primary</button>
     <button nz-button nzType="default">secondary</button>

diff --git a/components/button/demo/size.ts b/components/button/demo/size.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NzButtonSize } from 'ng-zorro-antd/button';
+import { NzButtonModule, NzButtonSize } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-button-size',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzIconModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="size">
       <label nz-radio-button nzValue="large">Large</label>
@@ -17,9 +22,15 @@ import { NzButtonSize } from 'ng-zorro-antd/button';
     <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
     <a nz-button [nzSize]="size" nzType="link">Link</a>
     <br />
-    <button nz-button nzType="primary" [nzSize]="size"><span nz-icon nzType="download"></span></button>
-    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><span nz-icon nzType="download"></span></button>
-    <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><span nz-icon nzType="download"></span></button>
+    <button nz-button nzType="primary" [nzSize]="size">
+      <span nz-icon nzType="download"></span>
+    </button>
+    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle">
+      <span nz-icon nzType="download"></span>
+    </button>
+    <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
+      <span nz-icon nzType="download"></span>
+    </button>
     <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
       <span nz-icon nzType="download"></span>
       Download