refactor(ui5-segmented-button-item): implement segmented button item independently from button

packages/fiori/src/ViewSettingsDialog.hbs

@@ -34,12 +34,12 @@
 					<div class="ui5-vsd-sub-header">
 						<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
 								<ui5-segmented-button-item
-									?pressed="{{isModeSort}}"
+									?selected="{{isModeSort}}"
 									icon="sort"
 									mode="Sort"
 								></ui5-segmented-button-item>
 								<ui5-segmented-button-item
-									?pressed="{{isModeFilter}}"
+									?selected="{{isModeFilter}}"
 									icon="filter"
 									mode="Filter"
 								></ui5-segmented-button-item>

packages/main/src/SegmentedButton.ts

@@ -28,7 +28,7 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
  */
 interface ISegmentedButtonItem extends UI5Element, ITabbable {
 	disabled: boolean,
-	pressed: boolean,
+	selected: boolean,
 }
 
 type SegmentedButtonSelectionChangeEventDetail = {
@@ -44,7 +44,6 @@ type SegmentedButtonSelectionChangeEventDetail = {
  * one of the items, it stays in a pressed state. It automatically resizes the items
  * to fit proportionally within the component. When no width is set, the component uses the available width.
  *
- * **Note:** There can be just one selected `item` at a time.
  *
  * ### ES6 Module Import
  *
@@ -172,7 +171,7 @@ class SegmentedButton extends UI5Element {
 		switch (this.selectionMode) {
 		case SegmentedButtonSelectionMode.Multiple:
 			if (e instanceof KeyboardEvent) {
-				target.pressed = !target.pressed;
+				target.selected = !target.selected;
 			}
 			break;
 		default:
@@ -184,16 +183,15 @@ class SegmentedButton extends UI5Element {
 		});
 
 		this._itemNavigation.setCurrentItem(target);
-		target.focus();
 
 		return this;
 	}
 
 	_applySingleSelection(item: ISegmentedButtonItem) {
 		this.items.forEach(currentItem => {
-			currentItem.pressed = false;
+			currentItem.selected = false;
 		});
-		item.pressed = true;
+		item.selected = true;
 		this._selectedItem = item;
 	}
 
@@ -236,8 +234,8 @@ class SegmentedButton extends UI5Element {
 		// If the component is focused for the first time
 		// focus the selected item if such is present
 		if (this.selectedItems.length) {
-			this.selectedItems[0].focus();
 			this._itemNavigation.setCurrentItem(this.selectedItems[0]);
+			this.selectedItems[0].focus();
 			this.hasPreviouslyFocusedItem = true;
 		}
 	}
@@ -249,7 +247,7 @@ class SegmentedButton extends UI5Element {
 	 * @default []
 	 */
 	get selectedItems(): Array<ISegmentedButtonItem> {
-		return this.items.filter(item => item.pressed);
+		return this.items.filter(item => item.selected);
 	}
 
 	get ariaDescribedBy() {

packages/main/src/SegmentedButtonItem.hbs

@@ -3,39 +3,29 @@
 		aria-roledescription="{{ariaDescription}}"
 		aria-posinset="{{posInSet}}"
 		aria-setsize="{{sizeOfSet}}"
-		aria-selected="{{pressed}}"
-		class="ui5-button-root"
+		aria-selected="{{selected}}"
+		class="ui5-segmented-button-item-root"
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
-	{{> ariaPressed}}
-		@focusout={{_onfocusout}}
-		@focusin={{_onfocusin}}
 		@click={{_onclick}}
-		@mousedown={{_onmousedown}}
-		@mouseup={{_onmouseup}}
-		@keydown={{_onkeydown}}
 		@keyup={{_onkeyup}}
-		@touchstart="{{_ontouchstart}}"
-		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
 		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon
-			class="ui5-button-icon"
+			class="ui5-segmented-button-item-icon"
 			name="{{icon}}"
 			part="icon"
-			?show-tooltip={{showIconTooltip}}
+			?show-tooltip={{isIconOnly}}
 		></ui5-icon>
 	{{/if}}
 
-	<span id="{{_id}}-content" class="ui5-button-text">
+	<span id="{{_id}}-content" class="ui5-segmented-button-item-text">
 		<bdi>
 			<slot></slot>
 		</bdi>
 	</span>
 
 </li>
-
-{{#*inline "ariaPressed"}}{{/inline}}

packages/main/src/SegmentedButtonItem.ts

@@ -1,27 +1,31 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+
+import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 import type { ISegmentedButtonItem } from "./SegmentedButton.js";
 import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
 
-import ToggleButton from "./ToggleButton.js";
-import ButtonDesign from "./types/ButtonDesign.js";
-import ButtonType from "./types/ButtonType.js";
-import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
-import { AccessibilityAttributes } from "./Button.js";
+import { IButton } from "./Button.js";
 import Icon from "./Icon.js";
 
-import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-
+import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
 /**
  * @class
  *
  * ### Overview
  *
  * Users can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.
  *
- * Clicking or tapping on a `ui5-segmented-button-item` changes its state to `pressed`.
+ * Clicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.
  * The item returns to its initial state when the user clicks or taps on it again.
  * By applying additional custom CSS-styling classes, apps can give a different style to any
  * `ui5-segmented-button-item`.
@@ -30,63 +34,72 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
  *
  * `import "@ui5/webcomponents/dist/SegmentedButtonItem.js";`
  * @constructor
- * @extends ToggleButton
- * @implements { ISegmentedButtonItem }
+ * @extends UI5Element
+ * @implements { ISegmentedButtonItem, IButton }
  * @public
  */
 @customElement({
 	tag: "ui5-segmented-button-item",
+	renderer: litRender,
 	template: SegmentedButtonItemTemplate,
+	styles: segmentedButtonItemCss,
 	dependencies: [Icon],
 })
-class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem {
+class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButtonItem {
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
-	 * @default "Default"
+	 * Defines whether the component is disabled.
+	 * A disabled component can't be selected or
+	 * focused, and it is not in the tab chain.
+	 * @default false
 	 * @public
 	 */
-	@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
-	declare design: `${ButtonDesign}`;
+	@property({ type: Boolean })
+	disabled!: boolean;
 
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+	 * Determines whether the component is displayed as selected.
 	 * @default false
 	 * @public
 	 */
 	@property({ type: Boolean })
-	declare iconEnd: boolean;
+	selected!: boolean;
 
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
-	 * @default false
+	 * Defines the tooltip of the component.
+	 *
+	 * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+	 * @default ""
 	 * @public
+	 * @since 1.2.0
 	 */
-	@property({ type: Boolean })
-	declare submits: boolean;
+	@property()
+	tooltip!: string;
 
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
-	 * @default {}
+	 * Defines the icon, displayed as graphical element within the component.
+	 * The SAP-icons font provides numerous options.
+	 *
+	 * Example:
+	 * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+	 * @default ""
 	 * @public
 	 */
-    @property({ type: Object })
-    declare accessibilityAttributes: AccessibilityAttributes;
+	@property()
+	icon!: string;
 
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
-	 * @default "Button"
-	 * @public
+	 * Indicates if the element is focusable
+	 * @private
 	 */
-	@property({ type: ButtonType, defaultValue: ButtonType.Button })
-	declare type: `${ButtonType}`;
+	@property({ type: Boolean })
+	nonInteractive!: boolean;
 
 	/**
-	 * **Note:** The property is inherited and not supported. If set, it won't take any effect.
-	 * @default "Button"
-	 * @public
+	 * Defines the tabIndex of the component.
+	 * @private
 	 */
-	@property({ type: ButtonAccessibleRole, defaultValue: ButtonAccessibleRole.Button })
-	declare accessibleRole: `${ButtonAccessibleRole}`;
+	@property({ type: String, defaultValue: "0", noAttribute: true })
+	forcedTabIndex!: string;
 
 	/**
 	 * Defines the index of the item inside of the SegmentedButton.
@@ -104,9 +117,66 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem {
 	@property({ validator: Integer, defaultValue: 0 })
 	sizeOfSet!: number;
 
+	/**
+	 * Defines the text of the component.
+	 *
+	 * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 * @public
+	 */
+	@slot({ type: Node, "default": true })
+	text!: Array<Node>;
+
+	static i18nBundle: I18nBundle;
+
 	get ariaDescription() {
 		return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 	}
+
+	constructor() {
+		super();
+	}
+
+	_onclick() {
+		this.selected = !this.selected;
+	}
+
+	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpaceShift(e)) {
+			e.preventDefault();
+		}
+	}
+
+	get isIconOnly() {
+		return !willShowContent(this.text);
+	}
+
+	get tabIndexValue() {
+		const tabindex = this.getAttribute("tabindex");
+
+		if (tabindex) {
+			return tabindex;
+		}
+
+		return this.forcedTabIndex;
+	}
+
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
+	get showIconTooltip() {
+		return this.isIconOnly && !this.tooltip;
+	}
+
+	static async onDefine() {
+		SegmentedButtonItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 SegmentedButtonItem.define();

packages/main/src/TimePickerInternals.ts

@@ -34,7 +34,7 @@ type TimePickerComponentIndexMap = {
 
 type TimeSelectionPeriodProperties = {
 	label: string,
-	pressed: boolean,
+	selected: boolean,
 }
 
 type TimeSelectionChangeEventDetail = {
@@ -421,7 +421,7 @@ class TimePickerInternals extends UI5Element {
 			this.periodsArray.forEach(item => {
 				this._periods.push({
 					"label": item,
-					"pressed": this._period === item,
+					"selected": this._period === item,
 				});
 			});
 		}

packages/main/src/TimeSelectionClocks.hbs

@@ -38,7 +38,7 @@
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item
-				?pressed={{this.pressed}}
+				?selected={{this.selected}}
 			>
 			{{this.label}}
 			</ui5-segmented-button-item>

packages/main/src/TimeSelectionClocks.ts

@@ -212,8 +212,8 @@ class TimeSelectionClocks extends TimePickerInternals {
 			// A/P selects AM/PM segmented button item
 			const buttonAmPm = this._buttonAmPm();
 			if (buttonAmPm) {
-				buttonAmPm.items[0].pressed = isKeyA(evt);
-				buttonAmPm.items[1].pressed = isKeyP(evt);
+				buttonAmPm.items[0].selected = isKeyA(evt);
+				buttonAmPm.items[1].selected = isKeyP(evt);
 				const period = isKeyA(evt) ? buttonAmPm.items[0].textContent : buttonAmPm.items[1].textContent;
 				period && this._calculatePeriodChange(period);
 			}

packages/main/src/TimeSelectionInputs.hbs

@@ -31,7 +31,7 @@
 		>
 		{{#each _periods}}
     		<ui5-segmented-button-item
-				?pressed={{this.pressed}}
+				?selected={{this.selected}}
 			>
 			{{this.label}}
 			</ui5-segmented-button-item>

packages/main/src/themes/SegmentedButton.css

@@ -36,14 +36,14 @@
 	background-color: var(--sapButton_Hover_Background);
 }
 
-::slotted([ui5-segmented-button-item][pressed]),
+::slotted([ui5-segmented-button-item][selected]),
 ::slotted([ui5-segmented-button-item][active]) {
 	border-color: var(--sapButton_Selected_BorderColor);
 	background-color: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-::slotted([ui5-segmented-button-item][pressed]:hover) {
+::slotted([ui5-segmented-button-item][selected]:hover) {
 	border-color: var(--sapButton_Selected_Hover_BorderColor);
 	background-color: var(--sapButton_Selected_Hover_Background);
 	color: var(--sapButton_Selected_TextColor);