refactor(ui5-panel): remove ui5-icon from hbs template (#810)

Author: ilhan007

packages/main/src/Panel.hbs

@@ -20,15 +20,9 @@
 				aria-expanded="{{expanded}}"
 				?non-focusable="{{nonFocusableButton}}"
 				@click="{{_toggleButtonClick}}"
-			>
-
-				<ui5-icon
-					src="sap-icon://navigation-right-arrow"
-					class="ui5-panel-header-button-icon"
-					accessible-name="{{toggleIconTitle}}"
-				>
-				</ui5-icon>
-			</ui5-button>
+				icon="sap-icon://navigation-right-arrow"
+				title="{{toggleButtonTitle}}"
+			></ui5-button>
 		</div>
 
 		{{#if _hasHeader}}

packages/main/src/Panel.js

@@ -5,7 +5,6 @@ import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Button from "./Button.js";
-import Icon from "./Icon.js";
 import "./icons/navigation-right-arrow.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
@@ -295,7 +294,7 @@ class Panel extends UI5Element {
 		return target.classList.contains("sapMPanelWrappingDiv");
 	}
 
-	get toggleIconTitle() {
+	get toggleButtonTitle() {
 		return this.i18nBundle.getText(PANEL_ICON);
 	}
 
@@ -335,7 +334,6 @@ class Panel extends UI5Element {
 		await Promise.all([
 			fetchI18nBundle("@ui5/webcomponents"),
 			Button.define(),
-			Icon.define(),
 		]);
 
 		super.define(...params);

packages/main/src/themes/Panel.css

@@ -38,17 +38,9 @@
 }
 
 .ui5-panel-header-button {
-	min-width: 2rem;
-	width: 2rem;
-	height: 2rem;
 	transition: transform 0.4s ease-out;
 }
 
-.ui5-panel-header-button-icon {
-	pointer-events: none;
-	color: inherit;
-}
-
 :host(:not([_has-header])) .ui5-panel-header-button {
 	pointer-events: none;
 }
@@ -82,6 +74,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	flex-shrink: 0;
 	width: var(--_ui5_panel_button_root_width);
 	margin-right: .25rem;
 }

packages/main/test/sap/ui/webcomponents/main/qunit/Panel.qunit.js

@@ -40,7 +40,7 @@ TestHelper.ready(function () {
 			var panel = this.getPanelRoot();
 
 			assert.ok(panel.querySelector(".ui5-panel-header-content"), "header wrapping div exists");
-			assert.ok(panel.querySelector("ui5-icon"), "expandable icon exists");
+			assert.ok(panel.querySelector("ui5-button"), "expandable icon exists");
 		});
 
 		QUnit.test("The default 'accessibleRole' is 'Form'", function (assert) {