From 818e1d84d3e8443d31d243ee14b9f9eae36a68a8 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Mon, 8 Jun 2020 11:52:01 +0300
Subject: [PATCH] fix(ui5-messagestrip): add RTL support (#1741)

FIXES: #1739
---
 packages/main/src/MessageStrip.hbs        | 15 +++++++------
 packages/main/src/themes/MessageStrip.css | 26 +++++++++++++++++++++++
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
index 0fb6365401dc..b158f53bb018 100644
--- a/packages/main/src/MessageStrip.hbs
+++ b/packages/main/src/MessageStrip.hbs
@@ -1,17 +1,18 @@
 <div class="{{classes.main}}"
 	id="{{_id}}"
 	role="alert"
+	dir="{{effectiveDir}}"
 	aria-live="assertive"
 	aria-labelledby="{{_id}}">
 
 	{{#unless noIcon}}
-        <div class="ui5-messagestrip-icon-wrapper">
-            {{#if iconProvided}}
-                <slot name="icon"></slot>
-            {{else}}
-                <ui5-icon name="{{standardIconName}}" class="ui5-messagestrip-icon"></ui5-icon>
-            {{/if}}
-        </div>
+		<div class="ui5-messagestrip-icon-wrapper">
+			{{#if iconProvided}}
+				<slot name="icon"></slot>
+			{{else}}
+				<ui5-icon name="{{standardIconName}}" class="ui5-messagestrip-icon"></ui5-icon>
+			{{/if}}
+		</div>
 	{{/unless}}
 
 	<span class="ui5-hidden-text">{{hiddenText}}</span>
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
index f2b809cc9c30..c106f1ed9bb8 100644
--- a/packages/main/src/themes/MessageStrip.css
+++ b/packages/main/src/themes/MessageStrip.css
@@ -133,3 +133,29 @@
 .ui5-messagestrip-close-icon-wrapper::-moz-focus-inner {
 	border: none;
 }
+
+/* RTL */
+.ui5-messagestrip-root[dir="rtl"] {
+	padding-right: 2.5rem;
+	padding-left: 2rem;
+}
+
+[dir="rtl"] .ui5-messagestrip-icon-wrapper {
+	right: 0.75rem;
+	left: 0;
+}
+
+[dir="rtl"] .ui5-messagestrip-icon--hidden {
+	padding-right: 1rem;
+	padding-left: 2rem;
+}
+
+[dir="rtl"] .ui5-messagestrip-close-icon--hidden {
+	padding-left: 1rem;
+	padding-right: 0;
+}
+
+[dir="rtl"] .ui5-messagestrip-close-icon-wrapper {
+	left: 0.125rem;
+	right: auto;
+}
\ No newline at end of file