diff --git a/packages/main/src/Token.hbs b/packages/main/src/Token.hbs
index 414aaf435351..8ea15e323090 100644
--- a/packages/main/src/Token.hbs
+++ b/packages/main/src/Token.hbs
@@ -1,4 +1,4 @@
-
+
{{#unless readonly}}
diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js
index c8ea4ebb8a14..8300c4043d37 100644
--- a/packages/main/src/Token.js
+++ b/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";
}
diff --git a/packages/main/src/themes/Token.css b/packages/main/src/themes/Token.css
index 4fd9b1344a25..abe054480863 100644
--- a/packages/main/src/themes/Token.css
+++ b/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;
+}
\ No newline at end of file