fix(ui5-multi-input/ui5-multi-combobox): enhance tokenizer visualizat…

…ion (#6597)
SAP · Feb 27, 2023 · fd7aa30 · fd7aa30
1 parent 57e2de7
commit fd7aa30
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -1311,7 +1311,7 @@ class MultiComboBox extends UI5Element {
 			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
-		this.tokenizerAvailable = this.items && this.items.length > 0;
+		this.tokenizerAvailable = this._tokenizer && this._getSelectedItems().length > 0;
 		this.style.setProperty("--_ui5-input-icons-count", this.iconsCount);
 
 		if (!input || !value) {

diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
@@ -34,6 +34,10 @@
 	color: var(--sapLinkColor);
 }
 
+.ui5-multi-combobox-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
+}
+
 [inner-input][inner-input-with-icon] {
 	padding: var(--_ui5_input_inner_padding_with_icon);
 }
@@ -43,5 +47,6 @@
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
-	display: none;
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
 }
diff --git a/packages/main/src/themes/MultiInput.css b/packages/main/src/themes/MultiInput.css
@@ -21,7 +21,7 @@
 }
 
 .ui5-multi-input-tokenizer::part(n-more-text) {
-	padding-inline-end: 0.3125rem;
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
 }
 
 [inner-input][inner-input-with-icon] {
@@ -33,5 +33,6 @@
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {
-	display: none;
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -39,6 +39,7 @@
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
 	--_ui5_input_inner_space_to_tokenizer: 0.125rem;
+	--_ui5_input_inner_space_to_n_more_text: 0.1875rem;
 	--_ui5_input_value_state_icon_padding: var(--_ui5-input-icon-padding);
 	--_ui5_list_no_data_height: 3rem;
 	--_ui5_list_item_cb_margin_right: 0;
@@ -238,6 +239,7 @@
 	--_ui5_input_inner_padding: 0 0.5rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.2rem 0 0.5rem;
 	--_ui5_input_inner_space_to_tokenizer: 0.125rem;
+	--_ui5_input_inner_space_to_n_more_text: 0.125rem;
 	--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
 	--_ui5_input_icon_padding: .25rem .4375rem;
 	--_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem;