From 9d0056ebced101aa1d814e9556598a7f1caa27b1 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Thu, 28 May 2026 17:03:55 +0300 Subject: [PATCH 1/4] feat(ui5-popover): add minWidth property JIRA: BGSOFUIRODOPI-3608 --- packages/main/cypress/specs/Popover.cy.tsx | 99 ++++++++++++++++++++++ packages/main/src/Popover.ts | 10 +++ packages/main/test/pages/Popover.html | 27 ++++++ 3 files changed, 136 insertions(+) diff --git a/packages/main/cypress/specs/Popover.cy.tsx b/packages/main/cypress/specs/Popover.cy.tsx index 59920f1f0f43..563066491247 100644 --- a/packages/main/cypress/specs/Popover.cy.tsx +++ b/packages/main/cypress/specs/Popover.cy.tsx @@ -1896,3 +1896,102 @@ describe("Opener visibility in scrollable containers", () => { cy.get("[ui5-popover]").should("have.prop", "open", false); }); }); + +describe("Min Width Property", () => { + it("should apply minWidth CSS property", () => { + cy.mount( + <> + + +
Small content
+ + + ); + + cy.get("[ui5-popover]").invoke("prop", "open", true); + + cy.get("[ui5-popover]") + .shadow() + .find(".ui5-popup-root") + .should("have.css", "min-width", "300px"); + }); + + it("should allow content wider than minWidth", () => { + cy.mount( + <> + + +
+ This content is wider than the minWidth setting, and the popover should expand to fit it. +
+ + + ); + + 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( + <> + + +
Content that can be resized but not below 400px
+ + + ); + + cy.get("[ui5-popover]").invoke("prop", "open", true); + + cy.get("[ui5-popover]") + .shadow() + .find(".ui5-popup-root") + .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); + }); + }); + + it("should accept different CSS units", () => { + cy.mount( + <> + + +
Min width in rem
+ + + +
Min width in vw
+ + + ); + + cy.get("#popRem").invoke("prop", "open", true); + cy.get("#popRem") + .shadow() + .find(".ui5-popup-root") + .should("have.css", "min-width", "320px"); + }); +}); diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index 1c4a667034a0..436d78e8814f 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -175,6 +175,15 @@ class Popover extends Popup { @property({ type: Boolean }) resizable = false; + /** + * Defines the minimum width of the popover. + * @default undefined + * @public + * @since 2.23.0 + */ + @property() + minWidth?: string; + /** * Sets the X translation of the arrow * @private @@ -956,6 +965,7 @@ class Popover extends Popup { root: { "max-height": this._maxHeight ? `${this._maxHeight}px` : "", "max-width": this._maxWidth ? `${this._maxWidth}px` : "", + "min-width": this.minWidth ? this.minWidth : null, }, arrow: { transform: `translate(${this.arrowTranslateX}px, ${this.arrowTranslateY}px)`, diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html index 91954c01dd16..cec1791950cf 100644 --- a/packages/main/test/pages/Popover.html +++ b/packages/main/test/pages/Popover.html @@ -32,6 +32,25 @@ + Open Popover with minWidth: 500px + +
+ This popover has min-width set to 500px. +
+ + +

+ + Open Resizable Popover with minWidth: 400px + +
+ This popover is resizable with minWidth: 400px.
+ Try resizing - it won't go below 400px width! +
+ + +

+ Click me ! @@ -676,6 +695,14 @@

Popover in ShadowRoot, Opener set as ID in window.document