fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-w…

…idth and margin (#6044) * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin specs * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): code review fix * feat(ui5-inputs): adjust min-width to input controls * feat(ui5-inputs): fix linter * feat(ui5-inputs): fix linter * feat(ui5-inputs): fix prettier * feat(ui5-inputs): fix prettier issues * feat(ui5-inputs): revert old configs * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * fix(ui5-inputs): code review changes * fix(ui5-inputs): code review changes * fix(ui5-inputs): fix tests * fix(ui5-inputs): fix tests * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): min-width and margin * feat(ui5-inputs): adjust min-width to input controls * feat(ui5-inputs): adjust min-width to input controls * feat(ui5-inputs): adjust min-width to input controls * feat(ui5-inputs): adjust min-width to input controls * feat(ui5-inputs): adjust min-width to input controls * fix(ui5-input/ui5-multi-input/ui5-combobox/ui5-multi-combobox): pr comments fixes --------- Co-authored-by: Dimitar Dimitrov <dimitar.dimitrov11@sap.com>
SAP · Feb 13, 2023 · ba805c6 · ba805c6
1 parent 08cd361
commit ba805c6
Show file tree

Hide file tree

Showing 22 changed files with 251 additions and 41 deletions.
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -431,6 +431,10 @@ class ComboBox extends UI5Element {
 
 		this._selectMatchingItem();
 		this._initialRendering = false;
+
+		const slottedIconsCount = this.icon ? this.icon.length : 0;
+		const arrowDownIconsCount = this.readonly ? 0 : 1;
+		this.style.setProperty("--_ui5-input-icons-count", slottedIconsCount + arrowDownIconsCount);
 	}
 
 	async onAfterRendering() {

diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -705,6 +705,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		}
 
 		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
+		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
 
 		this.FormSupport = getFeature<typeof FormSupportT>("FormSupport");
 		const hasItems = !!this.suggestionItems.length;
@@ -1536,6 +1537,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		return this.Suggestions ? this.Suggestions.itemSelectionAnnounce : "";
 	}
 
+	get iconsCount(): number {
+		const slottedIconsCount = this.icon ? this.icon.length : 0;
+		const clearIconCount = Number(this.effectiveShowClearIcon) ?? 0;
+		return slottedIconsCount + clearIconCount;
+	}
+
 	get classes(): ClassMap {
 		return {
 			popover: {
@@ -1573,10 +1580,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			},
 		};
 
-		if (this.nativeInputWidth < 48) {
-			stylesObject.innerInput.padding = "0";
-		}
-
 		return stylesObject;
 	}
 

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -336,6 +336,14 @@ const metadata = {
 		_performingSelectionTwice: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates whether the tokenizer has tokens
+		 * @private
+		 */
+		tokenizerAvailable: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webc.main.MultiComboBox.prototype */ {
 		/**
@@ -1303,6 +1311,9 @@ class MultiComboBox extends UI5Element {
 			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
+		this.tokenizerAvailable = this.items && this.items.length > 0;
+		this.style.setProperty("--_ui5-input-icons-count", this.iconsCount);
+
 		if (!input || !value) {
 			return;
 		}
@@ -1599,6 +1610,12 @@ class MultiComboBox extends UI5Element {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
 
+	get iconsCount() {
+		const slottedIconsCount = this.icon ? this.icon.length : 0;
+		const arrowDownIconsCount = this.readonly ? 0 : 1;
+		return slottedIconsCount + arrowDownIconsCount;
+	}
+
 	get classes() {
 		return {
 			popover: {

diff --git a/packages/main/src/MultiInput.js b/packages/main/src/MultiInput.js
@@ -42,6 +42,15 @@ const metadata = {
 		expandedTokenizer: {
 			type: Boolean,
 		},
+
+		/**
+		 * Indicates whether the tokenizer has tokens
+		 * @private
+		 */
+		tokenizerAvailable: {
+			type: Boolean,
+		},
+
 	},
 	slots: /** @lends sap.ui.webc.main.MultiInput.prototype */ {
 		/**
@@ -318,6 +327,17 @@ class MultiInput extends Input {
 		}, 0);
 	}
 
+	onBeforeRendering(...params) {
+		super.onBeforeRendering(...params);
+
+		this.style.setProperty("--_ui5-input-icons-count", this.iconsCount);
+		this.tokenizerAvailable = this.tokens && this.tokens.length > 0;
+	}
+
+	get iconsCount() {
+		return super.iconsCount + (this.showValueHelpIcon ? 1 : 0);
+	}
+
 	get tokenizer() {
 		return this.shadowRoot.querySelector("[ui5-tokenizer]");
 	}

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
@@ -363,6 +363,8 @@ class Select extends UI5Element implements IFormElement {
 	onBeforeRendering() {
 		this._syncSelection();
 		this._enableFormSupport();
+
+		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
 	}
 
 	onAfterRendering() {
@@ -787,6 +789,10 @@ class Select extends UI5Element implements IFormElement {
 		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 	}
 
+	get iconsCount(): number {
+		return this.selectedOptionIcon ? 2 : 1;
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
@@ -11,6 +11,7 @@
 }
 
 :host {
+	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-datepicker_border_radius);

diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
@@ -7,7 +7,8 @@
 
 :host {
 	width: var(--_ui5_input_width);
-	min-width: var(--_ui5_input_width);
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+	margin: var(--_ui5_input_margin_top_bottom) 0;
 	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	font-size: var(--sapFontSize);
@@ -99,7 +100,7 @@
 	-moz-appearance: textfield;
 	padding: var(--_ui5_input_inner_padding);
 	box-sizing: border-box;
-	min-width: inherit;
+	min-width: var(--_ui5_input_min_width);
 	width: 100%;
 	text-align: inherit;
 	text-overflow: ellipsis;
@@ -437,6 +438,7 @@
 	height: var(--_ui5_input_icon_wrapper_height);
 	padding: 0;
 	width: var(--_ui5_input_icon_width);
+	min-width: var(--_ui5_input_icon_width);
 	display: flex;
 	justify-content: center;
 	align-items: center;

diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
@@ -2,6 +2,14 @@
 @import "./InputIcon.css";
 @import "./InvisibleTextStyles.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 :host(:not([hidden])) {
 	display: inline-block;
 }
@@ -15,9 +23,25 @@
 }
 
 .ui5-multi-combobox-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
 }
+
+:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
+	display: none;
+}
diff --git a/packages/main/src/themes/MultiInput.css b/packages/main/src/themes/MultiInput.css
@@ -1,9 +1,37 @@
 @import "./InputIcon.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 .ui5-multi-input-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
-}
+}
+
+:host([readonly]) .ui5-multi-input-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
+}
+
+.ui5-multi-input-tokenizer::part(n-more-text) {
+	padding-inline-end: 0.3125rem;
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {
+	display: none;
+}
diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css
@@ -2,6 +2,7 @@
 @import "./Input.css";
 
 .ui5-select-root {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
 	width: 100%;
 	height: 100%;
 	display: flex;

diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css
@@ -86,7 +86,7 @@
 :host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
 :host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){
 	background-color: var(--sapField_Focus_Background);
-} 
+}
 
 :host([value-state="Success"]:not([readonly]):not([disabled]))::after,
 :host([value-state="Error"]:not([readonly]):not([disabled]))::after,
@@ -150,15 +150,16 @@
 	vertical-align: top;
 	margin-top: var(--_ui5_step_input_input_margin_top);
 	min-width: var(--_ui5_step_input_min_width);
+	padding-inline-start: var(--_ui5_step_input_padding);
+	padding-inline-end: var(--_ui5_step_input_padding);
 	position: relative;
-	padding: 0px 2.5rem 0px 2.4375rem;
 	outline: none;
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
 }
 
-:host .ui5-step-input-input[readonly] { 
+:host .ui5-step-input-input[readonly] {
 	padding: 0;
 }
 

diff --git a/packages/main/src/themes/TimePicker.css b/packages/main/src/themes/TimePicker.css
@@ -9,6 +9,7 @@
 }
 
 :host {
+	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-time_picker_border_radius);

diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css
@@ -1,16 +1,12 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	display: inline-block;
 	box-sizing: border-box;
 	border: 1px solid black;
 	height: 2.25rem;
 }
 
-.ui5-hidden-text {
-	width: 1px;
-	overflow: hidden;
-	color: transparent;
-}
-
 .ui5-tokenizer-root {
 	height: 100%;
 	display: flex;

diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css
@@ -1,7 +1,9 @@
 :root {
 	--_ui5_input_width: 13.125rem;
+	--_ui5_input_min_width: 2.75rem;
 	--_ui5_input_height: 2.25rem;
 	--_ui5_input_compact_height: 1.625rem;
+	--_ui5_input_margin_top_bottom: 0.25rem;
 	--_ui5_input_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor);
 	--_ui5_input_hover_box_shadow: none;
 	--_ui5_input_value_state_error_hover_background: var(--sapField_Hover_Background);
@@ -65,10 +67,14 @@
 	--_ui5_input_icon_wrapper_height: 100%;
 	--_ui5_input_icon_wrapper_state_height: 100%;
 	--_ui5_input_icon_wrapper_success_state_height: 100%;
+	--_ui5-input-icons-count: 0;
+	--_ui5_input_margin_top_bottom: 0.1875rem;
+	--_ui5_input_tokenizer_min_width: 3.25rem;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	--_ui5_input_min_width: 2rem;
 	--_ui5_input_icon_width: 2rem;
 }
diff --git a/packages/main/src/themes/base/StepInput-parameters.css b/packages/main/src/themes/base/StepInput-parameters.css
@@ -21,4 +21,12 @@
 	--_ui5_step_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
 	--_ui5_input_input_background_color: var(--sapField_InvalidBackground);
 	--_ui5_step_input_min_width: 7.25rem;
+	--_ui5_step_input_padding: 2.5rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_step_input_min_width: 6rem;
+	--_ui5_step_input_padding: 2rem;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -38,6 +38,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_value_state_icon_padding: var(--_ui5-input-icon-padding);
 	--_ui5_list_no_data_height: 3rem;
 	--_ui5_list_item_cb_margin_right: 0;
@@ -235,6 +236,8 @@
 	/* Input */
 	--_ui5_input_height: var(--_ui5_input_compact_height);
 	--_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_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;

diff --git a/packages/main/src/themes/sap_belize/Input-parameters.css b/packages/main/src/themes/sap_belize/Input-parameters.css
@@ -1,6 +1,7 @@
 @import "../base/Input-parameters.css";
 
 :root {
+	--_ui5_input_min_width: 3rem;
 	--_ui5_input_height: 2.5rem;
 	--_ui5_input_custom_icon_padding: .6875rem .625rem;
 	--_ui5_input_error_warning_icon_padding: .625rem .5rem .625rem .5625rem;
@@ -16,6 +17,7 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	--_ui5_input_min_width: 2rem;
 	--_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem;
 	--_ui5_input_information_custom_icon_padding: .1875rem .5rem;
 }