Skip to content

Commit d6f2836

Browse files
dimovpetardimovpetar
authored
refactor(ui5-popover): rename PopoverHorizontalAlign and PopoverPlacementType values (#8502)
Renames the `Left` and `Right` values of `PopoverHorizontalAlign` and `PopoverPlacementType` to `Start` and `End`. BREAKING CHANGE: The `Left` and `Right` options option have been renamed. If you previously used them to set the placement or the alignment of the popover: ```html <ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover> ``` Now use `Start` or `End` instead: ```html <ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover> ``` Related to #8461
1 parent 0789c34 commit d6f2836

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+109
-104
lines changed

‎packages/fiori/src/NotificationOverflowActionsPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ui5-popover
22
class="ui5-notification-overflow-popover"
33
placement-type="Bottom"
4-
horizontal-align="Right"
4+
horizontal-align="End"
55
hide-arrow
66
>
77
<div class="ui5-notification-overflow-list">

‎packages/fiori/src/ShellBar.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import "@ui5/webcomponents-icons/dist/overflow.js";
2828
import "@ui5/webcomponents-icons/dist/grid.js";
2929
import type { Timeout, ClassMap } from "@ui5/webcomponents-base/dist/types.js";
3030
import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
31+
import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
3132
import type ShellBarItem from "./ShellBarItem.js";
3233

3334
// Templates
@@ -1208,8 +1209,8 @@ class ShellBar extends UI5Element {
12081209
return this.primaryTitle || this.showLogoInMenuButton;
12091210
}
12101211

1211-
get popoverHorizontalAlign() {
1212-
return this.effectiveDir === "rtl" ? "Left" : "Right";
1212+
get popoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
1213+
return this.effectiveDir === "rtl" ? "Start" : "End";
12131214
}
12141215

12151216
get hasSearchField() {

‎packages/fiori/test/pages/NotificationListGroupItem.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178

179179
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
180180

181-
<ui5-popover id="notificationsPopover" class="notificationlistgroupitem2auto" placement-type="Bottom" horizontal-align="Right">
181+
<ui5-popover id="notificationsPopover" class="notificationlistgroupitem2auto" placement-type="Bottom" horizontal-align="End">
182182
<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
183183
<ui5-li-notification-group
184184
show-close

‎packages/fiori/test/pages/NotificationListItem.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@
146146

147147
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
148148

149-
<ui5-popover id="notificationsPopover" class="notificationlistitem2auto" placement-type="Bottom" horizontal-align="Right">
149+
<ui5-popover id="notificationsPopover" class="notificationlistitem2auto" placement-type="Bottom" horizontal-align="End">
150150
<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
151151
<ui5-li-notification
152152
show-close

‎packages/fiori/test/samples/NotificationListGroupItem.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
186186
>
187187
</ui5-shellbar>
188188

189-
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
189+
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="End">
190190
<ui5-list id="notificationListTop" header-text="Notifications grouped">
191191
<ui5-li-notification-group
192192
show-close
@@ -329,7 +329,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
329329
id="notificationsPopover"
330330
style="max-width: 400px"
331331
placement-type="Bottom"
332-
horizontal-align="Right"
332+
horizontal-align="End"
333333
>
334334
<ui5-list header-text="Notifications">
335335
<ui5-li-notification-group

‎packages/fiori/test/samples/NotificationListItem.sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ <h3>NotificationListItem In ShellBar</h3>
190190
>
191191
</ui5-shellbar>
192192

193-
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
193+
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="End">
194194
<ui5-list id="notificationListTop" header-text="Notifications">
195195
<ui5-li-notification
196196
show-close

‎packages/main/src/BreadcrumbsPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
hide-arrow
44
content-only-on-desktop
55
placement-type="Bottom"
6-
horizontal-align="Left"
6+
horizontal-align="Start"
77
_hide-header
88
@keydown="{{_onkeydown}}">
99
<ui5-list mode="SingleSelect"

‎packages/main/src/ComboBox.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1195,7 +1195,7 @@ class ComboBox extends UI5Element {
11951195
}
11961196

11971197
get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
1198-
return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Left : PopoverHorizontalAlign.Right;
1198+
return this.effectiveDir !== "rtl" ? PopoverHorizontalAlign.Start : PopoverHorizontalAlign.End;
11991199
}
12001200

12011201
/**

‎packages/main/src/ComboBoxPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
class="{{classes.popover}}"
33
hide-arrow
44
placement-type="Bottom"
5-
horizontal-align="Left"
5+
horizontal-align="Start"
66
style="{{styles.suggestionsPopover}}"
77
@ui5-after-open={{_afterOpenPopover}}
88
@ui5-after-close={{_afterClosePopover}}

‎packages/main/src/DatePickerPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id="{{_id}}-responsive-popover"
33
allow-target-overlap
44
placement-type="Bottom"
5-
horizontal-align="Left"
5+
horizontal-align="Start"
66
hide-arrow
77
?_hide-header={{_shouldHideHeader}}
88
@keydown="{{_onkeydown}}"

‎packages/main/src/FileUploaderPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
hide-arrow
66
class="ui5-valuestatemessage-popover"
77
placement-type="Bottom"
8-
horizontal-align="Left"
8+
horizontal-align="Start"
99
>
1010
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
1111
{{#if _valueStateMessageInputIcon}}

‎packages/main/src/Input.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import Popover from "./Popover.js";
5757
import Icon from "./Icon.js";
5858
import type { IIcon } from "./Icon.js";
5959
import type ListItemType from "./types/ListItemType.js";
60+
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
6061
// Templates
6162
import InputTemplate from "./generated/templates/InputTemplate.lit.js";
6263
import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
@@ -1677,8 +1678,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
16771678
return "";
16781679
}
16791680

1680-
get _valueStatePopoverHorizontalAlign() {
1681-
return this.effectiveDir !== "rtl" ? "Left" : "Right";
1681+
get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
1682+
return this.effectiveDir !== "rtl" ? "Start" : "End";
16821683
}
16831684

16841685
/**

‎packages/main/src/InputPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
hide-arrow
55
_disable-initial-focus
66
placement-type="Bottom"
7-
horizontal-align="Left"
7+
horizontal-align="Start"
88
style="{{styles.suggestionsPopover}}"
99
@ui5-after-open="{{_afterOpenPopover}}"
1010
@ui5-after-close="{{_afterClosePopover}}"

‎packages/main/src/Menu.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ui5-responsive-popover
22
id="{{_id}}-menu-rp"
33
class="ui5-menu-rp"
4-
horizontal-align="Left"
4+
horizontal-align="Start"
55
placement-type={{placementType}}
66
vertical-align={{verticalAlign}}
77
hide-arrow

‎packages/main/src/Menu.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import StandardListItem from "./StandardListItem.js";
2929
import Icon from "./Icon.js";
3030
import BusyIndicator from "./BusyIndicator.js";
3131
import type MenuItem from "./MenuItem.js";
32+
import PopoverPlacementType from "./types/PopoverPlacementType.js";
3233
import type { ListItemClickEventDetail } from "./List.js";
3334
import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
3435
import {
@@ -344,8 +345,8 @@ class Menu extends UI5Element {
344345
return this.effectiveDir === "rtl";
345346
}
346347

347-
get placementType() {
348-
const placement = this.isRtl ? "Left" : "Right";
348+
get placementType(): `${PopoverPlacementType}` {
349+
const placement = this.isRtl ? "Start" : "End";
349350
return this._isSubMenu ? placement : "Bottom";
350351
}
351352

‎packages/main/src/MultiComboBox.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ import type FormSupportT from "./features/InputElementsFormSupport.js";
106106
import type ListItemBase from "./ListItemBase.js";
107107
import CheckBox from "./CheckBox.js";
108108
import Input, { InputEventDetail } from "./Input.js";
109+
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
109110

110111
/**
111112
* Interface for components that may be slotted inside a `ui5-multi-combobox` as items
@@ -1881,8 +1882,8 @@ class MultiComboBox extends UI5Element {
18811882
return shouldBeExpanded;
18821883
}
18831884

1884-
get _valueStatePopoverHorizontalAlign() {
1885-
return this.effectiveDir !== "rtl" ? "Left" : "Right";
1885+
get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
1886+
return this.effectiveDir !== "rtl" ? "Start" : "End";
18861887
}
18871888

18881889
get iconsCount() {

‎packages/main/src/MultiComboBoxPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ui5-responsive-popover
22
placement-type="Bottom"
3-
horizontal-align="Left"
3+
horizontal-align="Start"
44
class="{{classes.popover}}"
55
hide-arrow
66
_disable-initial-focus

‎packages/main/src/Popover.ts

+20-20
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,10 @@ class Popover extends Popup {
105105

106106
/**
107107
* Determines on which side the component is placed at.
108-
* @default "Right"
108+
* @default "End"
109109
* @public
110110
*/
111-
@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
111+
@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.End })
112112
placementType!: `${PopoverPlacementType}`;
113113

114114
/**
@@ -199,7 +199,7 @@ class Popover extends Popup {
199199
* Returns the calculated placement depending on the free space
200200
* @private
201201
*/
202-
@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
202+
@property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.End })
203203
actualPlacementType!: `${PopoverPlacementType}`;
204204

205205
@property({ validator: Integer, noAttribute: true })
@@ -313,8 +313,8 @@ class Popover extends Popup {
313313
shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean {
314314
const threshold = 32;
315315
const limits = {
316-
"Right": openerRect.right,
317-
"Left": openerRect.left,
316+
"Start": openerRect.right,
317+
"End": openerRect.left,
318318
"Top": openerRect.top,
319319
"Bottom": openerRect.bottom,
320320
};
@@ -400,7 +400,7 @@ class Popover extends Popup {
400400
document.documentElement.clientWidth - popoverSize.width - Popover.VIEWPORT_MARGIN,
401401
);
402402

403-
if (this.actualPlacementType === PopoverPlacementType.Right) {
403+
if (this.actualPlacementType === PopoverPlacementType.End) {
404404
left = Math.max(left, this._left!);
405405
}
406406

@@ -533,15 +533,15 @@ class Popover extends Popup {
533533
maxHeight = clientHeight - targetRect.bottom - arrowOffset;
534534
}
535535
break;
536-
case PopoverPlacementType.Left:
536+
case PopoverPlacementType.Start:
537537
left = Math.max(targetRect.left - popoverSize.width - arrowOffset, 0);
538538
top = this.getHorizontalTop(targetRect, popoverSize);
539539

540540
if (!allowTargetOverlap) {
541541
maxWidth = targetRect.left - arrowOffset;
542542
}
543543
break;
544-
case PopoverPlacementType.Right:
544+
case PopoverPlacementType.End:
545545
left = targetRect.left + targetRect.width + arrowOffset;
546546
top = this.getHorizontalTop(targetRect, popoverSize);
547547

@@ -605,11 +605,11 @@ class Popover extends Popup {
605605
const horizontalAlign = this._actualHorizontalAlign;
606606
let arrowXCentered = horizontalAlign === PopoverHorizontalAlign.Center || horizontalAlign === PopoverHorizontalAlign.Stretch;
607607

608-
if (horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
608+
if (horizontalAlign === PopoverHorizontalAlign.End && left <= targetRect.left) {
609609
arrowXCentered = true;
610610
}
611611

612-
if (horizontalAlign === PopoverHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
612+
if (horizontalAlign === PopoverHorizontalAlign.Start && left + popoverSize.width >= targetRect.left + targetRect.width) {
613613
arrowXCentered = true;
614614
}
615615

@@ -651,11 +651,11 @@ class Popover extends Popup {
651651
*/
652652
fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined {
653653
if (targetRect.left > popoverSize.width) {
654-
return PopoverPlacementType.Left;
654+
return PopoverPlacementType.Start;
655655
}
656656

657657
if (clientWidth - targetRect.right > targetRect.left) {
658-
return PopoverPlacementType.Right;
658+
return PopoverPlacementType.End;
659659
}
660660

661661
if (clientHeight - targetRect.bottom > popoverSize.height) {
@@ -687,12 +687,12 @@ class Popover extends Popup {
687687
actualPlacementType = PopoverPlacementType.Top;
688688
}
689689
break;
690-
case PopoverPlacementType.Left:
690+
case PopoverPlacementType.Start:
691691
if (targetRect.left < popoverSize.width) {
692692
actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
693693
}
694694
break;
695-
case PopoverPlacementType.Right:
695+
case PopoverPlacementType.End:
696696
if (clientWidth - targetRect.right < popoverSize.width) {
697697
actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
698698
}
@@ -711,10 +711,10 @@ class Popover extends Popup {
711711
case PopoverHorizontalAlign.Stretch:
712712
left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
713713
break;
714-
case PopoverHorizontalAlign.Left:
714+
case PopoverHorizontalAlign.Start:
715715
left = targetRect.left;
716716
break;
717-
case PopoverHorizontalAlign.Right:
717+
case PopoverHorizontalAlign.End:
718718
left = targetRect.right - popoverSize.width;
719719
break;
720720
}
@@ -793,12 +793,12 @@ class Popover extends Popup {
793793

794794
get _actualHorizontalAlign() {
795795
if (this.effectiveDir === "rtl") {
796-
if (this.horizontalAlign === PopoverHorizontalAlign.Left) {
797-
return PopoverHorizontalAlign.Right;
796+
if (this.horizontalAlign === PopoverHorizontalAlign.Start) {
797+
return PopoverHorizontalAlign.End;
798798
}
799799

800-
if (this.horizontalAlign === PopoverHorizontalAlign.Right) {
801-
return PopoverHorizontalAlign.Left;
800+
if (this.horizontalAlign === PopoverHorizontalAlign.End) {
801+
return PopoverHorizontalAlign.Start;
802802
}
803803
}
804804

‎packages/main/src/SelectMenu.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ui5-responsive-popover
22
class="ui5-select-menu"
33
placement-type="Bottom"
4-
horizontal-align="Left"
4+
horizontal-align="Start"
55
@ui5-after-open="{{_onAfterOpen}}"
66
@ui5-after-close="{{_onAfterClose}}"
77
@ui5-before-open="{{_onBeforeOpen}}"

‎packages/main/src/SelectPopover.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
_disable-initial-focus
55
placement-type="Bottom"
66
class="ui5-select-popover {{classes.popover}}"
7-
horizontal-align="Left"
7+
horizontal-align="Start"
88
@ui5-after-open="{{_afterOpen}}"
99
@ui5-before-open="{{_beforeOpen}}"
1010
@ui5-after-close="{{_afterClose}}"
@@ -71,7 +71,7 @@
7171
hide-arrow
7272
class="ui5-valuestatemessage-popover"
7373
placement-type="Bottom"
74-
horizontal-align="Left"
74+
horizontal-align="Start"
7575
>
7676
<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
7777
<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>

‎packages/main/src/TabContainerPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ui5-responsive-popover
22
id="{{_id}}-overflowMenu"
3-
horizontal-align="Right"
3+
horizontal-align="End"
44
placement-type="Bottom"
55
content-only-on-desktop
66
hide-arrow

‎packages/main/src/TextArea.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
1616
import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
1717
import Popover from "./Popover.js";
1818
import Icon from "./Icon.js";
19+
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
1920
import "@ui5/webcomponents-icons/dist/error.js";
2021
import "@ui5/webcomponents-icons/dist/alert.js";
2122
import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -617,8 +618,8 @@ class TextArea extends UI5Element implements IFormElement {
617618
return this.valueStateMessage.map(x => x.cloneNode(true));
618619
}
619620

620-
get _valueStatePopoverHorizontalAlign() {
621-
return this.effectiveDir !== "rtl" ? "Left" : "Right";
621+
get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}` {
622+
return this.effectiveDir !== "rtl" ? "Start" : "End";
622623
}
623624

624625
/**

0 commit comments

Comments
 (0)