Merge pull request #5036 from IgniteUI/add-density-to-drop-down_7.2.x

style(drop-down): Adding classes for different density types

Author: Lipata

CHANGELOG.md

@@ -13,6 +13,15 @@ All notable changes for each version of this project will be documented in this
 ### New features
 - **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
 - **igxSlider** - deprecate **isContiunous** property.
+- `IgxDropDown` now supports `DisplayDensity`.
+    - `[displayDensity]` - `@Input()` added to the `igx-drop-down`. Takes prevelance over any other `DisplayDensity` provider (e.g. parent component or `DisplayDensityToken` provided in module)
+    - The component can also get it's display density from Angular's DI engine (if the `DisplayDensityToken` is provided on a lower level)
+    - Setting `[displayDensity]` affects the control's items' and inputs' css properties, most notably heights, padding, font-size
+    - Available display densities are `compact`, `cosy` and `comfortable` (default)
+    - **Behavioral Change** - default item `igx-drop-down-item` height is now `40px` (down from `48px`)
+- `IgxCombo` - Setting `[displayDensity]` now also affects the combo's items
+    - Setting `[itemHeight]` overrides the height provided by the `[displayDensity]` input
+- `IgxSelect`- Setting `[displayDensity]` now also affects the select's items
 
 ### Bug Fixes
 - In slider with type Range when change the lower value to be equal or greater than the upper the range is not correct #4562

projects/igniteui-angular/src/lib/combo/README.md

@@ -233,6 +233,10 @@ When igxCombo is opened, allow custom values are enabled and add item button is
 
 - `ArrowUp` focus will be moved back to the last list item or if list is empty will be moved to the search input.
 
+## Display Density
+**igx-combo** supports setting of different display densities.
+Display density is received through Angular's DI engine or can be set through the `[displayDensity]` input. The possilbe display densities are `compact`, `cosy` and `comfortable` (default).
+Setting `[displayDensity]` affects the control's items' and inputs' css properties, most notably heights, padding, font-size.
 
 ## API
 

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -1,5 +1,6 @@
 import {
-    ChangeDetectorRef, Component, ContentChild, ElementRef, forwardRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren
+    ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChild, ContentChildren, Optional,
+    forwardRef
 } from '@angular/core';
 import { takeUntil, take } from 'rxjs/operators';
 import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
@@ -14,6 +15,7 @@ import { IgxComboAPIService } from './combo.api';
 import { IgxDropDownItemBase } from '../drop-down/drop-down-item.base';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxComboItemComponent } from './combo-item.component';
+import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 
 /** @hidden */
 @Component({
@@ -27,8 +29,9 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
         @Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase,
-        protected comboAPI: IgxComboAPIService) {
-        super(elementRef, cdr, selection);
+        protected comboAPI: IgxComboAPIService,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+        super(elementRef, cdr, selection, _displayDensityOptions);
     }
 
     protected get scrollContainer() {

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -42,7 +42,7 @@
         <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">{{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}</igx-icon>
     </igx-suffix>
 </igx-input-group>
-<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)"
+<igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity" [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)"
     (onClosing)="handleClosing($event)" (onOpened)="handleOpened()" (onClosed)="handleClosed()">
     <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
@@ -58,7 +58,7 @@
         <ng-template igxFor let-item let-index="index" [igxForOf]="data | comboFiltering:filteringExpressions:filteringLogic | comboSorting:sortingExpressions | comboGrouping:groupKey"
             [igxForScrollOrientation]="'vertical'" [igxForContainerSize]="itemsMaxHeight" [igxForItemSize]="itemHeight"
             (onChunkPreload)="dataLoading($event)">
-            <igx-combo-item  [itemHeight]='itemHeight' [value]="item" isHeader={{item.isHeader}} role="option" [index]="index">
+            <igx-combo-item  [itemHeight]='itemHeight' [value]="item" [isHeader]="item.isHeader" role="option" [index]="index">
                 <ng-container *ngIf="item.isHeader">
                     <ng-container *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase; context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}"></ng-container>
                 </ng-container>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -16,6 +16,7 @@ import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxDropDownBase } from '../drop-down/drop-down.base';
 import { IgxDropDownItemBase } from '../drop-down/drop-down-item.base';
+import { DisplayDensity, DisplayDensityToken } from '../core/density';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -41,6 +42,20 @@ const CSS_CLASS_INPUTGROUP_MAINBUNDLE = 'igx-input-group__bundle-main';
 const CSS_CLASS_INPUTGROUP_BORDER = 'igx-input-group__border';
 const CSS_CLASS_HEADER = 'header-class';
 const CSS_CLASS_FOOTER = 'footer-class';
+const CSS_CLASS_ITEM = 'igx-drop-down__item';
+const CSS_CLASS_ITEM_COSY = 'igx-drop-down__item--cosy';
+const CSS_CLASS_ITEM_COMPACT = 'igx-drop-down__item--compact';
+const CSS_CLASS_HEADER_ITEM = 'igx-drop-down__header';
+const CSS_CLASS_HEADER_COSY = 'igx-drop-down__header--cosy';
+const CSS_CLASS_HEADER_COMPACT = 'igx-drop-down__header--compact';
+const CSS_CLASS_INPUT_COSY = 'igx-input-group--cosy';
+const CSS_CLASS_INPUT_COMPACT = 'igx-input-group--compact';
+const CSS_CLASS_INPUT_COMFORTABLE = 'igx-input-group--comfortable';
+
+const fiftyItems = Array.apply(null, { length: 50 }).map((e, i) => ({
+    value: i,
+    name: `Item ${i + 1}`
+}));
 
 describe('igxCombo', () => {
     configureTestSuite();
@@ -58,7 +73,9 @@ describe('igxCombo', () => {
                 IgxComboInContainerTestComponent,
                 IgxComboInContainerFixedWidthComponent,
                 IgxComboFormComponent,
-                SimpleBindComboComponent
+                SimpleBindComboComponent,
+                DensityParentComponent,
+                DensityInputComponent
             ],
             imports: [
                 IgxComboModule,
@@ -3097,6 +3114,57 @@ describe('igxCombo', () => {
             expect(fixture.componentInstance.comboSelectedItems).toEqual([...data].splice(1, 3));
         }));
     });
+
+    describe('Combo - Display Density', () => {
+        it('Should be able to set Display Density as input', fakeAsync(() => {
+            const fixutre = TestBed.createComponent(DensityInputComponent);
+            tick();
+            fixutre.detectChanges();
+            const combo = fixutre.componentInstance.combo;
+            expect(combo.displayDensity).toEqual(DisplayDensity.cosy);
+            fixutre.componentInstance.density = DisplayDensity.compact;
+            tick();
+            fixutre.detectChanges();
+            expect(combo.displayDensity).toEqual(DisplayDensity.compact);
+            fixutre.componentInstance.density = DisplayDensity.comfortable;
+            tick();
+            fixutre.detectChanges();
+            expect(combo.displayDensity).toEqual(DisplayDensity.comfortable);
+        }));
+        it('Should be able to get Display Density from DI engine', fakeAsync(() => {
+            const fixutre = TestBed.createComponent(DensityInputComponent);
+            tick();
+            fixutre.detectChanges();
+            const combo = fixutre.componentInstance.combo;
+            expect(combo.displayDensity).toEqual(DisplayDensity.cosy);
+        }));
+        it('Should apply correct styles to items and input when Display Density is set', fakeAsync(() => {
+            const fixutre = TestBed.createComponent(DensityInputComponent);
+            tick();
+            fixutre.detectChanges();
+            const combo = fixutre.componentInstance.combo;
+            combo.toggle();
+            tick();
+            fixutre.detectChanges();
+            expect(combo.dropdown.items.length).toEqual(document.getElementsByClassName(CSS_CLASS_ITEM_COSY).length);
+            expect(combo.dropdown.headers.length).toEqual(document.getElementsByClassName(CSS_CLASS_HEADER_COSY).length);
+            expect(document.getElementsByClassName(CSS_CLASS_INPUT_COSY).length).toBe(2);
+            fixutre.componentInstance.density = DisplayDensity.compact;
+            tick();
+            fixutre.detectChanges();
+            expect(combo.dropdown.items.length).toEqual(document.getElementsByClassName(CSS_CLASS_ITEM_COMPACT).length);
+            expect(combo.dropdown.headers.length).toEqual(document.getElementsByClassName(CSS_CLASS_HEADER_COMPACT).length);
+            expect(document.getElementsByClassName(CSS_CLASS_INPUT_COMPACT).length).toBe(2);
+            fixutre.componentInstance.density = DisplayDensity.comfortable;
+            tick();
+            fixutre.detectChanges();
+            expect(combo.dropdown.items.length).toEqual(document.getElementsByClassName(CSS_CLASS_ITEM).length);
+            expect(combo.dropdown.headers.length).toEqual(document.getElementsByClassName(CSS_CLASS_HEADER_ITEM).length);
+            expect(document.getElementsByClassName(CSS_CLASS_INPUT_COMFORTABLE).length).toBe(2);
+            expect(document.getElementsByClassName(CSS_CLASS_ITEM_COMPACT).length).toEqual(0);
+            expect(document.getElementsByClassName(CSS_CLASS_ITEM_COSY).length).toEqual(0);
+        }));
+    });
 });
 
 @Component({
@@ -3603,3 +3671,31 @@ export class SimpleBindComboComponent implements OnInit {
         this.comboSelectedItems = ['One', 'Two'];
     }
 }
+
+@Component({
+    template: `
+        <igx-combo #combo [data]="items" [displayDensity]="density" [displayKey]="'name'" [valueKey]="'value'">
+        </igx-combo>
+    `
+})
+class DensityInputComponent {
+    public density = DisplayDensity.cosy;
+    @ViewChild('combo', { read: IgxComboComponent })
+    public combo: IgxComboComponent;
+    public items = fiftyItems;
+}
+
+@Component({
+    template: `
+        <igx-combo #combo [data]="items" [displayKey]="'name'" [valueKey]="'value'">
+        </igx-combo>
+    `,
+    providers: [{
+        provide: DisplayDensityToken, useValue: DisplayDensity.cosy
+    }]
+})
+class DensityParentComponent {
+    @ViewChild('combo', { read: IgxComboComponent })
+    public combo: IgxComboComponent;
+    public items = fiftyItems;
+}

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -32,7 +32,7 @@ import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPipe, IgxComboSortingPipe } from './combo.pipes';
 import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
@@ -69,6 +69,15 @@ enum DataTypes {
     PRIMARYKEY = 'valueKey'
 }
 
+/**
+ * @hidden
+ */
+const ItemHeights = {
+    'comfortable': 48,
+    'cosy': 32,
+    'compact': 28,
+};
+
 export enum IgxComboState {
     /**
      * Combo with initial state.
@@ -131,6 +140,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private destroy$ = new Subject<any>();
     private _data = [];
     private _filteredData = [];
+    private _itemHeight = null;
     private _positionCallback: () => void;
     private _onChangeCallback: (_: any) => void = noop;
     private overlaySettings: OverlaySettings = {
@@ -670,7 +680,16 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Input()
-    public itemHeight = 48;
+    public get itemHeight(): number {
+        if (this._itemHeight === null || this._itemHeight === undefined) {
+            return ItemHeights[this.displayDensity];
+        }
+        return this._itemHeight;
+    }
+
+    public set itemHeight(val: number) {
+        this._itemHeight = val;
+    }
 
     /**
      * @hidden @internal

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss

@@ -24,6 +24,14 @@
         @extend %igx-drop-down__item !optional;
     }
 
+    @include e(item, $m: cosy) {
+        @extend %igx-drop-down__item--cosy !optional;
+    }
+
+    @include e(item, $m: compact) {
+        @extend %igx-drop-down__item--compact !optional;
+    }
+
     @include e(item, $m: focused) {
         @extend %igx-drop-down__item--focused !optional;
     }
@@ -44,6 +52,14 @@
         @extend %igx-drop-down__header !optional;
     }
 
+    @include e(header, $m: cosy) {
+        @extend %igx-drop-down__header--cosy !optional;
+    }
+
+    @include e(header, $m: compact) {
+        @extend %igx-drop-down__header--compact !optional;
+    }
+
     @include e(group) {
         @extend %igx-drop-down__group !optional;
     }