From c6c0b31f437f7f798bd1057f2765619b22e4585f Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 00:27:59 +0530 Subject: [PATCH 1/6] feat: icon only mode for select trigger --- .../src/select/select.component.scss | 30 ++++++++++++- .../src/select/select.component.test.ts | 44 ++++++++++++++++++- .../components/src/select/select.component.ts | 44 ++++++++++++++++--- .../components/src/select/select.module.ts | 3 +- 4 files changed, 112 insertions(+), 9 deletions(-) diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss index 300ab9288..eb44515d6 100644 --- a/projects/components/src/select/select.component.scss +++ b/projects/components/src/select/select.component.scss @@ -14,11 +14,14 @@ .select { display: flex; align-items: center; - border: 1px solid $color-border; - border-radius: 6px; width: 100%; height: 34px; + &.menu-with-border { + border: 1px solid $color-border; + border-radius: 6px; + } + &.small { height: 32px; } @@ -79,6 +82,7 @@ padding-right: 8px; } + .trigger-label { @include body-2-medium(); padding-left: 8px; @@ -90,6 +94,28 @@ color: $gray-7; } } + + .icon-only { + display: flex; + align-items: center; + + .icon { + padding: 6px; + border: 1px solid white; + box-sizing: border-box; + + &:hover { + background: $blue-1; + border: 1px solid $blue-2; + border-radius: 50%; + + } + } + + &.selected { + color: $blue-5; + } + } } .select-content { diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 6b9598e0b..4f8b56f79 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -5,7 +5,7 @@ import { NavigationService } from '@hypertrace/common'; import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest'; import { EMPTY } from 'rxjs'; import { SelectJustify } from './select-justify'; -import { SelectComponent } from './select.component'; +import { SelectComponent, SelectTriggerDisplayMode } from './select.component'; import { SelectModule } from './select.module'; describe('Select Component', () => { @@ -79,6 +79,48 @@ describe('Select Component', () => { optionElements.forEach((element, index) => expect(element).toHaveText(selectionOptions[index].label)); })); + test('should apply classes and render items correctly when triggerDisplayMode is menu with border', () => { + spectator = hostFactory( + ` + + + + `, + { + hostProps: { + options: selectionOptions, + selected: selectionOptions[1].value, + displayMode: SelectTriggerDisplayMode.MenuWithBorder + } + } + ); + + expect(spectator.query('.select')?.classList.contains('menu-with-border')).toBe(true); + expect(spectator.query('.icon-only')).not.toExist(); + }); + + test('should apply classes and render items correctly when triggerDisplayMode is button', () => { + spectator = hostFactory( + ` + + + + `, + { + hostProps: { + options: selectionOptions, + selected: selectionOptions[1].value, + displayMode: SelectTriggerDisplayMode.Icon + } + } + ); + + expect(spectator.query('.select')?.classList.contains('menu-with-border')).not.toBe(true); + expect(spectator.query('.select')?.classList.contains('icon')).toBe(true); + expect(spectator.query('.icon-only')).toExist(); + expect(spectator.query('.icon-only')?.classList.contains('selected')).toBe(true); + }); + test('should notify and update selection when selection is changed', fakeAsync(() => { const onChange = jest.fn(); diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 8ab76b28f..96a26bf73 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -34,18 +34,41 @@ import { SelectSize } from './select-size'; this.groupPosition, selected ? selected.style.toString() : '', this.showBorder ? 'border' : '', - this.disabled ? 'disabled' : '' + this.disabled ? 'disabled' : '', + this.triggerDisplayMode ]" *htLetAsync="this.selected$ as selected" > - + -
- - +
+
+
+ + +
@@ -80,6 +103,12 @@ export class SelectComponent implements AfterContentInit, OnChanges { @Input() public icon?: string; + @Input() + public iconSize?: IconSize = IconSize.Small; + + @Input() + public triggerDisplayMode?: SelectTriggerDisplayMode = SelectTriggerDisplayMode.MenuWithBorder; + @Input() public placeholder?: string; @@ -164,3 +193,8 @@ export class SelectComponent implements AfterContentInit, OnChanges { return this.items.find(item => item.value === value); } } + +export const enum SelectTriggerDisplayMode { + MenuWithBorder = 'menu-with-border', + Icon = 'icon' +} diff --git a/projects/components/src/select/select.module.ts b/projects/components/src/select/select.module.ts index dd8766180..ff8e20feb 100644 --- a/projects/components/src/select/select.module.ts +++ b/projects/components/src/select/select.module.ts @@ -8,9 +8,10 @@ import { PopoverModule } from '../popover/popover.module'; import { SelectGroupComponent } from './select-group.component'; import { SelectOptionComponent } from './select-option.component'; import { SelectComponent } from './select.component'; +import { TooltipModule } from '../tooltip/tooltip.module'; @NgModule({ - imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule], + imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, TooltipModule], declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent], exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent] }) From 0261d1ebe4c1aedfe4fecb4c83e26b139c60d359 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 10:17:37 +0530 Subject: [PATCH 2/6] fix: update tooltip and css class --- projects/components/src/select/select.component.scss | 10 +++++----- projects/components/src/select/select.component.ts | 9 ++++----- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss index eb44515d6..1227a590e 100644 --- a/projects/components/src/select/select.component.scss +++ b/projects/components/src/select/select.component.scss @@ -17,11 +17,6 @@ width: 100%; height: 34px; - &.menu-with-border { - border: 1px solid $color-border; - border-radius: 6px; - } - &.small { height: 32px; } @@ -66,6 +61,11 @@ cursor: pointer; height: 100%; + &.menu-with-border { + border: 1px solid $color-border; + border-radius: 6px; + } + &.justify-left { justify-content: flex-start; } diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 96a26bf73..ecaa337cd 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -34,8 +34,7 @@ import { SelectSize } from './select-size'; this.groupPosition, selected ? selected.style.toString() : '', this.showBorder ? 'border' : '', - this.disabled ? 'disabled' : '', - this.triggerDisplayMode + this.disabled ? 'disabled' : '' ]" *htLetAsync="this.selected$ as selected" > @@ -48,8 +47,8 @@ import { SelectSize } from './select-size';
@@ -65,7 +64,7 @@ import { SelectSize } from './select-size'; *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize" - [htTooltip]="this.placeholder" + [htTooltip]="this.selected?.label || this.placeholder" >
From 3cc9253d57c89e2a6c260529523ca0a7323c52e0 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 11:42:22 +0530 Subject: [PATCH 3/6] fix: update tests --- projects/components/src/select/select.component.test.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 4f8b56f79..e0b7b175a 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -95,7 +95,7 @@ describe('Select Component', () => { } ); - expect(spectator.query('.select')?.classList.contains('menu-with-border')).toBe(true); + expect(spectator.query('.menu-with-border')).toExist(); expect(spectator.query('.icon-only')).not.toExist(); }); @@ -115,8 +115,7 @@ describe('Select Component', () => { } ); - expect(spectator.query('.select')?.classList.contains('menu-with-border')).not.toBe(true); - expect(spectator.query('.select')?.classList.contains('icon')).toBe(true); + expect(spectator.query('.menu-with-border')).not.toExist(); expect(spectator.query('.icon-only')).toExist(); expect(spectator.query('.icon-only')?.classList.contains('selected')).toBe(true); }); From 3c2c35a73f0b67e8f77e512bfb266a822120988a Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 11:48:35 +0530 Subject: [PATCH 4/6] fix: fix lint issue --- projects/components/src/select/select.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/select/select.module.ts b/projects/components/src/select/select.module.ts index ff8e20feb..8c7d1244a 100644 --- a/projects/components/src/select/select.module.ts +++ b/projects/components/src/select/select.module.ts @@ -5,10 +5,10 @@ import { IconModule } from '../icon/icon.module'; import { LabelModule } from '../label/label.module'; import { LetAsyncModule } from '../let-async/let-async.module'; import { PopoverModule } from '../popover/popover.module'; +import { TooltipModule } from '../tooltip/tooltip.module'; import { SelectGroupComponent } from './select-group.component'; import { SelectOptionComponent } from './select-option.component'; import { SelectComponent } from './select.component'; -import { TooltipModule } from '../tooltip/tooltip.module'; @NgModule({ imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, TooltipModule], From 56f0e4f7806e7552d6c0ee8d7993a40aa6fde8d6 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 12:26:00 +0530 Subject: [PATCH 5/6] fix: remove empty line from css file --- projects/components/src/select/select.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss index 1227a590e..d144ccacb 100644 --- a/projects/components/src/select/select.component.scss +++ b/projects/components/src/select/select.component.scss @@ -108,7 +108,6 @@ background: $blue-1; border: 1px solid $blue-2; border-radius: 50%; - } } From b1f9aa110807d5b9833f1130a5bff141aa8f25ec Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 2 Feb 2021 12:31:01 +0530 Subject: [PATCH 6/6] fix: fix prettier issue --- projects/components/src/select/select.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss index d144ccacb..fc1ad31e3 100644 --- a/projects/components/src/select/select.component.scss +++ b/projects/components/src/select/select.component.scss @@ -82,7 +82,6 @@ padding-right: 8px; } - .trigger-label { @include body-2-medium(); padding-left: 8px;