improvement(shellbar): apply latest VD spec (#167)

Author: MapTo0

packages/main/src/ShellBar.hbs

@@ -3,28 +3,28 @@
 	<div class="{{classes.leftContainer}}">
 
 		{{#if ctr.icon}}
-			<div class="sapWCShellBarBeginIcon" tabindex="0">
-				<slot name="{{ctr.icon._slot}}"></slot>
-			</div>
+			<slot name="{{ctr.icon._slot}}"></slot>
 		{{/if}}
 
 		{{#unless interactiveLogo}}
 			<img class="{{classes.logo}}" src="{{ctr.logo}}" />
 		{{/unless}}
 
-		<button tabindex="0" class="{{classes.button}}" @click="{{ctr._header.press}}">
-			{{#if interactiveLogo}}
-				<img class="{{classes.logo}}" src="{{ctr.logo}}" />
-			{{/if}}
+		{{#if showArrowDown}}
+			<button tabindex="0" class="{{classes.button}}" @click="{{ctr._header.press}}">
+				{{#if interactiveLogo}}
+					<img class="{{classes.logo}}" src="{{ctr.logo}}" />
+				{{/if}}
 
-			{{#if ctr.primaryTitle}}
-				<h1 class="{{classes.buttonTitle}}">
-					<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
-				</h1>
-			{{/if}}
+				{{#if ctr.primaryTitle}}
+					<h1 class="{{classes.buttonTitle}}">
+						<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
+					</h1>
+				{{/if}}
 
-			<span class="{{classes.arrow}}"></span>
-		</button>
+				<span class="{{classes.arrow}}"></span>
+			</button>
+		{{/if}}
 
 		<h2 class="{{classes.secondaryTitle}}">{{ctr.secondaryTitle}}</h2>
 	</div>

packages/main/src/ShellBarTemplateContext.js

@@ -11,12 +11,14 @@ class ShellBarTemplateContext {
 		});
 
 		const isRTL = getRTL();
+		const interactiveLogo = state._breakpointSize === "S";
 
 		return {
 			ctr: state,
 			_hiddenIcons: hiddenIcons,
 			popoverHorizontalAlign: isRTL ? "Left" : "Right",
-			interactiveLogo: state._breakpointSize === "S",
+			interactiveLogo,
+			showArrowDown: state.primaryTitle || (state.logo && interactiveLogo),
 			styles: {
 				searchField: {
 					[isRTL ? "left" : "right"]: state._searchField.right,

packages/main/src/themes/base/ShellBar.less

@@ -38,7 +38,7 @@ ui5-shellbar {
 .sapWCShellBarMenuButton,
 .sapWCShellBarIconButton,
 .sapWCShellBarImageButton,
-.sapWCShellBarBeginIcon {
+::slotted(ui5-icon) {
 	height: 2.25rem;
 	padding: 0;
 	margin-left: 0.5rem;
@@ -52,26 +52,33 @@ ui5-shellbar {
 	position: relative;
 	font-size: 0.75rem;
 	font-weight: bold;
-	&:hover {
-		background: @sapUiShellHoverBackground;
-	}
-	&:active {
-		background: @sapUiHighlight;
-		color: @sapUiShellActiveTextColor;
-	}
-	&:focus {
-		&::after {
-			content: "";
-			position: absolute;
-			width: ~"calc(100% - 0.375rem)";
-			height: ~"calc(100% - 0.375rem)";
-			border: 1px dotted @sapUiContentContrastFocusColor;
-			pointer-events: none;
-			left: 2px;
-			top: 2px;
-			z-index: 1;
-		}
-	}
+}
+
+.sapWCShellBarMenuButton:hover,
+.sapWCShellBarIconButton:hover,
+.sapWCShellBarImageButton:hover {
+	background: @sapUiShellHoverBackground;
+}
+
+.sapWCShellBarMenuButton:active,
+.sapWCShellBarIconButton:active,
+.sapWCShellBarImageButton:active {
+	background: @sapUiShellActiveBackground;
+	color: @sapUiShellActiveTextColor;
+}
+
+.sapWCShellBarMenuButton:focus::after,
+.sapWCShellBarIconButton:focus::after,
+.sapWCShellBarImageButton:focus::after {
+	content: "";
+	position: absolute;
+	width: ~"calc(100% - 0.375rem)";
+	height: ~"calc(100% - 0.375rem)";
+	border: 1px dotted @sapUiContentContrastFocusColor;
+	pointer-events: none;
+	left: 2px;
+	top: 2px;
+	z-index: 1;
 }
 
 .sapWCShellBarMenuButton::-moz-focus-inner {
@@ -173,7 +180,7 @@ ui5-shellbar {
 .sapWCShellBarSizeS {
 	padding: 0.25rem 1rem;
 
-	& .sapWCShellBarBeginIcon {
+	& ::slotted(ui5-icon) {
 		margin-right: 0;
 	}
 
@@ -376,18 +383,8 @@ ui5-shellbar {
 	background: @sapUiShellColor;
 }
 
-.sapWCShellBarBeginIcon {
-	width: 2.25rem;
-	height: 2.25rem;
-	margin-right: 0.5rem;
-	margin-left: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
 span[dir=rtl] {
-	& .sapWCShellBarBeginIcon {
+	& ::slotted(ui5-icon) {
 		margin-left: 0.5rem;
 		margin-right: 0;
 	}
@@ -414,4 +411,35 @@ span[dir=rtl] {
 	& .sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight{
 		margin-right: 0;
 	}
+}
+
+::slotted(ui5-icon) {
+	width: 2.25rem;
+	height: 2.25rem;
+	margin-right: 0.5rem;
+	margin-left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+::slotted(ui5-icon:hover) {
+	background: @sapUiShellHoverBackground;
+}
+
+::slotted(ui5-icon:active) {
+	background: @sapUiShellActiveBackground;
+	color: @sapUiShellActiveTextColor;
+}
+
+::slotted(ui5-icon:focus)::after {
+	content: "";
+	position: absolute;
+	width: ~"calc(100% - 0.375rem)";
+	height: ~"calc(100% - 0.375rem)";
+	border: 1px dotted @sapUiContentContrastFocusColor;
+	pointer-events: none;
+	left: 2px;
+	top: 2px;
+	z-index: 1;
 }

packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

@@ -117,7 +117,7 @@
 		show-co-pilot
 	>
 
-		<ui5-icon src="nav-back" data-ui5-slot="icon"></ui5-icon>
+		<ui5-icon src="nav-back" data-ui5-slot="icon" tabindex="0"></ui5-icon>
 
 		<ui5-shellbar-item data-ui5-slot="items" id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
 		<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>