refactor(ui5-segmented-button): rename mode to selectionMode

packages/fiori/src/ViewSettingsDialog.ts

@@ -520,7 +520,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	_handleModeChange(e: CustomEvent) { // use SegmentedButton event when done
-		const mode: ViewSettingsDialogMode = e.detail.selectedItem.getAttribute("mode");
+		const mode: ViewSettingsDialogMode = e.detail.selectedItems[0].getAttribute("mode");
 		this._currentMode = ViewSettingsDialogMode[mode];
 	}
 

packages/main/src/SegmentedButton.ts

@@ -14,7 +14,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js";
 import SegmentedButtonItem from "./SegmentedButtonItem.js";
-import SegmentedButtonMode from "./types/SegmentedButtonMode.js";
+import SegmentedButtonSelectionMode from "./types/SegmentedButtonSelectionMode.js";
 
 // Template
 import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js";
@@ -32,7 +32,6 @@ interface ISegmentedButtonItem extends UI5Element, ITabbable {
 }
 
 type SegmentedButtonSelectionChangeEventDetail = {
-	selectedItem: ISegmentedButtonItem,
 	selectedItems: Array<ISegmentedButtonItem>,
 }
 
@@ -65,17 +64,11 @@ type SegmentedButtonSelectionChangeEventDetail = {
 })
 /**
  * Fired when the selected item changes.
- * @param {ISegmentedButtonItem} selectedItem the pressed item.
  * @param {Array<ISegmentedButtonItem>} selectedItems an array of selected items.
  * @public
  */
 @event<SegmentedButtonSelectionChangeEventDetail>("selection-change", {
 	detail: {
-		/**
-		 * @public
-		 * @deprecated deprecated since 1.14.0 and will be removed in the next major release, use the `selectedItems` parameter instead.
-		 */
-		selectedItem: { type: HTMLElement },
 		/**
 		 * @public
 		 * @since 1.14.0
@@ -96,12 +89,12 @@ class SegmentedButton extends UI5Element {
 
 	/**
 	 * Defines the component selection mode.
-	 * @default "SingleSelect"
+	 * @default "Single"
 	 * @public
 	 * @since 1.14.0
 	 */
-	@property({ type: SegmentedButtonMode, defaultValue: SegmentedButtonMode.SingleSelect })
-	mode!: `${SegmentedButtonMode}`;
+	@property({ type: SegmentedButtonSelectionMode, defaultValue: SegmentedButtonSelectionMode.Single })
+	selectionMode!: `${SegmentedButtonSelectionMode}`;
 
 	/**
 	 * Defines the items of `ui5-segmented-button`.
@@ -153,8 +146,8 @@ class SegmentedButton extends UI5Element {
 			return;
 		}
 
-		switch (this.mode) {
-		case SegmentedButtonMode.SingleSelect: {
+		switch (this.selectionMode) {
+		case SegmentedButtonSelectionMode.Single: {
 			const selectedItems = this.selectedItems;
 			const selectedItemIndex = this._selectedItem ? selectedItems.indexOf(this._selectedItem) : -1;
 			if (this._selectedItem && selectedItems.length > 1) {
@@ -176,8 +169,8 @@ class SegmentedButton extends UI5Element {
 			return;
 		}
 
-		switch (this.mode) {
-		case SegmentedButtonMode.MultiSelect:
+		switch (this.selectionMode) {
+		case SegmentedButtonSelectionMode.Multiple:
 			if (e instanceof KeyboardEvent) {
 				target.pressed = !target.pressed;
 			}
@@ -187,7 +180,6 @@ class SegmentedButton extends UI5Element {
 		}
 
 		this.fireEvent<SegmentedButtonSelectionChangeEventDetail>("selection-change", {
-			selectedItem: target,
 			selectedItems: this.selectedItems,
 		});
 
@@ -250,17 +242,6 @@ class SegmentedButton extends UI5Element {
 		}
 	}
 
-	/**
-	 * Currently selected item.
-	 * @deprecated since 1.14.0. This method will be removed in the next major release.
-	 * Please use the `selectedItems` property instead.
-	 * @public
-	 * @default undefined
-	 */
-	get selectedItem(): ISegmentedButtonItem | undefined {
-		return this._selectedItem;
-	}
-
 	/**
 	 * Returns an array of the currently selected items.
 	 * @since 1.14.0

packages/main/src/types/SegmentedButtonMode.ts → packages/main/src/types/SegmentedButtonSelectionMode.ts

@@ -1,19 +1,19 @@
 /**
- * Different SegmentedButton modes.
+ * Different SegmentedButton selection modes.
  * @public
  */
-enum SegmentedButtonMode {
+enum SegmentedButtonSelectionMode {
 	/**
 	 * There is always one selected. Selecting one deselects the previous one.
 	 * @public
 	 */
-	SingleSelect = "SingleSelect",
+	Single = "Single",
 
 	/**
 	 * Multiple items can be selected at a time. All items can be deselected.
 	 * @public
 	 */
-	MultiSelect = "MultiSelect",
+	Multiple = "Multiple",
 }
 
-export default SegmentedButtonMode;
+export default SegmentedButtonSelectionMode;

packages/main/test/pages/RTL.html

@@ -88,7 +88,7 @@
 		});
 
 		tb.addEventListener("ui5-selection-change", function(e) {
-			var lang = e.detail.selectedItem.textContent.toLowerCase();
+			var lang = e.detail.selectedItems[0].textContent.toLowerCase();
 
 			setLanguage(lang).then(function() {
 				const rtlLang = lang === "he" || lang === "ar";

packages/main/test/pages/SegmentedButton.html

@@ -97,7 +97,7 @@ <h2>Segmentedbutton example</h2>
 				<section>
 					<h1>Example with 4 items</h1>
 
-					<ui5-segmented-button id="segButtonMulti" mode="MultiSelect">
+					<ui5-segmented-button id="segButtonMulti" selection-mode="Multiple">
 						<ui5-segmented-button-item>Item</ui5-segmented-button-item>
 						<ui5-segmented-button-item>Item</ui5-segmented-button-item>
 						<ui5-segmented-button-item>Click</ui5-segmented-button-item>
@@ -193,7 +193,7 @@ <h3>Programatical change test</h3>
 		});
 
 		progSetButton3.addEventListener("click", function() {
-			segButtonProg.selectedItem.pressed = true;
+			segButtonProg.selectedItems[0].pressed = true;
 		});
 
 		progSetButton4.addEventListener("click", function() {

packages/main/test/pages/Tokenizer.html

@@ -81,7 +81,7 @@
 	<script>
 
 		document.getElementById("theme-switch").addEventListener("ui5-selection-change", event => {
-			window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.detail.selectedItem.getAttribute("data-ui5-theme-name"));
+			window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.detail.selectedItems[0].getAttribute("data-ui5-theme-name"));
 		});
 	</script>
 </body>

packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts

@@ -16,7 +16,7 @@ export default {
 
 const Template: UI5StoryArgs<SegmentedButton, StoryArgsSlots> = (args) => html`<ui5-segmented-button
 	accessible-name="${ifDefined(args.accessibleName)}"
-	mode="${ifDefined(args.mode)}"
+	selection-mode="${ifDefined(args.selectionMode)}"
 >
 	${unsafeHTML(args.default)}
 </ui5-segmented-button>`;