refactor(ui5-illustrated-message): rename size property to design

packages/fiori/src/IllustratedMessage.ts

@@ -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.
@@ -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
@@ -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
@@ -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
 	*/
@@ -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();
 		}
 	}
@@ -328,7 +328,7 @@ class IllustratedMessage extends UI5Element {
 	}
 
 	handleResize() {
-		if (this.size !== IllustrationMessageSize.Auto) {
+		if (this.design !== IllustrationMessageSize.Auto) {
 			this._adjustHeightToFitContainer();
 			return;
 		}
@@ -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;
@@ -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;

packages/fiori/test/pages/IllustratedMessage.html

@@ -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>
@@ -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", () => {

packages/fiori/test/specs/IllustratedMessage.spec.js

@@ -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 () => {
@@ -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",
@@ -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",
@@ -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) => {
@@ -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");
 	});

packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts

@@ -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)}"