fix(ui5-messagestrip): add RTL support (#1741)

FIXES: #1739

Author: ilhan007

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>

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;
+}