fix(ui5-token): correct visual in RTL/Compact (#804)

Author: ilhan007

packages/main/src/Token.hbs

@@ -1,4 +1,4 @@
-<div tabindex="{{_tabIndex}}" @click="{{_select}}" @keydown="{{_keydown}}" class="ui5-token--wrapper">
+<div tabindex="{{_tabIndex}}" @click="{{_select}}" @keydown="{{_keydown}}" class="ui5-token--wrapper" dir="{{dir}}">
 	<span class="ui5-token--text"><slot></slot></span>
 
 	{{#unless readonly}}

packages/main/src/Token.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import {
 	isBackSpace,
 	isEnter,
@@ -157,6 +158,10 @@ class Token extends UI5Element {
 		return this.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}
 
+	get dir() {
+		return getRTL() ? "rtl" : "ltr";
+	}
+
 	get iconURI() {
 		return getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel";
 	}

packages/main/src/themes/Token.css

@@ -10,15 +10,8 @@
 	box-sizing: border-box;
 }
 
-:host([data-ui5-compact-size]) {
-	font-size: 0.75rem;
-	height: 1.25rem;
-}
-
-:host([data-ui5-compact-size]) .ui5-token--icon {
-	padding: 0 0.25rem;
-	width: 0.75rem;
-	height: 0.75rem;
+:host([overflows]) {
+	visibility: hidden;
 }
 
 :host(:not([readonly]):hover) {
@@ -49,26 +42,13 @@
 	outline: 1px dotted var(--sapUiContentContrastFocusColor);
 }
 
-:host([overflows]) {
-	visibility: hidden;
-}
-
-.ui5-token--icon {
-	padding: 0.25rem 0.5rem;
-	color: inherit;
-	cursor: pointer;
-	width: 1rem;
-	height: 1rem;
-	color: var(--_ui5_token_icon_color);
-}
-
 .ui5-token--wrapper {
 	display: flex;
 	align-items: center;
 	height: 100%;
 	width: 100%;
 	cursor: default;
-	padding-left: 0.375rem;
+	padding-left: 0.3125rem;
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 	box-sizing: border-box;
@@ -85,3 +65,47 @@
 .ui5-token--text {
 	white-space: nowrap;
 }
+
+.ui5-token--icon {
+	padding: 0.25rem 0.5rem;
+	color: inherit;
+	cursor: pointer;
+	width: 1rem;
+	height: 1rem;
+	color: var(--_ui5_token_icon_color);
+}
+
+/* Compact */
+:host([data-ui5-compact-size]) {
+	font-size: 0.75rem;
+	height: 1.125rem; /* Note: by design should be 1.25rem, but the token gets cut in Erron/Warning state */
+}
+
+:host([data-ui5-compact-size]) .ui5-token--wrapper {
+	padding-left: 0.25rem; 
+	padding-top: 0.1rem; 
+	padding-bottom: 0.1rem; 
+}
+
+:host([data-ui5-compact-size]) .ui5-token--icon {
+	padding: 0.1rem 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+}
+
+/* RTL */
+:host .ui5-token--wrapper[dir="rtl"] {
+	padding-right: 0.3125rem;
+	padding-left: 0;
+}
+
+:host([readonly]) .ui5-token--wrapper[dir="rtl"] {
+	padding-right: 0;
+	padding-left: 0.375rem;
+}
+
+/* RTL + Compact */
+:host([data-ui5-compact-size]) .ui5-token--wrapper[dir="rtl"] {
+	padding-right: 0.25rem;
+	padding-left: 0;
+}