Skip to content

Commit

Permalink
refactor(ui5-menu): rename the busy and busy delay properties (#8778)
Browse files Browse the repository at this point in the history 
Renames the busy and busyDelay properties of the ui5-menu and ui5-menu-item to loading and loadingDelay.

BREAKING CHANGE: The busy and busyDelay and properties of the ui5-menu and ui5-menu-item are renamed.
If you have previously used the busy, busyDelay properties:

<ui5-menu header-text="My ui5-menu" busy busy-delay="100"><ui5-menu>
<ui5-menu-item text="Open" icon="open-folder" busy busy-delay="100"><ui5-menu-item>
now you should use loading and loadingDelay properties:

<ui5-menu header-text="My ui5-menu" loading loading-delay="100"><ui5-menu>
<ui5-menu-item text="Open" icon="open-folder" loading loading-delay="100"><ui5-menu-item>

Fixes: #8764
  • Loading branch information
@unazko
unazko committed Apr 22, 2024
1 parent 75b500d commit 3a4be3a
Show file tree
Hide file tree
Showing 8 changed files with 36 additions and 36 deletions.
12 changes: 6 additions & 6 deletions packages/main/src/Menu.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@
<ui5-list
id="{{_id}}-menu-list"
selection-mode="None"
?busy="{{busy}}"
busy-delay="{{busyDelay}}"
?loading="{{loading}}"
loading-delay="{{loadingDelay}}"
separators="None"
accessible-role="menu"
@ui5-item-click={{_itemClick}}
@mouseover="{{_busyMouseOver}}"
@mouseover="{{_loadingMouseOver}}"
>
{{#each _currentItems}}
<ui5-menu-li
Expand All @@ -80,12 +80,12 @@
</ui5-menu-li>
{{/each}}
</ui5-list>
{{else if busy}}
{{else if loading}}
<ui5-busy-indicator
id="{{_id}}-menu-busy-indicator"
delay="{{busyDelay}}"
delay="{{loadingDelay}}"
class="ui5-menu-busy-indicator"
@mouseover="{{_busyMouseOver}}"
@mouseover="{{_loadingMouseOver}}"
active>
</ui5-busy-indicator>
{{/if}}
Expand Down
22 changes: 11 additions & 11 deletions packages/main/src/Menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,16 +241,16 @@ class Menu extends UI5Element {
* @since 1.13.0
*/
@property({ type: Boolean })
busy!: boolean;
loading!: boolean;

/**
* Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover..
* Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
* @default 1000
* @public
* @since 1.13.0
*/
@property({ validator: Integer, defaultValue: 1000 })
busyDelay!: number;
loadingDelay!: number;

/**
* Defines the ID or DOM Reference of the element that the menu is shown at
Expand Down Expand Up @@ -378,15 +378,15 @@ class Menu extends UI5Element {
item.item._siblingsWithIcon = itemsWithIcon;
const subMenu = item.item._subMenu;
const menuItem = item.item;
if (subMenu && subMenu.busy) {
if (subMenu && subMenu.loading) {
subMenu.innerHTML = "";
const fragment = this._clonedItemsFragment(menuItem);
subMenu.appendChild(fragment);
}

if (subMenu) {
subMenu.busy = item.item.busy;
subMenu.busyDelay = item.item.busyDelay;
subMenu.loading = item.item.loading;
subMenu.loadingDelay = item.item.loadingDelay;
}
});
}
Expand Down Expand Up @@ -416,10 +416,10 @@ class Menu extends UI5Element {
this._parentMenuItem = undefined;
this._opener = undefined;
}
const busyWithoutItems = !this._parentMenuItem?.items.length && this._parentMenuItem?.busy;
const loadingWithoutItems = !this._parentMenuItem?.items.length && this._parentMenuItem?.loading;
const popover = await this._createPopover();
popover.initialFocus = `${this._id}-menu-item-0`;
popover.showAt(opener, busyWithoutItems);
popover.showAt(opener, loadingWithoutItems);
}

/**
Expand Down Expand Up @@ -473,8 +473,8 @@ class Menu extends UI5Element {
subMenu.setAttribute("id", `submenu-${opener.id}`);
subMenu._parentMenuItem = item;
subMenu._opener = opener;
subMenu.busy = item.busy;
subMenu.busyDelay = item.busyDelay;
subMenu.loading = item.loading;
subMenu.loadingDelay = item.loadingDelay;
const fragment = this._clonedItemsFragment(item);
subMenu.appendChild(fragment);
this.shadowRoot!.querySelector(".ui5-menu-submenus")!.appendChild(subMenu);
Expand Down Expand Up @@ -585,7 +585,7 @@ class Menu extends UI5Element {
}
}

_busyMouseOver() {
_loadingMouseOver() {
if (this._parentMenuItem) {
this._parentMenuItem._preventSubMenuClose = true;
}
Expand Down
10 changes: 5 additions & 5 deletions packages/main/src/MenuItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,24 +81,24 @@ class MenuItem extends UI5Element {
disabled!: boolean;

/**
* Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.
* Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
*
* **Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.
* @default false
* @public
* @since 1.13.0
*/
@property({ type: Boolean })
busy!: boolean;
loading!: boolean;

/**
* Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.
* Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
* @default 1000
* @public
* @since 1.13.0
*/
@property({ validator: Integer, defaultValue: 1000 })
busyDelay!: number;
loadingDelay!: number;

/**
* Defines the accessible ARIA name of the component.
Expand Down Expand Up @@ -150,7 +150,7 @@ class MenuItem extends UI5Element {
items!: Array<MenuItem>;

get hasSubmenu() {
return !!(this.items.length || this.busy);
return !!(this.items.length || this.loading);
}

get hasDummyIcon() {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MenuListItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class MenuListItem extends CustomListItem {
}

get hasSubmenu() {
return !!(this.associatedItem?.items.length || this.associatedItem?.busy);
return !!(this.associatedItem?.items.length || this.associatedItem?.loading);
}

get subMenuOpened() {
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/NavigationMenu.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@
accessible-role="tree"
id="{{_id}}-menu-list"
selection-mode="None"
?busy="{{busy}}"
busy-delay="{{busyDelay}}"
?loading="{{loading}}"
loading-delay="{{loadingDelay}}"
separators="None"
@ui5-item-click={{_itemClick}}
@mouseover="{{_busyMouseOver}}"
@mouseover="{{_loadingMouseOver}}"
>
{{#each _currentItems}}
{{#if this.item.href}}
Expand Down Expand Up @@ -133,12 +133,12 @@
{{/if}}
{{/each}}
</ui5-list>
{{else if busy}}
{{else if loading}}
<ui5-busy-indicator
id="{{_id}}-menu-busy-indicator"
delay="{{busyDelay}}"
delay="{{loadingDelay}}"
class="ui5-menu-busy-indicator"
@mouseover="{{_busyMouseOver}}"
@mouseover="{{_loadingMouseOver}}"
active>
</ui5-busy-indicator>
{{/if}}
Expand Down
8 changes: 4 additions & 4 deletions packages/main/test/pages/Menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<ui5-menu id="menu" header-text="My ui5-menu">
<ui5-menu-item text="New File(selection prevented)" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" tooltip="Select a file - prevent default" icon="add-document"></ui5-menu-item>
<ui5-menu-item text="New Folder with very long title for a menu item" additional-text="Ctrl+F" icon="add-folder" disabled></ui5-menu-item>
<ui5-menu-item text="Open" icon="open-folder" starts-section busy-delay="100" busy>
<ui5-menu-item text="Open" icon="open-folder" starts-section loading-delay="100" loading>
<ui5-menu-item text="Open Locally" icon="open-folder" additional-text="Ctrl+K">
<ui5-menu-item text="Open from C"></ui5-menu-item>
<ui5-menu-item text="Open from D"></ui5-menu-item>
Expand All @@ -33,7 +33,7 @@
</ui5-menu-item>
<ui5-menu-item text="Save on Cloud" icon="upload-to-cloud"></ui5-menu-item>
</ui5-menu-item>
<ui5-menu-item text="Close" additional-text="Ctrl+W" busy-delay="100" busy></ui5-menu-item>
<ui5-menu-item text="Close" additional-text="Ctrl+W" loading-delay="100" loading></ui5-menu-item>
<ui5-menu-item text="Preferences" icon="action-settings" starts-section disabled></ui5-menu-item>
<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
</ui5-menu>
Expand Down Expand Up @@ -104,8 +104,8 @@
const item = event.detail.item;
if (item && item.text === "Open" && !fetched) {
setTimeout(function() {
item.removeAttribute("busy");
item.removeAttribute("busy-delay");
item.removeAttribute("loading");
item.removeAttribute("loading-delay");
let oneNode = document.createElement("ui5-menu-item");
oneNode.setAttribute("text", "Open from Amazon Cloud");
let twoNode = document.createElement("ui5-menu-item");
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/specs/Menu.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ describe("Menu interaction", () => {
const openSubmenuPopover = await menu.shadow$(".ui5-menu-submenus ui5-menu:last-of-type").shadow$("ui5-responsive-popover");
const openMenuList = await openSubmenuPopover.$("ui5-list");

// assert.ok(await openMenuList.getProperty("busy"), "Busy property is properly propagated to the ui5-list component.");
// assert.ok(await openMenuList.getProperty("loading"), "Busy property is properly propagated to the ui5-list component.");
await browser.waitUntil(async () => {
return (await openMenuList.$$("ui5-menu-li")).length === 4;
}, 1500, "Two additional nodes have been added.");
Expand Down
4 changes: 2 additions & 2 deletions packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ const Template: UI5StoryArgs<MenuItem, StoryArgsSlots> = (args) => html`<ui5-men
<ui5-menu-item
accessible-name="${ifDefined(args.accessibleName)}"
additional-text="${ifDefined(args.additionalText)}"
?busy="${ifDefined(args.busy)}"
busy-delay="${ifDefined(args.busyDelay)}"
?loading="${ifDefined(args.loading)}"
loading-delay="${ifDefined(args.loadingDelay)}"
?disabled="${ifDefined(args.disabled)}"
icon="${ifDefined(args.icon)}"
?starts-section="${ifDefined(args.startsSection)}"
Expand Down

0 comments on commit 3a4be3a

Please sign in to comment.