diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs index 938410a06ce8..25424bb28510 100644 --- a/packages/main/src/Tokenizer.hbs +++ b/packages/main/src/Tokenizer.hbs @@ -1,4 +1,5 @@
{{tokenizerLabel}} diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index e671dad7ac29..cae1df328e6e 100644 --- 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 index 86b06b8608d4..782792f9be14 100644 --- 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 index d839a2bb564a..e427c4267317 100644 --- 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 index 055c40590b0b..1ff9c4fb4700 100644 --- 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;