Skip to content

Commit b8514b1

Browse files
arjunlalbarjunlalb
authored
feat: icon only mode for select trigger (#558)
* feat: icon only mode for select trigger
1 parent 1a1d4ff commit b8514b1

File tree

4 files changed

+107
-8
lines changed

4 files changed

+107
-8
lines changed

‎projects/components/src/select/select.component.scss‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
.select {
1515
display: flex;
1616
align-items: center;
17-
border: 1px solid $color-border;
18-
border-radius: 6px;
1917
width: 100%;
2018
height: 34px;
2119

@@ -63,6 +61,11 @@
6361
cursor: pointer;
6462
height: 100%;
6563

64+
&.menu-with-border {
65+
border: 1px solid $color-border;
66+
border-radius: 6px;
67+
}
68+
6669
&.justify-left {
6770
justify-content: flex-start;
6871
}
@@ -90,6 +93,27 @@
9093
color: $gray-7;
9194
}
9295
}
96+
97+
.icon-only {
98+
display: flex;
99+
align-items: center;
100+
101+
.icon {
102+
padding: 6px;
103+
border: 1px solid white;
104+
box-sizing: border-box;
105+
106+
&:hover {
107+
background: $blue-1;
108+
border: 1px solid $blue-2;
109+
border-radius: 50%;
110+
}
111+
}
112+
113+
&.selected {
114+
color: $blue-5;
115+
}
116+
}
93117
}
94118

95119
.select-content {

‎projects/components/src/select/select.component.test.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { NavigationService } from '@hypertrace/common';
55
import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
66
import { EMPTY } from 'rxjs';
77
import { SelectJustify } from './select-justify';
8-
import { SelectComponent } from './select.component';
8+
import { SelectComponent, SelectTriggerDisplayMode } from './select.component';
99
import { SelectModule } from './select.module';
1010

1111
describe('Select Component', () => {
@@ -79,6 +79,47 @@ describe('Select Component', () => {
7979
optionElements.forEach((element, index) => expect(element).toHaveText(selectionOptions[index].label));
8080
}));
8181

82+
test('should apply classes and render items correctly when triggerDisplayMode is menu with border', () => {
83+
spectator = hostFactory(
84+
`
85+
<ht-select [selected]="selected" [triggerDisplayMode]="displayMode">
86+
<ht-select-option *ngFor="let option of options; let i = index" [label]="option.label" [value]="option.value">
87+
</ht-select-option>
88+
</ht-select>`,
89+
{
90+
hostProps: {
91+
options: selectionOptions,
92+
selected: selectionOptions[1].value,
93+
displayMode: SelectTriggerDisplayMode.MenuWithBorder
94+
}
95+
}
96+
);
97+
98+
expect(spectator.query('.menu-with-border')).toExist();
99+
expect(spectator.query('.icon-only')).not.toExist();
100+
});
101+
102+
test('should apply classes and render items correctly when triggerDisplayMode is button', () => {
103+
spectator = hostFactory(
104+
`
105+
<ht-select [selected]="selected" [triggerDisplayMode]="displayMode">
106+
<ht-select-option *ngFor="let option of options; let i = index" [label]="option.label" [value]="option.value">
107+
</ht-select-option>
108+
</ht-select>`,
109+
{
110+
hostProps: {
111+
options: selectionOptions,
112+
selected: selectionOptions[1].value,
113+
displayMode: SelectTriggerDisplayMode.Icon
114+
}
115+
}
116+
);
117+
118+
expect(spectator.query('.menu-with-border')).not.toExist();
119+
expect(spectator.query('.icon-only')).toExist();
120+
expect(spectator.query('.icon-only')?.classList.contains('selected')).toBe(true);
121+
});
122+
82123
test('should notify and update selection when selection is changed', fakeAsync(() => {
83124
const onChange = jest.fn();
84125

‎projects/components/src/select/select.component.ts‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,36 @@ import { SelectSize } from './select-size';
3838
]"
3939
*htLetAsync="this.selected$ as selected"
4040
>
41-
<ht-popover [disabled]="this.disabled" [closeOnClick]="true" class="select-container">
41+
<ht-popover
42+
[disabled]="this.disabled"
43+
[closeOnClick]="true"
44+
class="select-container"
45+
[ngSwitch]="this.triggerDisplayMode"
46+
>
4247
<ht-popover-trigger>
43-
<div class="trigger-content" [ngClass]="this.justifyClass">
44-
<ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" size="${IconSize.Small}">
45-
</ht-icon>
48+
<div
49+
*ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBorder}'"
50+
class="trigger-content menu-with-border"
51+
[ngClass]="[this.justifyClass]"
52+
>
53+
<ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>
4654
<ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
4755
<ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
4856
</div>
57+
<div
58+
*ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
59+
class="trigger-content icon-only"
60+
[ngClass]="this.selected !== undefined ? 'selected' : ''"
61+
>
62+
<ht-icon
63+
class="icon"
64+
*ngIf="this.icon"
65+
[icon]="this.icon"
66+
[size]="this.iconSize"
67+
[htTooltip]="this.selected?.label || this.placeholder"
68+
>
69+
</ht-icon>
70+
</div>
4971
</ht-popover-trigger>
5072
<ht-popover-content>
5173
<div class="select-content">
@@ -80,6 +102,12 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
80102
@Input()
81103
public icon?: string;
82104

105+
@Input()
106+
public iconSize?: IconSize = IconSize.Small;
107+
108+
@Input()
109+
public triggerDisplayMode?: SelectTriggerDisplayMode = SelectTriggerDisplayMode.MenuWithBorder;
110+
83111
@Input()
84112
public placeholder?: string;
85113

@@ -164,3 +192,8 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
164192
return this.items.find(item => item.value === value);
165193
}
166194
}
195+
196+
export const enum SelectTriggerDisplayMode {
197+
MenuWithBorder = 'menu-with-border',
198+
Icon = 'icon'
199+
}

‎projects/components/src/select/select.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import { IconModule } from '../icon/icon.module';
55
import { LabelModule } from '../label/label.module';
66
import { LetAsyncModule } from '../let-async/let-async.module';
77
import { PopoverModule } from '../popover/popover.module';
8+
import { TooltipModule } from '../tooltip/tooltip.module';
89
import { SelectGroupComponent } from './select-group.component';
910
import { SelectOptionComponent } from './select-option.component';
1011
import { SelectComponent } from './select.component';
1112

1213
@NgModule({
13-
imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule],
14+
imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, TooltipModule],
1415
declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent],
1516
exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent]
1617
})

0 commit comments

Comments
 (0)