diff --git a/packages/main/cypress/specs/Popover.cy.tsx b/packages/main/cypress/specs/Popover.cy.tsx index 59920f1f0f43..70430fac2a12 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 via CSS", () => { + it("should apply min-width when set via style attribute", () => { + 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/themes/Popover.css b/packages/main/src/themes/Popover.css index a85fa99ab4dd..89ca85fd5f4d 100644 --- a/packages/main/src/themes/Popover.css +++ b/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)); @@ -60,7 +61,7 @@ } .ui5-popover-root { - min-width: 6.25rem; + min-width: inherit; } .ui5-popover-arrow { diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html index 91954c01dd16..d1aa06ae8ef4 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