refactor(ui5-shellbar): actions reversed ordering

SAP · Oct 28, 2024 · d6311f0 · d6311f0
1 parent c1473bb
commit d6311f0
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 79 deletions.
diff --git a/packages/fiori/cypress/specs/ShellBar.cy.ts b/packages/fiori/cypress/specs/ShellBar.cy.ts
@@ -0,0 +1,105 @@
+import { html } from "lit";
+import "../../src/ShellBar.js";
+
+describe("Responsiveness", () => {
+	beforeEach(() => {
+		cy.mount(html`
+	<ui5-shellbar
+			id="shellbar"
+			primary-title="Product Title"
+			secondary-title="Solution name"
+			notifications-count="99+"
+			show-notifications
+			show-product-switch
+	>
+
+		<ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
+
+		<ui5-avatar slot="profile">
+			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+		</ui5-avatar>
+
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+
+		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+
+		<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+
+		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+			<div slot="valueStateMessage">Instructions</div>
+		</ui5-input>
+
+		<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
+		<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
+		<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
+		<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
+		<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
+	</ui5-shellbar>
+`);
+	});
+
+	it("tests XXL Breakpoint 1920px", () => {
+		cy.viewport(1920, 1080);
+
+		cy.get("#shellbar")
+			.as("shellbar")
+			.shadow()
+			.find(".ui5-shellbar-overflow-button")
+			.as("overflowButton");
+
+		cy.get("@shellbar")
+			.find("ui5-button[slot='startButton']")
+			.as("backButton");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-menu-button-title")
+			.as("primaryTitle");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-secondary-title")
+			.as("secondaryTitle");
+
+		cy.get("@shellbar")
+			.find("[slot='searchField']")
+			.as("searchField");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-custom-item")
+			.as("customActionIcon1");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-custom-item:nth-child(3)")
+			.as("customActionIcon2");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-bell-button")
+			.as("notificationsIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-image-button")
+			.as("profileIcon");
+
+		cy.get("@shellbar")
+			.shadow()
+			.find(".ui5-shellbar-button-product-switch")
+			.as("productSwitchIcon");
+
+		cy.get("@overflowButton").should("not.exist");
+		cy.get("@backButton").should("be.visible");
+		cy.get("@primaryTitle").should("be.visible");
+		cy.get("@secondaryTitle").should("be.visible");
+		cy.get("@searchField").should("be.visible");
+		cy.get("@customActionIcon1").should("be.visible");
+		cy.get("@customActionIcon2").should("be.visible");
+		cy.get("@notificationsIcon").should("be.visible");
+		cy.get("@profileIcon").should("be.visible");
+		cy.get("@productSwitchIcon").should("be.visible");
+	});
+});
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -13,79 +13,57 @@
 		{{/if}}
 
 		{{#if hasMenuItems}}
-		{{#unless showLogoInMenuButton}}
-		<span class="ui5-shellbar-logo" role="{{accLogoRole}}" aria-label="{{_logoText}}" title="{{_logoText}}"
-			@click="{{_logoPress}}" @keydown="{{_logoKeydown}}" @keyup="{{_logoKeyup}}" tabindex="0"
-			data-ui5-stable="logo">
-			<slot name="logo"></slot>
-		</span>
-		{{/unless}}
-
-		{{#if showTitleInMenuButton}}
-		<h1 class="ui5-hidden-text">
-			{{primaryTitle}}
-		</h1>
-		{{/if}}
-
-		{{#if showMenuButton}}
-		<button class="{{classes.button}}" @click="{{_headerPress}}" aria-haspopup="menu"
-			aria-expanded="{{_menuPopoverExpanded}}" data-ui5-stable="menu">
-			{{#if showLogoInMenuButton}}
-			<span class="ui5-shellbar-logo" role="{{accLogoRole}}" aria-label="{{_logoText}}" title="{{_logoText}}">
-				<slot name="logo"></slot>
-			</span>
-			{{/if}}
-
+			{{#unless showLogoInMenuButton}}
+				{{#if hasLogo}}
+					{{> singleLogo}}
+				{{/if}}
+			{{/unless}}
 
 			{{#if showTitleInMenuButton}}
-			<div class="ui5-shellbar-menu-button-title">
+			<h1 class="ui5-hidden-text">
 				{{primaryTitle}}
-			</div>
+			</h1>
 			{{/if}}
 
-			<ui5-icon class="ui5-shellbar-menu-button-arrow" name="slim-arrow-down">
-			</ui5-icon>
-		</button>
-		{{/if}}
+			{{#if showMenuButton}}
+				<button class="{{classes.button}}" @click="{{_headerPress}}" aria-haspopup="menu"
+					aria-expanded="{{_menuPopoverExpanded}}" data-ui5-stable="menu">
+					{{#if showLogoInMenuButton}}
+					<span class="ui5-shellbar-logo" aria-label="{{_logoText}}" title="{{_logoText}}">
+						<slot name="logo"></slot>
+					</span>
+					{{/if}}
+
+
+					{{#if showTitleInMenuButton}}
+					<div class="ui5-shellbar-menu-button-title">
+						{{primaryTitle}}
+						{{#if secondaryTitle}}
+							<div style="display: block" class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</div>
+						{{/if}}
+					</div>
+					{{/if}}
+
+					<ui5-icon class="ui5-shellbar-menu-button-arrow" name="slim-arrow-down">
+					</ui5-icon>
+				</button>
+			{{/if}}
 		{{/if}}
 
 		{{#unless hasMenuItems}}
 		{{#if hasMenuItems}}
 			<slot name="menuItems"></slot>
 		{{/if}}
-		<div class="ui5-shellbar-logo-area" @click="{{_logoPress}}" tabindex="0" @keydown="{{_logoKeydown}}" @keyup="{{_logoKeyup}}">
+
+		{{#if _isSBreakpoint}}
 			{{#if hasLogo}}
-				<span class="ui5-shellbar-logo"
-					role="{{accLogoRole}}"
-					aria-label="{{_logoText}}"
-					title="{{_logoText}}"
-					@click="{{_logoPress}}"
-					@keydown="{{_logoKeydown}}"
-					@keyup="{{_logoKeyup}}"
-					data-ui5-stable="logo"
-				>
-					<slot name="logo"></slot>
-				</span>
+				{{> singleLogo}}
 			{{/if}}
-			{{#unless _isSBreakpoint}}
-			<div class="ui5-shellbar-headings">
-				{{#if primaryTitle}}
-				<h1 class="ui5-shellbar-title">
-					<bdi>{{primaryTitle}}</bdi>
-				</h1>
-				{{/if}}
-				{{#if secondaryTitle}}
-					{{#if primaryTitle}}
-					<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
-					{{/if}}
-				{{/if}}
-			</div>
-			{{/unless}}
-		</div>
+		{{else}}
+			{{> combinedLogo}}
+		{{/if}}
 		{{/unless}}
 
-
-
 	</div>
 	{{#if hasMidContent}}
 		<div class="ui5-shellbar-overflow-container ui5-shellbar-mid-content">
@@ -247,4 +225,43 @@
 	</ui5-button>
 {{/inline}}
 
+
+{{#*inline "singleLogo"}}
+	<span class="ui5-shellbar-logo" role="{{accLogoRole}}" aria-label="{{_logoText}}" title="{{_logoText}}"
+		@click="{{_logoPress}}" @keydown="{{_logoKeydown}}" @keyup="{{_logoKeyup}}" tabindex="0"
+		data-ui5-stable="logo">
+		<slot name="logo"></slot>
+	</span>
+{{/inline}}
+
+{{#*inline "combinedLogo"}}
+<div class="ui5-shellbar-logo-area" @click="{{_logoPress}}" tabindex="0" @keydown="{{_logoKeydown}}" @keyup="{{_logoKeyup}}">
+	{{#if hasLogo}}
+		<span class="ui5-shellbar-logo"
+			role="{{accLogoRole}}"
+			aria-label="{{_logoText}}"
+			title="{{_logoText}}"
+			@click="{{_logoPress}}"
+			@keydown="{{_logoKeydown}}"
+			@keyup="{{_logoKeyup}}"
+			data-ui5-stable="logo"
+		>
+			<slot name="logo"></slot>
+		</span>
+	{{/if}}
+	<div class="ui5-shellbar-headings">
+		{{#if primaryTitle}}
+		<h1 class="ui5-shellbar-title">
+			<bdi>{{primaryTitle}}</bdi>
+		</h1>
+		{{/if}}
+		{{#if secondaryTitle}}
+			{{#if primaryTitle}}
+			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
+			{{/if}}
+		{{/if}}
+	</div>
+</div>
+{{/inline}}
+
 {{>include "./ShellBarPopover.hbs"}}
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -658,7 +658,7 @@ class ShellBar extends UI5Element {
 			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
 			return isHidden && isSet && !shouldStayOnScreen;
-		}).toReversed();
+		});
 
 		this._observeMenuItems();
 	}
@@ -765,9 +765,10 @@ class ShellBar extends UI5Element {
 		const itemsByPriority = this.itemsByPriority(items);
 
 		for (let i = 0; i < itemsByPriority.length; i++) {
+			const collection = itemsByPriority.toReversed();
 			if (i < overflowButtons.length) {
-				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-				itemsByPriority[i].styles = {
+				collection[i].classes = `${collection[i].classes} ui5-shellbar-hidden-button`;
+				collection[i].styles = {
 					order: -1,
 				};
 			}
@@ -1081,7 +1082,7 @@ class ShellBar extends UI5Element {
 				icon: "overflow",
 				text: "Overflow",
 				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
-				priority: 8,
+				priority: 0,
 				styles: {
 					order: showOverflowButton ? 4 : -1,
 				},
@@ -1093,7 +1094,7 @@ class ShellBar extends UI5Element {
 			{
 				text: "Person",
 				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
-				priority: 9,
+				priority: 0,
 				styles: {
 					order: this.hasProfile ? 5 : -10,
 				},
@@ -1107,7 +1108,7 @@ class ShellBar extends UI5Element {
 				icon: "grid",
 				text: this._productsText,
 				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-button-product-switch`,
-				priority: 10,
+				priority: 0,
 				styles: {
 					order: this.showProductSwitch ? 6 : -10,
 				},
@@ -1377,7 +1378,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get accLogoRole() {
-		return this.accessibilityAttributes.logo?.role || "button";
+		return this.accessibilityAttributes.logo?.role || "link";
 	}
 }
 

diff --git a/packages/fiori/src/ShellBarPopover.hbs b/packages/fiori/src/ShellBarPopover.hbs
@@ -1,4 +1,4 @@
-{{!-- <ui5-popover class="ui5-shellbar-menu-popover"
+<ui5-popover class="ui5-shellbar-menu-popover"
 	hide-arrow
 	placement="Bottom"
 	prevent-initial-focus
@@ -10,7 +10,7 @@
 			{{ this }}
 		{{/each}}
 	</ui5-list>
-</ui5-popover> --}}
+</ui5-popover>
 
 <ui5-popover class="ui5-shellbar-overflow-popover"
 	placement="Bottom"

diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -134,6 +134,7 @@ slot[name="profile"] {
 	white-space: nowrap;
 	overflow: hidden;
 	margin: 0;
+	text-align: start;
 }
 
 .ui5-shellbar-headings {
@@ -242,6 +243,7 @@ slot[name="profile"] {
 .ui5-shellbar-logo {
 	cursor: pointer;
 	max-height: 2rem;
+	padding: .25rem;
 }
 
 .ui5-shellbar-logo-area {
@@ -259,6 +261,13 @@ slot[name="profile"] {
 	pointer-events: none;
 }
 
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
+	overflow: hidden;
+	outline: var(--_ui5_shellbar_logo_outline);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
 .ui5-shellbar-logo-area:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
@@ -326,10 +335,10 @@ slot[name="profile"] {
 	margin-inline-end: 0.5rem;
 }
 
-:host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
+/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 18.25rem);
-}
+} */
 
 .ui5-shellbar-menu-button {
 	white-space: nowrap;
@@ -377,6 +386,7 @@ slot[name="profile"] {
 	align-items: center;
 	overflow: hidden;
 	flex: 1 1 auto;
+	max-width: max-content;
 }
 
 .ui5-shellbar-overflow-container-additional-content {
@@ -425,6 +435,8 @@ slot[name="profile"] {
 .ui5-shellbar-invisible-button {
 	visibility: hidden;
 	order: -1;
+	min-width: 0;
+    width: 0;
 }
 
 ::slotted([hidden]) {