diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs index 65466ca49b31..14c3bf6505ef 100644 --- a/packages/main/src/Menu.hbs +++ b/packages/main/src/Menu.hbs @@ -50,12 +50,12 @@ {{#each _currentItems}} {{/each}} - {{else if busy}} + {{else if loading}} {{/if}} diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 8eb87fca2f9f..91db8e5a5df8 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -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 @@ -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; } }); } @@ -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); } /** @@ -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); @@ -585,7 +585,7 @@ class Menu extends UI5Element { } } - _busyMouseOver() { + _loadingMouseOver() { if (this._parentMenuItem) { this._parentMenuItem._preventSubMenuClose = true; } diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 20aeb7ea8762..87d0a0556e9a 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -81,7 +81,7 @@ 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 @@ -89,16 +89,16 @@ class MenuItem 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 accessible ARIA name of the component. @@ -150,7 +150,7 @@ class MenuItem extends UI5Element { items!: Array; get hasSubmenu() { - return !!(this.items.length || this.busy); + return !!(this.items.length || this.loading); } get hasDummyIcon() { diff --git a/packages/main/src/MenuListItem.ts b/packages/main/src/MenuListItem.ts index 192326996b77..ffb3b15e1387 100644 --- a/packages/main/src/MenuListItem.ts +++ b/packages/main/src/MenuListItem.ts @@ -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() { diff --git a/packages/main/src/NavigationMenu.hbs b/packages/main/src/NavigationMenu.hbs index 30a02969c568..a029d7306569 100644 --- a/packages/main/src/NavigationMenu.hbs +++ b/packages/main/src/NavigationMenu.hbs @@ -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}} @@ -133,12 +133,12 @@ {{/if}} {{/each}} - {{else if busy}} + {{else if loading}} {{/if}} diff --git a/packages/main/test/pages/Menu.html b/packages/main/test/pages/Menu.html index ee92483f9397..1871f3e5eec9 100644 --- a/packages/main/test/pages/Menu.html +++ b/packages/main/test/pages/Menu.html @@ -17,7 +17,7 @@ - + @@ -33,7 +33,7 @@ - + @@ -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"); diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js index 24d26dc7975a..5f36df3e9dce 100644 --- a/packages/main/test/specs/Menu.spec.js +++ b/packages/main/test/specs/Menu.spec.js @@ -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."); diff --git a/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts b/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts index 89499b06f345..8862f92cd14b 100644 --- a/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts +++ b/packages/playground/_stories/main/Menu/MenuItem/MenuItem.stories.ts @@ -19,8 +19,8 @@ const Template: UI5StoryArgs = (args) => html`