refactor(ui5-shellbar): menu button logic (#5299)

SAP · Jun 1, 2022 · 31a86e2 · 31a86e2
1 parent 51954b7
commit 31a86e2
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 88 deletions.
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -10,49 +10,69 @@
 				<slot name="startButton"></slot>
 		{{/if}}
 
-		{{#if hasFocusableLogo}}
-			<span class="ui5-shellbar-logo"
-				role="button"
-				aria-label="{{_logoText}}"
-				title="{{_logoText}}"
-				@click="{{_logoPress}}"
-				@keydown="{{_logoKeydown}}"
-				@keyup="{{_logoKeyup}}"
-				tabindex="0"
-				data-ui5-stable="logo"
-			>
-				<slot name="logo"></slot>
-			</span>
-		{{/if}}
-
-		{{#if showArrowDown}}
-			<button tabindex="{{menuBtnTabindex}}"
-				class="{{classes.button}}"
-				@click="{{_header.press}}"
-				aria-haspopup="{{menuBtnHasPopup}}"
-				aria-expanded="{{menuPopoverExpanded}}"
-				data-ui5-stable="menu"
-			>
-				{{#if hasNonFocusableLogo}}
-					<span
-						class="ui5-shellbar-logo"
+		{{#if hasMenuItems}}
+				{{#unless showLogoInMenuButton}}
+					<span class="ui5-shellbar-logo"
+						role="button"
 						aria-label="{{_logoText}}"
 						title="{{_logoText}}"
+						@click="{{_logoPress}}"
+						@keydown="{{_logoKeydown}}"
+						@keyup="{{_logoKeyup}}"
+						tabindex="0"
+						data-ui5-stable="logo"
 					>
 						<slot name="logo"></slot>
 					</span>
-				{{/if}}
+				{{/unless}}
+
+				{{#if showMenuButton}}
+					<button class="{{classes.button}}"
+						@click="{{_header.press}}"
+						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 primaryTitle}}
-					<h1 class="ui5-shellbar-menu-button-title">
-						<bdi>{{primaryTitle}}</bdi>
-					</h1>
-				{{/if}}
 
-				<span class="ui5-shellbar-menu-button-arrow"></span>
-			</button>
+						{{#if showTitleInMenuButton}}
+							<h1 class="ui5-shellbar-menu-button-title">
+								<bdi>{{primaryTitle}}</bdi>
+							</h1>
+						{{/if}}
+
+						<span class="ui5-shellbar-menu-button-arrow"></span>
+					</button>
+				{{/if}}
 		{{/if}}
 
+		{{#unless hasMenuItems}}
+			{{#if hasLogo}}
+				<span class="ui5-shellbar-logo"
+					role="button"
+					aria-label="{{_logoText}}"
+					title="{{_logoText}}"
+					@click="{{_logoPress}}"
+					@keydown="{{_logoKeydown}}"
+					@keyup="{{_logoKeyup}}"
+					tabindex="0"
+					data-ui5-stable="logo"
+				>
+					<slot name="logo"></slot>
+				</span>
+			{{/if}}
+			{{#if primaryTitle}}
+				<h1 class="ui5-shellbar-title">
+					<bdi>{{primaryTitle}}</bdi>
+				</h1>
+			{{/if}}
+		{{/unless}}
+
 		{{#if secondaryTitle}}
 			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
 		{{/if}}

diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -1079,24 +1079,20 @@ class ShellBar extends UI5Element {
 		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
 	}
 
-	get nonFocusableLogo() {
-		return this.breakpointSize === "S" && this.hasMenuItems;
-	}
-
-	get hasFocusableLogo() {
-		return this.hasLogo && !this.nonFocusableLogo;
+	get hasLogo() {
+		return !!this.logo.length;
 	}
 
-	get hasNonFocusableLogo() {
-		return this.hasLogo && this.nonFocusableLogo;
+	get showLogoInMenuButton() {
+		return this.hasLogo && this.breakpointSize === "S";
 	}
 
-	get hasLogo() {
-		return !!this.logo.length;
+	get showTitleInMenuButton() {
+		return this.primaryTitle && !(this.showLogoInMenuButton);
 	}
 
-	get showArrowDown() {
-		return this.primaryTitle || this.hasInteractvieLogo;
+	get showMenuButton() {
+		return this.primaryTitle || this.showLogoInMenuButton;
 	}
 
 	get popoverHorizontalAlign() {
@@ -1115,18 +1111,6 @@ class ShellBar extends UI5Element {
 		return this.menuItems.length > 0;
 	}
 
-	get menuBtnHasPopup() {
-		return this.hasMenuItems ? HasPopup.Menu : undefined;
-	}
-
-	get menuBtnTabindex() {
-		return this.hasMenuItems ? "0" : "-1";
-	}
-
-	get menuPopoverExpanded() {
-		return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
-	}
-
 	get _shellbarText() {
 		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
 	}

diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -42,6 +42,10 @@
 	text-overflow: initial;
 }
 
+::slotted([ui5-button][slot="startButton"]) {
+	margin-inline-start: 0;
+}
+
 ::slotted([ui5-button][slot="startButton"]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
@@ -89,14 +93,16 @@ slot[name="profile"] {
 	border: none;
 }
 
-.ui5-shellbar-menu-button-title {
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
 	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	color: var(--sapShell_TextColor);
 	flex: auto;
 }
 
@@ -105,17 +111,8 @@ slot[name="profile"] {
 	justify-content: center;
 }
 
-:host(:not([primary-title])) .ui5-shellbar-menu-button span {
-	margin-inline-start: 0;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
-	margin-inline-start: .5rem;
-}
-
 .ui5-shellbar-secondary-title {
 	display: inline-block;
-	margin: 0 0.5rem;
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapShell_TextColor);
 	line-height: 1rem;
@@ -157,16 +154,8 @@ slot[name="profile"] {
 	width: 3rem;
 }
 
-@keyframes Behind_layer {
-	0% {
-		transform: rotate(360deg);
-	}
-}
-
-@keyframes Top_layer {
-	0% {
-		transform: rotate(-360deg);
-	}
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-root {
@@ -177,10 +166,6 @@ slot[name="profile"] {
 	padding: 0 1rem;
 }
 
-:host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
-	margin-inline-end: 0;
-}
-
 :host([breakpoint-size="M"]) .ui5-shellbar-root {
 	padding: 0 2rem;
 }
@@ -257,6 +242,10 @@ slot[name="profile"] {
 	flex-grow: 0;
 }
 
+.ui5-shellbar-overflow-container-left > :nth-child(n) {
+	margin-inline-end: 0.5rem;
+}
+
 :host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 1.5rem);
@@ -327,11 +316,6 @@ slot[name="profile"] {
 	display: none;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-logo + .ui5-shellbar-menu-button-title,
-:host([breakpoint-size="S"]) .ui5-shellbar-menu-button + .ui5-shellbar-menu-button-title {
-	display: none;
-}
-
 :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
 	margin-inline-start: 0;
 }
@@ -502,7 +486,6 @@ slot[name="profile"] {
 .ui5-shellbar-copilot-wrapper:hover::after {
 	background: transparent;
 	box-shadow: var(--sapContent_Interaction_Shadow);
-
 }
 
 .ui5-shellbar-copilot-wrapper:focus::after {