fix(ui5-toolbar): fix overflow layout processing in dialogs

[plamenivanov91]

There was a problem with the ui5-toolbar component when used inside a dialog. The toolbar's overflow layout was not being processed correctly after the dialog was opened, leading to issues with item visibility and layout.

This tracks for a similar scenario, which triggers the processOverflowLayout method of the toolbar. This ensures that the toolbar's layout is recalculated correctly after the dialog is opened, allowing the overflow items to be displayed properly.

Fixes: #11771

[kgogov]

Hi Plamen,

Nice approach tracking the transition from hidden to visible! 👍

I tested this with a toolbar inside a dialog, but unfortunately it's not working as expected for me either. The overflow calculation still doesn't seem to trigger properly when the dialog opens.

Also we should definitely add a test case for this scenario:

it("should handle overflow correctly when toolbar becomes visible from hidden state", async () => {
    // Test toolbar inside a closed dialog that gets opened
    // Verify overflow button and item distribution work correctly
});

[plamenivanov91]

Hi Plamen,

Nice approach tracking the transition from hidden to visible! 👍

I tested this with a toolbar inside a dialog, but unfortunately it's not working as expected for me either. The overflow calculation still doesn't seem to trigger properly when the dialog opens.

Also we should definitely add a test case for this scenario:

it("should handle overflow correctly when toolbar becomes visible from hidden state", async () => {
    // Test toolbar inside a closed dialog that gets opened
    // Verify overflow button and item distribution work correctly
});

I changed my approach for fixing the issue.

Could you try the fix?

I tried numerous ways to write a test for our case but it proves almost impossible to hit this exact case in test environment.

May you could suggest a test ?

[kgogov]

Hi Plamen,
Nice approach tracking the transition from hidden to visible! 👍
I tested this with a toolbar inside a dialog, but unfortunately it's not working as expected for me either. The overflow calculation still doesn't seem to trigger properly when the dialog opens.
Also we should definitely add a test case for this scenario:

it("should handle overflow correctly when toolbar becomes visible from hidden state", async () => {
    // Test toolbar inside a closed dialog that gets opened
    // Verify overflow button and item distribution work correctly
});

I changed my approach for fixing the issue.

Could you try the fix?

I tried numerous ways to write a test for our case but it proves almost impossible to hit this exact case in test environment.

May you could suggest a test ?

describe("Toolbar in Dialog", () => {
	it("Should correctly process overflow layout when rendered inside a dialog", () => {
		cy.viewport(400, 600);

		cy.mount(
			<div>
				<Button id="open-dialog-button" onClick={() => {
					const dialog = document.getElementById("dialog") as Dialog;
					dialog.open = true;
				}}>Open Dialog</Button>

				<Dialog id="dialog">
					<Toolbar id="toolbar-in-dialog">
						<ToolbarButton icon={add} text="Plus" design="Default"></ToolbarButton>
						<ToolbarButton icon={employee} text="Hire"></ToolbarButton>
						<ToolbarSeparator></ToolbarSeparator>
						<ToolbarButton icon={add} text="Add"></ToolbarButton>
						<ToolbarButton icon={decline} text="Decline"></ToolbarButton>
						<ToolbarSpacer></ToolbarSpacer>
						<ToolbarButton icon={add} text="Append"></ToolbarButton>
						<ToolbarButton icon={employee} text="More"></ToolbarButton>
						<ToolbarButton icon={decline} text="Extra"></ToolbarButton>
						<ToolbarButton icon={add} text="Final"></ToolbarButton>
						<ToolbarButton icon={employee} text="Last"></ToolbarButton>
						<ToolbarButton icon={decline} text="Final"></ToolbarButton>
						<ToolbarButton icon={add} text="Plus"></ToolbarButton>
					</Toolbar>
				</Dialog>
			</div>
		);

		// Open dialog
		cy.get("#open-dialog-button").click();
		cy.get<Dialog>("#dialog").ui5DialogOpened();

		// Verify toolbar is rendered inside the dialog
		cy.get("#toolbar-in-dialog")
			.should("exist")
			.should("be.visible");

		// Check that overflow processing has occurred by verifying overflow button exists and is visible
		// Since we have many items in a constrained width, some should overflow
		cy.get("#toolbar-in-dialog")
			.shadow()
			.find(".ui5-tb-overflow-btn")
			.should("exist")
			.should("not.have.class", "ui5-tb-overflow-btn-hidden");
	});
});

[kgogov]

Your code works great! Maybe you could try adding the test I suggested?