Select: Adding support for items suffix and prefix (#13256)

* feat(dropdown): support igxPrefix and igxSuffix directives in the context of the dropdown items
Closes #13208
---------

Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 16.1.0
+### New Features
+- `IgxSelect`:
+    - The select component now has the ability to handle `igxPrefix` and `igxSuffix` directives inside `igx-select-item`.
+
+     ```html
+        <igx-select-item>
+            <igx-icon igxPrefix>alarm</igx-icon>
+            Select item text content
+            <igx-icon igxSuffix>alarm</igx-icon>
+        </igx-select-item>
+     ```
 
 ### General
 - `IgxStepper`:

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

@@ -193,30 +193,6 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'variant');
 
-    $item-padding-inline: (
-        comfortable: rem(24px),
-        cosy: rem(20px),
-        compact: rem(16px)
-    );
-
-    $prefix-margin: (
-        comfortable: rem(20px),
-        cosy: rem(16px),
-        compact: rem(12px)
-    );
-
-    $suffix-margin: (
-        comfortable: rem(8px),
-        cosy: rem(6px),
-        compact: rem(4px)
-    );
-
-    $header-item-padding-inline: (
-        comfortable: rem(16px),
-        cosy: rem(12px),
-        compact: rem(8px)
-    );
-
     %igx-drop-down {
         position: absolute;
     }
@@ -241,6 +217,7 @@
         display: flex;
         width: 100%;
         align-items: center;
+        gap: rem(8px)
     }
 
     %igx-drop-down__inner {
@@ -249,6 +226,11 @@
         margin-inline-end: auto;
     }
 
+    %igx-drop-down__inner + [igxSuffix],
+    %igx-drop-down__inner + igx-suffix {
+        margin-inline-end: 0;
+    }
+
     %igx-drop-down__header,
     %igx-drop-down__item {
         --component-size: var(--ig-size, var(--ig-size-large));
@@ -261,29 +243,23 @@
         position: relative;
         height: sizable(#{rem(28px)}, #{rem(32px)}, #{rem(40px)});
 
-        igx-prefix,
-        [igxPrefix] {
-            @extend %igx-drop-down__prefix;
-        }
-
-        igx-suffix,
-        [igxSuffix] {
-            @extend %igx-drop-down__suffix;
-        }
-
         igx-divider {
             position: absolute;
             width: 100%;
             inset-inline-start: 0;
             bottom: 0;
         }
+
+        igx-icon {
+            justify-content: center;
+            --component-size: var(--ig-size, var(--ig-size-large));
+        }
     }
 
     %igx-drop-down__item {
         color: var-get($theme, 'item-text-color');
         cursor: pointer;
-        padding-inline: map.get($item-padding-inline, 'comfortable');
-        padding-block: 0;
+        padding-inline: pad-inline(rem(16px), rem(20px), rem(24px));
         border-radius: var-get($theme, 'item-border-radius');
 
         &:focus {
@@ -299,90 +275,29 @@
         }
     }
 
-    %igx-drop-down__item--cosy {
-        padding-inline: map.get($item-padding-inline, 'cosy')
-    }
 
     %igx-drop-down__item--cosy,
     %igx-drop-down__header--cosy {
         --component-size: var(--ig-size, var(--ig-size-medium));
 
-        igx-prefix,
-        [igxPrefix] {
-            @extend %igx-drop-down__prefix--cosy;
-        }
-
-        igx-suffix,
-        [igxSuffix] {
-            @extend %igx-drop-down__suffix--cosy;
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-medium))
         }
     }
 
-    %igx-drop-down__item--compact {
-        padding-inline: map.get($item-padding-inline, 'compact');
-    }
-
     %igx-drop-down__item--compact,
     %igx-drop-down__header--compact {
         --component-size: var(--ig-size, var(--ig-size-small));
 
-        igx-prefix,
-        [igxPrefix] {
-            @extend %igx-drop-down__prefix--compact;
-        }
-
-        igx-suffix,
-        [igxSuffix] {
-            @extend %igx-drop-down__suffix--compact;
-        }
-    }
-
-    %igx-drop-down__prefix {
-        margin-inline-end: map.get($prefix-margin, 'comfortable');
-    }
-
-    %igx-drop-down__suffix {
-        + igx-suffix,
-        + [igxSuffix] {
-            margin-inline-start: map.get($suffix-margin, 'comfortable');
-        }
-    }
-
-    %igx-drop-down__prefix--cosy {
-        margin-inline-end: map.get($prefix-margin, 'cosy');
-    }
-
-    %igx-drop-down__suffix--cosy {
-        + igx-suffix,
-        + [igxSuffix] {
-            margin-inline-start: map.get($suffix-margin, 'cosy');
-        }
-    }
-
-    %igx-drop-down__prefix--compact {
-        margin-inline-end: map.get($prefix-margin, 'compact');
-    }
-
-    %igx-drop-down__suffix--compact {
-        + igx-suffix,
-        + [igxSuffix] {
-            margin-inline-start: map.get($suffix-margin, 'compact');
+        igx-icon {
+            --component-size: var(--ig-size, var(--ig-size-small));
         }
     }
 
     %igx-drop-down__header {
         color: var-get($theme, 'header-text-color');
         pointer-events: none;
-        padding-inline: map.get($header-item-padding-inline, 'comfortable');
-        padding-block: 0;
-    }
-
-    %igx-drop-down__header--cosy {
-        padding-inline: map.get($header-item-padding-inline, 'cosy');
-    }
-
-    %igx-drop-down__header--compact {
-        padding-inline: map.get($header-item-padding-inline, 'compact');
+        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
     }
 
     %igx-drop-down__group {

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

@@ -0,0 +1,5 @@
+<span class="igx-drop-down__content">
+    <ng-content select="igx-prefix, [igxPrefix]"></ng-content>
+    <span class="igx-drop-down__inner"><ng-content></ng-content></span>
+    <ng-content select="igx-suffix, [igxSuffix]"></ng-content>
+</span>

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

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

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

@@ -15,7 +15,7 @@ <h5>With Action directive</h5>
             <button igxButton [igxToggleAction]="group" [igxDropDownItemNavigation]="group">Group</button>
         </igx-buttongroup>
 
-        <h5>Density types</h5>
+        <h5>Density types - Prefix/suffix</h5>
         <igx-buttongroup [multiSelection]="false">
             <button igxButton [igxToggleAction]="dropDownComfortable" [igxDropDownItemNavigation]="dropDownComfortable" displayDensity="comfortable">Comfortable</button>
             <button igxButton [igxToggleAction]="dropDownCosy" [igxDropDownItemNavigation]="dropDownCosy" displayDensity="cosy">Cosy</button>
@@ -58,19 +58,25 @@ <h5>Density types</h5>
 
     <igx-drop-down #dropDownComfortable (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px'  displayDensity="comfortable">
         <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
+            <igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
             {{ item.field }}
+            <igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
         </igx-drop-down-item>
     </igx-drop-down>
 
     <igx-drop-down #dropDownCosy (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px'  displayDensity="cosy">
         <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
+            <igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
             {{ item.field }}
+            <igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
         </igx-drop-down-item>
     </igx-drop-down>
 
     <igx-drop-down #dropDownCompact (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px' displayDensity="compact">
         <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
+            <igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
             {{ item.field }}
+            <igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
         </igx-drop-down-item>
     </igx-drop-down>
 </section>

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

@@ -1,8 +1,25 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { NgFor } from '@angular/common';
+import { NgFor, NgIf } from '@angular/common';
 
 import { foods } from './foods';
-import { ConnectedPositioningStrategy, IgxButtonDirective, IgxButtonGroupComponent, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxInputDirective, IgxInputGroupComponent, IgxOverlayOutletDirective, IgxRippleDirective, IgxToggleActionDirective, IgxToggleDirective, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular';
+import {
+	ConnectedPositioningStrategy,
+	IgxButtonDirective,
+	IgxButtonGroupComponent,
+	IgxDropDownComponent,
+	IgxDropDownGroupComponent,
+	IgxDropDownItemComponent,
+	IgxDropDownItemNavigationDirective,
+	IgxIconComponent,
+	IgxInputDirective,
+	IgxInputGroupComponent,
+	IgxOverlayOutletDirective,
+	IgxRippleDirective,
+	IgxToggleActionDirective,
+	IgxToggleDirective,
+	NoOpScrollStrategy,
+	OverlaySettings,
+} from 'igniteui-angular';
 
 
 @Component({
@@ -11,21 +28,23 @@ import { ConnectedPositioningStrategy, IgxButtonDirective, IgxButtonGroupCompone
     templateUrl: './drop-down.sample.html',
     styleUrls: ['drop-down.sample.scss'],
     standalone: true,
-    imports: [
-        NgFor,
-        IgxButtonGroupComponent,
-        IgxButtonDirective,
-        IgxDropDownItemNavigationDirective,
-        IgxToggleActionDirective,
-        IgxDropDownComponent,
-        IgxDropDownItemComponent,
-        IgxToggleDirective,
-        IgxDropDownGroupComponent,
-        IgxInputGroupComponent,
-        IgxInputDirective,
-        IgxRippleDirective,
-        IgxOverlayOutletDirective
-    ]
+	imports: [
+		NgFor,
+		IgxButtonGroupComponent,
+		IgxButtonDirective,
+		IgxDropDownItemNavigationDirective,
+		IgxToggleActionDirective,
+		IgxDropDownComponent,
+		IgxDropDownItemComponent,
+		IgxToggleDirective,
+		IgxDropDownGroupComponent,
+		IgxInputGroupComponent,
+		IgxInputDirective,
+		IgxRippleDirective,
+		IgxOverlayOutletDirective,
+		IgxIconComponent,
+		NgIf,
+	],
 })
 export class DropDownSampleComponent implements OnInit {
     @ViewChild(IgxDropDownComponent, { static: true })

src/app/select/select.sample.html

@@ -32,9 +32,13 @@ <h1 class="select-sample__title">Select with ngModel, set items OnInit</h1>
             <igx-prefix igxPrefix>
                 <igx-icon>alarm</igx-icon>
             </igx-prefix>
-            <igx-select-item>None</igx-select-item>
+            <igx-select-item>
+                None
+            </igx-select-item>
             <igx-select-item *ngFor="let item of items; let inx=index" [value]="item.field">
+                <igx-icon igxPrefix>alarm</igx-icon>
                 {{ item.field }}
+                <igx-icon igxSuffix>notifications_active</igx-icon>
             </igx-select-item>
             <ng-template igxSelectHeader>
                 <div class="custom-select-header" (click)="headerFootedClick($event);">
@@ -117,9 +121,21 @@ <h1 class="select-sample__title">Select - using Groups</h1>
         </igx-prefix>
         <igx-select-item value="1">OutsideGroup</igx-select-item>
         <igx-select-item-group label="Group">
-            <igx-select-item [disabled]="true" value="2">InsideGroup1</igx-select-item>
-            <igx-select-item value="3">InsideGroup2</igx-select-item>
-            <igx-select-item value="4">InsideGroup3</igx-select-item>
+            <igx-select-item [disabled]="true" value="2">
+                <igx-icon igxPrefix>alarm</igx-icon>
+                InsideGroup1
+                <igx-icon igxSuffix>alarm</igx-icon>
+            </igx-select-item>
+            <igx-select-item value="3">
+                <igx-icon igxPrefix>alarm</igx-icon>
+                InsideGroup2
+                <igx-icon igxSuffix>alarm</igx-icon>
+            </igx-select-item>
+            <igx-select-item value="4">
+                <igx-icon igxPrefix>alarm</igx-icon>
+                InsideGroup3
+                <igx-icon igxSuffix>alarm</igx-icon>
+            </igx-select-item>
         </igx-select-item-group>
     </igx-select>
     </section>