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

FIXES: #1739
SAP · Jun 8, 2020 · 818e1d8 · 818e1d8
1 parent b60c8ba
commit 818e1d8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git 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
@@ -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;
+}