From 91c9e580a59b7037f44dd2e3e8180bf2985b0bbe Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 3 Nov 2025 16:19:36 +0200 Subject: [PATCH 1/5] fix(ui5-popover): fix usage of placement and horizontalAlign --- packages/fiori/src/ShellBar.ts | 5 ----- packages/fiori/src/ShellBarPopoverTemplate.tsx | 3 ++- packages/main/src/ComboBox.ts | 5 ----- packages/main/src/ComboBoxPopoverTemplate.tsx | 3 ++- packages/main/src/Input.ts | 6 +----- packages/main/src/InputPopoverTemplate.tsx | 3 ++- packages/main/src/MenuItem.ts | 5 ----- packages/main/src/MenuItemTemplate.tsx | 3 ++- packages/main/src/MultiComboBox.ts | 5 ----- packages/main/src/MultiComboBoxPopoverTemplate.tsx | 3 ++- packages/main/src/TextArea.ts | 5 ----- packages/main/src/TextAreaPopoverTemplate.tsx | 3 ++- 12 files changed, 13 insertions(+), 36 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index a9846f5814ee..3816790572cb 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -41,7 +41,6 @@ import type { UI5CustomEvent, } from "@ui5/webcomponents-base"; import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; -import type PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js"; import throttle from "@ui5/webcomponents-base/dist/util/throttle.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; @@ -1523,10 +1522,6 @@ class ShellBar extends UI5Element { return this.primaryTitle || this.showLogoInMenuButton; } - get popoverHorizontalAlign(): `${PopoverHorizontalAlign}` { - return this.effectiveDir === "rtl" ? "Start" : "End"; - } - get hasAssistant() { return !!this.assistant.length; } diff --git a/packages/fiori/src/ShellBarPopoverTemplate.tsx b/packages/fiori/src/ShellBarPopoverTemplate.tsx index b32f7491d225..f523ef439460 100644 --- a/packages/fiori/src/ShellBarPopoverTemplate.tsx +++ b/packages/fiori/src/ShellBarPopoverTemplate.tsx @@ -1,5 +1,6 @@ import Popover from "@ui5/webcomponents/dist/Popover.js"; import List from "@ui5/webcomponents/dist/List.js"; +import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js"; import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js"; import type ShellBar from "./ShellBar.js"; @@ -21,7 +22,7 @@ export default function PopoversTemplate(this: ShellBar) {
Date: Tue, 4 Nov 2025 14:41:22 +0200 Subject: [PATCH 2/5] fix: fix horizontal placement in rtl mode --- packages/main/src/Popover.ts | 22 ++++++++++--- packages/main/test/pages/PopoverRTL.html | 39 ++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index 3f10d1ea4b72..b3d00ef65088 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -710,12 +710,20 @@ class Popover extends Popup { } getActualPlacement(targetRect: DOMRect): `${PopoverPlacement}` { - const placement = this.placement; - let actualPlacement = placement; - const isVertical = placement === PopoverPlacement.Top - || placement === PopoverPlacement.Bottom; + let placement = this.placement; + const isVertical = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom; const popoverSize = this.getPopoverSize(!this.allowTargetOverlap); + if (this.isRtl) { + if (placement === PopoverPlacement.Start) { + placement = PopoverPlacement.End; + } else if (placement === PopoverPlacement.End) { + placement = PopoverPlacement.Start; + } + } + + let actualPlacement = placement; + const clientWidth = document.documentElement.clientWidth; let clientHeight = document.documentElement.clientHeight; let popoverHeight = popoverSize.height; @@ -838,8 +846,12 @@ class Popover extends Popup { return true; } + get isRtl() { + return this.effectiveDir === "rtl"; + } + get _actualHorizontalAlign() { - if (this.effectiveDir === "rtl") { + if (this.isRtl) { if (this.horizontalAlign === PopoverHorizontalAlign.Start) { return PopoverHorizontalAlign.End; } diff --git a/packages/main/test/pages/PopoverRTL.html b/packages/main/test/pages/PopoverRTL.html index a60f431e0c02..073491981bdd 100644 --- a/packages/main/test/pages/PopoverRTL.html +++ b/packages/main/test/pages/PopoverRTL.html @@ -60,6 +60,15 @@ Open Popover placement End +
+ Placement Start +
+
+
+ Placement End +
+
+
Email @@ -84,6 +93,28 @@
+ +
+
+ Some content +
+
+ + + +
+
+ Some content +
+
+ +
From e916017cd2db38c27e1fd37c16693668d04c709e Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 4 Nov 2025 14:58:51 +0200 Subject: [PATCH 3/5] chore: add tests --- packages/main/cypress/specs/Popover.cy.tsx | 126 +++++++++++++++++---- 1 file changed, 101 insertions(+), 25 deletions(-) diff --git a/packages/main/cypress/specs/Popover.cy.tsx b/packages/main/cypress/specs/Popover.cy.tsx index 9ffa5ea64027..9c197a00f026 100644 --- a/packages/main/cypress/specs/Popover.cy.tsx +++ b/packages/main/cypress/specs/Popover.cy.tsx @@ -266,40 +266,40 @@ describe("Accessibility", () => {
); - + cy.get("[ui5-popover]").invoke("removeAttr", "accessible-name"); - + cy.get("[ui5-popover]") .shadow() .find(".ui5-popup-root") .should("have.attr", "aria-labelledby"); - + cy.get("[ui5-popover]") .shadow() .find(".ui5-popup-root") .should("not.have.attr", "aria-label"); }); - + it("should use aria-label when accessible-name attribute is set dynamically", () => { cy.mount(
); - + cy.get("[ui5-popover]").invoke("attr", "accessible-name", "text"); - + cy.get("[ui5-popover]") .shadow() .find(".ui5-popup-root") .should("not.have.attr", "aria-labelledby"); - + cy.get("[ui5-popover]") .shadow() .find(".ui5-popup-root") .should("have.attr", "aria-label"); }); - + it("tests accessible-name-ref", () => { cy.mount( @@ -652,25 +652,25 @@ describe("Popover opener", () => { ); - + cy.get("#first-focusable").should("be.focused"); - + cy.realPress("Tab"); cy.wait(500); cy.get("#li1").should("be.focused"); cy.get("#first-focusable").should("not.be.focused"); - + cy.realPress("Tab"); - + cy.get("#first-focusable").should("be.focused"); - + cy.realPress("Tab"); cy.realPress("Tab"); - + cy.get("#first-focusable").should("be.focused"); - + cy.realPress("Escape"); - + cy.get("[ui5-popover]").should("not.be.visible"); }); @@ -967,7 +967,7 @@ describe("Popover opener", () => { pop.addEventListener("ui5-before-open", async () => { const applyFocusResult = pop.applyFocus(); - pop.remove(); + pop.remove(); try { await applyFocusResult; @@ -1020,31 +1020,31 @@ describe("Popover opener", () => { const container = document.createElement("div"); container.id = "container"; root[0].appendChild(container); - + const shadowRoot = container.attachShadow({ mode: "open" }); - + const opener = document.createElement("ui5-button"); opener.setAttribute("id", "lnk"); opener.textContent = "Open Popover"; shadowRoot.appendChild(opener); - + const popover = document.createElement("ui5-popover"); popover.setAttribute("id", "pop"); popover.setAttribute("header-text", "Popover in Shadow Root"); popover.setAttribute("opener", "lnk"); - + const content = document.createElement("div"); content.textContent = "Popover content"; popover.appendChild(content); - + shadowRoot.appendChild(popover); }); - + cy.get("#container") .shadow() .find("#lnk") .realClick(); - + cy.get("#container") .shadow() .find("#pop") @@ -1053,7 +1053,7 @@ describe("Popover opener", () => { cy.get("#container").then(container => { container.remove(); }); - }); + }); it("tests opener set as ID in window.document, while popover is in a shadow root", () => { cy.mount( @@ -1421,6 +1421,82 @@ describe("Placement", () => { expect(top).to.be.lt(100) }); }); + + it("placement=Start in RTL", () => { + cy.mount( +
+ + +
+ Popover with Start placement in RTL mode +
+ +
+ ); + + cy.get("[ui5-popover]").invoke("prop", "open", true); + + cy.get("[ui5-popover]").should("be.visible"); + + // wait for the popover to be positioned + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); + + let popover; + cy.get('[ui5-popover]') + .then($popover => { + popover = $popover; + }); + + cy.get('#btnStart').should($opener => { + const popoverRect = popover[0].getBoundingClientRect(); + const openerRect = $opener[0].getBoundingClientRect(); + + // In RTL mode, Start placement should position popover to the right of the opener + expect(popoverRect.left).to.be.greaterThan(openerRect.right - 5); + }); + }); + + it("placement=End in RTL", () => { + cy.mount( +
+ + +
+ Popover with End placement in RTL mode +
+ +
+ ); + + cy.get("[ui5-popover]").invoke("prop", "open", true); + + cy.get("[ui5-popover]").should("be.visible"); + + // wait for the popover to be positioned + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); + + let popover; + cy.get('[ui5-popover]') + .then($popover => { + popover = $popover; + }); + + cy.get('#btnEnd').should($opener => { + const popoverRect = popover[0].getBoundingClientRect(); + const openerRect = $opener[0].getBoundingClientRect(); + + // In RTL mode, End placement should position popover to the left of the opener + expect(popoverRect.right).to.be.lessThan(openerRect.left + 5); + }); + }); }); describe("Alignment", () => { From e89b4689d8d3ebac378d0c6ab9f2b63fcd75f9df Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 6 Nov 2025 14:04:29 +0200 Subject: [PATCH 4/5] chore: refactor code to use actual placement - left, rifht --- packages/main/src/Popover.ts | 98 ++++++++++++++++------------ packages/main/src/themes/Popover.css | 8 +-- 2 files changed, 60 insertions(+), 46 deletions(-) diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index b3d00ef65088..b74eb3d62c5c 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -36,7 +36,14 @@ type CalculatedPlacement = { arrow: ArrowPosition, top: number, left: number, - placement: `${PopoverPlacement}`, + actualPlacement: `${PopoverActualPlacement}`, +} + +enum PopoverActualPlacement { + Left = "Left", + Right = "Right", + Top = "Top", + Bottom = "Bottom", } /** @@ -166,7 +173,7 @@ class Popover extends Popup { * @private */ @property() - actualPlacement: `${PopoverPlacement}` = "End"; + actualPlacement: `${PopoverActualPlacement}` = "Right"; @property({ type: Number, noAttribute: true }) _maxHeight?: number; @@ -316,11 +323,11 @@ class Popover extends Popup { return openerHTMLElement; } - shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean { + shouldCloseDueToOverflow(placement: `${PopoverActualPlacement}`, openerRect: DOMRect): boolean { const threshold = 32; const limits = { - "Start": openerRect.right, - "End": openerRect.left, + "Left": openerRect.right, + "Right": openerRect.left, "Top": openerRect.top, "Bottom": openerRect.bottom, }; @@ -416,7 +423,7 @@ class Popover extends Popup { } this._oldPlacement = placement; - this.actualPlacement = placement.placement; + this.actualPlacement = placement.actualPlacement; let left = clamp( this._left!, @@ -424,7 +431,7 @@ class Popover extends Popup { document.documentElement.clientWidth - popoverSize.width - Popover.VIEWPORT_MARGIN, ); - if (this.actualPlacement === PopoverPlacement.End) { + if (this.actualPlacement === PopoverActualPlacement.Right) { left = Math.max(left, this._left!); } @@ -434,7 +441,7 @@ class Popover extends Popup { document.documentElement.clientHeight - popoverSize.height - Popover.VIEWPORT_MARGIN, ); - if (this.actualPlacement === PopoverPlacement.Bottom) { + if (this.actualPlacement === PopoverActualPlacement.Bottom) { top = Math.max(top, this._top!); } @@ -532,12 +539,12 @@ class Popover extends Popup { let maxHeight = clientHeight; let maxWidth = clientWidth; - const placement = this.getActualPlacement(targetRect); + const actualPlacement = this.getActualPlacement(targetRect); - this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placement, targetRect); + this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(actualPlacement, targetRect); - const isVertical = placement === PopoverPlacement.Top - || placement === PopoverPlacement.Bottom; + const isVertical = actualPlacement === PopoverActualPlacement.Top + || actualPlacement === PopoverActualPlacement.Bottom; if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) { popoverSize.width = targetRect.width; @@ -550,8 +557,8 @@ class Popover extends Popup { const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE; // calc popover positions - switch (placement) { - case PopoverPlacement.Top: + switch (actualPlacement) { + case PopoverActualPlacement.Top: left = this.getVerticalLeft(targetRect, popoverSize); top = Math.max(targetRect.top - popoverSize.height - arrowOffset, 0); @@ -559,7 +566,7 @@ class Popover extends Popup { maxHeight = targetRect.top - arrowOffset; } break; - case PopoverPlacement.Bottom: + case PopoverActualPlacement.Bottom: left = this.getVerticalLeft(targetRect, popoverSize); top = targetRect.bottom + arrowOffset; @@ -569,7 +576,7 @@ class Popover extends Popup { maxHeight = clientHeight - targetRect.bottom - arrowOffset; } break; - case PopoverPlacement.Start: + case PopoverActualPlacement.Left: left = Math.max(targetRect.left - popoverSize.width - arrowOffset, 0); top = this.getHorizontalTop(targetRect, popoverSize); @@ -577,7 +584,7 @@ class Popover extends Popup { maxWidth = targetRect.left - arrowOffset; } break; - case PopoverPlacement.End: + case PopoverActualPlacement.Right: left = targetRect.left + targetRect.width + arrowOffset; top = this.getHorizontalTop(targetRect, popoverSize); @@ -624,7 +631,7 @@ class Popover extends Popup { arrow: arrowPos, top: this._top, left: this._left, - placement, + actualPlacement, }; } @@ -691,38 +698,45 @@ class Popover extends Popup { * Fallbacks to new placement, prioritizing `Left` and `Right` placements. * @private */ - fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacement | undefined { + fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverActualPlacement | undefined { if (targetRect.left > popoverSize.width) { - return PopoverPlacement.Start; + return PopoverActualPlacement.Left; } if (clientWidth - targetRect.right > targetRect.left) { - return PopoverPlacement.End; + return PopoverActualPlacement.Right; } if (clientHeight - targetRect.bottom > popoverSize.height) { - return PopoverPlacement.Bottom; + return PopoverActualPlacement.Bottom; } if (clientHeight - targetRect.bottom < targetRect.top) { - return PopoverPlacement.Top; + return PopoverActualPlacement.Top; } } - getActualPlacement(targetRect: DOMRect): `${PopoverPlacement}` { - let placement = this.placement; + getActualPlacement(targetRect: DOMRect): `${PopoverActualPlacement}` { + const placement = this.placement; const isVertical = placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom; const popoverSize = this.getPopoverSize(!this.allowTargetOverlap); - if (this.isRtl) { - if (placement === PopoverPlacement.Start) { - placement = PopoverPlacement.End; - } else if (placement === PopoverPlacement.End) { - placement = PopoverPlacement.Start; - } - } + let actualPlacement: PopoverActualPlacement = PopoverActualPlacement.Right; - let actualPlacement = placement; + switch (placement) { + case PopoverPlacement.Start: + actualPlacement = this.isRtl ? PopoverActualPlacement.Right : PopoverActualPlacement.Left; + break; + case PopoverPlacement.End: + actualPlacement = this.isRtl ? PopoverActualPlacement.Left : PopoverActualPlacement.Right; + break; + case PopoverPlacement.Top: + actualPlacement = PopoverActualPlacement.Top; + break; + case PopoverPlacement.Bottom: + actualPlacement = PopoverActualPlacement.Bottom; + break; + } const clientWidth = document.documentElement.clientWidth; let clientHeight = document.documentElement.clientHeight; @@ -733,27 +747,27 @@ class Popover extends Popup { clientHeight -= Popover.VIEWPORT_MARGIN; } - switch (placement) { - case PopoverPlacement.Top: + switch (actualPlacement) { + case PopoverActualPlacement.Top: if (targetRect.top < popoverHeight && targetRect.top < clientHeight - targetRect.bottom) { - actualPlacement = PopoverPlacement.Bottom; + actualPlacement = PopoverActualPlacement.Bottom; } break; - case PopoverPlacement.Bottom: + case PopoverActualPlacement.Bottom: if (clientHeight - targetRect.bottom < popoverHeight && clientHeight - targetRect.bottom < targetRect.top) { - actualPlacement = PopoverPlacement.Top; + actualPlacement = PopoverActualPlacement.Top; } break; - case PopoverPlacement.Start: + case PopoverActualPlacement.Left: if (targetRect.left < popoverSize.width) { - actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement; + actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || actualPlacement; } break; - case PopoverPlacement.End: + case PopoverActualPlacement.Right: if (clientWidth - targetRect.right < popoverSize.width) { - actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement; + actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || actualPlacement; } break; } diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css index ea16b3b47dae..0a543e7d00e1 100644 --- a/packages/main/src/themes/Popover.css +++ b/packages/main/src/themes/Popover.css @@ -20,13 +20,13 @@ } /* pointing right arrow */ -:host([actual-placement="Start"]) .ui5-popover-arrow { +:host([actual-placement="Left"]) .ui5-popover-arrow { top: calc(50% - 0.5625rem); right: -0.5625rem; width: 0.5625rem; } -:host([actual-placement="Start"]) .ui5-popover-arrow:after { +:host([actual-placement="Left"]) .ui5-popover-arrow:after { margin: var(--_ui5_popover_right_arrow_margin); } @@ -43,7 +43,7 @@ /* pointing left arrow */ :host(:not([actual-placement])) .ui5-popover-arrow, -:host([actual-placement="End"]) .ui5-popover-arrow { +:host([actual-placement="Right"]) .ui5-popover-arrow { left: -0.5625rem; top: calc(50% - 0.5625rem); width: 0.5625rem; @@ -51,7 +51,7 @@ } :host(:not([actual-placement])) .ui5-popover-arrow:after, -:host([actual-placement="End"]) .ui5-popover-arrow:after { +:host([actual-placement="Right"]) .ui5-popover-arrow:after { margin: var(--_ui5_popover_left_arrow_margin); } From fcff086b14c4e1294cca75afe9154415b78bbed4 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 7 Nov 2025 13:34:55 +0200 Subject: [PATCH 5/5] chore: address code comments --- packages/main/src/Popover.ts | 59 +++++++++++-------- packages/main/src/themes/MenuItem.css | 5 -- .../main/src/themes/base/rtl-parameters.css | 2 - 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index b74eb3d62c5c..51751a3e44cb 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -32,11 +32,11 @@ type ArrowPosition = { y: number; } -type CalculatedPlacement = { - arrow: ArrowPosition, - top: number, - left: number, - actualPlacement: `${PopoverActualPlacement}`, +enum PopoverActualHorizontalAlign { + Center = "Center", + Left = "Left", + Right = "Right", + Stretch = "Stretch", } enum PopoverActualPlacement { @@ -46,6 +46,13 @@ enum PopoverActualPlacement { Bottom = "Bottom", } +type CalculatedPlacement = { + arrow: ArrowPosition, + top: number, + left: number, + actualPlacement: `${PopoverActualPlacement}`, +} + /** * @class * @@ -651,14 +658,14 @@ class Popover extends Popup { * @returns Arrow's coordinates */ getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition { - const horizontalAlign = this._actualHorizontalAlign; - let arrowXCentered = horizontalAlign === PopoverHorizontalAlign.Center || horizontalAlign === PopoverHorizontalAlign.Stretch; + const actualHorizontalAlign = this._actualHorizontalAlign; + let arrowXCentered = actualHorizontalAlign === PopoverActualHorizontalAlign.Center || actualHorizontalAlign === PopoverActualHorizontalAlign.Stretch; - if (horizontalAlign === PopoverHorizontalAlign.End && left <= targetRect.left) { + if (actualHorizontalAlign === PopoverActualHorizontalAlign.Right && left <= targetRect.left) { arrowXCentered = true; } - if (horizontalAlign === PopoverHorizontalAlign.Start && left + popoverSize.width >= targetRect.left + targetRect.width) { + if (actualHorizontalAlign === PopoverActualHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) { arrowXCentered = true; } @@ -776,18 +783,18 @@ class Popover extends Popup { } getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number { - const horizontalAlign = this._actualHorizontalAlign; + const actualHorizontalAlign = this._actualHorizontalAlign; let left = Popover.VIEWPORT_MARGIN; - switch (horizontalAlign) { - case PopoverHorizontalAlign.Center: - case PopoverHorizontalAlign.Stretch: + switch (actualHorizontalAlign) { + case PopoverActualHorizontalAlign.Center: + case PopoverActualHorizontalAlign.Stretch: left = targetRect.left - (popoverSize.width - targetRect.width) / 2; break; - case PopoverHorizontalAlign.Start: + case PopoverActualHorizontalAlign.Left: left = targetRect.left; break; - case PopoverHorizontalAlign.End: + case PopoverActualHorizontalAlign.Right: left = targetRect.right - popoverSize.width; break; } @@ -864,18 +871,18 @@ class Popover extends Popup { return this.effectiveDir === "rtl"; } - get _actualHorizontalAlign() { - if (this.isRtl) { - if (this.horizontalAlign === PopoverHorizontalAlign.Start) { - return PopoverHorizontalAlign.End; - } - - if (this.horizontalAlign === PopoverHorizontalAlign.End) { - return PopoverHorizontalAlign.Start; - } + get _actualHorizontalAlign() : PopoverActualHorizontalAlign { + switch (this.horizontalAlign) { + case PopoverHorizontalAlign.Start: + return this.isRtl ? PopoverActualHorizontalAlign.Right : PopoverActualHorizontalAlign.Left; + case PopoverHorizontalAlign.End: + return this.isRtl ? PopoverActualHorizontalAlign.Left : PopoverActualHorizontalAlign.Right; + case PopoverHorizontalAlign.Stretch: + return PopoverActualHorizontalAlign.Stretch; + case PopoverHorizontalAlign.Center: + default: + return PopoverActualHorizontalAlign.Center; } - - return this.horizontalAlign; } } diff --git a/packages/main/src/themes/MenuItem.css b/packages/main/src/themes/MenuItem.css index ff556ee5f191..0b3fc1e58c49 100644 --- a/packages/main/src/themes/MenuItem.css +++ b/packages/main/src/themes/MenuItem.css @@ -5,11 +5,6 @@ margin-inline: var(--_ui5_menu_submenu_margin_offset); } -.ui5-menu-rp.ui5-menu-rp-sub-menu[actual-placement="Start"] { - margin-top: 0.25rem; - margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset); -} - :host([disabled]) { pointer-events: initial; opacity: initial; diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 6542c9f3a67e..ad230451f40d 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -15,7 +15,6 @@ --_ui5_progress_indicator_bar_border_radius: 0.5rem 0 0 0.5rem; --_ui5_progress_indicator_remaining_bar_border_radius: 0 0.5rem 0.5rem 0; --_ui5_menu_submenu_margin_offset: -0.25rem 0; - --_ui5_menu_submenu_placement_type_left_margin_offset: 0.25rem 0; --_ui5-shellbar-notification-btn-count-offset: 0.125rem; } @@ -36,7 +35,6 @@ --_ui5_progress_indicator_remaining_bar_border_radius: 0.5rem 0 0 0.5rem; --_ui5_menu_submenu_margin_offset: 0 -0.25rem; - --_ui5_menu_submenu_placement_type_left_margin_offset: 0 0.25rem; --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0px;