Skip to content

refactor(ui5-dynamic-side-content): replace resize handler with container queries #12054

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

Merged
merged 18 commits into from
Aug 28, 2025
Merged

refactor(ui5-dynamic-side-content): replace resize handler with container queries #12054

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
752bdd3
wip(ui5-dynamic-side-content): replace resize handler with container …
NHristov-sap Jul 31, 2025
0f204c5
refactor(ui5-dynamic-side-content): replace resize handler with conta…
NHristov-sap Jul 31, 2025
d81dcee
feat(ui5-dynamic-side-content): refactor DynamicSideContent to use CS…
NHristov-sap Aug 18, 2025
27a50b6
Merge branch 'main' into BL_dsc_css
NHristov-sap Aug 18, 2025
6702a93
refactor(ui5-dynamic-side-content): fix lint errors
NHristov-sap Aug 18, 2025
dbf4c5e
update tests
NHristov-sap Aug 19, 2025
36e75c1
Merge branch 'main' into BL_dsc_css
NHristov-sap Aug 19, 2025
b1d1153
Merge branch 'main' into BL_dsc_css
NHristov-sap Aug 19, 2025
60d6534
Merge branch 'main' into BL_dsc_css
NHristov-sap Aug 20, 2025
91e3e54
Merge branch 'main' into BL_dsc_css
NHristov-sap Aug 20, 2025
d8bd84c
feat(ui5-dynamic-side-content): fix comments
NHristov-sap Aug 25, 2025
f976ee9
Merge branch 'BL_dsc_css' of https://github.com/SAP/ui5-webcomponents…
NHristov-sap Aug 25, 2025
9dd3eab
feat(ui5-dynamic-side-content): fix more comments
NHristov-sap Aug 25, 2025
2ef6f6b
feat(ui5-dynamic-side-content): fix failing test
NHristov-sap Aug 26, 2025
4846d63
feat(ui5-dynamic-side-content): fix failing test
NHristov-sap Aug 26, 2025
7c9a5d0
feat(ui5-dynamic-side-content): fix comments
NHristov-sap Aug 28, 2025
e9f8b28
feat(ui5-dynamic-side-content): fix tests
NHristov-sap Aug 28, 2025
357352d
feat(ui5-dynamic-side-content): fix tests
NHristov-sap Aug 28, 2025
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
357 changes: 32 additions & 325 deletions packages/fiori/cypress/specs/DynamicSideContent.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,333 +144,37 @@ describe("'equalSplit' property", () => {
cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-6");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-6");
});
});

describe("containers widths on XL size", () => {
it("check for proper width", () => {
cy.viewport(1600, 500);

cy.mount(
<DynamicSideContent>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-9");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-3");
});
});

describe("containers widths on L size", () => {
it("check for proper width", () => {
cy.viewport(1400, 500);

cy.mount(
<DynamicSideContent>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-8");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-4");
// Check actual computed CSS width values
cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.css", "width")
.then(width => {
// Parse the pixel value and check if it's approximately 50% of container
cy.get("@dynamicSideContent")
.invoke("outerWidth")
.then(containerWidth => {
const expectedWidth = containerWidth * 0.5;
expect(parseFloat(width as unknown as string)).to.be.closeTo(expectedWidth, 1);
});
});

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.css", "width")
.then(width => {
cy.get("@dynamicSideContent")
.invoke("outerWidth")
.then(containerWidth => {
const expectedWidth = containerWidth * 0.5;
expect(parseFloat(width as unknown as string)).to.be.closeTo(expectedWidth, 1);
});
});
});
});

describe("containers widths on M size:", () => {
it("check for proper width", () => {
cy.mount(
<DynamicSideContent>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

// set outer container width to > 960 and < 1024 (M1)
cy.viewport(1020, 500);

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-fixed");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-fixed");

// set outer container width to > 720 and < 960 (M2)
cy.viewport(950, 500);

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-12");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-12");
});
});

describe("containers widths on S size:", () => {
it("check for proper width", () => {
cy.mount(
<DynamicSideContent>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

// set outer container width to < 720 (S)
cy.viewport(700, 500);

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-main")
.should("have.class", "ui5-dsc-span-12");

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", "ui5-dsc-span-0");
});
});

describe("'sideContentVisibility' property:", () => {
it("'AlwaysShow' - side content is always visible", () => {
cy.viewport(1600, 500);

cy.mount(
<DynamicSideContent sideContentVisibility="AlwaysShow">
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

const viewports = [
{ width: 1600, expectedClass: "ui5-dsc-span-3" },
{ width: 1400, expectedClass: "ui5-dsc-span-4" },
{ width: 1020, expectedClass: "ui5-dsc-span-fixed" },
{ width: 950, expectedClass: "ui5-dsc-span-12" },
{ width: 700, expectedClass: "ui5-dsc-span-12" },
];

viewports.forEach(({ width, expectedClass }) => {
cy.viewport(width, 500);

cy.get("ui5-dynamic-side-content")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", expectedClass);
});
});
});

describe("'sideContentFallDown' property", () => {
const testCases = [
{
setting: SideContentFallDown.BelowXL,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-12" },
{ size: 1020, expected: "ui5-dsc-span-12" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.BelowL,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-12" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.BelowM,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-fixed" },
{ size: 950, expected: "ui5-dsc-span-fixed" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.OnMinimumWidth,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-fixed" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
];

testCases.forEach(({ setting, widths }) => {
it(`'${setting}' - side content falls down at expected breakpoints`, () => {
cy.mount(
<DynamicSideContent sideContentFallDown={setting}>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

widths.forEach(({ size, expected }) => {
cy.viewport(size, 500);

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", expected);
});
});
});
});

describe("'sideContentFallDown' property", () => {
const testCases = [
{
setting: SideContentFallDown.BelowXL,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-12" },
{ size: 1020, expected: "ui5-dsc-span-12" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.BelowL,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-12" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.BelowM,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-fixed" },
{ size: 950, expected: "ui5-dsc-span-fixed" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
{
setting: SideContentFallDown.OnMinimumWidth,
widths: [
{ size: 1600, expected: "ui5-dsc-span-3" },
{ size: 1400, expected: "ui5-dsc-span-4" },
{ size: 1020, expected: "ui5-dsc-span-fixed" },
{ size: 950, expected: "ui5-dsc-span-12" },
{ size: 700, expected: "ui5-dsc-span-0" },
],
},
];

testCases.forEach(({ setting, widths }) => {
it(`'${setting}' - side content falls down at expected breakpoints`, () => {
cy.mount(
<DynamicSideContent sideContentFallDown={setting}>
<div>
<h1>Main Content</h1>
</div>
<div slot="sideContent">
<h1>Side Content</h1>
</div>
</DynamicSideContent>
);

cy.get("[ui5-dynamic-side-content]")
.as("dynamicSideContent");

widths.forEach(({ size, expected }) => {
cy.viewport(size, 500);

cy.get("@dynamicSideContent")
.shadow()
.find(".ui5-dsc-side")
.should("have.class", expected);
});
});
});
});

describe("'layout-change' event:", () => {
it("fires when changing the breakpoint", () => {
Expand All @@ -493,8 +197,11 @@ describe("'layout-change' event:", () => {
.as("layoutChange"));
});

// Change to > 1024 and < 1440 (L) to ensure previous breakpoint for the next event
cy.viewport(1300, 500);

// Change to M
cy.viewport(800, 500);
cy.viewport(900, 500);

cy.get("@layoutChange")
.should("be.called")
Expand All @@ -508,7 +215,7 @@ describe("'layout-change' event:", () => {
});

// Change to > 1024 and < 1440 (L)
cy.viewport(1200, 500);
cy.viewport(1300, 500);

cy.get("@layoutChange")
.should("be.called")
Expand Down
Loading
Loading