feat(dropdown, combo, select) adding extra span to enable ellipsis by default #7190 (#7329)

Author: desig9stein

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.0
+
+### General
+- `igx-select`, `igx-combo`, `igx-drop-down`
+- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+
 ## 9.1.1
 
 ### General
@@ -129,11 +135,11 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
-    - Added new properties for paging:
-     - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
-     - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
+  - Added new properties for paging:	
+    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.	
+    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.   
     - Added functionality for column selection.
-     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
+    - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
     - `selectable` property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
     - `onColumnSelectionChange` event is added for the `IgxGrid`. It is emitted when the column selection is changed.

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

@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
     <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
-<ng-content></ng-content>
+<span class="igx-drop-down__inner"><ng-content></ng-content></span>

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

@@ -25,6 +25,10 @@
         @extend %igx-drop-down__item !optional;
     }
 
+    @include e(inner) {
+        @extend %igx-drop-down__inner !optional;
+    }
+
     @include e(item, $m: cosy) {
         @extend %igx-drop-down__item--cosy !optional;
     }

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

@@ -271,6 +271,11 @@
         }
     }
 
+    %igx-drop-down__inner {
+        display: block;
+        @include ellipsis();
+    }
+
     %igx-drop-down__item--cosy {
         height: map-get($item-height, 'cosy');
         padding: map-get($item-padding, 'cosy');

projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.html

@@ -1 +1 @@
-<ng-content></ng-content>
+<span class="igx-drop-down__inner"><ng-content></ng-content></span>

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -21,6 +21,7 @@ const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
 const CSS_CLASS_LIST = 'igx-drop-down__list';
 const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll';
 const CSS_CLASS_ITEM = 'igx-drop-down__item';
+const CSS_CLASS_INNER_SPAN = 'igx-drop-down__inner';
 const CSS_CLASS_GROUP_ITEM = 'igx-drop-down__group';
 const CSS_CLASS_ITEM_COSY = 'igx-drop-down__item--cosy';
 const CSS_CLASS_ITEM_COMPACT = 'igx-drop-down__item--compact';
@@ -977,7 +978,7 @@ describe('IgxDropDown ', () => {
                 dropdown.toggle();
                 fixture.detectChanges();
                 expect(dropdown.collapsed).toBeFalsy();
-                const dropdownItems = document.querySelectorAll(`.${CSS_CLASS_ITEM}`);
+                const dropdownItems = document.querySelectorAll(`.${CSS_CLASS_INNER_SPAN}`);
                 expect(dropdownItems.length).toEqual(9);
                 expect(dropdown.items.length).toEqual(9);
                 for (let i = 0; i < dropdownItems.length; i++) {

projects/igniteui-angular/src/lib/select/select-item.component.ts

@@ -3,7 +3,7 @@ import { Component, DoCheck, Input } from '@angular/core';
 
 @Component({
     selector: 'igx-select-item',
-    template: '<ng-content></ng-content>'
+    template: '<span class="igx-drop-down__inner"><ng-content></ng-content></span>'
 })
 export class IgxSelectItemComponent extends IgxDropDownItemComponent implements DoCheck {
 

src/app/drop-down/drop-down.sample.html

@@ -29,33 +29,25 @@ <h5>Density types</h5>
         <igx-drop-down #dropdown1 (onSelection)="onSelection($event)" (onOpening)="onOpening($event)">
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
                                 [selected]="item.selected">
-                <div class="igx-drop-down__item-template">
                     {{ item.field }}
-                </div>
             </igx-drop-down-item>
         </igx-drop-down>
 
         <igx-drop-down #dropdown2 (onSelection)="onSelection($event)" (onOpening)="onOpening($event)" height='400px'>
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
-                <div class="igx-drop-down__item-template">
                     {{ item.field }}
-                </div>
             </igx-drop-down-item>
         </igx-drop-down>
 
         <div igxToggle #toggle="toggle" style="height: 300px; overflow: auto">
             <div *ngFor="let item of items">
-                <div class="igx-drop-down__item-template">
                     {{ item.field }}
-                </div>
             </div>
         </div>
 
         <igx-drop-down #menu (onSelection)="onSelectionMenu($event)" height='400px'>
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
-                <div class="igx-drop-down__item-template">
                     {{ item.field }}
-                </div>
             </igx-drop-down-item>
         </igx-drop-down>
 
@@ -93,9 +85,7 @@ <h5>Density types</h5>
         <igx-drop-down #dropdown3 (onOpening)="onOpening($event)" (onSelection)="onSelectionLogger($event)" height='400px'>
             <igx-drop-down-item *ngFor="let item of items" [value]="item" [disabled]="item.disabled"
                 [isHeader]="item.header">
-                <div class="igx-drop-down__item-template">
                     {{ item.field }}
-                </div>
             </igx-drop-down-item>
         </igx-drop-down>
         <button igxButton="raised" igxRipple (click)="clearSelection()" style="display: block">

src/app/drop-down/drop-down.sample.scss

@@ -1,15 +1,3 @@
-.igx-drop-down__item-template {
-    -webkit-user-select: none;  /* Chrome all / Safari all */
-    -moz-user-select: none;     /* Firefox all */
-    -ms-user-select: none;      /* IE 10+ */
-    user-select: none;          /* Likely future */
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%
-}
-
 .sample-button-group {
     display: flex;
     flex-direction: column;