fix(ui5-step-input): align the min width to visual specification (#4884)

Aligning the minimum width of the step input control to specification. There is no specific min width by the design team, but by their suggestions we have to combine min width of input field, two buttons and also the borders of the buttons inside.

Related to: #4786

Author: tsanislavgatev

packages/main/src/themes/StepInput.css

@@ -14,6 +14,7 @@
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
 	position: relative;
+	min-width: var(--_ui5_step_input_min_width);
 }
 
 :host .ui5-step-input-input {
@@ -144,7 +145,7 @@
 	box-sizing: border-box;
 	vertical-align: top;
 	margin-top: var(--_ui5_step_input_input_margin_top);
-	min-width: 9.125rem;
+	min-width: var(--_ui5_step_input_min_width);
 	position: relative;
 	padding: 0px 2.5rem 0px 2.4375rem;
 	outline: none;

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

@@ -20,4 +20,5 @@
 	--_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);
+	--_ui5_step_input_min_width: 7.25rem;
 }

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

@@ -282,6 +282,9 @@
 	--_ui5_slider_progress_outline_offset: -0.625rem;
 	--_ui5_slider_outer_height: 1.3125rem;
 
+	/* StepInput */
+	--_ui5_step_input_min_width: 6rem;
+
 	/* Table */
 	--_ui5_load_more_text_height: 2.625rem;
 	--_ui5_load_more_text_font_size: var(--sapFontSize);