feat(ui5-product-switch-item): added image slot (#11965)

There is a new `image` slot which can be used instead of the old `icon` property.

Also a new entry is added in the `AvatarColorScheme` enum called `Transparent` in order to achieve the target design for the transparent images/SVGs in the ProductSwitchItem with image.

Author: plamenivanov91

packages/fiori/cypress/specs/ProductSwitch.cy.tsx

@@ -1,5 +1,6 @@
 import ProductSwitch from "../../src/ProductSwitch.js";
 import ProductSwitchItem from "../../src/ProductSwitchItem.js";
+import Avatar from "../../../main/src/Avatar.js";
 import type UI5Element from "@ui5/webcomponents-base";
 
 describe("List - getFocusDomRef Method", () => {
@@ -48,6 +49,26 @@ describe("List - getFocusDomRef Method", () => {
 				expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef());
 			});
 	});
+
+	describe("image slot", () => {
+		it("should render custom content in the image slot and not render the icon", () => {
+			cy.mount(
+				<ProductSwitch>
+					<ProductSwitchItem
+						titleText="With Avatar"
+						icon="file"
+					>
+						<Avatar slot="image" size="XS" />
+					</ProductSwitchItem>
+				</ProductSwitch>
+			);
+
+			cy.get("ui5-product-switch-item").within(() => {
+				cy.get("ui5-avatar").should("exist");
+				cy.get("ui5-icon").should("not.exist");
+			});
+		});
+	});
 });
 
 describe("ProductSwitch general interaction", () => {

packages/fiori/src/ProductSwitchItem.ts

@@ -5,6 +5,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import ProductSwitchItemTemplate from "./ProductSwitchItemTemplate.js";
 import type { IProductSwitchItem } from "./ProductSwitch.js";
 
@@ -134,6 +135,17 @@ class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
 	@property({ noAttribute: true })
 	forcedTabIndex?: string;
 
+	/**
+	 * Defines an image to be displayed instead of the standard icon.
+	 *
+	 * **Note:** The image slot takes precedence over the icon property.
+	 * **Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.
+	 * @public
+	 * @since 2.14.0
+	 */
+	@slot({ type: HTMLElement })
+	image!: Array<HTMLElement>;
+
 	_deactivate: () => void;
 
 	constructor() {

packages/fiori/src/ProductSwitchItemTemplate.tsx

@@ -41,12 +41,17 @@ export default function ProductSwitchItemTemplate(this: ProductSwitchItem) {
 function item(this: ProductSwitchItem) {
 	return (
 		<>
-			{this.icon &&
+			{this.image && this.image.length > 0 ? (
+				<span class="ui5-product-switch-item-image-placeholder">
+					<slot name="image"></slot>
+				</span>
+			) : (
+				this.icon &&
 				<Icon
 					class="ui5-product-switch-item-icon"
 					name={this.icon}
 				/>
-			}
+			)}
 
 			<span class="ui5-product-switch-item-text-content">
 				{this.titleText &&

packages/fiori/src/themes/ProductSwitchItem.css

@@ -53,15 +53,11 @@
 	outline: none;
 	box-sizing: border-box;
 	padding: .5rem;
-	padding-top: 4rem;
+	padding-top: .5rem;
 	cursor: pointer;
 	border: var(--_ui5_product_switch_item_border);
 }
 
-:host([icon]) .ui5-product-switch-item-root {
-	padding-top: .5rem;
-}
-
 :host([selected]) .ui5-product-switch-item-root {
 	padding: .375rem;
 }
@@ -76,6 +72,12 @@
 	pointer-events: none;
 }
 
+.ui5-product-switch-item-root .ui5-product-switch-item-image-placeholder {
+	width: 3rem;
+	height: 3rem;
+	margin-bottom: .5rem;
+}
+
 .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 	display: flex;
 	align-items: center;
@@ -126,7 +128,7 @@
 		flex-direction: row;
 	}
 
-	:host([icon]) .ui5-product-switch-item-root {
+	.ui5-product-switch-item-root {
 		padding-top: 0;
 	}
 
@@ -136,12 +138,16 @@
 		margin: 0 .75rem 0 0;
 	}
 
+	.ui5-product-switch-item-root .ui5-product-switch-item-image-placeholder {
+		margin: 0 .75rem 0 0;
+	}
+
 	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 		align-items: flex-start;
 		max-width: 100%;
 	}
 
-	:host([icon]) .ui5-product-switch-item-root .ui5-product-switch-item-text-content {
+	.ui5-product-switch-item-root .ui5-product-switch-item-text-content {
 		max-width: calc(100% - 3.75rem); /* 100% width - (3rem for the icon + right margin)*/
 	}
 

packages/fiori/test/pages/ProductSwitch.html

@@ -25,7 +25,11 @@
 
 <body class="productswitch2auto">
 	<ui5-product-switch id="productSwitchThreeColumn">
-		<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Home" subtitle-text="Central Home">
+			<ui5-avatar slot="image" shape="Square" fallback-icon="employee" color-scheme="Transparent" size="S">
+				<img alt="Woman" src="https://www.sap.com/dam/application/shared/logos/sap-logo-svg.svg.adapt.svg/1493030643828.svg" />
+			</ui5-avatar>
+		</ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
 		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>

packages/main/src/themes/Avatar.css

@@ -275,6 +275,12 @@
 	border-color: var(--sapAvatar_Lite_BorderColor);
 }
 
+:host([_color-scheme="Transparent"]),
+:host([ui5-avatar][color-scheme="Transparent"]) {
+	background-color: transparent;
+	border-color: transparent;
+}
+
 :host([_has-image]) {
 	color: var(--ui5-avatar-accent10-color);
 	border: var(--ui5-avatar-optional-border);

packages/main/src/types/AvatarColorScheme.ts

@@ -63,6 +63,11 @@ enum AvatarColorScheme {
 	 * @public
 	 */
 	Placeholder = "Placeholder",
+
+	/**
+	 * @public
+	 */
+	Transparent = "Transparent",
 }
 
 export default AvatarColorScheme;

packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitch.mdx

@@ -1,5 +1,6 @@
 import Basic from "../../../_samples/fiori/ProductSwitch/Basic/Basic.md";
 import WithShellBar from "../../../_samples/fiori/ProductSwitch/WithShellBar/WithShellBar.md";
+import WithImageSlot from "../../../_samples/fiori/ProductSwitch/WithImageSlot/WithImageSlot.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -13,4 +14,8 @@ import WithShellBar from "../../../_samples/fiori/ProductSwitch/WithShellBar/Wit
 ### ProductSwitch in ShellBar
 Press the "grid" on the right-most part of the ShellBar to show the ProductSwitch.
 
-<WithShellBar />
+<WithShellBar />
+
+### ProductSwitchItem with "image" slot
+
+<WithImageSlot />

packages/website/docs/_samples/fiori/ProductSwitch/WithImageSlot/WithImageSlot.md

@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />

packages/website/docs/_samples/fiori/ProductSwitch/WithImageSlot/main.js

@@ -0,0 +1,8 @@
+import "@ui5/webcomponents/dist/Avatar.js";
+import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";
+import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";
+
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/business-objects-experience.js";
+import "@ui5/webcomponents-icons/dist/contacts.js";
+import "@ui5/webcomponents-icons/dist/flight.js";