Merge pull request #9102 from IgniteUI/SIvanova/igx-list-css-output

simeonoff · web-flow · commit 2c530d9c15e4 · 2021-03-04T18:29:27.000+02:00
refactor(list): reduce compiled CSS
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-component.scss
@@ -65,21 +65,13 @@
         @extend %igx-list__item-line-subtitle !optional;
     }
 
-    @include e(empty) {
+    @include m(empty) {
         @extend %igx-list !optional;
-        @extend %igx-list-empty !optional;
+        @extend %igx-list--empty !optional;
 
-        @include b(image) {
-            @extend %igx-list-empty-image !optional;
+        @include e(message) {
+            @extend %igx-list__message--empty !optional;
         }
-
-        @include b(message) {
-            @extend %igx-list-empty-message !optional;
-        }
-    }
-
-    @include e(empty, $m: custom) {
-        @extend %igx-list-empty !optional;
     }
 
     @include m(compact) {
@@ -93,12 +85,6 @@
             @extend %igx-list__item-actions--compact !optional;
         }
 
-        @include e(empty) {
-            @include b(message) {
-                @extend %igx-list-empty-message--compact !optional;
-            }
-        }
-
         @include e(item-content) {
             @extend %igx-list-item-content--compact !optional;
         }
@@ -119,12 +105,6 @@
             @extend %igx-list__item-actions--cosy !optional;
         }
 
-        @include e(empty) {
-            @include b(message) {
-                @extend %igx-list-empty-message--cosy !optional;
-            }
-        }
-
         @include e(item-content) {
             @extend %igx-list-item-content--cosy !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -306,31 +306,18 @@
         }
     }
 
-    %igx-list-empty {
+    %igx-list--empty {
         justify-content: center;
         align-items: center;
     }
 
-    %igx-list-empty-image {
-        width: auto;
-        max-height: 120px;
-    }
-
-    %igx-list-empty-message {
+    %igx-list__message--empty {
         text-align: center;
         color: --var($theme, 'item-text-color');
         padding: map-get($list-empty-padding, 'comfortable');
         z-index: 1;
     }
 
-    %igx-list-empty-message--cosy {
-        padding: map-get($list-empty-padding, 'cosy');
-    }
-
-    %igx-list-empty-message--compact {
-        padding: map-get($list-empty-padding, 'compact');
-    }
-
     %igx-list-header {
         display: flex;
         align-items: center;
@@ -375,15 +362,15 @@
             %igx-list__item-actions {
                 color: --var($theme, 'item-action-color-hover');
 
-                %igx-icon-display {
+                igx-icon {
                     color: --var($theme, 'item-action-color-hover')
                 }
             }
 
             %igx-list__item-thumbnail {
                 color: --var($theme, 'item-thumbnail-color-hover');
 
-                %igx-icon-display {
+                igx-icon {
                     color: --var($theme, 'item-thumbnail-color-hover')
                 }
             }
@@ -431,7 +418,7 @@
             display: none;
         }
 
-        %igx-icon-display {
+        igx-icon {
             color: --var($theme, 'item-action-color')
         }
     }
@@ -462,7 +449,7 @@
         padding: 0;
         color: --var($theme, 'item-thumbnail-color');
 
-        > %igx-icon-display {
+        > igx-icon {
             @include if-ltr() {
                 margin: map-get($list-icon-margin, 'comfortable');
             }
@@ -472,8 +459,8 @@
             }
         }
 
-        > %igx-avatar-display {
-            > %igx-icon-display {
+        > igx-avatar {
+            > igx-icon {
                 margin: 0;
             }
         }
@@ -515,27 +502,27 @@
 
     %igx-list__item-thumbnail--cosy {
         @include if-ltr() {
-            > %igx-icon-display {
+            > igx-icon {
                 margin: map-get($list-icon-margin, 'cosy');
             }
         }
 
         @include if-rtl() {
-            > %igx-icon-display {
+            > igx-icon {
                 margin: map-get($list-icon-margin-rtl, 'cosy');
             }
         }
     }
 
     %igx-list__item-thumbnail--compact {
         @include if-ltr() {
-            > %igx-icon-display {
+            > igx-icon {
                 margin: map-get($list-icon-margin, 'compact');
             }
         }
 
         @include if-rtl() {
-            > %igx-icon-display {
+            > igx-icon {
                 margin: map-get($list-icon-margin-rtl, 'compact');
             }
         }
@@ -569,15 +556,15 @@
         %igx-list__item-actions {
             color: --var($theme, 'item-action-color-active');
 
-            %igx-icon-display {
+            igx-icon {
                 color: --var($theme, 'item-action-color-active')
             }
         }
 
         %igx-list__item-thumbnail {
             color: --var($theme, 'item-thumbnail-color-active');
 
-            %igx-icon-display {
+            igx-icon {
                 color: --var($theme, 'item-thumbnail-color-active')
             }
         }
diff --git a/projects/igniteui-angular/src/lib/list/list.component.html b/projects/igniteui-angular/src/lib/list/list.component.html
@@ -1,13 +1,13 @@
 <ng-content></ng-content>
 
 <ng-template #defaultEmptyList>
-    <article class="message">
+    <article class="igx-list__message">
         {{resourceStrings.igx_list_no_items}}
     </article>
 </ng-template>
 
 <ng-template #defaultDataLoading>
-    <article class="message">
+    <article class="igx-list__message">
         {{resourceStrings.igx_list_loading}}
     </article>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/list/list.component.spec.ts b/projects/igniteui-angular/src/lib/list/list.component.spec.ts
@@ -268,7 +268,7 @@ describe('List', () => {
         expect(list.cssClass).toBeFalsy();
         expect(list.isListEmpty).toBeTruthy();
 
-        const noItemsMessage = fixture.debugElement.query(By.css('.message'));
+        const noItemsMessage = fixture.debugElement.query(By.css('.igx-list__message'));
         expect(noItemsMessage.nativeElement.textContent.trim()).toBe(listNoItemsMessage);
     });
 
@@ -298,7 +298,7 @@ describe('List', () => {
         expect(list.cssClass).toBeFalsy();
         expect(list.isListEmpty).toBeTruthy();
 
-        const noItemsMessage = fixture.debugElement.query(By.css('.message'));
+        const noItemsMessage = fixture.debugElement.query(By.css('.igx-list__message'));
         expect(noItemsMessage.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
     });
 
@@ -312,7 +312,7 @@ describe('List', () => {
 
         verifyItemsCount(list, 3);
 
-        const noItemsMessage = fixture.debugElement.query(By.css('.message'));
+        const noItemsMessage = fixture.debugElement.query(By.css('.igx-list__message'));
         expect(noItemsMessage.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
 
         list.isLoading = false;
diff --git a/projects/igniteui-angular/src/lib/list/list.component.ts b/projects/igniteui-angular/src/lib/list/list.component.ts
@@ -457,7 +457,7 @@ export class IgxListComponent extends IgxListBaseDirective {
      * let isEmpty =  this.list.isListEmpty;
      * ```
      */
-    @HostBinding('class.igx-list-empty')
+    @HostBinding('class.igx-list--empty')
     public get isListEmpty(): boolean {
         return !this.children || this.children.length === 0;
     }
diff --git a/src/app/list/list.sample.html b/src/app/list/list.sample.html
@@ -256,18 +256,7 @@ <h4 class="sample-title">
                 Empty list
                 <i class="light">w/ Default template</i>
             </h4>
-
-            <igx-input-group type="search" style="margin-bottom: 16px" [hidden]="fruits.length === 0">
-                <igx-prefix>
-                    <igx-icon>search</igx-icon>
-                </igx-prefix>
-                <input #searchFruits igxInput type="text" placeholder="Search List" [(ngModel)]="fruitsSearch" />
-                <igx-suffix *ngIf="searchFruits.value.length > 0" (click)="searchFruits.value = ''">
-                    <igx-icon>clear</igx-icon>
-                </igx-suffix>
-            </igx-input-group>
-
-            <div class="list-sample list-sample--add">
+            <div class="list-sample">
                 <igx-card>
                     <igx-list [displayDensity]="density" [hidden]="fruitsFilteredItemsCount === 0" [igxFilter]="fruitsFilterOptions" (filtered)="fruitsFiltered($event)">
                         <igx-list-item *ngFor="let fruit of fruits" [attr.data-fruit-id]="fruit.id">
@@ -276,13 +265,6 @@ <h4 class="sample-title">
                         </igx-list-item>
                     </igx-list>
                 </igx-card>
-                <div class="igx-list__empty--custom" [hidden]="fruitsFilteredItemsCount > 0 || searchFruits.value === ''">
-                    No filtered items.
-                </div>
-                <button igxButton="fab" igxButtonColor="white" igxButtonBackground="#0375be" igRipple="white" (click)="addFruitDialog.open()"
-                        [hidden]="fruits.length === 0" style="position: absolute; bottom: 24px; right: 24px">
-                    <igx-icon>add</igx-icon>
-                </button>
             </div>
         </article>
 
diff --git a/src/app/list/list.sample.scss b/src/app/list/list.sample.scss
@@ -9,15 +9,6 @@
             margin: 30px auto 0;
         }
 
-        .igx-list__empty--custom {
-            text-align: center;
-            opacity: .7;
-        }
-
-        .list-sample--add {
-            position: relative;
-        }
-
         .sample-column.bootstrap {
             display: none;
         }

Original file line number	Diff line number	Diff line change
`@@ -306,31 +306,18 @@`
`306`	`306`	`}`
`307`	`307`	`}`
`308`	`308`
`309`		`- %igx-list-empty {`
	`309`	`+ %igx-list--empty {`
`310`	`310`	`justify-content: center;`
`311`	`311`	`align-items: center;`
`312`	`312`	`}`
`313`	`313`
`314`		`- %igx-list-empty-image {`
`315`		`- width: auto;`
`316`		`- max-height: 120px;`
`317`		`- }`
`318`		`-`
`319`		`- %igx-list-empty-message {`
	`314`	`+ %igx-list__message--empty {`
`320`	`315`	`text-align: center;`
`321`	`316`	`color: --var($theme, 'item-text-color');`
`322`	`317`	`padding: map-get($list-empty-padding, 'comfortable');`
`323`	`318`	`z-index: 1;`
`324`	`319`	`}`
`325`	`320`
`326`		`- %igx-list-empty-message--cosy {`
`327`		`- padding: map-get($list-empty-padding, 'cosy');`
`328`		`- }`
`329`		`-`
`330`		`- %igx-list-empty-message--compact {`
`331`		`- padding: map-get($list-empty-padding, 'compact');`
`332`		`- }`
`333`		`-`
`334`	`321`	`%igx-list-header {`
`335`	`322`	`display: flex;`
`336`	`323`	`align-items: center;`
`@@ -375,15 +362,15 @@`
`375`	`362`	`%igx-list__item-actions {`
`376`	`363`	`color: --var($theme, 'item-action-color-hover');`
`377`	`364`
`378`		`- %igx-icon-display {`
	`365`	`+ igx-icon {`
`379`	`366`	`color: --var($theme, 'item-action-color-hover')`
`380`	`367`	`}`
`381`	`368`	`}`
`382`	`369`
`383`	`370`	`%igx-list__item-thumbnail {`
`384`	`371`	`color: --var($theme, 'item-thumbnail-color-hover');`
`385`	`372`
`386`		`- %igx-icon-display {`
	`373`	`+ igx-icon {`
`387`	`374`	`color: --var($theme, 'item-thumbnail-color-hover')`
`388`	`375`	`}`
`389`	`376`	`}`
`@@ -431,7 +418,7 @@`
`431`	`418`	`display: none;`
`432`	`419`	`}`
`433`	`420`
`434`		`- %igx-icon-display {`
	`421`	`+ igx-icon {`
`435`	`422`	`color: --var($theme, 'item-action-color')`
`436`	`423`	`}`
`437`	`424`	`}`
`@@ -462,7 +449,7 @@`
`462`	`449`	`padding: 0;`
`463`	`450`	`color: --var($theme, 'item-thumbnail-color');`
`464`	`451`
`465`		`- > %igx-icon-display {`
	`452`	`+ > igx-icon {`
`466`	`453`	`@include if-ltr() {`
`467`	`454`	`margin: map-get($list-icon-margin, 'comfortable');`
`468`	`455`	`}`
`@@ -472,8 +459,8 @@`
`472`	`459`	`}`
`473`	`460`	`}`
`474`	`461`
`475`		`- > %igx-avatar-display {`
`476`		`- > %igx-icon-display {`
	`462`	`+ > igx-avatar {`
	`463`	`+ > igx-icon {`
`477`	`464`	`margin: 0;`
`478`	`465`	`}`
`479`	`466`	`}`
`@@ -515,27 +502,27 @@`
`515`	`502`
`516`	`503`	`%igx-list__item-thumbnail--cosy {`
`517`	`504`	`@include if-ltr() {`
`518`		`- > %igx-icon-display {`
	`505`	`+ > igx-icon {`
`519`	`506`	`margin: map-get($list-icon-margin, 'cosy');`
`520`	`507`	`}`
`521`	`508`	`}`
`522`	`509`
`523`	`510`	`@include if-rtl() {`
`524`		`- > %igx-icon-display {`
	`511`	`+ > igx-icon {`
`525`	`512`	`margin: map-get($list-icon-margin-rtl, 'cosy');`
`526`	`513`	`}`
`527`	`514`	`}`
`528`	`515`	`}`
`529`	`516`
`530`	`517`	`%igx-list__item-thumbnail--compact {`
`531`	`518`	`@include if-ltr() {`
`532`		`- > %igx-icon-display {`
	`519`	`+ > igx-icon {`
`533`	`520`	`margin: map-get($list-icon-margin, 'compact');`
`534`	`521`	`}`
`535`	`522`	`}`
`536`	`523`
`537`	`524`	`@include if-rtl() {`
`538`		`- > %igx-icon-display {`
	`525`	`+ > igx-icon {`
`539`	`526`	`margin: map-get($list-icon-margin-rtl, 'compact');`
`540`	`527`	`}`
`541`	`528`	`}`
`@@ -569,15 +556,15 @@`
`569`	`556`	`%igx-list__item-actions {`
`570`	`557`	`color: --var($theme, 'item-action-color-active');`
`571`	`558`
`572`		`- %igx-icon-display {`
	`559`	`+ igx-icon {`
`573`	`560`	`color: --var($theme, 'item-action-color-active')`
`574`	`561`	`}`
`575`	`562`	`}`
`576`	`563`
`577`	`564`	`%igx-list__item-thumbnail {`
`578`	`565`	`color: --var($theme, 'item-thumbnail-color-active');`
`579`	`566`
`580`		`- %igx-icon-display {`
	`567`	`+ igx-icon {`
`581`	`568`	`color: --var($theme, 'item-thumbnail-color-active')`
`582`	`569`	`}`
`583`	`570`	`}`
Original file line number	Diff line number	Diff line change
`@@ -457,7 +457,7 @@ export class IgxListComponent extends IgxListBaseDirective {`
`457`	`457`	`* let isEmpty = this.list.isListEmpty;`
`458`	`458`	* ```
`459`	`459`	`*/`
`460`		`- @HostBinding('class.igx-list-empty')`
	`460`	`+ @HostBinding('class.igx-list--empty')`
`461`	`461`	`public get isListEmpty(): boolean {`
`462`	`462`	`return !this.children \|\| this.children.length === 0;`
`463`	`463`	`}`