refactor(ui5-shellbar): rename icon slot to startButton (#901)

FIXES: #884 BREAKING CHANGE: icon aggregation has been renamed to startButton. It accepts a ui5-button and overstyles it to match ShellBar's styling.
SAP · Oct 30, 2019 · 5ca3280 · 5ca3280
1 parent 140ac0b
commit 5ca3280
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 58 deletions.
diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
@@ -4,8 +4,8 @@
 >
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
 
-		{{#if icon.length}}
-			<slot name="icon"></slot>
+		{{#if startButton.length}}
+				<slot name="startButton"></slot>
 		{{/if}}
 
 		{{#unless interactiveLogo}}

diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js
@@ -183,13 +183,15 @@ const metadata = {
 		},
 
 		/**
-		 * Defines a <code>ui5-icon</code> in the bar that will be placed in the beginning.
+		 * Defines a <code>ui5-button</code> in the bar that will be placed in the beginning.
+		 * We encourage this slot to be used for a back or home button.
+		 * It gets overstyled to match ShellBar's styling.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
-		icon: {
+		startButton: {
 			type: HTMLElement,
 		},
 	},

diff --git a/packages/main/src/themes/ShellBar.css b/packages/main/src/themes/ShellBar.css
@@ -18,24 +18,8 @@
 
 .ui5-shellbar-menu-button,
 .ui5-shellbar-button,
-.ui5-shellbar-image-button {
-	height: 2.25rem;
-	padding: 0;
-	margin-left: 0.5rem;
-	border: none;
-	outline: none;
-	background: transparent;
-	color: var(--sapUiShellTextColor);
-	box-sizing: border-box;
-	cursor: pointer;
-	border-radius: 0.25rem;
-	position: relative;
-	font-size: 0.75rem;
-	font-weight: bold;
-}
-
-/* IE does not apply all selectors if separated by comma and 1 is invalid; TODOs - Keep that in sync and recheck after Shady CSS */
-::slotted(ui5-icon) {
+.ui5-shellbar-image-button,
+::slotted(ui5-button[slot="startButton"]) {
 	height: 2.25rem;
 	padding: 0;
 	margin-left: 0.5rem;
@@ -51,19 +35,22 @@
 	font-weight: bold;
 }
 
+::slotted(ui5-button[slot="startButton"]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
 .ui5-shellbar-image-button:hover {
 	background: var(--sapUiShellHoverBackground);
 }
 
+::slotted(ui5-button[slot="startButton"][active]),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
 .ui5-shellbar-button:active,
 .ui5-shellbar-image-button:active {
 	background: var(--sapUiShellActiveBackground);
 	color: var(--sapUiShellActiveTextColor);
 }
 
+::slotted(ui5-button[slot="startButton"][focused])::after,
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus::after,
 .ui5-shellbar-button:focus::after,
 .ui5-shellbar-image-button:focus::after {
@@ -162,7 +149,7 @@
 	padding: 0.25rem 1rem;
 }
 
-:host([breakpoint-size="S"]) ::slotted(ui5-icon) {
+:host([breakpoint-size="S"]) ::slotted(ui5-button[slot="startButton"]) {
 	margin-right: 0;
 }
 
@@ -395,7 +382,7 @@
 	fill: var(--sapUiShellColor);
 }
 
-:host [dir="rtl"] ::slotted(ui5-icon) {
+:host [dir="rtl"] ::slotted(ui5-button[slot="startButton"]) {
 	margin-left: 0.5rem;
 	margin-right: 0;
 }
@@ -423,34 +410,9 @@
 	margin-right: 0;
 }
 
-::slotted(ui5-icon) {
-	width: .75rem;
-	height: .75rem;
+::slotted(ui5-button[slot="startButton"]) {
 	margin-right: 0.5rem;
 	margin-left: 0;
-	padding: .75rem;
 	justify-content: center;
 	align-items: center;
-	box-sizing: content-box;
-}
-
-::slotted(ui5-icon:hover) {
-	background: var(--sapUiShellHoverBackground);
-}
-
-::slotted(ui5-icon:active) {
-	background: var(--sapUiShellActiveBackground);
-	color: var(--sapUiShellActiveTextColor);
-}
-
-::slotted(ui5-icon:focus)::after {
-	content: "";
-	position: absolute;
-	width: calc(100% - 0.375rem);
-	height: calc(100% - 0.375rem);
-	border: 1px dotted var(--sapUiContentContrastFocusColor);
-	pointer-events: none;
-	left: 2px;
-	top: 2px;
-	z-index: 1;
-}
+}
diff --git a/packages/main/test/pages/ShellBar.html b/packages/main/test/pages/ShellBar.html
@@ -118,7 +118,7 @@
 		show-co-pilot
 	>
 
-		<ui5-icon src="sap-icon://nav-back" slot="icon" tabindex="0"></ui5-icon>
+		<ui5-button icon="sap-icon://nav-back" slot="startButton" id="start-button"></ui5-button>
 
 		<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
 		<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>

diff --git a/packages/main/test/samples/ShellBar.sample.html b/packages/main/test/samples/ShellBar.sample.html
@@ -61,7 +61,7 @@ <h3>ShellBar</h3>
 	show-co-pilot
 >
 
-	<ui5-icon src="sap-icon://nav-back" slot="icon"></ui5-icon>
+	<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
 
 	<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
 	<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
@@ -113,7 +113,7 @@ <h3>ShellBar</h3>
 	show-co-pilot
 >
 
-	<ui5-icon src="nav-back" slot="icon"></ui5-icon>
+	<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
 
 	<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
 	<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>

diff --git a/packages/main/test/specs/ShellBar.spec.js b/packages/main/test/specs/ShellBar.spec.js
@@ -11,7 +11,7 @@ describe("Component Behaviour", () => {
 
 			const shellbar = browser.$("#shellbar");
 			const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
-			const backButton = browser.$("#shellbar ui5-icon");
+			const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
 			const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
 			const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
 			const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -48,7 +48,7 @@ describe("Component Behaviour", () => {
 
 			const shellbar = browser.$("#shellbar");			
 			const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
-			const backButton = browser.$("#shellbar ui5-icon");
+			const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
 			const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
 			const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
 			const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -77,7 +77,7 @@ describe("Component Behaviour", () => {
 			const shellbar = browser.$("#shellbar");
 			const shellbarWrapper = browser.$("#shellbar").shadow$("div");
 			const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
-			const backButton = browser.$("#shellbar ui5-icon");
+			const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
 			const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
 			const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
 			const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
@@ -159,7 +159,7 @@ describe("Component Behaviour", () => {
 
 			const shellbar = browser.$("#shellbar");
 			const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
-			const backButton = browser.$("#shellbar ui5-icon");
+			const backButton = browser.$("#shellbar ui5-button[slot='startButton'");
 			const primaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
 			const secondaryTitle = browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
 			const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");