Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
duygu-rmdn wants to merge 4 commits into
base: main
Choose a base branch
from
+128 −1
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d0056e
feat(ui5-popover): add minWidth property
duygu-rmdn May 28, 2026
d61c978
chore: remove the new prop and make it work only with css
duygu-rmdn May 29, 2026
e862bff
chore: update test descriptions
duygu-rmdn Jun 1, 2026
f29df05
Merge branch 'main' into minWidthPopover
duygu-rmdn Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions packages/main/cypress/specs/Popover.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<>
<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]")
.shadow()
.find(".ui5-popup-root")
.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]")
.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(
<>
<Button id="btnRem">Rem Units</Button>
<Popover id="popRem" opener="btnRem" style={{ minWidth: "20rem" }}>
<div>Min width in rem</div>
</Popover>
<Button id="btnVw" style={{ marginLeft: "20px" }}>Vw Units</Button>
<Popover id="popVw" opener="btnVw" style={{ minWidth: "30vw" }}>
<div>Min width in vw</div>
</Popover>
</>
);

cy.get("#popRem").invoke("prop", "open", true);
cy.get("#popRem")
.shadow()
.find(".ui5-popup-root")
.should("have.css", "min-width", "320px");
});
});
3 changes: 2 additions & 1 deletion packages/main/src/themes/Popover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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));
Expand Down Expand Up @@ -60,7 +61,7 @@
}

.ui5-popover-root {
min-width: 6.25rem;
min-width: inherit;
Copy link
Copy Markdown
Member

@TeodorTaushanov TeodorTaushanov Jun 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need this?

}

.ui5-popover-arrow {
Expand Down
27 changes: 27 additions & 0 deletions packages/main/test/pages/Popover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
});
Expand Down
Loading