Skip to content

Commit

Permalink
refactor(ui5-illustrated-message): rename size property to design (…
Browse files Browse the repository at this point in the history 
…#8605)

Renames the `size` property  of  the `ui5-illustrated-message` to `design`.
The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear.

BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`.
If you have previously used the `size` property:
```html
<ui5-illustrated-message size="Dialog">
```
Now use `design` instead:
```html
<ui5-illustrated-message design="Dialog">

```

Related to #8461, #7887
  • Loading branch information
@yanaminkova
yanaminkova authored Apr 3, 2024
1 parent 071de87 commit 08f7a54
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 41 deletions.
28 changes: 14 additions & 14 deletions packages/fiori/src/IllustratedMessage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,13 +119,13 @@ class IllustratedMessage extends UI5Element {
* Determines which illustration breakpoint variant is used.
*
* As `IllustratedMessage` adapts itself around the `Illustration`, the other
* elements of the component are displayed differently on the different breakpoints/illustration sizes.
* elements of the component are displayed differently on the different breakpoints/illustration designs.
* @default "Auto"
* @public
* @since 1.5.0
*/
@property({ type: IllustrationMessageSize, defaultValue: IllustrationMessageSize.Auto })
size!: `${IllustrationMessageSize}`;
design!: `${IllustrationMessageSize}`;

/**
* Defines the subtitle of the component.
Expand Down Expand Up @@ -172,7 +172,7 @@ class IllustratedMessage extends UI5Element {
titleLevel!: `${TitleLevel}`;

/**
* Illustration breakpoint variant for the <code>Dot</code> size.
* Illustration breakpoint variant for the <code>Dot</code> design.
*
* @private
* @since 1.24.0
Expand All @@ -181,7 +181,7 @@ class IllustratedMessage extends UI5Element {
dotSvg!: string;

/**
* Illustration breakpoint variant for the <code>Spot</code> size.
* Illustration breakpoint variant for the <code>Spot</code> design.
*
* @private
* @since 1.9.0
Expand All @@ -190,15 +190,15 @@ class IllustratedMessage extends UI5Element {
spotSvg!: string;

/**
* Illustration breakpoint variant for the `Scene` size.
* Illustration breakpoint variant for the `Scene` design.
* @private
* @since 1.9.0
*/
@property({ noAttribute: true })
sceneSvg!: string;

/**
* Illustration breakpoint variant for the `Dialog` size.
* Illustration breakpoint variant for the `Dialog` design.
* @private
* @since 1.9.0
*/
Expand Down Expand Up @@ -314,7 +314,7 @@ class IllustratedMessage extends UI5Element {
this.illustrationTitle = IllustratedMessage.i18nBundle.getText(illustrationData!.title);
this.illustrationSubtitle = IllustratedMessage.i18nBundle.getText(illustrationData!.subtitle);

if (this.size !== IllustrationMessageSize.Auto) {
if (this.design !== IllustrationMessageSize.Auto) {
this._handleCustomSize();
}
}
Expand All @@ -328,7 +328,7 @@ class IllustratedMessage extends UI5Element {
}

handleResize() {
if (this.size !== IllustrationMessageSize.Auto) {
if (this.design !== IllustrationMessageSize.Auto) {
this._adjustHeightToFitContainer();
return;
}
Expand All @@ -341,17 +341,17 @@ class IllustratedMessage extends UI5Element {
const currOffsetWidth = this.offsetWidth,
currOffsetHeight = this.offsetHeight;

const size = heightChange ? currOffsetHeight : currOffsetWidth,
const design = heightChange ? currOffsetHeight : currOffsetWidth,
oBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS;
let newMedia = "";

if (size <= oBreakpounts.BASE) {
if (design <= oBreakpounts.BASE) {
newMedia = IllustratedMessage.MEDIA.BASE;
} else if (size <= oBreakpounts.DOT) {
} else if (design <= oBreakpounts.DOT) {
newMedia = IllustratedMessage.MEDIA.DOT;
} else if (size <= oBreakpounts.SPOT) {
} else if (design <= oBreakpounts.SPOT) {
newMedia = IllustratedMessage.MEDIA.SPOT;
} else if (size <= oBreakpounts.DIALOG) {
} else if (design <= oBreakpounts.DIALOG) {
newMedia = IllustratedMessage.MEDIA.DIALOG;
} else {
newMedia = IllustratedMessage.MEDIA.SCENE;
Expand Down Expand Up @@ -406,7 +406,7 @@ class IllustratedMessage extends UI5Element {
* @since 1.5.0
*/
_handleCustomSize() {
switch (this.size) {
switch (this.design) {
case IllustrationMessageSize.Base:
this.media = IllustratedMessage.MEDIA.BASE;
return;
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/test/pages/IllustratedMessage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
<ui5-option>TntUnsuccessfulAuth</ui5-option>
<ui5-option>TntUser2</ui5-option>
</ui5-select>
Size:
Designs:
<ui5-select id="sizeSelect">
<ui5-option>base</ui5-option>
<ui5-option>dot</ui5-option>
Expand Down Expand Up @@ -201,22 +201,22 @@ <h2>Vertical responsiveness</h2>
const containerHeightSelect = document.getElementById("containerHeightSelect");
const containerWidthSelect = document.getElementById("containerWidthSelect");
const illustratedMessageContainer = document.getElementById("container");
const sizes = {
const designs = {
base: 159,
dot: 259,
spot: 319,
dialog: 679,
scene: 1100,
}

illustratedMessage.style.width = `${sizes.scene}px`;
illustratedMessage.style.width = `${designs.scene}px`;

illustrationSelect.addEventListener("ui5-change", (event) => {
illustratedMessage.setAttribute("name", event.detail.selectedOption.textContent);
});

sizeSelect.addEventListener("ui5-change", (event) => {
illustratedMessage.style.width = `${sizes[event.detail.selectedOption.textContent]}px`;
illustratedMessage.style.width = `${designs[event.detail.selectedOption.textContent]}px`;
});

dialogOpener.addEventListener("click", () => {
Expand Down
44 changes: 22 additions & 22 deletions packages/fiori/test/specs/IllustratedMessage.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
import { assert } from "chai";

describe("IllustratedMessage 'size' property", () => {
describe("IllustratedMessage 'design' property", () => {
before(async () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});

it("should return correct size", async () => {
it("should return correct design", async () => {
// Arrange
const illustratedMsg = await browser.$("#illustratedMsg2");
let illustratedMsgSize = await illustratedMsg.getProperty("size");
let illustratedMsgDesign = await illustratedMsg.getProperty("design");

// Assert
assert.strictEqual(illustratedMsgSize, "Auto", "'size' should be equal to 'Auto' by default");
assert.strictEqual(illustratedMsgDesign, "Auto", "'design' should be equal to 'Auto' by default");

// Act
await illustratedMsg.setProperty("size", "Base");
illustratedMsgSize = await illustratedMsg.getProperty("size");
await illustratedMsg.setProperty("design", "Base");
illustratedMsgDesign = await illustratedMsg.getProperty("design");

// Assert
assert.strictEqual(illustratedMsgSize, "Base", "'size' should be equal to 'Base'");
assert.strictEqual(illustratedMsgDesign, "Base", "'design' should be equal to 'Base'");

// Act
await illustratedMsg.setProperty("size", "Invalid");
illustratedMsgSize = await illustratedMsg.getProperty("size");
await illustratedMsg.setProperty("design", "Invalid");
illustratedMsgDesign = await illustratedMsg.getProperty("design");

// Assert
assert.strictEqual(illustratedMsgSize, "Auto", "'size' should be equal to 'Auto' when invalid value is passed");
assert.strictEqual(illustratedMsgDesign, "Auto", "'design' should be equal to 'Auto' when invalid value is passed");
});

it("should show up properly, when in panel and it expand/collapse", async () => {
Expand Down Expand Up @@ -112,7 +112,7 @@ describe("Vertical responsiveness", () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});

it("content with auto size shrinks to fit the parent container", async () => {
it("content with auto design shrinks to fit the parent container", async () => {

const newContainerHeight = 300,
expectedMedia = "dialog",
Expand All @@ -134,7 +134,7 @@ describe("Vertical responsiveness", () => {
assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media");
});

it("content with auto size expands to fit the parent container", async () => {
it("content with auto design expands to fit the parent container", async () => {

const newContainerHeight = 500,
expectedMedia = "scene",
Expand All @@ -156,14 +156,14 @@ describe("Vertical responsiveness", () => {
assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media");
});

it("content with fixed size fits the parent container", async () => {
it("content with fixed design fits the parent container", async () => {

const newContainerHeight = 200,
expectedMedia = "dialog",
illustratedMsg = await browser.$("#illustratedMsg5");

// set fixed size
illustratedMsg.setProperty("size", "Dialog");
// set fixed design
illustratedMsg.setProperty("design", "Dialog");

// Act: apply new height
await browser.executeAsync(async (newContainerHeight, done) => {
Expand Down Expand Up @@ -200,33 +200,33 @@ describe("Vertical responsiveness", () => {
});
});

describe("Dot size resource handling", () => {
describe("Dot design resource handling", () => {
before(async () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});

it("uses substitute Spot illustration", async () => {

const illustratedMsg = await browser.$("#illustratedMsg1");

// Act
await illustratedMsg.setProperty("name", "BeforeSearch"); // set an illustration which doesn't have original Dot SVG
await illustratedMsg.setProperty("size", "Dot");
await illustratedMsg.setProperty("design", "Dot");
const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg");

// Check
assert.strictEqual(await illustration.getProperty("id"), "sapIllus-Spot-BeforeSearch", "Spot SVG is used when no Dot is present");
});

it("uses original Dot illustration", async () => {

const illustratedMsg = await browser.$("#illustratedMsg1");

// Act
await illustratedMsg.setProperty("name", "AddPeople"); // set an illustration which has original Dot SVG
await illustratedMsg.setProperty("size", "Dot");
await illustratedMsg.setProperty("design", "Dot");
const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg");

// Check
assert.strictEqual(await illustration.getProperty("id"), "sapIllus-Dot-AddPeople", "Dot is present, therefore used");
});
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Template: UI5StoryArgs<IllustratedMessage, StoryArgsSlots> = (
args
) => html` <ui5-illustrated-message
name="${ifDefined(args.name)}"
size="${ifDefined(args.size)}"
design="${ifDefined(args.design)}"
subtitle-text="${ifDefined(args.subtitleText)}"
title-text="${ifDefined(args.titleText)}"
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
Expand Down

0 comments on commit 08f7a54

Please sign in to comment.