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