From e82b5cd437969ff65b28efeec8283177b3dcc3fc Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 16 Mar 2026 13:16:18 +0200 Subject: [PATCH 1/3] fix(ui5-illustrated-message): update the component to match the latest design spec Align IllustratedMessage layout, spacing, and breakpoints with the updated visual specification. Dot media now uses the same vertical structure as the other sizes and the obsolete horizontal-specific layout behavior is removed. Dot typography and constraints are aligned to spec, including updated title and subtitle width/height limits, title color, and spacing around illustration, text, and actions. Spacing and margin behavior is normalized across sizes. Illustration spacing for larger media is adjusted, body-to-button spacing is corrected for dot, spot, and dialog media, and action container spacing is refined. Action slot content now uses generic sibling spacing so adjacent controls are no longer visually stuck together. Responsive thresholds are updated to the new width and height breakpoint values from the design specification for base, dot, spot, and dialog transitions. Cypress coverage is updated accordingly by asserting the new breakpoint constants, updating auto media expectation for constrained-height scenarios, and adding a regression check that dot media renders with vertical layout. --- .../cypress/specs/IllustratedMessage.cy.tsx | 29 +++++++++++- packages/fiori/src/IllustratedMessage.ts | 16 +++---- .../fiori/src/themes/IllustratedMessage.css | 46 ++++++++++++------- 3 files changed, 65 insertions(+), 26 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index 0f2165948be3..a941de5de32e 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -71,6 +71,22 @@ describe("Accessibility", () => { }); describe("design", () => { + it("uses updated responsive breakpoint thresholds", () => { + expect(IllustratedMessage.BREAKPOINTS).to.deep.equal({ + BASE: 142, + DOT: 190, + SPOT: 350, + DIALOG: 351, + }); + + expect(IllustratedMessage.BREAKPOINTS_HEIGHT).to.deep.equal({ + BASE: 181, + DOT: 340, + SPOT: 396, + DIALOG: 518, + }); + }); + it("Large design should evaluate to Scene media", () => { cy.mount( @@ -158,7 +174,7 @@ describe("IllustratedMessage 'design' property", () => { describe("Vertical responsiveness", () => { it("content with auto design shrinks to fit the parent container", () => { - const expectedMedia = "dialog"; + const expectedMedia = "dot"; cy.mount(
@@ -275,6 +291,17 @@ describe("Vertical responsiveness", () => { }); describe("Dot design resource handling", () => { + it("uses vertical layout for Dot media", () => { + cy.mount( + + ); + + cy.get("[ui5-illustrated-message]") + .shadow() + .find(".ui5-illustrated-message-inner") + .should("have.css", "flex-direction", "column"); + }); + it("uses substitute Spot illustration", () => { cy.mount( diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 73652773cd9d..b843aa881b22 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -293,19 +293,19 @@ class IllustratedMessage extends UI5Element { static get BREAKPOINTS() { return { - DIALOG: 681, - SPOT: 360, - DOT: 260, - BASE: 160, + DIALOG: 351, + SPOT: 350, + DOT: 190, + BASE: 142, }; } static get BREAKPOINTS_HEIGHT() { return { - DIALOG: 415, - SPOT: 284, - DOT: 207, - BASE: 61, + DIALOG: 518, + SPOT: 396, + DOT: 340, + BASE: 181, }; } diff --git a/packages/fiori/src/themes/IllustratedMessage.css b/packages/fiori/src/themes/IllustratedMessage.css index 9547ed84d650..8843e00dc345 100644 --- a/packages/fiori/src/themes/IllustratedMessage.css +++ b/packages/fiori/src/themes/IllustratedMessage.css @@ -22,7 +22,7 @@ } .ui5-illustrated-message-illustration { - margin: 2rem 0; + margin: 1rem 0; } .ui5-illustrated-message-illustration svg { @@ -68,11 +68,20 @@ } .ui5-illustrated-message-actions { - margin: 1rem 0; + margin: 0 0 1rem; +} + +.ui5-illustrated-message-actions slot { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.5rem; } :host([media="dialog"]) .ui5-illustrated-message-illustration { - margin: 1rem 0; + margin-top: 1rem; + margin-bottom: 0.5rem; } :host([media="dialog"]) .ui5-illustrated-message-title [ui5-title], @@ -89,7 +98,7 @@ } :host([media="dialog"]) .ui5-illustrated-message-actions { - margin-top: 0.5rem; + margin-top: 0; margin-bottom: 1rem; } @@ -116,7 +125,7 @@ } :host([media="spot"]) .ui5-illustrated-message-actions { - margin: 0.5rem 0; + margin: 0 0 0.5rem; } :host([media="dot"]) { @@ -124,32 +133,35 @@ min-height: 4rem; /* needed to avoid infinite loop between "dot" and "base" when only illustration is used (no title, etc.) */ } -:host([media="dot"]) .ui5-illustrated-message-inner { - flex-direction: row; -} - :host([media="dot"]) .ui5-illustrated-message-illustration { - margin: 0 0.25rem 0 0; + margin: 0 0 0.25rem; height: 2.8125rem; width: 2.8125rem; - align-self: baseline; } :host([media="dot"]) .ui5-illustrated-message-title [ui5-title], :host([media="dot"]) ::slotted([slot="title"]) { + font-family: var(--sapFontBoldFamily); margin-bottom: 0.25rem; - font-size: var(--sapFontHeader5Size); - max-width: 12.6875rem; + font-size: 1rem; + line-height: 1.1875rem; + color: var(--sapGroup_TitleTextColor); + max-width: 8.4375rem; + max-height: 2.3125rem; + overflow: hidden; } :host([media="dot"]) .ui5-illustrated-message-subtitle { + font-family: var(--sapFontFamily); font-size: var(--sapFontSize); - max-width: 12.6875rem; + max-width: 8.4375rem; + max-height: 5.25rem; + overflow: hidden; margin-bottom: 0.25rem; } :host([media="dot"]) .ui5-illustrated-message-actions { - margin: 0.25rem 0; + margin: 0 0 0.25rem; } :host([media="base"]) .ui5-illustrated-message-illustration { @@ -160,12 +172,12 @@ :host([media="base"]) ::slotted([slot="title"]) { margin-bottom: 0.25rem; font-size: var(--sapFontHeader5Size); - max-width: 10rem; + max-width: 8.875rem; } :host([media="base"]) .ui5-illustrated-message-subtitle { font-size: var(--sapFontSize); - max-width: 10rem; + max-width: 8.875rem; margin-bottom: 0rem; } From 213db0ed99d085d884a40971e2ced9f4710a59cb Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 16 Mar 2026 13:41:35 +0200 Subject: [PATCH 2/3] - fixed failing tests --- packages/fiori/cypress/specs/IllustratedMessage.cy.tsx | 2 +- packages/main/cypress/specs/Table.cy.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx index a941de5de32e..b8996810d693 100644 --- a/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx +++ b/packages/fiori/cypress/specs/IllustratedMessage.cy.tsx @@ -254,7 +254,7 @@ describe("Vertical responsiveness", () => { cy.get("[ui5-illustrated-message]") .shadow() .find(".ui5-illustrated-message-illustration svg") - .should("have.css", "height", "160px"); + .should("have.css", "height", "240px"); }); it("Illustration visible, when container fit content height", () => { diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx index f41b55637967..c29c24d556cc 100644 --- a/packages/main/cypress/specs/Table.cy.tsx +++ b/packages/main/cypress/specs/Table.cy.tsx @@ -965,8 +965,10 @@ describe("Table - Interactive Rows", () => { cy.get("@rowClickHandler").should("have.been.calledThrice"); cy.get("#row2").find("ui5-button").as("row2button"); - cy.get("@row2button").realMouseDown(); + cy.get("#row2").realMouseUp(); cy.get("#row2").should("not.have.attr", "_active"); + cy.get("@row2button").realMouseDown(); + cy.get("#row2").should("have.attr", "_active"); cy.get("@row2button").realMouseUp(); cy.get("#row2").should("not.have.attr", "_active"); cy.get("@row2button").invoke("on", "click", cy.stub().as("buttonClickHandler")); From 21e5fbb486a144084f3f0a02952730e2e68a9479 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 17 Mar 2026 18:30:44 +0200 Subject: [PATCH 3/3] - fixed samples to reflect on the new breakpoints --- packages/fiori/test/pages/IllustratedMessage.html | 9 +++++---- .../fiori/IllustratedMessage/WithDialog/sample.html | 2 +- .../fiori/IllustratedMessage/WithDialog/sample.tsx | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html index 59d356e948fe..192eaeffd2bf 100644 --- a/packages/fiori/test/pages/IllustratedMessage.html +++ b/packages/fiori/test/pages/IllustratedMessage.html @@ -146,6 +146,7 @@ Action 1 + Action 2 Open Dialog @@ -215,10 +216,10 @@

Vertical responsiveness

const containerWidthSelect = document.getElementById("containerWidthSelect"); const illustratedMessageContainer = document.getElementById("container"); const designs = { - base: 159, - extrasmall: 259, - small: 319, - medium: 679, + base: 142, + extrasmall: 190, + small: 350, + medium: 351, large: 1100, } diff --git a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.html b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.html index 0624d329d8a9..16b273c0737a 100644 --- a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.html +++ b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.html @@ -13,7 +13,7 @@ Open Dialog - + Close diff --git a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.tsx b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.tsx index e4818974fe04..f4484d0c3a97 100644 --- a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.tsx +++ b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.tsx @@ -24,7 +24,7 @@ function App() { headerText="Error" onClose={() => setDialogOpen(false)} > - +