refactor(ui5-option): remove disabled property (#8602)

Removes the `disabled` property  of  the `ui5-option`, since UX and ACC standards suggest to not include any disabled items in the dropdown.

BREAKING CHANGE: The `disabled` property of the `ui5-option` is removed.
If you have previously used the `disabled` property:
```html
<ui5-option disabled>Option</ui5-option>
```
it will no longer work for the component.

Related to #8461, #7887

Author: yanaminkova

packages/main/src/Option.ts

@@ -29,17 +29,6 @@ class Option extends UI5Element implements IOption {
 	@property({ type: Boolean })
 	selected!: boolean;
 
-	/**
-	 * Defines whether the component is in disabled state.
-	 *
-	 * **Note:** A disabled component is hidden.
-	 * @default false
-	 * @public
-	 * @since 1.0.0-rc.12
-	 */
-	@property({ type: Boolean })
-	disabled!: boolean;
-
 	/**
 	 * Defines the tooltip of the component.
 	 * @default ""

packages/main/src/Select.ts

@@ -78,7 +78,6 @@ import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js";
  */
 interface IOption extends UI5Element {
 	selected: boolean,
-	disabled: boolean,
 	title: string,
 	icon?: string | null,
 	value: string,
@@ -484,7 +483,7 @@ class Select extends UI5Element implements IFormElement {
 	 */
 	set value(newValue: string) {
 		const menu = this._getSelectMenu();
-		const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled")) as Array<IOption>;
+		const selectOptions = Array.from(menu ? menu.children : this.children) as Array<IOption>;
 
 		selectOptions.forEach(option => {
 			option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
@@ -579,7 +578,7 @@ class Select extends UI5Element implements IFormElement {
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
-		const options = this._filteredItems;
+		const options = this.options;
 		const syncOpts = options.map((opt, index) => {
 			if (opt.selected) {
 				lastSelectedOptionIndex = index;
@@ -930,7 +929,7 @@ class Select extends UI5Element implements IFormElement {
 		if (menu) {
 			return menu.options;
 		}
-		return this._filteredItems;
+		return this.options;
 	}
 
 	get hasCustomLabel() {
@@ -1053,8 +1052,8 @@ class Select extends UI5Element implements IFormElement {
 				"max-width": `${this.offsetWidth}px`,
 			},
 			responsivePopoverHeader: {
-				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
-				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
+				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
+				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
 			},
 			responsivePopover: {
 				"min-width": `${this.offsetWidth}px`,
@@ -1091,10 +1090,6 @@ class Select extends UI5Element implements IFormElement {
 		return isPhone();
 	}
 
-	get _filteredItems() {
-		return this.options.filter(option => !option.disabled);
-	}
-
 	itemSelectionAnnounce() {
 		let text;
 		const optionsCount = this.selectOptions.length;

packages/main/test/pages/Select.html

@@ -112,7 +112,7 @@ <h2> Open event counter holder</h2>
 
 	<h2> Close event counter holder</h2>
 	<ui5-input id="inputResultClose"></ui5-input>
-	
+
 	<section>
 		<h3>Select aria-label and aria-labelledby</h3>
 		<span id="infoText">info text</span>
@@ -145,7 +145,7 @@ <h3>Select in Compact</h3>
 <section>
 	<h2>Select with a disabled option</h2>
 	<ui5-select id="mySelect5">
-		<ui5-option disabled>Cozy</ui5-option>
+		<ui5-option >Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
 		<ui5-option>Condensed</ui5-option>
 	</ui5-select>

packages/playground/_stories/main/Select/Option/Option.stories.ts

@@ -13,14 +13,13 @@ export default {
   title: "Main/Select/Option",
   component: "Option",
   argTypes,
-  
+
 } as Meta<Option>;
 
 const Template: UI5StoryArgs<Option, StoryArgsSlots> = (args) => {
   return html`<ui5-select>
    <ui5-option
    additional-text="${ifDefined(args.additionalText)}"
-   ?disabled="${ifDefined(args.disabled)}"
    icon="${ifDefined(args.icon)}"
    ?selected="${ifDefined(args.selected)}"
    value="${ifDefined(args.value)}"