feat(ui5-popover, ui5-dialog): add noHorizontalScrolling and noVertic…

…alScrolling properties
SAP · Sep 10, 2024 · 9edb021 · 9edb021
1 parent ae7d8ce
commit 9edb021
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 12 deletions.
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -151,14 +151,6 @@ class Popover extends Popup {
 	@property({ type: Boolean })
 	allowTargetOverlap = false;
 
-	/**
-	 * Defines whether the content is scrollable.
-	 * @default false
-	 * @private
-	 */
-	@property({ type: Boolean })
-	disableScrolling = false;
-
 	/**
 	 * Sets the X translation of the arrow
 	 * @private

diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -187,6 +187,28 @@ abstract class Popup extends UI5Element {
 	@property({ type: Boolean })
 	preventInitialFocus = false;
 
+	/**
+	 * Indicates whether the component has its own horizontal scroll when the content
+	 * exceeds the content area. However, if a scrollable component is present
+	 * within the content area, this property must be set to `true` to disable
+	 * the default scrolling.
+	 * @default false
+	 * @since 2.2.0
+	 */
+	@property({ type: Boolean })
+	noHorizontalScrolling = false;
+
+	/**
+	 * Indicates whether the component has its own vertical scroll when the content
+	 * exceeds the content area. However, if a scrollable component is present
+	 * within the content area, this property must be set to `true` to disable
+	 * the default scrolling.
+	 * @default false
+	 * @since 2.2.0
+	 */
+	@property({ type: Boolean })
+	noVerticalScrolling = false;
+
 	/**
 	 * Indicates if the element is the top modal popup
 	 *

diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -79,8 +79,12 @@
     display: none;
 }
 
-:host([no-scrolling]) .ui5-popup-content {
-    overflow: hidden;
+:host([no-horizontal-scrolling]) .ui5-popup-content {
+    overflow-x: hidden;
+}
+
+:host([no-vertical-scrolling]) .ui5-popup-content {
+	overflow-y: hidden;
 }
 
 /*** Responsive paddings for the content***/

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -159,8 +159,15 @@
 		Open Popover ACC role - None
 	</ui5-button>
 
-	<ui5-popover placement="Bottom" id="acc-role-popover" header-text="Test ACC world" accessible-role="AlertDialog">
-		<ui5-list id="bigList2"></ui5-list>
+	<ui5-popover placement="Bottom"
+				 id="acc-role-popover"
+				 header-text="Test ACC world"
+				 no-vertical-scrolling
+				 accessible-role="AlertDialog">
+		<div class="popoverContent">
+			<ui5-title level="H2">Title</ui5-title>
+			<ui5-list class="popoverContentList" id="bigList2"></ui5-list>
+		</div>
 	</ui5-popover>
 
 	<ui5-popover placement="Bottom" id="acc-role-popover2" header-text="Test ACC world" accessible-role="None">

diff --git a/packages/main/test/pages/styles/Popover.css b/packages/main/test/pages/styles/Popover.css
@@ -91,4 +91,15 @@ ui5-date-picker,
 
 #divOpenAndScroll > div {
     height: 2000px;
+}
+
+.popoverContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.popoverContentList {
+    flex: 1;
+    min-height: 0;
 }