feat(ui5-popover): allow min-width control via standard CSS styling (#13607)

JIRA: BGSOFUIRODOPI-3608

Author: duygu-rmdn

packages/main/cypress/specs/Popover.cy.tsx

@@ -1896,3 +1896,77 @@ describe("Opener visibility in scrollable containers", () => {
 		cy.get("[ui5-popover]").should("have.prop", "open", false);
 	});
 });
+
+describe("Min Width via CSS", () => {
+	it("should apply min-width when set via style attribute", () => {
+		cy.mount(
+			<>
+				<Button id="btnMinWidth">Open Popover</Button>
+				<Popover id="popMinWidth" opener="btnMinWidth" style={{ minWidth: "300px" }} headerText="Min Width Test">
+					<div>Small content</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("[ui5-popover]").invoke("prop", "open", true);
+
+		cy.get("[ui5-popover]")
+			.should("have.css", "min-width", "300px");
+	});
+
+	it("should allow content wider than minWidth", () => {
+		cy.mount(
+			<>
+				<Button id="btnMinWidthWide">Open Popover</Button>
+				<Popover id="popMinWidthWide" opener="btnMinWidthWide" style={{ minWidth: "200px" }}>
+					<div style={{ width: "400px", padding: "10px" }}>
+						This content is wider than the minWidth setting, and the popover should expand to fit it.
+					</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("[ui5-popover]").invoke("prop", "open", true);
+
+		cy.get("[ui5-popover]")
+			.then($popover => {
+				const width = $popover[0].getBoundingClientRect().width;
+				// Content is 400px + padding, popover should be wider than minWidth
+				expect(width).to.be.greaterThan(200);
+			});
+	});
+
+	it("should work with resizable popover", () => {
+		cy.mount(
+			<>
+				<Button id="btnMinWidthResizable">Open Resizable Popover</Button>
+				<Popover id="popMinWidthResizable" opener="btnMinWidthResizable" style={{ minWidth: "400px" }} resizable headerText="Resizable with Min Width">
+					<div>Content that can be resized but not below 400px</div>
+				</Popover>
+			</>
+		);
+
+		cy.get("[ui5-popover]").invoke("prop", "open", true);
+
+		cy.get("[ui5-popover]")
+			.should("have.css", "min-width", "400px");
+
+		cy.get("[ui5-popover]")
+			.shadow()
+			.find(".ui5-popover-resize-handle")
+			.should("be.visible");
+
+		cy.get("[ui5-popover]")
+			.shadow()
+			.find(".ui5-popover-resize-handle")
+			.trigger("mousedown", { button: 0 })
+			.trigger("mousemove", { clientX: -200, clientY: 0 })
+			.trigger("mouseup");
+
+		cy.get("[ui5-popover]")
+			.then($popover => {
+				const currentWidth = $popover[0].getBoundingClientRect().width;
+				expect(currentWidth).to.be.at.least(400);
+			});
+	});
+});

packages/main/src/PopoverResize.ts

@@ -240,7 +240,7 @@ class PopoverResize {
 			minHeight,
 		} = window.getComputedStyle(this._popover);
 
-		const domRefComputedStyle = window.getComputedStyle(this._popover._getRealDomRef!());
+		const domRefComputedStyle = window.getComputedStyle(this._popover);
 
 		this._initialClientX = e.clientX;
 		this._initialClientY = e.clientY;

packages/main/src/themes/Popover.css

@@ -1,4 +1,5 @@
 :host {
+	min-width: 6.25rem;
 	box-shadow: var(--_ui5_popover_box_shadow);
 	background-color: var(--_ui5_popover_background);
 	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
@@ -59,10 +60,6 @@
 	display: none;
 }
 
-.ui5-popover-root {
-	min-width: 6.25rem;
-}
-
 .ui5-popover-arrow {
 	pointer-events: none;
 	display: block;

packages/main/test/pages/Popover.html

@@ -32,6 +32,25 @@
 			<iframe id="clickThisIframeInsideShadowRoot" src="./Test.html"></iframe>
 		</template>
 	</div>
+	<ui5-button id="btnTestMinWidth">Open Popover with minWidth: 500px</ui5-button>
+	<ui5-popover id="popTestMinWidth" opener="btnTestMinWidth" header-text="minWidth: 500px" style="min-width: 500px;">
+		<div style="padding: 10px;">
+			This popover has min-width set to 500px.
+		</div>
+	</ui5-popover>
+
+	<br><br>
+
+	<ui5-button id="btnTestMinWidthResizable">Open Resizable Popover with minWidth: 400px</ui5-button>
+	<ui5-popover id="popTestMinWidthResizable" opener="btnTestMinWidthResizable" resizable header-text="Resizable + minWidth: 400px" style="min-width: 400px;">
+		<div style="padding: 10px; min-height: 100px;">
+			This popover is resizable with minWidth: 400px.<br>
+			Try resizing - it won't go below 400px width!
+		</div>
+	</ui5-popover>
+
+	<br><br>
+
 	<ui5-button id="btn">Click me !</ui5-button>
 
 	<ui5-popover id="pop" class="popover6auto" placement="Top" accessible-name="This popover is important">
@@ -676,6 +695,14 @@ <h3>Popover in ShadowRoot, Opener set as ID in window.document</h3>
 
 	<script>
 
+		btnTestMinWidth.addEventListener("click", function () {
+			popTestMinWidth.open = true;
+		});
+
+		btnTestMinWidthResizable.addEventListener("click", function () {
+			popTestMinWidthResizable.open = true;
+		});
+
 		test.addEventListener("click", function (event) {
 			groupPop.open = true;
 		});