feat(ui5-token): provide closeIcon slot (#2193)

Author: fifoosid

packages/main/src/Token.hbs

@@ -10,12 +10,19 @@
 	<span class="ui5-token--text">{{this.text}}</span>
 
 	{{#unless readonly}}
-		<ui5-icon
-			@click="{{_delete}}"
-			name="{{iconURI}}"
-			accessible-name="{{tokenDeletableText}}"
-			show-tooltip
+		<div
 			class="ui5-token--icon"
-		></ui5-icon>
+			@click="{{_delete}}"
+		>
+			{{#if closeIcon.length}}
+				<slot name="closeIcon"></slot>
+			{{else}}
+				<ui5-icon
+					name="{{iconURI}}"
+					accessible-name="{{tokenDeletableText}}"
+					show-tooltip
+				></ui5-icon>
+			{{/if}}
+		</div>
 	{{/unless}}
 </div>

packages/main/src/Token.js

@@ -23,6 +23,7 @@ import styles from "./generated/themes/Token.css.js";
 const metadata = {
 	tag: "ui5-token",
 	languageAware: true,
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
 
 		/**
@@ -67,6 +68,22 @@ const metadata = {
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 	},
 
+	slots: /** @lends  sap.ui.webcomponents.main.Token.prototype */ {
+
+		/**
+		 * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.
+		 * Accepts <code>ui5-icon</code>
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 * @since 1.0.0-rc.9
+		 */
+		closeIcon: {
+			type: HTMLElement,
+		},
+	},
+
 	events: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
 
 		/**

packages/main/src/themes/Token.css

@@ -66,11 +66,17 @@
 	white-space: nowrap;
 }
 
-:host([selected]) .ui5-token--icon {
+.ui5-token--icon {
+	display: flex;
+}
+
+:host([selected]) .ui5-token--icon > ui5-icon,
+:host([selected]) ::slotted(ui5-icon) {
 	color: var(--sapButton_Selected_TextColor);
 }
 
-.ui5-token--icon {
+.ui5-token--icon > ui5-icon,
+::slotted(ui5-icon) {
 	color: inherit;
 	cursor: pointer;
 	width: var(--_ui5_token_icon_size);

packages/main/test/pages/MultiInput.html

@@ -187,6 +187,17 @@ <h1>Test value-help-trigger with F4 and Alt + ArrowUp/Down</h1>
 		<ui5-input id="value-help-trigger-counter" placeholder="event count.."></ui5-input>
 	</div>
 
+	<div>
+		<ui5-title>MultiInput with tokesn with custom icon</ui5-title>
+		<ui5-multi-input style="width: 500px;">
+			<ui5-token slot="tokens" text="Menu">
+				<ui5-icon name="menu" accessible-name="Menu here" slot="closeIcon"></ui5-icon>
+			</ui5-token>
+			<ui5-token slot="tokens" text="Not a menu">
+			</ui5-token>
+		</ui5-multi-input>
+	</div>
+
 	<script>
 
 		var createTokenFromText = function (text) {