refactor(displayDensity): Address code review suggestions

IgniteUI · Dec 4, 2018 · 713cefc · 713cefc
1 parent 5fe0eef
commit 713cefc
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 17 deletions.
diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts
@@ -303,7 +303,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        const classes = [this.componentDensityClass('igx-chip')];
+        const classes = [this.getComponentDensityClass('igx-chip')];
         classes.push(this.disabled ? 'igx-chip--disabled' : '');
         // The custom classes should be at the end.
         classes.push(this.class);
@@ -352,7 +352,7 @@ export class IgxChipComponent extends DisplayDensityBase {
      * @hidden
      */
     public get ghostClass(): string {
-        return this.componentDensityClass('igx-chip__ghost');
+        return this.getComponentDensityClass('igx-chip__ghost');
     }
 
     public get chipTabindex() {

diff --git a/projects/igniteui-angular/src/lib/core/displayDensity.ts b/projects/igniteui-angular/src/lib/core/displayDensity.ts
@@ -91,7 +91,7 @@ export class DisplayDensityBase implements DoCheck {
      * Given a style class of a component/element returns the modified version of it based
      * on the current display density.
      */
-    protected componentDensityClass(baseStyleClass: string): string {
+    protected getComponentDensityClass(baseStyleClass: string): string {
         switch (this.displayDensity) {
             case DisplayDensity.cosy:
                 return `${baseStyleClass}--${DisplayDensity.cosy}`;

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -1464,12 +1464,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        return this.componentDensityClass('igx-grid');
+        return this.getComponentDensityClass('igx-grid');
     }
 
     get bannerClass(): string {
         const position = this.rowEditPositioningStrategy.isTop ? 'igx-banner__border-top' : 'igx-banner__border-bottom';
-        return `${this.componentDensityClass('igx-banner')} ${position}`;
+        return `${this.getComponentDensityClass('igx-banner')} ${position}`;
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts b/projects/igniteui-angular/src/lib/grids/grid-summary.component.ts
@@ -7,6 +7,7 @@ import { GridBaseAPIService } from './api.service';
 import { IgxColumnComponent } from './column.component';
 import { IgxGridBaseComponent } from './grid-base.component';
 import { IgxSummaryResult } from './grid-summary';
+import { DisplayDensity } from '../core/displayDensity';
 /**
  *@hidden
  */
@@ -59,17 +60,17 @@ export class IgxGridSummaryComponent implements DoCheck {
 
     @HostBinding('class.igx-grid-summary--compact')
     get compactCSS() {
-        return this.gridAPI.get(this.gridID).displayDensity === 'compact';
+        return this.gridAPI.get(this.gridID).displayDensity === DisplayDensity.compact;
     }
 
     @HostBinding('class.igx-grid-summary--cosy')
     get cosyCSS() {
-        return this.gridAPI.get(this.gridID).displayDensity === 'cosy';
+        return this.gridAPI.get(this.gridID).displayDensity === DisplayDensity.cosy;
     }
 
     @HostBinding('class.igx-grid-summary')
     get defaultCSS() {
-        return this.gridAPI.get(this.gridID).displayDensity === 'comfortable';
+        return this.gridAPI.get(this.gridID).displayDensity === DisplayDensity.comfortable;
     }
 
     get dataType(): DataType {

diff --git a/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts
@@ -206,7 +206,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     @HostBinding('attr.class')
     get hostClass(): string {
-        return this.componentDensityClass('igx-grid-toolbar');
+        return this.getComponentDensityClass('igx-grid-toolbar');
     }
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -426,7 +426,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements OnInit, Do
      * @hidden
      */
     get groupAreaHostClass(): string {
-        return this.componentDensityClass('igx-drop-area');
+        return this.getComponentDensityClass('igx-drop-area');
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -222,23 +222,23 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--cosy')
     get isDisplayDensityCosy() {
-        return this.displayDensity === 'cosy';
+        return this.displayDensity === DisplayDensity.cosy;
     }
 
     /**
      *@hidden
      */
     @HostBinding('class.igx-input-group--comfortable')
     get isDisplayDensityComfortable() {
-        return this.displayDensity === 'comfortable';
+        return this.displayDensity === DisplayDensity.comfortable;
     }
 
     /**
      *@hidden
      */
     @HostBinding('class.igx-input-group--compact')
     get isDisplayDensityCompact() {
-        return this.displayDensity === 'compact';
+        return this.displayDensity === DisplayDensity.compact;
     }
 
     /**

diff --git a/src/app/combo/combo.sample.html b/src/app/combo/combo.sample.html
@@ -64,9 +64,9 @@
         </div>
         <div>
             <h4>Display Density</h4>
-            <button igxButton="raised" [disabled]="igxCombo.displayDensity === 'compact'" (click)="setDensity('compact')">Compact</button>
-            <button igxButton="raised" [disabled]="igxCombo.displayDensity === 'cosy'" (click)="setDensity('cosy')">Cosy</button>
-            <button igxButton="raised" [disabled]="igxCombo.displayDensity === 'comfortable'" (click)="setDensity('comfortable')">Comfortable</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === compact" (click)="setDensity(compact)">Compact</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
+            <button igxButton="raised" [disabled]="igxCombo.displayDensity === comfortable" (click)="setDensity(comfortable)">Comfortable</button>
         </div>
     </section>
     </div>

diff --git a/src/app/combo/combo.sample.ts b/src/app/combo/combo.sample.ts
@@ -42,8 +42,13 @@ export class ComboSampleComponent implements OnInit {
     @ViewChild('customItemTemplate', {read: TemplateRef})
     private customItemTemplate;
     private initialItemTemplate: TemplateRef<any> = null;
-    constructor() {
 
+    comfortable = DisplayDensity.comfortable;
+    cosy = DisplayDensity.cosy;
+    compact = DisplayDensity.compact;
+
+
+    constructor() {
         const division = {
             'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
             'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],