diff --git a/packages/main/cypress/specs/Popover.cy.tsx b/packages/main/cypress/specs/Popover.cy.tsx index 59920f1f0f43..ef436f5fbb7f 100644 --- a/packages/main/cypress/specs/Popover.cy.tsx +++ b/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( + <> + + +
Small content
+
+ + ); + + 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( + <> + + +
+ 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]") + .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); + }); + }); +}); diff --git a/packages/main/src/PopoverResize.ts b/packages/main/src/PopoverResize.ts index 37f5614d5af2..012baef6c012 100644 --- a/packages/main/src/PopoverResize.ts +++ b/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; diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css index a85fa99ab4dd..2c54e4de5b93 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)); @@ -59,10 +60,6 @@ display: none; } -.ui5-popover-root { - min-width: 6.25rem; -} - .ui5-popover-arrow { pointer-events: none; display: block; 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