fix(ui5-tokenizer, ui5-multi-input,ui5-multi-combobox): Improve stylisation (#13314)

* fix(ui5-tokenizer, ui5-multi-input,ui5-multi-combobox): Improve stylisation

* fix(ui5-tokenizer, ui5-multi-input,ui5-multi-combobox): reflect code review

* fix(ui5-tokenizer, ui5-multi-input, ui5-multi-combobox): fix failing tests

Author: niyap

packages/ai/src/InputTemplate.tsx

@@ -42,7 +42,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 									style={this.styles.innerInput}
 									type={this.inputNativeType}
 									inner-input
-									inner-input-with-icon={!!this.icon.length}
+									inner-input-with-icon={this.iconsCount > 0}
 									disabled={this.disabled}
 									readonly={this._readonly || this.loading}
 									value={this.value}

packages/main/cypress/specs/MultiComboBox.cy.tsx

@@ -4027,7 +4027,7 @@ describe("Keyboard Handling", () => {
 
 	it("Should select/deselect a token with CTRL+SPACE", () => {
 		cy.mount(
-			<MultiComboBox noValidation={true}>
+			<MultiComboBox style={{ width: "300px" }} noValidation={true}>
 				<MultiComboBoxItem selected={true} text="Item 1"></MultiComboBoxItem>
 				<MultiComboBoxItem selected={true} text="Item 2"></MultiComboBoxItem>
 			</MultiComboBox>

packages/main/src/InputTemplate.tsx

@@ -30,7 +30,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={!!this.icon.length}
+						inner-input-with-icon={this.iconsCount > 0}
 						disabled={this.disabled}
 						readonly={this._readonly}
 						value={this.value}

packages/main/src/MultiComboBoxTemplate.tsx

@@ -65,6 +65,7 @@ export default function MultiComboBoxTemplate(this: MultiComboBox) {
 				id="ui5-multi-combobox-input"
 				value={this.value}
 				inner-input
+				inner-input-with-icon={this._effectiveShowClearIcon || !!this.icon || !this.readonly}
 				placeholder={this._getPlaceholder}
 				disabled={this.disabled}
 				readonly={this.readonly}

packages/main/src/MultiInput.ts

@@ -359,6 +359,9 @@ class MultiInput extends Input implements IFormInputElement {
 
 		if (this.tokenizer) {
 			this.tokenizer.readonly = this.readonly;
+
+			// Set the CSS variable on the tokenizer element so it's available in the shadow DOM
+			this.tokenizer.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
 		}
 	}
 

packages/main/src/Token.ts

@@ -127,6 +127,14 @@ class Token extends UI5Element implements IToken {
 	@property({ type: Boolean })
 	toBeDeleted = false;
 
+	/**
+	 * Set by the tokenizer to mark the last visible token before overflow.
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	lastVisibleToken = false;
+
 	/**
 	 * Defines the tabIndex of the component.
 	 * @private

packages/main/src/Tokenizer.ts

@@ -422,6 +422,10 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 		this._tokens.forEach(token => {
 			token.singleToken = (tokensLength === 1) || this.multiLine;
 			token.readonly = this.readonly;
+			// Clear lastVisibleToken when expanding
+			if (this.expanded && token.lastVisibleToken) {
+				token.lastVisibleToken = false;
+			}
 		});
 	}
 
@@ -513,6 +517,27 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 
 		this._scrollToEndIfNeeded();
 		this._tokenDeleting = false;
+
+		// Update lastVisibleToken after rendering is complete to avoid render loops
+		renderFinished().then(() => {
+			this._updateLastVisibleTokenAttribute();
+		});
+	}
+
+	/**
+	 * Updates the lastVisibleToken property on tokens.
+	 * When collapsed with overflow, marks the last visible token for proper spacing to the n-more indicator.
+	 * @private
+	 */
+	_updateLastVisibleTokenAttribute() {
+		const tokensArray = this._tokens;
+		const hasOverflow = this._nMoreCount > 0;
+		const visibleTokens = tokensArray.filter(token => !token.overflows);
+		const lastVisibleToken = visibleTokens.length > 0 ? visibleTokens[visibleTokens.length - 1] : undefined;
+
+		tokensArray.forEach(token => {
+			token.lastVisibleToken = (!this.expanded && hasOverflow && token === lastVisibleToken);
+		});
 	}
 
 	/**

packages/main/src/themes/ComboBox.css

@@ -8,4 +8,8 @@
 	width: 100%;
 	height: 100%;
 	border-radius: var(--_ui5_input_border_radius);
+}
+
+:host(:not([readonly])) [inner-input] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
 }

packages/main/src/themes/MultiComboBox.css

@@ -25,7 +25,7 @@
 
 .ui5-multi-combobox-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -48,7 +48,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {

packages/main/src/themes/MultiInput.css

@@ -10,7 +10,7 @@
 
 .ui5-multi-input-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -29,7 +29,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {