refactor(ui5-input): allow displaying multiple icons (#1162)

Author: ilhan007

packages/main/src/themes/Input.css

@@ -38,7 +38,7 @@
 }
 
 :host([disabled]) {
-	opacity: var(--sap_wc_input_disabled_opacity);
+	opacity: var(--_ui5_input_disabled_opacity);
 	cursor: default;
 	pointer-events: none;
 	background: var(--sapField_ReadOnly_Background);
@@ -174,8 +174,7 @@
 /* Input Icon */
 
 .ui5-input-icon-root {
-	min-width: var(--sap_wc_input_icon_min_width);
-	width: var(--sap_wc_input_icon_min_width);
+	min-width: var(--_ui5_input_icon_min_width);
 	height: 100%;
 	display: flex;
 	justify-content: center;

packages/main/src/themes/MultiComboBox.css

@@ -15,7 +15,7 @@
 }
 
 .ui5-multi-combobox-tokenizer {
-	max-width: calc(100% - 3rem - var(--sap_wc_input_icon_min_width));
+	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	min-width: 0px;

packages/main/src/themes/TextArea.css

@@ -13,7 +13,7 @@
 }
 
 :host([disabled]) {
-	opacity: var(--sap_wc_input_disabled_opacity);
+	opacity: var(--_ui5_input_disabled_opacity);
 	cursor: default;
 	pointer-events: none;
 	background: var(--sapField_ReadOnly_Background);

packages/main/src/themes/base/Input-parameters.css

@@ -13,7 +13,7 @@
 	--_ui5_input_disabled_border_color: var(--sapField_BorderColor);
 	--_ui5_input_disabled_background: var(--sapField_Background);
 	--_ui5_input_icon_padding: 0.625rem .6875rem;
-	--sap_wc_input_disabled_opacity: 0.5;
-	--sap_wc_input_icon_min_width: 2.375rem;
-	--sap_wc_input_compact_min_width: 2rem;
+	--_ui5_input_disabled_opacity: 0.5;
+	--_ui5_input_icon_min_width: 2.375rem;
+	--_ui5_input_compact_min_width: 2rem;
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -94,7 +94,7 @@
 	/* Input */
 	--_ui5_input_height: var(--_ui5_input_compact_height);
 	--_ui5_input_inner_padding: 0 0.5rem;
-	--sap_wc_input_icon_min_width: var(--sap_wc_input_compact_min_width);
+	--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
 	--_ui5_input_icon_padding: .25rem .5rem;
 	--_ui5_input_value_state_icon_padding: .1875rem .5rem;
 

packages/main/src/themes/sap_fiori_3/Input-parameters.css

@@ -2,6 +2,6 @@
 
 :root {
 	--_ui5_input_height: 2.25rem;
-	--sap_wc_input_disabled_opacity: 0.4;
+	--_ui5_input_disabled_opacity: 0.4;
 	--_ui5_input_wrapper_border_radius: 0.125rem;
 }

packages/main/src/themes/sap_fiori_3_dark/Input-parameters.css

@@ -2,6 +2,6 @@
 
 :root {
 	--_ui5_input_height: 2.25rem;
-	--sap_wc_input_disabled_opacity: 0.4;
+	--_ui5_input_disabled_opacity: 0.4;
 	--_ui5_input_wrapper_border_radius: 0.125rem;
 }

packages/main/test/pages/Input.html

@@ -93,32 +93,38 @@ <h3> Input type 'URL'</h3>
 
 	<h3> Inputs alignment</h3>
 	<ui5-button>Press</ui5-button>
-	<ui5-datepicker style="width: 6rem;" id='dp5'
+	<ui5-datepicker  id='dp5'
 			placeholder='Delivery Date...'
 			title='Delivery Date!'>
 	</ui5-datepicker>
 
-	<ui5-datepicker style="width: 6rem;" id='dp5'
+	<ui5-datepicker id='dp5'
 			placeholder='Delivery Date...'
 			value-state="Error"
 			title='Delivery Date!'>
 	</ui5-datepicker>
 
-	<ui5-select id="mySelect2"style="width: 6rem;">
+	<ui5-select id="mySelect2">
 		<ui5-option>Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
 		<ui5-option>Condensed</ui5-option>
 	</ui5-select>
 
-	<ui5-input style="width: 6rem;" value="input" value-state="Error">
+	<ui5-input  value="input" value-state="Error">
 		<ui5-icon slot="icon" name="message-warning"></ui5-icon>
 	</ui5-input>
-	<ui5-select id="mySelect2"style="width: 6rem;" value-state="Error">
+	<ui5-select id="mySelect2" value-state="Error">
 		<ui5-option>Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
 		<ui5-option>Condensed</ui5-option>
 	</ui5-select>
-	<ui5-multi-combobox value-state="Error" style="width: 6rem;"></ui5-multi-combobox>
+	<ui5-multi-combobox value-state="Error"></ui5-multi-combobox>
+
+	<h3> Input with multiple icons</h3>
+	<ui5-input id="input3" placeholder="Search ...">
+		<ui5-icon slot="icon" name="search" style="padding-left: 8px; padding-right: 8px"></ui5-icon>
+		<ui5-icon slot="icon" name="decline" style="padding-left: 8px; padding-right: 8px"></ui5-icon>
+	</ui5-input>
 
 	<script>
 		var sap_database_entries = [{ key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "Prt", text: "Portugal" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Afg", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];