From 7b76774c6e274c91a9ade32441eb54c2a9992ce0 Mon Sep 17 00:00:00 2001 From: sumitsheokand Date: Thu, 18 Jul 2024 09:20:10 +0530 Subject: [PATCH 1/2] [QA] ONCEHUB-83190: Create singleActionItem bar for singleSelect and multiSelect. --- CHANGELOG.md | 8 + package-lock.json | 4 +- package.json | 2 +- ui/package-lock.json | 4 +- ui/package.json | 2 +- ui/src/components/select/select.component.ts | 75 ++++++++- ui/src/components/select/select.html | 12 ++ ui/src/components/select/select.scss | 23 ++- ui/src/stories/select/select.stories.mdx | 168 ++++++++++++++++++- 9 files changed, 284 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73847c65a..3e9df2964 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [8.0.27] - 2024-07-18 + +- [ONCEHUB-83190](https://scheduleonce.atlassian.net/browse/ONCEHUB-83190) Feat: Create singleActionItem bar for singleSelect and multiSelect. + +## [8.0.26] - 2024-07-17 + +- [ONCEHUB-84773](https://scheduleonce.atlassian.net/browse/ONCEHUB-84773) fix: Tabs ui design-shared oui component- fix the color of the not selected. + ## [8.0.25] - 2024-07-08 - [ONCEHUB-82598](https://scheduleonce.atlassian.net/browse/ONCEHUB-82598) fix: Occasionally, when hovering over elements that contain ouiToolTips, an unusual box appears. diff --git a/package-lock.json b/package-lock.json index d7eb2b9e5..a2fe1770c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.27", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.27", "dependencies": { "@angular-devkit/architect": "0.1601.6", "@angular-devkit/core": "16.1.6", diff --git a/package.json b/package.json index 9de084dbe..094416991 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.27", "scripts": { "ng": "ng", "build": "ng build ui", diff --git a/ui/package-lock.json b/ui/package-lock.json index 9153a8965..33d095c87 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -1,12 +1,12 @@ { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.27", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.27", "dependencies": { "tslib": "^2.4.0" } diff --git a/ui/package.json b/ui/package.json index 3b27eec6b..fffdef345 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,6 +1,6 @@ { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.27", "description": "Oncehub UI", "peerDependencies": {}, "repository": { diff --git a/ui/src/components/select/select.component.ts b/ui/src/components/select/select.component.ts index 7aa4dd3aa..1daa1f6b5 100644 --- a/ui/src/components/select/select.component.ts +++ b/ui/src/components/select/select.component.ts @@ -229,6 +229,7 @@ export class OuiSelect /** Whether filling out the select is required in the form. */ private _actionItems = false; + private _singleActionItems = false; /** The scroll position of the overlay panel, calculated to center the selected option. */ private _scrollTop = 0; @@ -242,6 +243,9 @@ export class OuiSelect /** The label displayed on the done button of the select in case of multi-select. */ private _doneLabel = 'Done'; + /** The label displayed on the singleSelect and multiSelect of the select as a actionItem. */ + private _singleActionLabel = 'New action button'; + /** Whether the component is in multiple selection mode. */ private _multiple = false; @@ -328,6 +332,9 @@ export class OuiSelect /** Trigger that opens the select. */ @ViewChild('ddDoneButton', { read: ElementRef }) ddDoneButton: ElementRef; + /** Trigger that opens the select. */ + @ViewChild('singleButton', { read: ElementRef }) singleButton: ElementRef; + /** Panel containing the select options. */ @ViewChild('panel', { read: ElementRef }) panel: ElementRef; @@ -424,6 +431,10 @@ export class OuiSelect readonly saveSelectionChange: EventEmitter = new EventEmitter(); + /** Can pass any method to be triggered on singleActionItem click. */ + @Output() + readonly singleSelectionChange = new EventEmitter(); + /** All of the defined groups of options. */ @ContentChildren(OuiOptgroup) optionGroups: QueryList; @@ -490,6 +501,16 @@ export class OuiSelect this.stateChanges.next(); } + /** In case of singleSelect and multiSelect the singleActionLabel to be shown on actionItem. */ + @Input() + get singleActionLabel(): string { + return this._singleActionLabel; + } + set singleActionLabel(value: string) { + this._singleActionLabel = value; + this.stateChanges.next(); + } + /** Whether the component is required. */ @Input() get required(): boolean { @@ -534,6 +555,15 @@ export class OuiSelect } } + @Input() + get singleActionItem(): boolean { + return this._singleActionItems; + } + set singleActionItem(value: boolean) { + this._singleActionItems = coerceBooleanProperty(value); + this.stateChanges.next(); + } + /** Whether to center the active option over the trigger. */ @Input() get disableOptionCentering(): boolean { @@ -854,12 +884,29 @@ export class OuiSelect } } + /** On Tab key press select the buttons at the bottom if singleActionItem is enabled*/ + singleTabKeySelection(singleButtonFocused) { + const singleButtonRef = this.singleButton + ?.nativeElement as HTMLButtonElement; + const searchQueryString = '.oui-select-search-input'; + const searchInput = this._document.querySelector(searchQueryString); + if (!singleButtonFocused) { + setTimeout(() => { + singleButtonRef.focus(); + }); + } else if (this.isSearchFieldPresent && singleButtonFocused) { + searchInput.focus(); + } else { + this.close(); + } + } + /** On Tab key press select the buttons at the bottom if actionItems is enabled and searchbar*/ private tabKeySelection(focused: boolean, doneDisabled: boolean): void { const searchQueryString = '.oui-select-search-input'; const searchInput = this._document.querySelector(searchQueryString); - const doneButtonRef = this.ddDoneButton.nativeElement; - const cancelButtonRef = this.ddCancelButton.nativeElement; + const doneButtonRef = this.ddDoneButton?.nativeElement; + const cancelButtonRef = this.ddCancelButton?.nativeElement; if (!focused) { if (!doneDisabled && !doneButtonRef.classList.contains('cdk-focused')) { doneButtonRef.focus(); @@ -895,12 +942,23 @@ export class OuiSelect const doneDisabled: boolean = this.ddDoneButton?.nativeElement['disabled']; const cancelFocused: boolean = this.ddCancelButton?.nativeElement.classList.contains('cdk-focused'); + const singleButtonFocused: boolean = + this.singleButton?.nativeElement.classList.contains('cdk-focused'); if (isTabKey) { if (this.multiple) { event.preventDefault(); event.stopPropagation(); manager.setActiveItem(-1); - this.tabKeySelection(cancelFocused, doneDisabled); + if (this.actionItems) { + this.tabKeySelection(cancelFocused, doneDisabled); + } else if (this.singleActionItem) { + this.singleTabKeySelection(singleButtonFocused); + } + } else if (!this.multiple && this.singleActionItem) { + event.preventDefault(); + event.stopPropagation(); + manager.setActiveItem(-1); + this.singleTabKeySelection(singleButtonFocused); } else { this.close(); } @@ -1153,8 +1211,10 @@ export class OuiSelect this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => { // Restore focus to the trigger before closing. Ensures that the focus // position won't be lost if the user got focus into the overlay. - this.focus(); - this.close(); + if (!this.singleActionItem) { + this.focus(); + this.close(); + } }); this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => { @@ -1249,6 +1309,11 @@ export class OuiSelect this.close(); } + handleSingleActionItemClick() { + this.singleSelectionChange.emit(); + this.close(); + } + /** Determine whether the "Done" button should be enabled or disabled based on the selection state */ private _isDoneButtonDisabled(): boolean { const selectedItems = (this.selected as OuiOption[]).map( diff --git a/ui/src/components/select/select.html b/ui/src/components/select/select.html index 65875fe3e..3ec82e0c7 100644 --- a/ui/src/components/select/select.html +++ b/ui/src/components/select/select.html @@ -49,12 +49,24 @@ [class.oui-select-has-a-panel]="panelClass" [class.oui-select-large]="large" [class.action-item]="actionItems" + [class.single-action-item]="singleActionItem" >
+
+
+ +
+