diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs index 20bf3870726f..7d7f1f49d88d 100644 --- a/packages/main/src/Popup.hbs +++ b/packages/main/src/Popup.hbs @@ -5,6 +5,7 @@ aria-modal="{{_ariaModal}}" aria-label="{{_ariaLabel}}" aria-labelledby="{{_ariaLabelledBy}}" + dir="{{dir}}" > diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index 9453a5b7fed5..4f4fbf106b63 100644 --- a/packages/main/src/Popup.js +++ b/packages/main/src/Popup.js @@ -1,4 +1,5 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js"; @@ -456,6 +457,10 @@ class Popup extends UI5Element { return this.ariaLabel || undefined; } + get dir() { + return getRTL() ? "rtl" : "ltr"; + } + get styles() { return { root: {}, diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css index 6feaa5605342..ff49a0a70d9d 100644 --- a/packages/main/src/themes/Popover.css +++ b/packages/main/src/themes/Popover.css @@ -39,6 +39,18 @@ margin: 0.1875rem 0 0 -0.375rem; } +:host([actual-placement-type="Left"]) [dir=rtl] .ui5-popover-arrow:after { + margin: .1875rem .25rem 0 0; +} + +:host([actual-placement-type="Bottom"]) [dir=rtl] .ui5-popover-arrow:after { + margin: .1875rem .125rem 0 0; +} + +:host([actual-placement-type="Top"]) [dir=rtl] .ui5-popover-arrow:after { + margin: -0.4375rem .125rem 0 0 +} + /* pointing downward arrow */ :host([actual-placement-type="Top"]) .ui5-popover-arrow { left: calc(50% - 0.5625rem); @@ -64,6 +76,11 @@ margin: 0.125rem 0 0 0.25rem; } +:host(:not([actual-placement-type])) [dir=rtl] .ui5-popover-arrow:after, +:host([actual-placement-type="Right"]) [dir=rtl] .ui5-popover-arrow:after { + margin: .1875rem -.375rem 0 0; +} + :host([no-arrow]) .ui5-popover-arrow { display: none; }