fix(ui5-segmentedbutton): add RTL support (#1734)

The change adds RTL support, basically mirrors the borders of the first and the last button.
SAP · Jun 5, 2020 · 1c6a9bb · 1c6a9bb
1 parent 9be085b
commit 1c6a9bb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
@@ -3,6 +3,7 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmentedbutton-root"
 	role="group"
+	dir="{{effectiveDir}}"
 	aria-roledescription="{{ariaDescription}}"
 >
 	<slot></slot>

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
@@ -22,13 +22,36 @@
 }
 
 ::slotted(ui5-togglebutton:last-child) {
-	border-top-right-radius: 0.375rem;
-	border-bottom-right-radius: 0.375rem;
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
 	border-right: 1px solid var(--sapButton_Selected_BorderColor);
 }
 
 ::slotted(ui5-togglebutton:first-child) {
-	border-top-left-radius: 0.375rem;
-	border-bottom-left-radius: 0.375rem;
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
 	border-left: 1px solid var(--sapButton_Selected_BorderColor);
 }
+
+[dir="rtl"] ::slotted(ui5-togglebutton:first-child) {
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	border-right: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:last-child) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-left: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:only-child) {
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+}
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -66,6 +66,9 @@
 	--_ui5-tree-toggle-box-width: 2.75rem;
 	--_ui5-tree-toggle-box-height: 2.25rem;
 	--_ui5-tree-toggle-icon-size: 1.0625rem;
+
+	/* SegmentedButton */
+	--_ui5_segmented_btn_border_radius: 0.375rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
@@ -25,6 +25,10 @@ <h1 class="header-title">ui5-segmentedbutton</h1>
 		<div class="samples">
 			<h2>Segmentedbutton example</h2>
 			<div class="sample" id="main-sample">
+				<ui5-segmentedbutton id="segButtonSingle">
+					<ui5-togglebutton>Button</ui5-togglebutton>
+				</ui5-segmentedbutton>
+
 				<section>
 					<ui5-segmentedbutton id="segButton1">
 						<ui5-togglebutton icon="employee" pressed></ui5-togglebutton>