fix(ui5-multi-input): fix appearance in RTL (#2782)

FIXES: #2749
SAP · Feb 9, 2021 · 03bf9ec · 03bf9ec
1 parent fea0010
commit 03bf9ec
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
@@ -1,4 +1,5 @@
 <div
+	dir="{{effectiveDir}}"
 	class="{{classes.wrapper}}"
 >
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>

diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
@@ -296,12 +296,14 @@ class Tokenizer extends UI5Element {
 		}
 
 		return this._getTokens().filter(token => {
+			const isRTL = this.effectiveDir === "rtl";
+			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenLeft = tokenRect.left + tokenRect.width;
-			const parentLeft = parentRect.left + parentRect.width;
+			const tokenEnd = tokenRect[elementEnd];
+			const parentEnd = parentRect[elementEnd];
 
-			token.overflows = (tokenLeft > parentLeft) && !this.expanded;
+			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
 
 			return token.overflows;
 		});

diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css
@@ -35,7 +35,7 @@
 }
 
 :host([readonly]) .ui5-token--wrapper {
-	padding-right: 0.375rem;
+	padding-right: 0.3125rem;
 }
 
 :host([selected]) .ui5-token--wrapper:focus {
@@ -48,9 +48,8 @@
 	height: 100%;
 	width: 100%;
 	cursor: default;
+	padding: 0.25rem 0;
 	padding-left: 0.3125rem;
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
@@ -86,12 +85,7 @@
 }
 
 /* RTL */
-:host .ui5-token--wrapper[dir="rtl"] {
+:host(:not([readonly])) .ui5-token--wrapper[dir="rtl"] {
 	padding-right: var(--_ui5_token_wrapper_right_padding);
 	padding-left: var(--_ui5_token_wrapper_left_padding);
 }
-
-:host([readonly]) .ui5-token--wrapper[dir="rtl"] {
-	padding-right: 0;
-	padding-left: 0.375rem;
-}
diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css
@@ -64,3 +64,15 @@
 ::slotted([ui5-token]) {
 	margin-left: .25rem;
 }
+
+/* RTL */
+
+[dir="rtl"] .ui5-tokenizer-more-text  {
+	margin-right: .25rem;
+	margin-left: 0;
+}
+
+[dir=rtl] ::slotted([ui5-token]) {
+	margin-right: .25rem;
+	margin-left: 0;
+}
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -36,7 +36,7 @@
 	--_ui5_year_picker_item_height: 3rem;
 	--_ui5_tokenizer_root_padding: 0.1875rem;
 	--_ui5_token_height: 1.625rem;
-	--_ui5_token_icon_size: 1rem;
+	--_ui5_token_icon_size: .75rem;
 	--_ui5_token_icon_padding: 0.25rem 0.5rem;
 	--_ui5_token_wrapper_right_padding: 0.3125rem;
 	--_ui5_token_wrapper_left_padding: 0;