Skip to content

fix(ui5-illustrated-message): update to match the latest design spec #13280

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
plamenivanov91 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(ui5-illustrated-message): update to match the latest design spec #13280

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
e82b5cd
fix(ui5-illustrated-message): update the component to match the lates…
plamenivanov91 Mar 16, 2026
213db0e
- fixed failing tests
plamenivanov91 Mar 16, 2026
47249a2
Merge branch 'main' into im-vd-spec-update
plamenivanov91 Mar 17, 2026
21e5fbb
- fixed samples to reflect on the new breakpoints
plamenivanov91 Mar 17, 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
31 changes: 29 additions & 2 deletions packages/fiori/cypress/specs/IllustratedMessage.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<IllustratedMessage design="Large" name="UnableToUpload">
Expand Down Expand Up @@ -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(
<div style={{ height: "300px" }}>
Expand Down Expand Up @@ -238,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", () => {
Expand Down Expand Up @@ -275,6 +291,17 @@ describe("Vertical responsiveness", () => {
});

describe("Dot design resource handling", () => {
it("uses vertical layout for Dot media", () => {
cy.mount(
<IllustratedMessage name="AddPeople" design="Dot" />
);

cy.get("[ui5-illustrated-message]")
.shadow()
.find(".ui5-illustrated-message-inner")
.should("have.css", "flex-direction", "column");
});

it("uses substitute Spot illustration", () => {
cy.mount(
<IllustratedMessage name="TntUnableToLoad" design="Dot" />
Expand Down
16 changes: 8 additions & 8 deletions packages/fiori/src/IllustratedMessage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}

Expand Down
46 changes: 29 additions & 17 deletions packages/fiori/src/themes/IllustratedMessage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.ui5-illustrated-message-illustration {
margin: 2rem 0;
margin: 1rem 0;
}

.ui5-illustrated-message-illustration svg {
Expand Down Expand Up @@ -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],
Expand All @@ -89,7 +98,7 @@
}

:host([media="dialog"]) .ui5-illustrated-message-actions {
margin-top: 0.5rem;
margin-top: 0;
margin-bottom: 1rem;
}

Expand All @@ -116,40 +125,43 @@
}

:host([media="spot"]) .ui5-illustrated-message-actions {
margin: 0.5rem 0;
margin: 0 0 0.5rem;
}

:host([media="dot"]) {
padding: 0.25rem;
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 {
Expand All @@ -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;
}

Expand Down
9 changes: 5 additions & 4 deletions packages/fiori/test/pages/IllustratedMessage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
</ui5-select>
<ui5-illustrated-message id="illustratedMsg1" class="border">
<ui5-button>Action 1</ui5-button>
<ui5-button>Action 2</ui5-button>
</ui5-illustrated-message>

<ui5-button id="openDialogButton">Open Dialog</ui5-button>
Expand Down Expand Up @@ -215,10 +216,10 @@ <h2>Vertical responsiveness</h2>
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,
}

Expand Down
4 changes: 3 additions & 1 deletion packages/main/cypress/specs/Table.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<ui5-button id="openDialogButton">Open Dialog</ui5-button>
<ui5-dialog id="hello-dialog" header-text="Error">
<ui5-illustrated-message name="UnableToLoad"></ui5-illustrated-message>
<ui5-illustrated-message name="UnableToLoad" design="Dialog"></ui5-illustrated-message>
<ui5-bar design="Footer" slot="footer">
<ui5-button id="closeDialogButton" design="Emphasized" slot="endContent">Close</ui5-button>
</ui5-bar>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function App() {
headerText="Error"
onClose={() => setDialogOpen(false)}
>
<IllustratedMessage name="UnableToLoad" />
<IllustratedMessage name="UnableToLoad" design="Dialog" />
<Bar design="Footer" slot="footer">
<Button
id="closeDialogButton"
Expand Down
Loading