Skip to content

Commit 47b94e2

Browse files
desig9steinSisIvanovasimeonoff
authored
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]>
1 parent bbea09f commit 47b94e2

File tree

7 files changed

+97
-125
lines changed

7 files changed

+97
-125
lines changed

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes for each version of this project will be documented in this file.
44

55
## 16.1.0
6+
### New Features
7+
- `IgxSelect`:
8+
- The select component now has the ability to handle `igxPrefix` and `igxSuffix` directives inside `igx-select-item`.
9+
10+
```html
11+
<igx-select-item>
12+
<igx-icon igxPrefix>alarm</igx-icon>
13+
Select item text content
14+
<igx-icon igxSuffix>alarm</igx-icon>
15+
</igx-select-item>
16+
```
617

718
### General
819
- `IgxStepper`:

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

+17-102
Original file line numberDiff line numberDiff line change
@@ -193,30 +193,6 @@
193193
@include css-vars($theme);
194194
$variant: map.get($theme, '_meta', 'variant');
195195

196-
$item-padding-inline: (
197-
comfortable: rem(24px),
198-
cosy: rem(20px),
199-
compact: rem(16px)
200-
);
201-
202-
$prefix-margin: (
203-
comfortable: rem(20px),
204-
cosy: rem(16px),
205-
compact: rem(12px)
206-
);
207-
208-
$suffix-margin: (
209-
comfortable: rem(8px),
210-
cosy: rem(6px),
211-
compact: rem(4px)
212-
);
213-
214-
$header-item-padding-inline: (
215-
comfortable: rem(16px),
216-
cosy: rem(12px),
217-
compact: rem(8px)
218-
);
219-
220196
%igx-drop-down {
221197
position: absolute;
222198
}
@@ -241,6 +217,7 @@
241217
display: flex;
242218
width: 100%;
243219
align-items: center;
220+
gap: rem(8px)
244221
}
245222

246223
%igx-drop-down__inner {
@@ -249,6 +226,11 @@
249226
margin-inline-end: auto;
250227
}
251228

229+
%igx-drop-down__inner + [igxSuffix],
230+
%igx-drop-down__inner + igx-suffix {
231+
margin-inline-end: 0;
232+
}
233+
252234
%igx-drop-down__header,
253235
%igx-drop-down__item {
254236
--component-size: var(--ig-size, var(--ig-size-large));
@@ -261,29 +243,23 @@
261243
position: relative;
262244
height: sizable(#{rem(28px)}, #{rem(32px)}, #{rem(40px)});
263245

264-
igx-prefix,
265-
[igxPrefix] {
266-
@extend %igx-drop-down__prefix;
267-
}
268-
269-
igx-suffix,
270-
[igxSuffix] {
271-
@extend %igx-drop-down__suffix;
272-
}
273-
274246
igx-divider {
275247
position: absolute;
276248
width: 100%;
277249
inset-inline-start: 0;
278250
bottom: 0;
279251
}
252+
253+
igx-icon {
254+
justify-content: center;
255+
--component-size: var(--ig-size, var(--ig-size-large));
256+
}
280257
}
281258

282259
%igx-drop-down__item {
283260
color: var-get($theme, 'item-text-color');
284261
cursor: pointer;
285-
padding-inline: map.get($item-padding-inline, 'comfortable');
286-
padding-block: 0;
262+
padding-inline: pad-inline(rem(16px), rem(20px), rem(24px));
287263
border-radius: var-get($theme, 'item-border-radius');
288264

289265
&:focus {
@@ -299,90 +275,29 @@
299275
}
300276
}
301277

302-
%igx-drop-down__item--cosy {
303-
padding-inline: map.get($item-padding-inline, 'cosy')
304-
}
305278

306279
%igx-drop-down__item--cosy,
307280
%igx-drop-down__header--cosy {
308281
--component-size: var(--ig-size, var(--ig-size-medium));
309282

310-
igx-prefix,
311-
[igxPrefix] {
312-
@extend %igx-drop-down__prefix--cosy;
313-
}
314-
315-
igx-suffix,
316-
[igxSuffix] {
317-
@extend %igx-drop-down__suffix--cosy;
283+
igx-icon {
284+
--component-size: var(--ig-size, var(--ig-size-medium))
318285
}
319286
}
320287

321-
%igx-drop-down__item--compact {
322-
padding-inline: map.get($item-padding-inline, 'compact');
323-
}
324-
325288
%igx-drop-down__item--compact,
326289
%igx-drop-down__header--compact {
327290
--component-size: var(--ig-size, var(--ig-size-small));
328291

329-
igx-prefix,
330-
[igxPrefix] {
331-
@extend %igx-drop-down__prefix--compact;
332-
}
333-
334-
igx-suffix,
335-
[igxSuffix] {
336-
@extend %igx-drop-down__suffix--compact;
337-
}
338-
}
339-
340-
%igx-drop-down__prefix {
341-
margin-inline-end: map.get($prefix-margin, 'comfortable');
342-
}
343-
344-
%igx-drop-down__suffix {
345-
+ igx-suffix,
346-
+ [igxSuffix] {
347-
margin-inline-start: map.get($suffix-margin, 'comfortable');
348-
}
349-
}
350-
351-
%igx-drop-down__prefix--cosy {
352-
margin-inline-end: map.get($prefix-margin, 'cosy');
353-
}
354-
355-
%igx-drop-down__suffix--cosy {
356-
+ igx-suffix,
357-
+ [igxSuffix] {
358-
margin-inline-start: map.get($suffix-margin, 'cosy');
359-
}
360-
}
361-
362-
%igx-drop-down__prefix--compact {
363-
margin-inline-end: map.get($prefix-margin, 'compact');
364-
}
365-
366-
%igx-drop-down__suffix--compact {
367-
+ igx-suffix,
368-
+ [igxSuffix] {
369-
margin-inline-start: map.get($suffix-margin, 'compact');
292+
igx-icon {
293+
--component-size: var(--ig-size, var(--ig-size-small));
370294
}
371295
}
372296

373297
%igx-drop-down__header {
374298
color: var-get($theme, 'header-text-color');
375299
pointer-events: none;
376-
padding-inline: map.get($header-item-padding-inline, 'comfortable');
377-
padding-block: 0;
378-
}
379-
380-
%igx-drop-down__header--cosy {
381-
padding-inline: map.get($header-item-padding-inline, 'cosy');
382-
}
383-
384-
%igx-drop-down__header--compact {
385-
padding-inline: map.get($header-item-padding-inline, 'compact');
300+
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
386301
}
387302

388303
%igx-drop-down__group {

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<span class="igx-drop-down__content">
2+
<ng-content select="igx-prefix, [igxPrefix]"></ng-content>
3+
<span class="igx-drop-down__inner"><ng-content></ng-content></span>
4+
<ng-content select="igx-suffix, [igxSuffix]"></ng-content>
5+
</span>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
33

44
@Component({
55
selector: 'igx-select-item',
6-
template: '<span class="igx-drop-down__inner"><ng-content></ng-content></span>',
6+
templateUrl: 'select-item.component.html',
77
standalone: true
88
})
99
export class IgxSelectItemComponent extends IgxDropDownItemComponent {

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h5>With Action directive</h5>
1515
<button igxButton [igxToggleAction]="group" [igxDropDownItemNavigation]="group">Group</button>
1616
</igx-buttongroup>
1717

18-
<h5>Density types</h5>
18+
<h5>Density types - Prefix/suffix</h5>
1919
<igx-buttongroup [multiSelection]="false">
2020
<button igxButton [igxToggleAction]="dropDownComfortable" [igxDropDownItemNavigation]="dropDownComfortable" displayDensity="comfortable">Comfortable</button>
2121
<button igxButton [igxToggleAction]="dropDownCosy" [igxDropDownItemNavigation]="dropDownCosy" displayDensity="cosy">Cosy</button>
@@ -58,19 +58,25 @@ <h5>Density types</h5>
5858

5959
<igx-drop-down #dropDownComfortable (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px' displayDensity="comfortable">
6060
<igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
61+
<igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
6162
{{ item.field }}
63+
<igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
6264
</igx-drop-down-item>
6365
</igx-drop-down>
6466

6567
<igx-drop-down #dropDownCosy (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px' displayDensity="cosy">
6668
<igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
69+
<igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
6770
{{ item.field }}
71+
<igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
6872
</igx-drop-down-item>
6973
</igx-drop-down>
7074

7175
<igx-drop-down #dropDownCompact (selectionChanging)="onSelection($event)" (opening)="onOpening()" height='400px' displayDensity="compact">
7276
<igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
77+
<igx-icon *ngIf="!item.header" igxPrefix>location_city</igx-icon>
7378
{{ item.field }}
79+
<igx-icon *ngIf="!item.header" igxSuffix>location_on</igx-icon>
7480
</igx-drop-down-item>
7581
</igx-drop-down>
7682
</section>

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

+36-17
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
11
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
2-
import { NgFor } from '@angular/common';
2+
import { NgFor, NgIf } from '@angular/common';
33

44
import { foods } from './foods';
5-
import { ConnectedPositioningStrategy, IgxButtonDirective, IgxButtonGroupComponent, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxInputDirective, IgxInputGroupComponent, IgxOverlayOutletDirective, IgxRippleDirective, IgxToggleActionDirective, IgxToggleDirective, NoOpScrollStrategy, OverlaySettings } from 'igniteui-angular';
5+
import {
6+
ConnectedPositioningStrategy,
7+
IgxButtonDirective,
8+
IgxButtonGroupComponent,
9+
IgxDropDownComponent,
10+
IgxDropDownGroupComponent,
11+
IgxDropDownItemComponent,
12+
IgxDropDownItemNavigationDirective,
13+
IgxIconComponent,
14+
IgxInputDirective,
15+
IgxInputGroupComponent,
16+
IgxOverlayOutletDirective,
17+
IgxRippleDirective,
18+
IgxToggleActionDirective,
19+
IgxToggleDirective,
20+
NoOpScrollStrategy,
21+
OverlaySettings,
22+
} from 'igniteui-angular';
623

724

825
@Component({
@@ -11,21 +28,23 @@ import { ConnectedPositioningStrategy, IgxButtonDirective, IgxButtonGroupCompone
1128
templateUrl: './drop-down.sample.html',
1229
styleUrls: ['drop-down.sample.scss'],
1330
standalone: true,
14-
imports: [
15-
NgFor,
16-
IgxButtonGroupComponent,
17-
IgxButtonDirective,
18-
IgxDropDownItemNavigationDirective,
19-
IgxToggleActionDirective,
20-
IgxDropDownComponent,
21-
IgxDropDownItemComponent,
22-
IgxToggleDirective,
23-
IgxDropDownGroupComponent,
24-
IgxInputGroupComponent,
25-
IgxInputDirective,
26-
IgxRippleDirective,
27-
IgxOverlayOutletDirective
28-
]
31+
imports: [
32+
NgFor,
33+
IgxButtonGroupComponent,
34+
IgxButtonDirective,
35+
IgxDropDownItemNavigationDirective,
36+
IgxToggleActionDirective,
37+
IgxDropDownComponent,
38+
IgxDropDownItemComponent,
39+
IgxToggleDirective,
40+
IgxDropDownGroupComponent,
41+
IgxInputGroupComponent,
42+
IgxInputDirective,
43+
IgxRippleDirective,
44+
IgxOverlayOutletDirective,
45+
IgxIconComponent,
46+
NgIf,
47+
],
2948
})
3049
export class DropDownSampleComponent implements OnInit {
3150
@ViewChild(IgxDropDownComponent, { static: true })

‎src/app/select/select.sample.html

+20-4
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,13 @@ <h1 class="select-sample__title">Select with ngModel, set items OnInit</h1>
3232
<igx-prefix igxPrefix>
3333
<igx-icon>alarm</igx-icon>
3434
</igx-prefix>
35-
<igx-select-item>None</igx-select-item>
35+
<igx-select-item>
36+
None
37+
</igx-select-item>
3638
<igx-select-item *ngFor="let item of items; let inx=index" [value]="item.field">
39+
<igx-icon igxPrefix>alarm</igx-icon>
3740
{{ item.field }}
41+
<igx-icon igxSuffix>notifications_active</igx-icon>
3842
</igx-select-item>
3943
<ng-template igxSelectHeader>
4044
<div class="custom-select-header" (click)="headerFootedClick($event);">
@@ -117,9 +121,21 @@ <h1 class="select-sample__title">Select - using Groups</h1>
117121
</igx-prefix>
118122
<igx-select-item value="1">OutsideGroup</igx-select-item>
119123
<igx-select-item-group label="Group">
120-
<igx-select-item [disabled]="true" value="2">InsideGroup1</igx-select-item>
121-
<igx-select-item value="3">InsideGroup2</igx-select-item>
122-
<igx-select-item value="4">InsideGroup3</igx-select-item>
124+
<igx-select-item [disabled]="true" value="2">
125+
<igx-icon igxPrefix>alarm</igx-icon>
126+
InsideGroup1
127+
<igx-icon igxSuffix>alarm</igx-icon>
128+
</igx-select-item>
129+
<igx-select-item value="3">
130+
<igx-icon igxPrefix>alarm</igx-icon>
131+
InsideGroup2
132+
<igx-icon igxSuffix>alarm</igx-icon>
133+
</igx-select-item>
134+
<igx-select-item value="4">
135+
<igx-icon igxPrefix>alarm</igx-icon>
136+
InsideGroup3
137+
<igx-icon igxSuffix>alarm</igx-icon>
138+
</igx-select-item>
123139
</igx-select-item-group>
124140
</igx-select>
125141
</section>

0 commit comments

Comments
 (0)