feat(ui5-step-input): implement sap_horizon theme (#4247)

SAP · Nov 5, 2021 · 4180fe7 · 4180fe7
1 parent f9c881b
commit 4180fe7
Show file tree

Hide file tree

Showing 13 changed files with 183 additions and 62 deletions.
diff --git a/packages/main/src/StepInput.hbs b/packages/main/src/StepInput.hbs
@@ -6,10 +6,12 @@
 	@focusout="{{_onfocusout}}"
 >
 	<!-- Decrement Icon -->
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-dec"
 		title="{{decIconTitle}}"
 	>
+
 		<ui5-icon
 			id="{{_id}}-dec"
 			name="{{decIconName}}"
@@ -25,7 +27,7 @@
 			?clickable="{{_decIconClickable}}"
 		></ui5-icon>
 	</div>
-
+	{{/unless}}
 	<!-- INPUT -->
 	<ui5-input
 			id="{{_id}}-inner"
@@ -52,6 +54,7 @@
 	</ui5-input>
 
 	<!-- Increment Icon -->
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-inc"
 		title="{{incIconTitle}}"
@@ -71,7 +74,7 @@
 			?clickable="{{_incIconClickable}}"
 		></ui5-icon>
 	</div>
-
+	{{/unless}}
 	<slot name="formSupport"></slot>
 
 </div>
diff --git a/packages/main/src/StepInput.js b/packages/main/src/StepInput.js
@@ -220,9 +220,12 @@ const metadata = {
 			noAttribute: true,
 		},
 
-		_focused: {
+		/**
+		 * @type {Boolean}
+		 * @private
+		 */
+		focused: {
 			type: Boolean,
-			noAttribute: true,
 		},
 
 		_inputFocused: {
@@ -421,7 +424,7 @@ class StepInput extends UI5Element {
 	}
 
 	get _isFocused() {
-		return this._focused;
+		return this.focused;
 	}
 
 	get _valuePrecisioned() {
@@ -530,7 +533,7 @@ class StepInput extends UI5Element {
 			this.value = value;
 			this._validate();
 			this._setButtonState();
-			this._focused = true;
+			this.focused = true;
 			this.inputOuter.setAttribute("focused", "");
 			if (fireChangeEvent) {
 				this._fireChangeEvent();
@@ -568,11 +571,11 @@ class StepInput extends UI5Element {
 	}
 
 	_onfocusin() {
-		this._focused = true;
+		this.focused = true;
 	}
 
 	_onfocusout() {
-		this._focused = false;
+		this.focused = false;
 	}
 
 	_onkeydown(event) {

diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css
@@ -9,7 +9,7 @@
 :host {
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
-	border: 1px solid var(--sapField_BorderColor);
+	border: var(--_ui5_step_input_border_style);
 	border-radius: var(--sapField_BorderCornerRadius);
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
@@ -20,17 +20,74 @@
 	text-align: inherit;
 }
 
+:host(:not([value-state]):not([readonly]):not([disabled])){
+	box-shadow: none;
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_SuccessBackground);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InformationBackground);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_WarningBackground);
+}
 :host(:not([value-state]):not([readonly]):not([disabled]):hover),
-:host([value-state=None]:not([readonly]):not([disabled]):hover) {
-    background-color: var(--sapField_Hover_Background);
-    border: 1px solid var(--sapField_Hover_BorderColor);
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_step_input_border_color_hover);
+	border: var(--_ui5_step_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_step_input_border_style_hover);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-success-hover-box-shadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-information-hover-box-shadow);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-warning-hover-box-shadow);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5-input-value-state-error-hover-box-shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Error"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5-step_input_button_state_hover_background_color);
 }
 
-:host([value-state=Success]:not([readonly]):not([disabled]))::after,
-:host([value-state=Error]:not([readonly]):not([disabled]))::after,
-:host([value-state=None]:not([readonly]):not([disabled]))::after,
-:host([value-state=Information]:not([readonly]):not([disabled]))::after,
-:host([value-state=Warning]:not([readonly]):not([disabled]))::after {
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Success"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Error"]:not([readonly]):not([disabled])[focused]),
+: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,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
 	position: absolute;
 	content: "";
 	top: -1px;
@@ -45,34 +102,36 @@
 	border-width: 0px;
 }
 
-:host([value-state=Information]:not([readonly]):not([disabled]))::after {
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_InformationColor);
 	border-width: var(--_ui5-input-information_border_width);
 }
 
-:host([value-state=Warning]:not([readonly]):not([disabled]))::after {
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_WarningColor);
 	border-width: 2px;
 }
 
-:host([value-state=Success]:not([readonly]):not([disabled]))::after {
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_SuccessColor);
 	border-width: 1px;
 }
 
-:host([value-state=Error]:not([readonly]):not([disabled]))::after {
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_InvalidColor);
 	border-width: var(--_ui5-input-information_border_width);
 }
 
 :host([value-state])::after {
-    border-width: var(--_ui5_input_state_border_width);
+	border-width: var(--_ui5_input_state_border_width);
 }
-
-:host([value-state=Error]:not([readonly]):not([disabled])) .ui5-step-input-input {
-    background-color: var(--sapField_InvalidBackground);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input {
+	background-color: var(--_ui5_input_input_background_color);
 }
 
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
+	background-color: var(--_ui5_step_input_input_error_background_color);
+}
 :host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
 		outline: none;
 }
@@ -81,16 +140,25 @@
 	width: 100%;
 	color: inherit;
 	background-color: inherit;
-	border: 1px solid transparent;
+	border: var(--_ui5_step_input_input_border);
 	box-sizing: border-box;
 	vertical-align: top;
-	margin-top: -1px;
+	margin-top: var(--_ui5_step_input_input_margin_top);
 	min-width: 9.125rem;
 	position: relative;
 	padding: 0px 2.5rem 0px 2.4375rem;
 	outline: none;
 }
 
+:host .ui5-step-input-input[readonly] { 
+	padding: 0;
+}
+
+:host .ui5-step-input-input:hover,
+:host .ui5-step-input-input[focused]{
+	box-shadow: none;
+}
+
 :host .ui5-step-input-root {
 	white-space: nowrap;
 }
@@ -109,10 +177,10 @@
 
 :host .ui5-step-icon {
 	position: absolute;
-	display: inline-block;
+	display: var(--_ui5_step_input_button_display);
 	height: 2rem;
 	height: 100%;
-	background-color: var(--sapField_Background);
+	background-color: var(--_ui5_step_input_button_background_color);
 	z-index: 2;
 }
 
@@ -122,11 +190,11 @@
 }
 
 :host .ui5-step-icon.ui5-step-dec {
-	left: 0;
+	left: var(--_ui5_step_input_button_left);
 }
 
 :host .ui5-step-icon.ui5-step-inc {
-	right: 0;
+	right: var(--_ui5_step_input_button_right);
 }
 
 :host .ui5-step-icon *:not([clickable]),
@@ -146,10 +214,11 @@
 :host .ui5-step-input-input[focused]::after {
 	position: absolute;
 	content: "";
-	border: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	top: 1px;
+	border: var(--_ui5_step_input_input_border_focused_after);
+	top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
 	right: 0px;
-	bottom: 1px;
+	bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
+	border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
 	left: 0px;
 	outline: none;
 	pointer-events: none;
@@ -160,36 +229,27 @@
 	outline: none;
 }
 
-:host([value-state]:not([value-state=None]):not([value-state=Success]):not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
-	top: 2px;
-	right: 1px;
-	bottom: 2px;
-	left: 1px;
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
 }
 
-:host([value-state=Information]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_InformationColor);
-	border-width: var(--_ui5-input-information_border_width);
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
 }
 
-:host([value-state=Warning]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_WarningColor);
+:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
 }
 
-:host([value-state=Success]:not([readonly]):not([disabled]))::after {
-	border-color: var(--sapField_SuccessColor);
-	border-width: 1px;
-}
-
-:host([value-state=Error]:not([readonly]):not([disabled]))::after {
-    border-color: var(--sapField_InvalidColor);
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
 }
 
 /* Disable spin buttons in Chrome, Safari, Edge, Opera */
 :host .ui5-step-input-input::-webkit-outer-spin-button,
 :host .ui5-step-input-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+	-webkit-appearance: none;
+	margin: 0;
 }
 
 :host([disabled]) {
@@ -201,10 +261,9 @@
 }
 
 :host([disabled]) .ui5-step-icon {
-	background: var(--sapField_ReadOnly_Background);
+	background-color: var(--_ui5_step_input_disabled_button_background);
 }
 
 :host([disabled]) .ui5-step-icon [ui5-icon] {
 	color: var(--sapField_ReadOnly_BorderColor);
 }
-
diff --git a/packages/main/src/themes/base/StepInput-parameters.css b/packages/main/src/themes/base/StepInput-parameters.css
@@ -0,0 +1,23 @@
+:root {
+	--_ui5_step_input_input_error_background_color: var(--sapField_InvalidBackground);
+	--_ui5-step_input_button_state_hover_background_color: var(--sapField_Background);
+	--_ui5_step_input_border_style: 1px solid var(--sapField_BorderColor);
+	--_ui5_step_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_step_input_button_background_color:var(--sapField_Background);
+	--_ui5_step_input_input_border: 1px solid transparent;
+	--_ui5_step_input_input_margin_top: -0.0625rem;
+	--_ui5_step_input_button_display: inline-block;
+	--_ui5_step_input_button_left: 0;
+	--_ui5_step_input_button_right: 0;
+	--_ui5_step_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
+	--_ui5_step_input_input_border_top_bottom_focused_after: 0.0625rem;
+	--_ui5_step_input_input_border_radius_focused_after: 0;
+	--_ui5_step_input_input_information_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_step_input_input_success_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_step_input_input_error_border_color_focused_after: var(--sapField_BorderColor);
+	--_ui5_step_input_disabled_button_background: var(--sapField_ReadOnly_Background);
+	--_ui5_step_input_border_color_hover: var(--sapField_Hover_Background);
+	--_ui5_step_input_border_hover: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_input_input_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -43,4 +43,5 @@
 @import "../base/ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
+@import "../base/Suggestions-parameters.css";
+@import "../base/StepInput-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -42,4 +42,5 @@
 @import "./ValueStateMessage-parameters.css";
 @import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
-@import "../base/Suggestions-parameters.css";
+@import "../base/Suggestions-parameters.css";
+@import "../base/StepInput-parameters.css";