Merge pull request #992 from OutSystems/ROU-11189

ROU-11189: DropdownServerSide, FloatingActions and BottomSheet
OutSystems · Sep 24, 2024 · 559a53e · 559a53e
2 parents 6b2ae67 + b05c92a
commit 559a53e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git 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;
 			}
 		}
 	}

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts
@@ -113,15 +113,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();
 			}
 		}

diff --git 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',

diff --git 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