refactor(ui5-panel): rename the expand event to toggle (#216)

Fire toggle event on expand/collapse instead of expand.

BREAKING CHANGE: the expand event is removed, use the toggle event instead.

Author: ilhan007

packages/main/src/Panel.js

@@ -140,7 +140,7 @@ const metadata = {
 		 * @event
 		 * @public
 		 */
-		expand: {},
+		toggle: {},
 	},
 };
 
@@ -163,8 +163,11 @@ const metadata = {
  * A panel consists of a title bar with a header text or custom header.
  * <br>
  * The content area can contain an arbitrary set of controls.
- * The header can contain a title with text and icons, buttons, and a
- * collapse icon, which allows to show/hide the content area.
+ * The header is clickable and can be used to toggle between the expanded and collapsed state.
+ * It includes an icon which rotates depending on the state.
+ * <br>
+ * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+ * <br><b>Note:</b> the custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
  *
  * <h3>Responsive Behavior</h3>
  * <ul>
@@ -279,14 +282,10 @@ class Panel extends WebComponent {
 		Promise.all(animations).then(_ => {
 			this._animationRunning = false;
 			this._contentExpanded = !this.collapsed;
-			this._fireExpandEvent();
+			this.fireEvent("toggle");
 		});
 	}
 
-	_fireExpandEvent() {
-		this.fireEvent("expand", {});
-	}
-
 	_headerOnTarget(target) {
 		return target.classList.contains("sapMPanelWrappingDiv");
 	}

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

@@ -27,13 +27,12 @@
 
 	<script>
 		document.addEventListener("DOMContentLoaded", function () {
-			panel1.addEventListener("expand", function (event) {
+			panel1.addEventListener("toggle", function (event) {
 				console.log(event);
-				event.target.headerText = event.detail.expand ? "Click to collapse!" : "Click to expand!";
+				event.target.headerText = event.target.collapsed ? "Click to expand!" : "Click to collapse!";
 				field1.value = parseInt(field1.value) + 1;
 			});
-			panel2.addEventListener("expand", function (event) {
-				event.target.headerText = event.detail.expand ? "Click to collapse!" : "Click to expand!";
+			panel2.addEventListener("toggle", function (event) {
 				field2.value = parseInt(field2.value) + 1;
 			});
 

packages/main/test/specs/Panel.spec.js

@@ -3,7 +3,7 @@ const assert = require("assert");
 describe("Panel general interaction", () => {
 	browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/Panel.html");
 
-	it("tests expand event upon header click", () => {
+	it("tests toggle event upon header click", () => {
 		const header = browser.findElementDeep("#panel1 >>> .sapMPanelWrappingDiv");
 		const field = browser.$("#field1");
 
@@ -19,7 +19,7 @@ describe("Panel general interaction", () => {
 		assert.strictEqual(field.getProperty("value"), "3", "Press should be called 3 times");
 	});
 
-	it("tests expand event upon icon click with custom header", () => {
+	it("tests toggle event upon icon click with custom header", () => {
 		const icon = browser.findElementDeep("#panel2 >>> ui5-icon");
 		const field = browser.$("#field2");