diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 5c4138bc566e..28b322d80e29 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/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]; } diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 017a6ac9190a..2ea8677eb894 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/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, } @@ -65,17 +64,11 @@ type SegmentedButtonSelectionChangeEventDetail = { }) /** * Fired when the selected item changes. - * @param {ISegmentedButtonItem} selectedItem the pressed item. * @param {Array} selectedItems an array of selected items. * @public */ @event("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("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 diff --git a/packages/main/src/types/SegmentedButtonMode.ts b/packages/main/src/types/SegmentedButtonSelectionMode.ts similarity index 56% rename from packages/main/src/types/SegmentedButtonMode.ts rename to packages/main/src/types/SegmentedButtonSelectionMode.ts index a4caa2d17777..78b24a99a65f 100644 --- a/packages/main/src/types/SegmentedButtonMode.ts +++ b/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; diff --git a/packages/main/test/pages/RTL.html b/packages/main/test/pages/RTL.html index e98eb16ea8f0..14b7b34183f5 100644 --- a/packages/main/test/pages/RTL.html +++ b/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"; diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 5f435c2769ff..c9b44803686d 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -97,7 +97,7 @@

Segmentedbutton example

Example with 4 items

- + Item Item Click @@ -193,7 +193,7 @@

Programatical change test

}); progSetButton3.addEventListener("click", function() { - segButtonProg.selectedItem.pressed = true; + segButtonProg.selectedItems[0].pressed = true; }); progSetButton4.addEventListener("click", function() { diff --git a/packages/main/test/pages/Tokenizer.html b/packages/main/test/pages/Tokenizer.html index 738f522c7448..f3fb9c0a35a7 100644 --- a/packages/main/test/pages/Tokenizer.html +++ b/packages/main/test/pages/Tokenizer.html @@ -81,7 +81,7 @@ diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts index 84456c5e00a0..87937c903746 100644 --- a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts +++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts @@ -16,7 +16,7 @@ export default { const Template: UI5StoryArgs = (args) => html` ${unsafeHTML(args.default)} `;