From 8eb2c81f527d32fdd03fd4dbc6980bf819d477d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Rio?= Date: Fri, 20 Sep 2024 17:33:57 +0100 Subject: [PATCH 1/4] issue(DropDownSS): prevent close when icon is clicked --- .../Dropdown/ServerSide/DropdownServerSide.ts | 17 +++++++++++++++-- .../ServerSide/DropdownServerSideEnum.ts | 1 + 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts index cb9e0cb15f..d0f2fa77a0 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts @@ -26,6 +26,8 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { private _balloonSearchInputElement: HTMLElement; // Store the HTML element for the DropdownBalloonSearch private _balloonSearchInputWrapperElement: HTMLElement; + // Store the HTML element for the DropdownBalloonSearchIcon + private _balloonSearchInputIconWrapperElement: HTMLElement; // Store a Flag property that will help dealing with the focus state at the close moment private _closeDynamically = false; // Custom Balloon Event @@ -113,15 +115,21 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { } // Close when click outside of pattern - private _onBodyClick(): void { + private _onBodyClick(eventName: string, event: PointerEvent): void { if (this._isOpen === false) { return; } this._closeDynamically = true; + // Check if balloon can be closed // If it's phone, always close, as it is on popup mode - if (Helper.DeviceInfo.IsPhone) { + // Also prevent closing when clicking at an element inside search icon placeholder + const canClose = + Helper.DeviceInfo.IsPhone && + (event.target as HTMLElement).closest(`.${Enum.CssClass.BalloonSearchIcon}`) === null; + + if (canClose) { this._close(); } } @@ -651,6 +659,10 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { this.selfElement, Enum.CssClass.BalloonSearch ); + this._balloonSearchInputIconWrapperElement = Helper.Dom.ClassSelector( + this.selfElement, + Enum.CssClass.BalloonSearchIcon + ); this._balloonSearchInputElement = Helper.Dom.TagSelector( this._balloonSearchInputWrapperElement, GlobalEnum.HTMLElement.Input @@ -696,6 +708,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { this._balloonOptionsWrapperElement = undefined; this._balloonSearchInputElement = undefined; this._balloonSearchInputWrapperElement = undefined; + this._balloonSearchInputIconWrapperElement = undefined; this._balloonElem = undefined; this._selectValuesWrapper = undefined; } diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts index f38a293275..160003a215 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSideEnum.ts @@ -20,6 +20,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide.Enum { BalloonFooter = 'osui-dropdown-serverside__balloon-footer', BalloonHasNotSearchInput = 'osui-dropdown-serverside__balloon--has-not-search', BalloonSearch = 'osui-dropdown-serverside__balloon-search', + BalloonSearchIcon = 'osui-dropdown-serverside__balloon-search-icon', ErrorMessage = 'osui-dropdown-serverside-error-message', IsDisabled = 'osui-dropdown-serverside--is-disabled', IsOpened = 'osui-dropdown-serverside--is-opened', From 163e9a44bb92c21e7327a026ef30e365faecd278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Rio?= Date: Mon, 23 Sep 2024 16:17:37 +0100 Subject: [PATCH 2/4] fix(floating-actions): fix position issue when closed. --- src/scss/04-patterns/03-interaction/_floating-actions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/04-patterns/03-interaction/_floating-actions.scss b/src/scss/04-patterns/03-interaction/_floating-actions.scss index d7340655f6..692af99703 100644 --- a/src/scss/04-patterns/03-interaction/_floating-actions.scss +++ b/src/scss/04-patterns/03-interaction/_floating-actions.scss @@ -87,7 +87,7 @@ justify-content: flex-end; margin-bottom: var(--space-base); opacity: 0; - transform: translateY(--space-base) translateZ(0); + transform: translateY(var(--space-base)) translateZ(0); transition: all 100ms ease-in; // Service Studio Preview From 836b0981aaa52b399dc950dca39756acc6832eb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Rio?= Date: Mon, 23 Sep 2024 16:19:30 +0100 Subject: [PATCH 3/4] fix(bottom-sheet): update to a valid prop value. --- .../OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss b/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss index 4b74b4fc23..f07c71c4bf 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/BottomSheet/scss/_bottomsheet.scss @@ -135,14 +135,16 @@ opacity: 0; position: absolute; transform: translateY(-2px); - transition: opacity 200ms ease, transform 200ms var(--osui-bottom-sheet-transition-function); + transition: + opacity 200ms ease, + transform 200ms var(--osui-bottom-sheet-transition-function); top: 0; width: 100%; z-index: var(--layer-global-negative); } &:empty { - padding-bottom: none; + padding-bottom: unset; } } } From b05c92ae361368beae4f681b64b539ec7b94da42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Rio?= Date: Mon, 23 Sep 2024 17:47:46 +0100 Subject: [PATCH 4/4] removed unused element reference. --- .../OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts index d0f2fa77a0..ac569731b1 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts @@ -26,8 +26,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { private _balloonSearchInputElement: HTMLElement; // Store the HTML element for the DropdownBalloonSearch private _balloonSearchInputWrapperElement: HTMLElement; - // Store the HTML element for the DropdownBalloonSearchIcon - private _balloonSearchInputIconWrapperElement: HTMLElement; // Store a Flag property that will help dealing with the focus state at the close moment private _closeDynamically = false; // Custom Balloon Event @@ -659,10 +657,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { this.selfElement, Enum.CssClass.BalloonSearch ); - this._balloonSearchInputIconWrapperElement = Helper.Dom.ClassSelector( - this.selfElement, - Enum.CssClass.BalloonSearchIcon - ); this._balloonSearchInputElement = Helper.Dom.TagSelector( this._balloonSearchInputWrapperElement, GlobalEnum.HTMLElement.Input @@ -708,7 +702,6 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { this._balloonOptionsWrapperElement = undefined; this._balloonSearchInputElement = undefined; this._balloonSearchInputWrapperElement = undefined; - this._balloonSearchInputIconWrapperElement = undefined; this._balloonElem = undefined; this._selectValuesWrapper = undefined; }