fix(module:icon): fix icon miss in components (#2321)

* fix(module:icon): fix icon miss in components * fix(module:icon): fix table icon close #2326
NG-ZORRO · Oct 23, 2018 · af4ddfb · af4ddfb
1 parent a7beda8
commit af4ddfb
Show file tree

Hide file tree

Showing 28 changed files with 71 additions and 75 deletions.
diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
     <nz-badge nzDot><a>Link something</a></nz-badge>
   `,
   styles  : [
-      `.anticon-notification {
+      `[nz-icon] {
       width: 16px;
       height: 16px;
       line-height: 16px;

diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts
@@ -24,6 +24,7 @@ export class NzDropDownDirective implements OnInit {
 
   @HostListener('click', [ '$event' ])
   onClick(e: MouseEvent): void {
+    e.stopPropagation();
     this.$click.next(e);
   }
 

diff --git a/components/form/demo/advanced-search.ts b/components/form/demo/advanced-search.ts
@@ -25,7 +25,7 @@ import {
           <button nz-button (click)="resetForm()">Clear</button>
           <a style="margin-left:8px;font-size:12px;" (click)="toggleCollapse()">
             Collapse
-            <i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
+            <i nz-icon [type]="isCollapse?'down':'up'"></i>
           </a>
         </div>
       </div>

diff --git a/components/form/demo/horizontal-login.ts b/components/form/demo/horizontal-login.ts
@@ -11,15 +11,15 @@ import {
     <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control>
-          <nz-input-group nzPrefixIcon="anticon anticon-user">
+          <nz-input-group [nzPrefix]="prefixUser">
             <input formControlName="userName" nz-input placeholder="Username">
           </nz-input-group>
           <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').errors">Please input your username!</nz-form-explain>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control>
-          <nz-input-group nzPrefixIcon="anticon anticon-lock">
+          <nz-input-group [nzPrefix]="prefixLock">
             <input formControlName="password" nz-input type="password" placeholder="Password">
           </nz-input-group>
           <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please input your Password!</nz-form-explain>
@@ -30,7 +30,10 @@ import {
           <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
         </nz-form-control>
       </nz-form-item>
-    </form>`
+    </form>
+    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
+    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
+`
 })
 export class NzDemoFormHorizontalLoginComponent implements OnInit {
   validateForm: FormGroup;

diff --git a/components/form/demo/normal-login.ts b/components/form/demo/normal-login.ts
@@ -12,15 +12,15 @@ import {
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-control>
-          <nz-input-group nzPrefixIcon="anticon anticon-user">
+          <nz-input-group [nzPrefix]="prefixUser">
             <input type="text" nz-input formControlName="userName" placeholder="Username">
           </nz-input-group>
           <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').errors">Please input your username!</nz-form-explain>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control>
-          <nz-input-group nzPrefixIcon="anticon anticon-lock">
+          <nz-input-group [nzPrefix]="prefixLock">
             <input type="password" nz-input formControlName="password" placeholder="Password">
           </nz-input-group>
           <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please input your Password!</nz-form-explain>
@@ -38,6 +38,8 @@ import {
         </nz-form-control>
       </nz-form-item>
     </form>
+    <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
+    <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
   `,
   styles: [ `
     .login-form {

diff --git a/components/form/demo/register.ts b/components/form/demo/register.ts
@@ -42,9 +42,7 @@ import {
         <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
           <span>
             Nickname
-            <nz-tooltip nzTitle="What do you want other to call you">
-              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
-            </nz-tooltip>
+            <i nz-icon nz-tooltip nzTitle="What do you want other to call you" type="question-circle" theme="outline"></i>
           </span>
         </nz-form-label>
         <nz-form-control [nzSm]="14" [nzXs]="24">
@@ -104,7 +102,7 @@ import {
     </form>`,
 
   styles: [
-      `[nz-form] {
+    `[nz-form] {
       max-width: 600px;
     }`
   ]
@@ -124,13 +122,13 @@ export class NzDemoFormRegisterComponent implements OnInit {
     Promise.resolve().then(() => this.validateForm.controls.checkPassword.updateValueAndValidity());
   }
 
-  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
+  confirmationValidator = (control: FormControl): { [ s: string ]: boolean } => {
     if (!control.value) {
       return { required: true };
     } else if (control.value !== this.validateForm.controls.password.value) {
       return { confirm: true, error: true };
     }
-  }
+  };
 
   getCaptcha(e: MouseEvent): void {
     e.preventDefault();

diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts
@@ -10,20 +10,14 @@ import { Component } from '@angular/core';
       <i nz-icon [type]="'sync'" [spin]="true"></i>
       <!-- Loading with new API would spin automatically! -->
       <i nz-icon [type]="'loading'"></i>
-      <br><br>
-      <i class="anticon anticon-home"></i>
-      <i class="anticon anticon-setting"></i>
-      <i class="anticon anticon-smile"></i>
-      <i class="anticon anticon-sync anticon-spin"></i>
-      <i class="anticon anticon-loading anticon-spin"></i>
     </div>
   `,
-  styles  : [ `
-    .icons-list > .anticon {
+  styles: [ `
+    [nz-icon] {
       margin-right: 6px;
       font-size: 24px;
     }
-  ` ]
+  `]
 })
 export class NzDemoIconBasicComponent {
 }
diff --git a/components/icon/demo/custom.ts b/components/icon/demo/custom.ts
@@ -24,7 +24,7 @@ import { Component } from '@angular/core';
     </div>
   `,
   styles  : [ `
-    .icons-list > .anticon {
+    [nz-icon] {
       margin-right: 6px;
       font-size: 24px;
     }

diff --git a/components/icon/demo/iconfont.ts b/components/icon/demo/iconfont.ts
@@ -11,7 +11,7 @@ import { NzIconService } from 'ng-zorro-antd';
     </div>
   `,
   styles  : [ `
-    .icons-list > .anticon {
+    [nz-icon] {
       margin-right: 6px;
       font-size: 24px;
     }

diff --git a/components/input/demo/addon.ts b/components/input/demo/addon.ts
@@ -28,9 +28,12 @@ import { Component } from '@angular/core';
       </ng-template>
     </div>
     <div style="margin-bottom: 16px;">
-      <nz-input-group nzAddOnAfterIcon="anticon anticon-setting">
+      <nz-input-group [nzAddOnAfter]="addOnAfterIconTemplate">
         <input type="text" nz-input [(ngModel)]="inputValue">
       </nz-input-group>
+      <ng-template #addOnAfterIconTemplate>
+        <i nz-icon type="setting"></i>
+      </ng-template>
     </div>
   `
 })

diff --git a/components/input/demo/presuffix.ts b/components/input/demo/presuffix.ts
@@ -3,9 +3,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-input-presuffix',
   template: `
-    <nz-input-group [nzSuffix]="suffixTemplate" nzPrefixIcon="anticon anticon-user">
+    <nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
       <input type="text" nz-input placeholder="Enter your username" [(ngModel)]="username">
     </nz-input-group>
+    <ng-template #prefixTemplate><i nz-icon type="user"></i></ng-template>
     <ng-template #suffixTemplate><i nz-icon type="close-circle" (click)="username=null" *ngIf="username"></i></ng-template>
   `,
   styles  : [

diff --git a/components/input/demo/search-input.ts b/components/input/demo/search-input.ts
@@ -3,9 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-input-search-input',
   template: `
-    <nz-input-group nzSuffixIcon="anticon anticon-search">
+    <nz-input-group [nzSuffix]="suffixIconSearch">
       <input type="text" nz-input placeholder="input search text">
     </nz-input-group>
+    <ng-template #suffixIconSearch>
+      <i nz-icon type="search"></i>
+    </ng-template>
     <br>
     <br>
     <nz-input-group nzSearch [nzSuffix]="suffixIconButton">

diff --git a/components/input/doc/index.en-US.md b/components/input/doc/index.en-US.md
@@ -29,12 +29,8 @@ All props of input supported by [w3c standards](https://www.w3schools.com/tags/t
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzAddonAfter]` | The label text displayed after (on the right side of) the input field. | string 丨 `TemplateRef<void>` |  |
-| `[nzAddonAfterIcon]` | The label icon's ngClass displayed after. | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }`  |  |
 | `[nzAddonBefore]` | The label text displayed before (on the left side of) the input field. | string 丨 `TemplateRef<void>` |  |
-| `[nzAddonBeforeIcon]` | The label icon's ngClass displayed before. | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` |  |
 | `[nzPrefix]` | The prefix icon for the Input. | string 丨 `TemplateRef<void>` |  |
-| `[nzPrefixIcon]` | The prefix icon's ngClass for the Input. | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` |  |
 | `[nzSuffix]` | The suffix icon for the Input. | string 丨 `TemplateRef<void>` |  |
-| `[nzSuffixIcon]` | The suffix icon's ngClass for the Input. | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` |  |
 | `[nzCompact]` | Whether use compact style | boolean | false |
 | `[nzSize]` | The size of `nz-input-group` specifies the size of the included `nz-input` fields. Available: `large` `default` `small` | string | `default` |
diff --git a/components/input/doc/index.zh-CN.md b/components/input/doc/index.zh-CN.md
@@ -28,13 +28,9 @@ nz-input 可以使用所有的W3C标准下的所有 [使用方式](https://www.w
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzAddOnAfter]` | 带标签的 input，设置后置标签 | string 丨 `TemplateRef<void>` |  |
-| `[nzAddOnAfterIcon]` | 后置标签按钮，`nzAddOnAfter`的快捷使用方式 | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` | - |
 | `[nzAddOnBefore]` | 带标签的 input，设置前置标签 | string 丨 `TemplateRef<void>` |  |
-| `[nzAddOnBeforeIcon]` | 前置标签按钮，`nzAddOnBefore`的快捷使用方式 | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` | - |
 | `[nzPrefix]` | 带有前缀图标的 input | string丨 `TemplateRef<void>` |  |
-| `[nzPrefixIcon]` | 前缀图标，`nzPrefix`的快捷使用方式 | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` | - |
 | `[nzSuffix]` | 带有后缀图标的 input | string丨 `TemplateRef<void>` |  |
-| `[nzSuffixIcon]` | 后缀图标，`nzSuffix`的快捷使用方式 | `string 丨 string[] 丨 Set<string> 丨 { [klass: string]: any; }` | - |
 | `[nzCompact]` | 是否用紧凑模式 | boolean | false |
 | `[nzSearch]` | 是否用搜索框 | boolean | false |
 | `[nzSize]` | `nz-input-group` 中所有的 `nz-input` 的大小，可选 `large` `default` `small` | string | `default` |
diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts
@@ -28,7 +28,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
       </nz-sider>
       <nz-layout>
         <nz-header style="background: #fff; padding:0;">
-          <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
+          <i class="trigger" nz-icon [type]="isCollapsed?'menu-unfold':'menu-fold'" (click)="isCollapsed=!isCollapsed"></i>
         </nz-header>
         <nz-content style="margin:0 16px;">
           <nz-breadcrumb style="margin:16px 0;">

diff --git a/components/menu/demo/inline-collapsed.ts b/components/menu/demo/inline-collapsed.ts
@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
   template: `
     <div style="width: 240px;">
       <button nz-button [nzType]="'primary'" (click)="toggleCollapsed()" style="margin-bottom: 10px;">
-        <i class="anticon" [class.anticon-menu-unfold]="isCollapsed" [class.anticon-menu-fold]="!isCollapsed">
-        </i>
+        <i nz-icon [type]="isCollapsed?'menu-unfold':'menu-fold'"></i>
       </button>
       <ul nz-menu [nzMode]="'inline'" nzTheme='dark' [nzInlineCollapsed]="isCollapsed">
         <li nz-menu-item nz-tooltip nzPlacement="right" [nzTitle]="isCollapsed ? 'Navigation One' : ''">

diff --git a/components/package.json b/components/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "date-fns": "^1.29.0",
     "@angular/cdk": "^6.0.0",
-    "@ant-design/icons-angular": "^0.0.3"
+    "@ant-design/icons-angular": "0.0.3"
   },
   "peerDependencies": {
     "@angular/animations": "^6.0.0",

diff --git a/components/popover/nz-popover.component.ts b/components/popover/nz-popover.component.ts
@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Component,
   ContentChild,
   TemplateRef
@@ -21,4 +22,7 @@ export class NzPopoverComponent extends NzToolTipComponent {
   _prefix = 'ant-popover-placement';
   @ContentChild('neverUsedTemplate') _title: string | TemplateRef<void>; // used to remove NzToolTipComponent @ContentChild('nzTemplate')
   @ContentChild('nzTemplate') _content: string | TemplateRef<void>;
+  constructor(cdr: ChangeDetectorRef) {
+    super(cdr);
+  }
 }
diff --git a/components/select/nz-option-container.component.html b/components/select/nz-option-container.component.html
@@ -20,6 +20,7 @@
   </li>
   <li
     nz-option-li
+    [nzMode]="nzMode"
     [compareWith]="compareWith"
     *ngFor="let option of listOfNzOptionComponent | nzFilterOptionPipe : nzSearchValue : nzFilterOption : nzServerSearch "
     (click)="clickOption(option,false)"
@@ -41,6 +42,7 @@
     <ul class="ant-select-dropdown-menu-item-group-list">
       <li
         nz-option-li
+        [nzMode]="nzMode"
         [compareWith]="compareWith"
         *ngFor="let option of group.listOfNzOptionComponent | nzFilterOptionPipe : nzSearchValue : nzFilterOption : nzServerSearch"
         (click)="clickOption(option,false)"
@@ -53,6 +55,7 @@
   </li>
   <li
     nz-option-li
+    [nzMode]="nzMode"
     [compareWith]="compareWith"
     *ngFor="let option of listOfTagOption | nzFilterOptionPipe : nzSearchValue : nzFilterOption : nzServerSearch "
     (click)="clickOption(option,false)"

diff --git a/components/select/nz-option-li.component.html b/components/select/nz-option-li.component.html
@@ -1,6 +1,8 @@
 <ng-container *ngIf="nzOption.nzCustomContent">
   <ng-template [ngTemplateOutlet]="nzOption.template"></ng-template>
+  <i nz-icon *ngIf="nzMode !== 'default'" type="check" class="ant-select-selected-icon"></i>
 </ng-container>
 <ng-container *ngIf="!nzOption.nzCustomContent">
   {{nzOption.nzLabel}}
+  <i nz-icon *ngIf="nzMode !== 'default'" type="check" class="ant-select-selected-icon"></i>
 </ng-container>
diff --git a/components/select/nz-option-li.component.ts b/components/select/nz-option-li.component.ts
@@ -20,6 +20,7 @@ export class NzOptionLiComponent {
   active = false;
   @Input() nzOption: NzOptionComponent;
   @Input() nzShowActive = true;
+  @Input() nzMode = 'default';
   // tslint:disable-next-line:no-any
   @Input() compareWith: (o1: any, o2: any) => boolean;
 

diff --git a/components/slider/demo/icon-slider.ts b/components/slider/demo/icon-slider.ts
@@ -4,19 +4,19 @@ import { Component, OnInit } from '@angular/core';
   selector: 'nz-demo-slider-icon-slider',
   template: `
     <div class="icon-wrapper test-class">
-      <i [ngClass]="preIconClassMap"></i>
+      <i nz-icon type="frown" [class.icon-highlight]="preHighLight"></i>
       <nz-slider [nzMin]="0" [nzMax]="20" [(ngModel)]="sliderValue"></nz-slider>
-      <i [ngClass]="nextIconClassMap"></i>
+      <i nz-icon type="smile" [class.icon-highlight]="nextHighLight"></i>
     </div>
   `,
   styles  : [
-      `
+    `
       .icon-wrapper {
         position: relative;
         padding: 0px 30px;
       }
 
-      .icon-wrapper ::ng-deep .anticon {
+      [nz-icon] {
         position: absolute;
         top: -2px;
         width: 16px;
@@ -26,13 +26,17 @@ import { Component, OnInit } from '@angular/core';
         color: rgba(0, 0, 0, .25);
       }
 
-      .icon-wrapper ::ng-deep .anticon:first-child {
+      [nz-icon]:first-child {
         left: 0;
       }
 
-      .icon-wrapper ::ng-deep .anticon:last-child {
+      [nz-icon]:last-child {
         right: 0;
       }
+
+      .icon-highlight{
+        color: rgba(0, 0, 0, 0.45);
+      }
     `
   ]
 })
@@ -41,15 +45,8 @@ export class NzDemoSliderIconSliderComponent implements OnInit {
   min = 0;
   max = 20;
   mid = parseFloat(((this.max - this.min) / 2).toFixed(5));
-  preIconClassMap = {
-    'anticon'        : true,
-    'anticon-frown-o': true
-  };
-  nextIconClassMap = {
-    'anticon'        : true,
-    'anticon-smile-o': true
-  };
-
+  preHighLight = false;
+  nextHighLight = false;
   _sliderValue;
   set sliderValue(value: number) {
     this._sliderValue = value;
@@ -66,8 +63,8 @@ export class NzDemoSliderIconSliderComponent implements OnInit {
 
   highlightIcon() {
     const lower = this._sliderValue >= this.mid;
-    this.preIconClassMap[ 'anticon-highlight' ] = !lower;
-    this.nextIconClassMap[ 'anticon-highlight' ] = lower;
+    this.preHighLight = !lower;
+    this.nextHighLight = lower;
   }
 
 }
diff --git a/components/table/demo/default-filter.ts b/components/table/demo/default-filter.ts
@@ -31,8 +31,8 @@ export class NzDemoTableDefaultFilterComponent {
   ];
   sortName = null;
   sortValue = null;
-  listOfSearchName = [ 'Joe', 'London' ];  // You need to change it as well!
-  searchAddress: string;
+  listOfSearchName = [ 'Joe' ];  // You need to change it as well!
+  searchAddress = 'London';
   data = [
     {
       name: 'John Brown',