refactor(ui5-radiobutton): API enhancements (#3362)

Part of #3107

BREAKING_CHANGE: Changed "selected" property to "checked". Changed "select" event to "change"

Author: kskondov

packages/main/src/ListItem.hbs

@@ -64,7 +64,7 @@
 				tabindex="-1"
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"
-				?selected="{{selected}}"
+				?checked="{{selected}}"
 				@click="{{onSingleSelectionComponentPress}}">
 		</ui5-radiobutton>
 	{{/if}}

packages/main/src/RadioButton.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-radio-root {{classes.main}}"
 	role="radio"
-	aria-checked="{{selected}}"
+	aria-checked="{{checked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
 	aria-labelledby="{{ariaLabelledBy}}"
@@ -17,7 +17,7 @@
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" r="22%" />
 		</svg>
- 		<input type='radio' ?checked="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+ 		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}

packages/main/src/RadioButton.js

@@ -34,7 +34,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Determines whether the component is disabled.
+		 * Defines whether the component is disabled.
 		 * <br><br>
 		 * <b>Note:</b> A disabled component is completely noninteractive.
 		 *
@@ -47,7 +47,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the component is read-only.
+		 * Defines whether the component is read-only.
 		 * <br><br>
 		 * <b>Note:</b> A read-only component is not editable,
 		 * but still provides visual feedback upon user interaction.
@@ -61,17 +61,17 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the component is selected or not.
+		 * Defines whether the component is checked or not.
 		 * <br><br>
 		 * <b>Note:</b> The property value can be changed with user interaction,
-		 * either by cliking/tapping on the component,
+		 * either by clicking/tapping on the component,
 		 * or by using the Space or Enter key.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		selected: {
+		checked: {
 			type: Boolean,
 		},
 
@@ -184,12 +184,12 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Fired when the component selected state changes.
+		 * Fired when the component checked state changes.
 		 *
 		 * @event
 		 * @public
 		 */
-		select: {},
+		change: {},
 	},
 };
 
@@ -200,7 +200,7 @@ const metadata = {
  *
  * The <code>ui5-radiobutton</code> component enables users to select a single option from a set of options.
  * When a <code>ui5-radiobutton</code> is selected by the user, the
- * <code>select</code> event is fired.
+ * <code>change</code> event is fired.
  * When a <code>ui5-radiobutton</code> that is within a group is selected, the one
  * that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
  * <br>
@@ -270,8 +270,8 @@ class RadioButton extends UI5Element {
 	syncGroup() {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
-		const oldSelected = this._selected;
-		const currentSelected = this.selected;
+		const oldChecked = this._checked;
+		const currentChecked = this.checked;
 
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
@@ -287,20 +287,20 @@ class RadioButton extends UI5Element {
 			RadioButtonGroup.enforceSingleSelection(this, currentGroup);
 		}
 
-		if (this.name && currentSelected !== oldSelected) {
+		if (this.name && currentChecked !== oldChecked) {
 			RadioButtonGroup.updateTabOrder(this.name);
 		}
 
 		this._name = this.name;
-		this._selected = this.selected;
+		this._checked = this.checked;
 	}
 
 	_enableFormSupport() {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.selected;
-				nativeInput.value = element.selected ? element.value : "";
+				nativeInput.disabled = element.disabled || !element.checked;
+				nativeInput.value = element.checked ? element.value : "";
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -363,8 +363,8 @@ class RadioButton extends UI5Element {
 		}
 
 		if (!this.name) {
-			this.selected = !this.selected;
-			this.fireEvent("select");
+			this.checked = !this.checked;
+			this.fireEvent("change");
 			return this;
 		}
 
@@ -373,7 +373,7 @@ class RadioButton extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readonly || this.selected);
+		return !(this.disabled || this.readonly || this.checked);
 	}
 
 	valueStateTextMappings() {

packages/main/src/RadioButtonGroup.js

@@ -7,12 +7,12 @@ class RadioButtonGroup {
 		return this.groups.get(groupName);
 	}
 
-	static getSelectedRadioFromGroup(groupName) {
-		return this.selectedRadios.get(groupName);
+	static getCheckedRadioFromGroup(groupName) {
+		return this.checkedRadios.get(groupName);
 	}
 
 	static removeGroup(groupName) {
-		this.selectedRadios.delete(groupName);
+		this.checkedRadios.delete(groupName);
 		return this.groups.delete(groupName);
 	}
 
@@ -33,7 +33,7 @@ class RadioButtonGroup {
 		}
 
 		const group = this.getGroup(groupName);
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
 		// Remove the radio button from the given group
 		group.forEach((_radioBtn, idx, arr) => {
@@ -42,8 +42,8 @@ class RadioButtonGroup {
 			}
 		});
 
-		if (selectedRadio === radioBtn) {
-			this.selectedRadios.set(groupName, null);
+		if (checkedRadio === radioBtn) {
+			this.checkedRadios.set(groupName, null);
 		}
 
 		// Remove the group if it is empty
@@ -55,8 +55,8 @@ class RadioButtonGroup {
 	}
 
 	static createGroup(radioBtn, groupName) {
-		if (radioBtn.selected) {
-			this.selectedRadios.set(groupName, radioBtn);
+		if (radioBtn.checked) {
+			this.checkedRadios.set(groupName, radioBtn);
 		}
 
 		this.groups.set(groupName, [radioBtn]);
@@ -82,11 +82,11 @@ class RadioButtonGroup {
 		}
 
 		const group = this.getGroup(groupName);
-		const hasSelectedRadio = group.some(radioBtn => radioBtn.selected);
+		const hasCheckedRadio = group.some(radioBtn => radioBtn.checked);
 
 		group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => {
-			if (hasSelectedRadio) {
-				radioBtn._tabIndex = radioBtn.selected ? "0" : "-1";
+			if (hasCheckedRadio) {
+				radioBtn._tabIndex = radioBtn.checked ? "0" : "-1";
 			} else {
 				radioBtn._tabIndex = idx === 0 ? "0" : "-1";
 			}
@@ -113,25 +113,25 @@ class RadioButtonGroup {
 	}
 
 	static updateSelectionInGroup(radioBtnToSelect, groupName) {
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
-		this._deselectRadio(selectedRadio);
+		this._deselectRadio(checkedRadio);
 		this._selectRadio(radioBtnToSelect);
-		this.selectedRadios.set(groupName, radioBtnToSelect);
+		this.checkedRadios.set(groupName, radioBtnToSelect);
 	}
 
 	static _deselectRadio(radioBtn) {
 		if (radioBtn) {
-			radioBtn.selected = false;
+			radioBtn.checked = false;
 		}
 	}
 
 	static _selectRadio(radioBtn) {
 		if (radioBtn) {
 			radioBtn.focus();
-			radioBtn.selected = true;
-			radioBtn._selected = true;
-			radioBtn.fireEvent("select");
+			radioBtn.checked = true;
+			radioBtn._checked = true;
+			radioBtn.fireEvent("change");
 		}
 	}
 
@@ -171,17 +171,17 @@ class RadioButtonGroup {
 	}
 
 	static enforceSingleSelection(radioBtn, groupName) {
-		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
-
-		if (radioBtn.selected) {
-			if (!selectedRadio) {
-				this.selectedRadios.set(groupName, radioBtn);
-			} else if (radioBtn !== selectedRadio) {
-				this._deselectRadio(selectedRadio);
-				this.selectedRadios.set(groupName, radioBtn);
+		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
+
+		if (radioBtn.checked) {
+			if (!checkedRadio) {
+				this.checkedRadios.set(groupName, radioBtn);
+			} else if (radioBtn !== checkedRadio) {
+				this._deselectRadio(checkedRadio);
+				this.checkedRadios.set(groupName, radioBtn);
 			}
-		} else if (radioBtn === selectedRadio) {
-			this.selectedRadios.set(groupName, null);
+		} else if (radioBtn === checkedRadio) {
+			this.checkedRadios.set(groupName, null);
 		}
 
 		this.updateTabOrder(groupName);
@@ -194,11 +194,11 @@ class RadioButtonGroup {
 		return this._groups;
 	}
 
-	static get selectedRadios() {
-		if (!this._selectedRadios) {
-			this._selectedRadios = new Map();
+	static get checkedRadios() {
+		if (!this._checkedRadios) {
+			this._checkedRadios = new Map();
 		}
-		return this._selectedRadios;
+		return this._checkedRadios;
 	}
 }
 

packages/main/src/themes/RadioButton.css

@@ -12,16 +12,16 @@
 	color: var(--sapField_BorderColor);
 }
 
-/* Selected */
-:host([selected]) {
-	color: var(--_ui5_radiobutton_selected_fill);
+/* Checked */
+:host([checked]) {
+	color: var(--_ui5_radiobutton_checked_fill);
 }
 
-:host([selected]) .ui5-radio-svg-inner {
+:host([checked]) .ui5-radio-svg-inner {
 	fill: currentColor;
 }
 
-:host([selected]) .ui5-radio-svg-outer {
+:host([checked]) .ui5-radio-svg-outer {
 	stroke: var(--sapField_BorderColor);
 }
 
@@ -55,7 +55,7 @@
 }
 
 /* Read only */
-:host([selected][readonly]) .ui5-radio-svg-inner {
+:host([checked][readonly]) .ui5-radio-svg-inner {
 	fill: var(--sapContent_NonInteractiveIconColor);
 }
 
@@ -70,8 +70,8 @@
 }
 
 /* Error state */
-:host([value-state="Error"][selected]) .ui5-radio-svg-inner {
-	fill: var(--_ui5_radiobutton_selected_error_fill);
+:host([value-state="Error"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radiobutton_checked_error_fill);
 }
 :host([value-state="Error"]) .ui5-radio-svg-outer,
 :host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
@@ -80,8 +80,8 @@
 }
 
 /* Warning state */
-:host([value-state="Warning"][selected]) .ui5-radio-svg-inner {
-	fill: var(--_ui5_radiobutton_selected_warning_fill);
+:host([value-state="Warning"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radiobutton_checked_warning_fill);
 }
 :host([value-state="Warning"]) .ui5-radio-svg-outer,
 :host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {

packages/main/src/themes/base/RadioButton-parameters.css

@@ -3,8 +3,8 @@
 	--_ui5_radiobutton_min_width_compact: 2rem;
 	--_ui5_radiobutton_hover_fill: var(--sapField_Hover_Background);
 	--_ui5_radiobutton_border_width: 1px;
-	--_ui5_radiobutton_selected_fill: var(--sapSelectedColor);
-	--_ui5_radiobutton_selected_error_fill: var(--sapField_InvalidColor);
-	--_ui5_radiobutton_selected_warning_fill: var(--sapField_TextColor);
+	--_ui5_radiobutton_checked_fill: var(--sapSelectedColor);
+	--_ui5_radiobutton_checked_error_fill: var(--sapField_InvalidColor);
+	--_ui5_radiobutton_checked_warning_fill: var(--sapField_TextColor);
 	--_ui5_radiobutton_warning_error_border_dash: 0;
 }

packages/main/src/themes/sap_belize_hcb/RadioButton-parameters.css

@@ -1,9 +1,9 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
-	--_ui5_radiobutton_selected_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_warning_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_error_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_warning_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_error_fill: var(--sapContent_IconColor);
 	--_ui5_radiobutton_hover_fill: var(--sapSelectedColor);
 	--_ui5_radiobutton_border_width: 0.125rem;
 	--_ui5_radiobutton_warning_error_border_dash: 5;

packages/main/src/themes/sap_belize_hcw/RadioButton-parameters.css

@@ -1,9 +1,9 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
-	--_ui5_radiobutton_selected_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_warning_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_error_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_warning_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_error_fill: var(--sapContent_IconColor);
 	--_ui5_radiobutton_hover_fill: var(--sapSelectedColor);
 	--_ui5_radiobutton_border_width: 0.125rem;
 	--_ui5_radiobutton_warning_error_border_dash: 5;

packages/main/src/themes/sap_fiori_3_hcb/RadioButton-parameters.css

@@ -1,9 +1,9 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
-	--_ui5_radiobutton_selected_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_warning_fill: var(--sapContent_IconColor);
-	--_ui5_radiobutton_selected_error_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_warning_fill: var(--sapContent_IconColor);
+	--_ui5_radiobutton_checked_error_fill: var(--sapContent_IconColor);
 	--_ui5_radiobutton_hover_fill: var(--sapSelectedColor);
 	--_ui5_radiobutton_border_width: 0.125rem;
 	--_ui5_radiobutton_warning_error_border_dash: 5;