fix(ui5-split-button): fix split button when in wrapper (#8037)

When our <ui5-split-button> is wrapped and a width is set to the wrapper, our <ui5-split-button> is not correctly displayed.
With this change, we fix that issue and we also adopt the usage of CSS Logical Props, removing redunancies and reducing our CSS codе significantly.

packages/main/src/SplitButton.hbs

@@ -28,12 +28,8 @@
 			<slot></slot>
 		{{/if}}
 	</ui5-button>
-
-	<div
-		class="ui5-split-arrow-button-wrapper"
-		dir={{effectiveDir}}
-	>
 		<ui5-button
+			dir={{effectiveDir}}
 			class="ui5-split-arrow-button"
 			design="{{design}}"
 			icon="slim-arrow-down"
@@ -49,8 +45,6 @@
 			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 		>
 		</ui5-button>
-	</div>
-
 	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 

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

@@ -4,7 +4,7 @@
 	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_middle_separator_width: 0;
-	--_ui5_split_button_middle_separator_left: 0;
+	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: block;
 	--_ui5_split_button_text_button_width: 2.25rem;
 	--_ui5_split_button_text_button_right_border_width: 0;
@@ -39,7 +39,7 @@
 	--_ui5_split_text_button_emphasized_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
 
 
-	--_ui5_split_text_button_emphasized_border_width: 0.0625rem 0 0.0625rem 0.0625rem;
+	--_ui5_split_text_button_emphasized_border_width: 0.0625rem;
 
 
 	--_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
@@ -50,11 +50,6 @@
 	--_ui5_split_text_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
 
-	--_--_ui5_split_button_text_button_border_width_rtl: 0.0625rem 0.0625rem 0.0625rem 0;
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.0625rem;
-
-
 	--_ui5_split_arrow_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
@@ -77,21 +72,5 @@
 	--_ui5_split_text_button_attention_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-
-	--_ui5_split_text_button_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: var(--sapButton_BorderWidth);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: block;
 }

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

@@ -44,18 +44,4 @@
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0px;
 	--_ui5-shellbar-notification-btn-count-offset: auto;
-
-	--_ui5_split_text_button_hover_border_left: none;
-	--_ui5_split_text_button_emphasized_hover_border_left: none;
-	--_ui5_split_text_button_positive_hover_border_left: none;
-	--_ui5_split_text_button_negative_hover_border_left: none;
-	--_ui5_split_text_button_attention_hover_border_left: none;
-	--_ui5_split_text_button_transparent_hover_border_left: none;
-
-	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }

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

@@ -132,7 +132,7 @@
 	--_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem;
 
 	/* SplitButton */
-	--_ui5_split_button_middle_separator_top: 0;
+	--_ui5_split_button_middle_separator_top: -0.0625rem;
 	--_ui5_split_button_middle_separator_height: 2.25rem;
 
 	/* Toolbar */
@@ -304,7 +304,6 @@
 	--_ui5_slider_outer_height: 1.3125rem;
 
 	/* SplitButton */
-	--_ui5_split_button_middle_separator_top: 0;
 	--_ui5_split_button_middle_separator_height: 1.625rem;
 
 	/* StepInput */

packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css

@@ -20,15 +20,14 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border_left: 0.0625rem;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }

packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css

@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }

packages/main/src/themes/sap_horizon/SplitButton-parameters.css

@@ -29,18 +29,5 @@
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
 }

packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css

@@ -28,19 +28,5 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
 }

packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css

@@ -28,19 +28,4 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }

packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css

@@ -28,19 +28,4 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }

packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css

@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }

packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css

@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }