refactor(ui5-panel): styles cleanup

packages/main/docs/themes/css-vars.json

@@ -10,15 +10,5 @@
 			"name": "--ui5-listitem-background-color",
 			"description": "Defines the<code>ui5-li</code> background color"
 		}
-	],
-	"Panel": [
-		{
-			"name": "--ui5-panel-background-color",
-			"description": "Defines the <code>ui5-panel</code> background color"
-		},
-		{
-			"name": "--ui5-panel-bottom-border-color",
-			"description": "Defines the <code>ui5-panel</code> bottom border color"
-		}
 	]
 }

packages/main/src/Button.hbs

@@ -9,6 +9,7 @@
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}
 		@mousedown={{_onmousedown}}
+		tabindex={{tabIndexValue}}
 	>
 		{{#if icon}}
 			<ui5-icon
@@ -17,13 +18,11 @@
 			></ui5-icon>
 		{{/if}}
 
-		{{#if textContent}}
-			<span id="{{_id}}-content" class="ui5-button-text">
-				<bdi>
-					<slot></slot>
-				</bdi>
-			</span>
-		{{/if}}
+		<span id="{{_id}}-content" class="ui5-button-text">
+			<bdi>
+				<slot></slot>
+			</bdi>
+		</span>
 
 		{{#if hasButtonType}}
 			<span class="ui5-hidden-text">{{buttonTypeText}}</span>

packages/main/src/Button.js

@@ -125,6 +125,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Indicates if the element if focusable
+		 * @private
+		 */
+		nonFocusable: {
+			type: Boolean,
+		},
+
 		_iconSettings: {
 			type: Object,
 		},
@@ -298,6 +306,10 @@ class Button extends UI5Element {
 		return this.resourceBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
+	get tabIndexValue() {
+		return this.nonFocusable ? "-1" : "0";
+	}
+
 	static async define(...params) {
 		await Promise.all([
 			Icon.define(),

packages/main/src/Panel.hbs

@@ -1,49 +1,46 @@
 <div
 	data-sap-ui-fastnavgroup="true"
-	class="{{classes.main}}"
+	class="ui5-panel-root"
 	role="{{accRole}}"
 >
 	<!-- header: either header or h1 with header text -->
-	{{#if fixed}}
-		{{> header}}
-	{{else}}
-		<header
-			@click="{{_headerClick}}"
-			@keydown="{{_headerKeyDown}}"
-			@keyup="{{_headerKeyUp}}"
-			class="{{classes.header}}"
-			tabindex="{{headerTabIndex}}"
+	<header
+		@click="{{_headerClick}}"
+		@keydown="{{_headerKeyDown}}"
+		@keyup="{{_headerKeyUp}}"
+		class="ui5-panel-header"
+		tabindex="{{headerTabIndex}}"
+	>
+		<div
+			class="ui5-panel-header-button-root"
 		>
-			<div class="sapMPanelIconOuter"
-				tabindex="{{iconTabIndex}}"
+			<ui5-button
+				design="Transparent"
+				class="ui5-panel-header-button"
 				aria-expanded="{{expanded}}"
-				aria-labelledby="{{ariaLabelledBy}}"
-				title="{{_icon.title}}"
-				>
+				?non-focusable="{{nonFocusableButton}}"
+				@click="{{_toggleButtonClick}}"
+			>
+
 				<ui5-icon
-					class="{{classes.icon}}"
-					src="{{_icon.src}}"
-				></ui5-icon>
+					src="sap-icon://navigation-right-arrow"
+					class="ui5-panel-header-button-icon"
+				>
+				</ui5-icon>
+			</ui5-button>
+		</div>
+
+		{{#if _hasHeader}}
+			<slot name="header"></slot>
+		{{else}}
+			<div class="ui5-panel-header-content">
+				<h1 class="ui5-panel-header-title">{{headerText}}</h1>
 			</div>
-			{{> header}}
-		</header>
-	{{/if}}
+		{{/if}}
+	</header>
 
 	<!-- content area -->
-	<div class="{{classes.content}}" tabindex="-1" style="{{styles.content}}">
+	<div class="ui5-panel-content" tabindex="-1" style="{{styles.content}}">
 		<slot></slot>
 	</div>
-</div>
-
-{{#*inline "header"}}
-	{{#if header.length}}
-		<div class="sapMPanelHdrToolbar">
-			<slot name="header"></slot>
-		</div>
-	{{/if}}
-	{{#if shouldRenderH1}}
-		<h1 id="{{_id}}-header" class="sapMPanelHdr">
-			{{headerText}}
-		</h1>
-	{{/if}}
-{{/inline}}
+</div>

packages/main/src/Panel.js

@@ -4,7 +4,6 @@ import { getIconURI } from "@ui5/webcomponents-base/dist/IconPool.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import "@ui5/webcomponents-base/dist/icons/navigation-right-arrow.js";
 import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
 import Icon from "./Icon.js";
@@ -100,6 +99,13 @@ const metadata = {
 			defaultValue: PanelAccessibleRole.Form,
 		},
 
+		/**
+		 * @private
+		 */
+		_hasHeader: {
+			type: Boolean,
+		},
+
 		_icon: {
 			type: Object,
 		},
@@ -213,12 +219,13 @@ class Panel extends UI5Element {
 		}
 
 		this._icon.title = this.resourceBundle.getText(PANEL_ICON);
+		this._hasHeader = !!this.header.length;
 	}
 
 	shouldToggle(node) {
 		const customContent = this.header.length;
 		if (customContent) {
-			return node.classList.contains("sapMPanelIconOuter");
+			return node.classList.contains("ui5-panel-header-button");
 		}
 		return true;
 	}
@@ -231,11 +238,18 @@ class Panel extends UI5Element {
 		this._toggleOpen();
 	}
 
+	_toggleButtonClick(event) {
+		if (event.x === 0 && event.y === 0) {
+			event.stopImmediatePropagation();
+		}
+	}
+
 	_headerKeyDown(event) {
 		if (!this.shouldToggle(event.target)) {
 			return;
 		}
 
+
 		if (isEnter(event)) {
 			this._toggleOpen();
 		}
@@ -263,7 +277,7 @@ class Panel extends UI5Element {
 		this.collapsed = !this.collapsed;
 		this._animationRunning = true;
 
-		const elements = this.getDomRef().querySelectorAll(".sapMPanelExpandablePart");
+		const elements = this.getDomRef().querySelectorAll(".ui5-panel-content");
 		const animations = [];
 
 		[].forEach.call(elements, oElement => {
@@ -302,42 +316,17 @@ class Panel extends UI5Element {
 	}
 
 	get headerTabIndex() {
-		return !this.header.length ? "0" : undefined;
+		return (this.header.length || this.fixed) ? "-1" : "0";
 	}
 
-	get iconTabIndex() {
-		return this.header.length ? "0" : undefined;
+	get nonFocusableButton() {
+		return !this.header.length;
 	}
 
 	get shouldRenderH1() {
 		return !this.header.length && (this.headerText || !this.fixed);
 	}
 
-	get classes() {
-		return {
-			main: {
-				sapMPanel: true,
-				sapUiSizeCompact: getCompactSize(),
-			},
-			header: {
-				sapMPanelWrappingDivTb: this.header.length,
-				sapMPanelWrappingDivTbExpanded: this.header.length && this.collapsed,
-				sapMPanelWrappingDiv: !this.header.length,
-				sapMPanelWrappingDivClickable: !this.header.length,
-				sapMPanelWrappingDivExpanded: !this.header.length && !this.collapsed,
-			},
-			icon: {
-				sapMPanelIconExpanded: !this.collapsed,
-				sapMPanelIcon: true,
-			},
-			content: {
-				sapMPanelContent: true,
-				sapMPanelExpandablePart: !this.fixed,
-				[`sapMPanelBG${this.backgroundDesign}`]: true,
-			},
-		};
-	}
-
 	get styles() {
 		return {
 			content: {

packages/main/src/themes/Button.css

@@ -49,6 +49,7 @@
 	min-width: inherit;
 	cursor: inherit;
 	height: 100%;
+	width: 100%;
 	font-weight: normal;
 	box-sizing: border-box;
 	display: flex;
@@ -88,6 +89,10 @@
 	min-width: auto;
 }
 
+:host([icon-only]) .ui5-button-text {
+	display: none;
+}
+
 .ui5-button-text {
 	outline: none;
 	position: relative;
@@ -111,6 +116,12 @@
 	border: 0;
 }
 
+bdi {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
 :host([active]:not([disabled])) {
 	background-image: none;
 	background-color: var(--sapUiButtonActiveBackground);