From f002b39ce07c4af76fdbfda032e4b07da538719e Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 4 Jun 2020 16:20:35 +0300
Subject: [PATCH 1/5] fix(ui5-segmentedbutton): add RTL support

---
 packages/main/src/SegmentedButton.hbs        |  1 +
 packages/main/src/SegmentedButton.js         |  6 ++++++
 packages/main/src/themes/SegmentedButton.css | 16 ++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
index 969e695cc9f1..c0e156891d1f 100644
--- 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="{{direction}}"
 	aria-roledescription="{{ariaDescription}}"
 >
 	<slot></slot>
diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js
index d64d976c90fa..4737b39a9bb5 100644
--- a/packages/main/src/SegmentedButton.js
+++ b/packages/main/src/SegmentedButton.js
@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -247,6 +248,11 @@ class SegmentedButton extends UI5Element {
 	get ariaDescription() {
 		return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION);
 	}
+
+	get direction() {
+		return getRTL() ? "rtl" : undefined;
+	}
+
 }
 
 SegmentedButton.define();
diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
index 4991e322025d..1b54629effd6 100644
--- a/packages/main/src/themes/SegmentedButton.css
+++ b/packages/main/src/themes/SegmentedButton.css
@@ -32,3 +32,19 @@
 	border-bottom-left-radius: 0.375rem;
 	border-left: 1px solid var(--sapButton_Selected_BorderColor);
 }
+
+[dir="rtl"] ::slotted(ui5-togglebutton:first-child) {
+	border-top-right-radius: 0.375rem;
+	border-bottom-right-radius: 0.375rem;
+	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: 0.375rem;
+	border-bottom-left-radius: 0.375rem;
+	border-left: 1px solid var(--sapButton_Selected_BorderColor);
+}
\ No newline at end of file

From e95565e3e427f3243791cc3360fd039e6314c5eb Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 4 Jun 2020 16:34:25 +0300
Subject: [PATCH 2/5] handle single btn case

---
 packages/main/src/themes/SegmentedButton.css  | 7 +++++++
 packages/main/test/pages/SegmentedButton.html | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
index 1b54629effd6..19000ffe12b2 100644
--- a/packages/main/src/themes/SegmentedButton.css
+++ b/packages/main/src/themes/SegmentedButton.css
@@ -47,4 +47,11 @@
 	border-top-left-radius: 0.375rem;
 	border-bottom-left-radius: 0.375rem;
 	border-left: 1px solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted(ui5-togglebutton:only-child) {
+	border-top-right-radius: 0.375rem;
+	border-bottom-right-radius: 0.375rem;
+	border-top-left-radius: 0.375rem;
+	border-bottom-left-radius: 0.375rem;
 }
\ No newline at end of file
diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
index de89fc4754ff..241251b245ba 100644
--- 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>

From 2188096c5ac35d44ec6c4725c736771e113c349d Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 4 Jun 2020 16:35:40 +0300
Subject: [PATCH 3/5] lint

---
 packages/main/src/SegmentedButton.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js
index 4737b39a9bb5..5e16d7496131 100644
--- a/packages/main/src/SegmentedButton.js
+++ b/packages/main/src/SegmentedButton.js
@@ -252,7 +252,6 @@ class SegmentedButton extends UI5Element {
 	get direction() {
 		return getRTL() ? "rtl" : undefined;
 	}
-
 }
 
 SegmentedButton.define();

From f24e19043e37afc3db9f9e88ebcfcd2e57ecfff7 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Thu, 4 Jun 2020 16:38:24 +0300
Subject: [PATCH 4/5] extract border-radius as var

---
 packages/main/src/themes/SegmentedButton.css  | 24 +++++++++----------
 .../main/src/themes/base/sizes-parameters.css |  3 +++
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
index 19000ffe12b2..eedc72d4c645 100644
--- a/packages/main/src/themes/SegmentedButton.css
+++ b/packages/main/src/themes/SegmentedButton.css
@@ -22,20 +22,20 @@
 }
 
 ::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: 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-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 	border-right: 1px solid var(--sapButton_Selected_BorderColor);
@@ -44,14 +44,14 @@
 [dir="rtl"] ::slotted(ui5-togglebutton:last-child) {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
-	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:only-child) {
-	border-top-right-radius: 0.375rem;
-	border-bottom-right-radius: 0.375rem;
-	border-top-left-radius: 0.375rem;
-	border-bottom-left-radius: 0.375rem;
+	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);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index e2fabf191759..21b9a9cdd767 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -67,6 +67,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],

From b38aabe06f0bc32e3f215e933a7df71d4eae89cb Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Fri, 5 Jun 2020 09:20:24 +0300
Subject: [PATCH 5/5] update after recent RTL changes

---
 packages/main/src/SegmentedButton.hbs         | 2 +-
 packages/main/src/SegmentedButton.js          | 5 -----
 packages/main/test/pages/SegmentedButton.html | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
index c0e156891d1f..83e72684964f 100644
--- a/packages/main/src/SegmentedButton.hbs
+++ b/packages/main/src/SegmentedButton.hbs
@@ -3,7 +3,7 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmentedbutton-root"
 	role="group"
-	dir="{{direction}}"
+	dir="{{effectiveDir}}"
 	aria-roledescription="{{ariaDescription}}"
 >
 	<slot></slot>
diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js
index 5e16d7496131..d64d976c90fa 100644
--- a/packages/main/src/SegmentedButton.js
+++ b/packages/main/src/SegmentedButton.js
@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -248,10 +247,6 @@ class SegmentedButton extends UI5Element {
 	get ariaDescription() {
 		return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION);
 	}
-
-	get direction() {
-		return getRTL() ? "rtl" : undefined;
-	}
 }
 
 SegmentedButton.define();
diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
index 241251b245ba..323444afafc7 100644
--- a/packages/main/test/pages/SegmentedButton.html
+++ b/packages/main/test/pages/SegmentedButton.html
@@ -28,7 +28,7 @@ <h2>Segmentedbutton example</h2>
 				<ui5-segmentedbutton id="segButtonSingle">
 					<ui5-togglebutton>Button</ui5-togglebutton>
 				</ui5-segmentedbutton>
-				
+
 				<section>
 					<ui5-segmentedbutton id="segButton1">
 						<ui5-togglebutton icon="employee" pressed></ui5-togglebutton>