From 0dadf59d4ef1f3faedbba929f943c5f785f8f827 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Thu, 20 May 2021 12:57:04 +0800 Subject: [PATCH 1/9] feat: adding count label on multiselect component --- .../multi-select/multi-select.component.scss | 8 +++++++ .../multi-select.component.test.ts | 22 +++++++++++++++++-- .../multi-select/multi-select.component.ts | 9 +++++++- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index 93d399954..65b70c471 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -59,6 +59,14 @@ .trigger-label { @include body-2-medium(); padding-left: 8px; + max-width: 200px; + } + + .trigger-more-items { + padding: 0 6px; + background-color: $gray-2; + border-radius: 4px; + margin-left: 5px; } .trigger-icon { diff --git a/projects/components/src/multi-select/multi-select.component.test.ts b/projects/components/src/multi-select/multi-select.component.test.ts index 4c0b7ad41..2b01fe493 100644 --- a/projects/components/src/multi-select/multi-select.component.test.ts +++ b/projects/components/src/multi-select/multi-select.component.test.ts @@ -72,6 +72,10 @@ describe('Multi Select Component', () => { expect(spectator.query('.trigger-label-container')).toExist(); expect(spectator.query('.trigger-label')).toExist(); expect(spectator.query('.trigger-icon')).toExist(); + expect(spectator.query('.trigger-more-items')).not.toExist(); + + // Selected element is 1 as set in hostProps + expect(spectator.component.selectedItemsCount).toBe(1); const popoverComponent = spectator.query(PopoverComponent); expect(popoverComponent?.closeOnClick).toEqual(false); @@ -94,6 +98,8 @@ describe('Multi Select Component', () => { spectator.tick(); const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true }); + expect(spectator.query('.trigger-more-items')).toExist(); + expect(spectator.component.selectedItemsCount).toBe(2); expect( selectedCheckboxElements.filter(checkboxElement => checkboxElement.getAttribute('ng-reflect-checked') === 'true') .length @@ -127,6 +133,8 @@ describe('Multi Select Component', () => { expect(optionElements.length).toBe(6); const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true }); + expect(spectator.query('.trigger-more-items')).toExist(); + expect(spectator.component.selectedItemsCount).toBe(2); expect( selectedCheckboxElements.filter(checkboxElement => checkboxElement.getAttribute('ng-reflect-checked') === 'true') .length @@ -193,7 +201,9 @@ describe('Multi Select Component', () => { expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledWith([selectionOptions[1].value, selectionOptions[2].value]); - expect(spectator.query(LabelComponent)?.label).toEqual('second and 1 more'); + expect(spectator.query('.trigger-more-items')).toExist(); + expect(spectator.component.selectedItemsCount).toBe(2); + expect(spectator.query(LabelComponent)?.label).toEqual('second'); flush(); })); @@ -260,6 +270,8 @@ describe('Multi Select Component', () => { ).toBe(0); expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenLastCalledWith([]); + expect(spectator.query('.trigger-more-items')).not.toExist(); + expect(spectator.query(LabelComponent)?.label).toEqual('Select options'); const allOptionElement = spectator.query('.select-all', { root: true }); @@ -268,10 +280,14 @@ describe('Multi Select Component', () => { spectator.tick(); const selectedCheckboxElements = spectator.queryAll('ht-checkbox', { root: true }); + expect(spectator.query('.trigger-more-items')).toExist(); expect(selectedCheckboxElements.length).toBe(6); expect(onChange).toHaveBeenCalledWith(selectionOptions.map(option => option.value)); - expect(spectator.query(LabelComponent)?.label).toEqual('first and 5 more'); + expect(spectator.query(LabelComponent)?.label).toEqual('first'); + + expect(spectator.component.selectedItemsCount).toBe(6); + expect(spectator.query('.trigger-more-items')?.innerHTML).toBe('+5'); spectator.setHostInput({ searchMode: MultiSelectSearchMode.Disabled @@ -314,6 +330,8 @@ describe('Multi Select Component', () => { expect(onChange).toHaveBeenCalledTimes(1); expect(onChange).toHaveBeenCalledWith([selectionOptions[1].value, selectionOptions[2].value]); expect(spectator.query(LabelComponent)?.label).toEqual('Placeholder'); + expect(spectator.query('.trigger-more-items')).not.toExist(); + expect(spectator.component.selectedItemsCount).toBe(0); flush(); })); diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts index a8903689d..f18f25e49 100644 --- a/projects/components/src/multi-select/multi-select.component.ts +++ b/projects/components/src/multi-select/multi-select.component.ts @@ -50,6 +50,9 @@ import { MultiSelectJustify } from './multi-select-justify';
+ +{{ this.selectedItemsCount - 1 }}
@@ -159,6 +162,7 @@ export class MultiSelectComponent implements AfterContentInit, OnChanges { public popoverOpen: boolean = false; public triggerLabel?: string; + public selectedItemsCount: number = 0; public ngAfterContentInit(): void { this.allOptions$ = this.allOptionsList !== undefined ? queryListAndChanges$(this.allOptionsList) : EMPTY; @@ -236,10 +240,13 @@ export class MultiSelectComponent implements AfterContentInit, OnChanges { ); if (selectedItems === undefined || selectedItems.length === 0) { this.triggerLabel = this.placeholder; + this.selectedItemsCount = 0; } else if (selectedItems.length === 1) { this.triggerLabel = selectedItems[0].label; + this.selectedItemsCount = 1; } else { - this.triggerLabel = `${selectedItems[0].label} and ${selectedItems.length - 1} more`; + this.triggerLabel = selectedItems[0].label; + this.selectedItemsCount = selectedItems.length; } } } From 674363d5bf22108c3e58db9ef44b7c4b4fffaedd Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Thu, 20 May 2021 14:21:42 +0800 Subject: [PATCH 2/9] feat: adding count label on multiselect component --- .../components/src/multi-select/multi-select.component.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index 65b70c471..66ef74407 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -54,12 +54,10 @@ display: flex; width: 100%; align-items: center; - padding-left: 8px; .trigger-label { @include body-2-medium(); padding-left: 8px; - max-width: 200px; } .trigger-more-items { From bacbd0f18a817f681a53b6aaf63956f2847ab1f2 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Thu, 20 May 2021 14:49:49 +0800 Subject: [PATCH 3/9] feat: css changes for width calculation --- .../components/src/multi-select/multi-select.component.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index 66ef74407..c579d60e6 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -58,6 +58,8 @@ .trigger-label { @include body-2-medium(); padding-left: 8px; + width: calc(100% - 32px - 52px); + flex-grow: 1; } .trigger-more-items { @@ -65,6 +67,7 @@ background-color: $gray-2; border-radius: 4px; margin-left: 5px; + max-width: 52px; } .trigger-icon { From d9260f30c57dbd3dc9a86719f342644d28f8be7c Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Thu, 20 May 2021 23:43:03 +0800 Subject: [PATCH 4/9] feat: pr suggested chages for spacing in multiple of 4 and reduceing font size --- .../src/multi-select/multi-select.component.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index c579d60e6..6d68b07b8 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -58,16 +58,17 @@ .trigger-label { @include body-2-medium(); padding-left: 8px; - width: calc(100% - 32px - 52px); + width: calc(100% - 32px - 38px); flex-grow: 1; } .trigger-more-items { - padding: 0 6px; + padding: 0 4px; background-color: $gray-2; border-radius: 4px; - margin-left: 5px; - max-width: 52px; + margin-left: 8px; + max-width: 38px; + font-size: 12px; } .trigger-icon { From c9d675a882fd4da076337e46adc67ce5f3e1cdc2 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Thu, 20 May 2021 23:48:16 +0800 Subject: [PATCH 5/9] feat: increasing font wight to 600 for consistancy --- projects/components/src/multi-select/multi-select.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index 6d68b07b8..af5aaaad9 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -69,6 +69,7 @@ margin-left: 8px; max-width: 38px; font-size: 12px; + font-weight: 600; } .trigger-icon { From 58a34616814fa461589fdd9c7f484119a548d490 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Tue, 25 May 2021 14:36:09 +0800 Subject: [PATCH 6/9] fix: pr suggested changes --- .../components/src/multi-select/multi-select.component.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.test.ts b/projects/components/src/multi-select/multi-select.component.test.ts index 2b01fe493..246f53479 100644 --- a/projects/components/src/multi-select/multi-select.component.test.ts +++ b/projects/components/src/multi-select/multi-select.component.test.ts @@ -286,8 +286,7 @@ describe('Multi Select Component', () => { expect(onChange).toHaveBeenCalledWith(selectionOptions.map(option => option.value)); expect(spectator.query(LabelComponent)?.label).toEqual('first'); - expect(spectator.component.selectedItemsCount).toBe(6); - expect(spectator.query('.trigger-more-items')?.innerHTML).toBe('+5'); + expect(spectator.query('.trigger-more-items')).toHaveText('+5'); spectator.setHostInput({ searchMode: MultiSelectSearchMode.Disabled From e98ba461e998d0dde90634089e9854f88f77e4ba Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Tue, 25 May 2021 23:44:58 +0800 Subject: [PATCH 7/9] fix: pr suggested changes --- .../src/multi-select/multi-select.component.scss | 2 +- .../src/multi-select/multi-select.component.ts | 13 +++---------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index af5aaaad9..2a61ccb82 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -63,12 +63,12 @@ } .trigger-more-items { + @include font-label($gray-9); padding: 0 4px; background-color: $gray-2; border-radius: 4px; margin-left: 8px; max-width: 38px; - font-size: 12px; font-weight: 600; } diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts index f18f25e49..ac23375a6 100644 --- a/projects/components/src/multi-select/multi-select.component.ts +++ b/projects/components/src/multi-select/multi-select.component.ts @@ -238,16 +238,9 @@ export class MultiSelectComponent implements AfterContentInit, OnChanges { const selectedItems: SelectOptionComponent[] | undefined = this.allOptionsList?.filter(item => this.isSelectedItem(item) ); - if (selectedItems === undefined || selectedItems.length === 0) { - this.triggerLabel = this.placeholder; - this.selectedItemsCount = 0; - } else if (selectedItems.length === 1) { - this.triggerLabel = selectedItems[0].label; - this.selectedItemsCount = 1; - } else { - this.triggerLabel = selectedItems[0].label; - this.selectedItemsCount = selectedItems.length; - } + + this.selectedItemsCount = selectedItems?.length ?? 0; + this.triggerLabel = this.selectedItemsCount === 0 ? this.placeholder : (selectedItems || [])[0]?.label; } } From 4a78354af6fa7471709781531cc8ddfa00404593 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Wed, 26 May 2021 00:28:42 +0800 Subject: [PATCH 8/9] fix: pr suggested changes --- .../components/src/multi-select/multi-select.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts index ac23375a6..11b0b8a49 100644 --- a/projects/components/src/multi-select/multi-select.component.ts +++ b/projects/components/src/multi-select/multi-select.component.ts @@ -238,8 +238,10 @@ export class MultiSelectComponent implements AfterContentInit, OnChanges { const selectedItems: SelectOptionComponent[] | undefined = this.allOptionsList?.filter(item => this.isSelectedItem(item) ); - + this.selectedItemsCount = selectedItems?.length ?? 0; + + // Trigger label is placeholder in case there is element selected on multiselect this.triggerLabel = this.selectedItemsCount === 0 ? this.placeholder : (selectedItems || [])[0]?.label; } } From c55b87a7fd3100c49c7864fc112fcf8b1a4429b6 Mon Sep 17 00:00:00 2001 From: Alok Singh Date: Wed, 26 May 2021 00:51:00 +0800 Subject: [PATCH 9/9] fix: pr suggested changes --- .../components/src/multi-select/multi-select.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/components/src/multi-select/multi-select.component.scss b/projects/components/src/multi-select/multi-select.component.scss index 2a61ccb82..280ba0f46 100644 --- a/projects/components/src/multi-select/multi-select.component.scss +++ b/projects/components/src/multi-select/multi-select.component.scss @@ -63,13 +63,13 @@ } .trigger-more-items { + @include semi-bold(); @include font-label($gray-9); - padding: 0 4px; background-color: $gray-2; + padding: 0 4px; border-radius: 4px; margin-left: 8px; max-width: 38px; - font-weight: 600; } .trigger-icon {