refactor(ui5-wizard): selection-change renamed to step-change

We have decided to rename the selection-change event in order for its name to better represent its origins.
In relation to #3107.

BREAKING_CHANGE: The “selection-change” event has been renamed to "step-change". In addition, the event param "selectedStep" has been renamed to "step" and the event param "previouslySelectedStep" has been renamed to "previousStep".

Author: hristop

packages/fiori/src/Wizard.js

@@ -127,19 +127,19 @@ const metadata = {
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
-		 * Fired when the step selection is changed by user interaction - either with scrolling,
+		 * Fired when the step is changed by user interaction - either with scrolling,
 		 * or by clicking on the steps within the component header.
 		 *
-		 * @event sap.ui.webcomponents.fiori.Wizard#selection-change
-		 * @param {HTMLElement} selectedStep the newly selected step
-		 * @param {HTMLElement} previouslySelectedStep the previously selected step
-		 * @param {Boolean} changeWithClick the selection changed due to user's click on step within the navigation
+		 * @event sap.ui.webcomponents.fiori.Wizard#step-change
+		 * @param {HTMLElement} step the new step
+		 * @param {HTMLElement} previousStep the previous step
+		 * @param {Boolean} changeWithClick the step change occurs due to user's click on step within the navigation
 		 * @public
 		 */
-		"selection-change": {
+		"step-change": {
 			detail: {
-				selectedStep: { type: HTMLElement },
-				previouslySelectedStep: { type: HTMLElement },
+				step: { type: HTMLElement },
+				previousStep: { type: HTMLElement },
 				changeWithClick: { Boolean },
 			},
 		},
@@ -637,7 +637,7 @@ class Wizard extends UI5Element {
 		}
 
 		// If the calculated index is in range,
-		// change selection and fire "selection-change".
+		// change selection and fire "step-change".
 		if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
 			const stepToSelect = this.slottedSteps[newlySelectedIndex];
 
@@ -668,7 +668,7 @@ class Wizard extends UI5Element {
 		}
 
 		if (bExpanded || (!bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1))) {
-			// Change selection and fire "selection-change".
+			// Change selection and fire "step-change".
 			this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
 		}
 	}
@@ -965,9 +965,9 @@ class Wizard extends UI5Element {
 			selectedStep.selected = false;
 			stepToSelect.selected = true;
 
-			this.fireEvent("selection-change", {
-				selectedStep: stepToSelect,
-				previouslySelectedStep: selectedStep,
+			this.fireEvent("step-change", {
+				step: stepToSelect,
+				previousStep: selectedStep,
 				changeWithClick,
 			});
 

packages/fiori/test/pages/Wizard.html

@@ -566,36 +566,36 @@ <h2>Wizard non-standard 3</h2>
 			<ui5-wizard-step icon="sap-icon://home" heading="Product type">
 				<div style="display: flex; min-height: 200px; flex-direction: column;">
 					<ui5-title>1. Product Type</ui5-title><br>
-	
+
 					<ui5-messagestrip>
 						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
 					</ui5-messagestrip><br>
-	
+
 					<ui5-label wrap>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
 					</ui5-label>
 				</div>
-	
+
 				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
 			</ui5-wizard-step>
-	
+
 			<ui5-wizard-step heading="Product Information" selected>
 				<div style="display: flex;flex-direction: column">
 					<ui5-title>2. Product Information</ui5-title><br>
 					<ui5-label wrap>
 						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
 					</ui5-label>
-	
+
 					<div style="display: flex; flex-direction: column;">
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Name</ui5-label>
 							<ui5-input placeholder="product name..."></ui5-input>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
 							<ui5-label>Weight</ui5-label>
 							<ui5-input value="3.65"></ui5-input>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
 							<ui5-label>Manifacturer</ui5-label>
 							<ui5-select>
@@ -604,34 +604,34 @@ <h2>Wizard non-standard 3</h2>
 								<ui5-option>Huawei</ui5-option>
 							</ui5-select>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
 							<ui5-label>5 years guarantee included</ui5-label>
 							<ui5-switch id="sw2"></ui5-switch>
 						</div>
 					</div>
 				</div>
-	
+
 				<ui5-button id="toStep32" design="Emphasized" hidden>Step 3</ui5-button>
 			</ui5-wizard-step>
-	
+
 			<ui5-wizard-step heading="Options" disabled>
 				<div style="display: flex; flex-direction: column;">
 					<ui5-title>3. Options</ui5-title><br>
-	
+
 					<ui5-label wrap>
 						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
 					</ui5-label>
 					<ui5-messagestrip>
 						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
 					</ui5-messagestrip><br>
-	
+
 					<div style="display: flex; flex-direction: column;">
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Manifacture date</ui5-label>
 							<ui5-date-picker></ui5-date-picker>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Availability</ui5-label>
 							<ui5-segmentedbutton>
@@ -641,7 +641,7 @@ <h2>Wizard non-standard 3</h2>
 								<ui5-togglebutton>Out of stock</ui5-togglebutton>
 							</ui5-segmentedbutton>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Size</ui5-label>
 							<ui5-segmentedbutton id="sb2">
@@ -652,10 +652,10 @@ <h2>Wizard non-standard 3</h2>
 						</div>
 					</div>
 				</div>
-	
+
 				<ui5-button id="toStep42" design="Emphasized" hidden>Step 4</ui5-button>
 			</ui5-wizard-step>
-	
+
 			<ui5-wizard-step heading="Pricing" disabled>
 				<div style="display: flex; flex-direction: column;">
 					<ui5-title>4. Pricing</ui5-title><br>
@@ -665,25 +665,25 @@ <h2>Wizard non-standard 3</h2>
 					<ui5-messagestrip>
 						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
 					</ui5-messagestrip><br>
-	
+
 					<div style="display: flex; flex-direction: column;">
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Price</ui5-label>
 							<ui5-input placeholder="product price..."></ui5-input>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
 							<ui5-label>Quantity</ui5-label>
 							<ui5-input placeholder="product quantity..."></ui5-input>
 						</div>
-	
+
 						<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
 							<ui5-label>Vat included</ui5-label>
 							<ui5-switch checked></ui5-switch>
 						</div>
 					</div>
 				</div>
-	
+
 				<ui5-button id="finalize2" design="Emphasized">Finalize</ui5-button>
 			</ui5-wizard-step>
 		</ui5-wizard>
@@ -692,15 +692,15 @@ <h2>Wizard non-standard 3</h2>
 	<script>
 		var wiz = document.getElementById("wiz");
 
-		wiz.addEventListener("selection-change", function () {
-			console.log(event.detail.selectedStep);
+		wiz.addEventListener("step-change", function () {
+			console.log(event.detail.step);
 		});
 
 		sw.addEventListener("change", function () {
 			toStep3.removeAttribute("hidden");
 		});
 
-		sb.addEventListener("selection-change", function () {
+		sb.addEventListener("step-change", function () {
 			toStep4.removeAttribute("hidden");
 		});
 
@@ -733,15 +733,15 @@ <h2>Wizard non-standard 3</h2>
 			dialog.open();
 		});
 
-		wiz2.addEventListener("selection-change", function () {
-			console.log(event.detail.selectedStep);
+		wiz2.addEventListener("step-change", function () {
+			console.log(event.detail.step);
 		});
 
 		sw2.addEventListener("change", function () {
 			toStep32.removeAttribute("hidden");
 		});
 
-		sb2.addEventListener("selection-change", function () {
+		sb2.addEventListener("step-change", function () {
 			toStep42.removeAttribute("hidden");
 		});
 

packages/fiori/test/pages/Wizard_test.html

@@ -41,7 +41,7 @@
 					<ui5-label wrap>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
 					</ui5-label>
 
-					<ui5-input id="inpSelectionChangeCounter"></ui5-input>
+					<ui5-input id="inpStepChangeCounter"></ui5-input>
 					<ui5-button id="btnOpenDialog" style="width: 150px; align-self: flex-end;">Open Wizard Dialog</ui5-button>
 
 					<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
@@ -52,7 +52,7 @@
 							<ui5-togglebutton threshold="1">1</ui5-togglebutton>
 						</ui5-segmentedbutton>
 					</div>
-					
+
 				</div>
 
 				<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
@@ -65,7 +65,7 @@
 						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
 					</ui5-label>
 
-					<ui5-input id="inpSelectionChangeCause" placeholder="step changed via click"></ui5-input>
+					<ui5-input id="inpStepChangeCause" placeholder="step changed via click"></ui5-input>
 
 					<div style="display: flex; flex-direction: column;">
 						<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
@@ -140,7 +140,7 @@
 				</div>
 
 				<span id="scrollMarkerSt3"></span>
-	
+
 				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
 				<ui5-button id="toStep4" design="Emphasized">Step 4</ui5-button>
 			</ui5-wizard-step>
@@ -316,10 +316,10 @@
 		var wiz = document.getElementById("wizTest");
 		var wizInDialog = document.getElementById("wizInDialog");
 		var counter = 0;
-		wiz.addEventListener("ui5-selection-change", function (event) {
-			console.log(event.detail.selectedStep);
-			inpSelectionChangeCounter.value = ++counter;
-			inpSelectionChangeCause.value = event.detail.changeWithClick;
+		wiz.addEventListener("ui5-step-change", function (event) {
+			console.log(event.detail.step);
+			inpStepChangeCounter.value = ++counter;
+			inpStepChangeCause.value = event.detail.changeWithClick;
 		});
 
 		toStep2.addEventListener("click", function () {
@@ -385,7 +385,7 @@
 			dialog.open();
 		});
 
-		setting.addEventListener("selection-change", function (event) {
+		setting.addEventListener("step-change", function (event) {
 			wiz.setAttribute("step-switch-threshold", event.detail.selectedButton.getAttribute("threshold"));
 		});
 	</script>

packages/fiori/test/samples/Wizard.sample.html

@@ -156,15 +156,15 @@ <h3>Wizard</h3>
 	<script>
 		var wiz = document.getElementById("wiz");
 
-		wiz.addEventListener("selection-change", function () {
-			console.log(event.detail.selectedStep);
+		wiz.addEventListener("step-change", function () {
+			console.log(event.detail.step);
 		});
 
 		sw.addEventListener("change", function () {
 			toStep3.removeAttribute("hidden");
 		});
 
-		sb.addEventListener("selection-change", function () {
+		sb.addEventListener("step-change", function () {
 			toStep4.removeAttribute("hidden");
 		});