diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts index 087bd89c0f38..f01817c234ea 100644 --- a/packages/main/src/ListItemBase.ts +++ b/packages/main/src/ListItemBase.ts @@ -32,7 +32,7 @@ import draggableElementStyles from "./generated/themes/DraggableElement.css.js"; @event("_forward-before") class ListItemBase extends UI5Element implements ITabbable { /** - * Defines the selected state of the `ListItem`. + * Defines the selected state of the component. * @default false * @public */ diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts index 241ee9c01397..34276c3f8d1e 100644 --- a/packages/main/src/Option.ts +++ b/packages/main/src/Option.ts @@ -1,8 +1,16 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import type { IOption } from "./Select.js"; +import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; + +import StandardListItem from "./StandardListItem.js"; +import ListItemType from "./types/ListItemType.js"; +import { IButton } from "./Button.js"; +import type { ListItemAccessibilityAttributes as OptionAccessibilityAttributes } from "./ListItem.js"; +import HighlightTypes from "./types/HighlightTypes.js"; +import { IOption } from "./Select.js"; + /** * @class * @@ -14,80 +22,145 @@ import type { IOption } from "./Select.js"; * * `import "@ui5/webcomponents/dist/Option.js";` * @constructor - * @extends UI5Element - * @implements {IOption} + * @extends StandardListItem + * @public + */ +@customElement({ + tag: "ui5-option", +}) +/** + * **Note:** The event is inherited and not supported. If used, it won't take any effect. * @public - * @abstract + * @deprecated */ -@customElement("ui5-option") -class Option extends UI5Element implements IOption { +@event("detail-click") +class Option extends StandardListItem implements IOption { /** - * Defines the selected state of the component. - * @default false + * 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 */ - @property({ type: Boolean }) - selected!: boolean; + @slot({ type: Node, "default": true, invalidateOnChildChange: true }) + text!: Array; /** - * Defines the text of the tooltip that would be displayed for the option component. + * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected. + * For more information on HTML Form support, see the `name` property of `ui5-select`. * @default "" * @public - * @since 2.0.0 */ @property() - tooltip!: string; + value!: string; /** - * Defines the `icon` source URI. - * - * **Note:** - * SAP-icons font provides numerous built-in icons. To find all the available icons, see the - * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). - * @default null + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "Active" * @public + * @deprecated */ - @property({ defaultValue: null }) - icon?: string | null; + @property({ type: ListItemType, defaultValue: ListItemType.Active }) + declare type: `${ListItemType}`; /** - * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected. - * For more information on HTML Form support, see the `name` property of `ui5-select`. + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default {} + * @public + * @deprecated + */ + @property({ type: Object }) + declare accessibilityAttributes: OptionAccessibilityAttributes; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default false + * @public + * @deprecated + */ + @property({ type: Boolean }) + declare navigated: boolean; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "None" + * @public + * @deprecated + */ + @property({ type: HighlightTypes, defaultValue: HighlightTypes.None }) + declare highlight: `${HighlightTypes}`; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "None" + * @public + * @deprecated + */ + @property({ type: ValueState, defaultValue: ValueState.None }) + declare additionalTextState: `${ValueState}`; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. * @default "" * @public + * @deprecated */ @property() - value!: string; + declare description: string; /** - * Defines the additional text displayed at the end of the option element. + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default false + * @public + * @deprecated + */ + @property({ type: Boolean }) + declare iconEnd: boolean; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. * @default "" * @public - * @since 1.3.0 + * @deprecated */ @property() - additionalText!: string; + declare image: string; /** - * Defines the focused state of the component. + * **Note:** The property is inherited and not supported. If set, it won't take any effect. * @default false - * @since 1.0.0-rc.13 - * @private + * @public + * @deprecated */ @property({ type: Boolean }) - focused!: boolean; + declare movable: boolean; /** - * 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. + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "" * @public + * @deprecated */ - @slot({ type: Node, "default": true, invalidateOnChildChange: true }) - text!: Array; + @property() + declare accessibleName: string; + + /** + * **Note:** The slot is inherited and not supported. If set, it won't take any effect. + * @public + * @deprecated + */ + @slot() + declare deleteButton: Array; + + /** + * **Note:** The slot is inherited and not supported. If set, it won't take any effect. + * @public + * @deprecated + */ + @slot() + declare imageContent: Array; - get stableDomRef() { - return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`; + get effectiveDisplayText() { + return this.textContent || ""; } } diff --git a/packages/main/src/OptionCustom.ts b/packages/main/src/OptionCustom.ts new file mode 100644 index 000000000000..c10034e8c010 --- /dev/null +++ b/packages/main/src/OptionCustom.ts @@ -0,0 +1,145 @@ +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; + +import CustomListItem from "./CustomListItem.js"; +import { IButton } from "./Button.js"; +import ListItemType from "./types/ListItemType.js"; +import type { ListItemAccessibilityAttributes as CustomOptionAccessibilityAttributes } from "./ListItem.js"; +import HighlightTypes from "./types/HighlightTypes.js"; +import { IOption } from "./Select.js"; + +/** + * @class + * + * ### Overview + * + * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`. + * A component to be the same way as the standard `ui5-option`. + * The component accepts arbitrary HTML content to allow full customization. + * + * ### ES6 Module Import + * + * `import "@ui5/webcomponents/dist/OptionCustom.js";` + * @constructor + * @since 2.0.0 + * @extends CustomListItem + * @public + */ +@customElement({ + tag: "ui5-option-custom", +}) +/** + * **Note:** The event is inherited and not supported. If used, it won't take any effect. + * @public + * @deprecated + */ +@event("detail-click") +class OptionCustom extends CustomListItem implements IOption { + /** + * Defines the text, displayed inside the `ui5-select` input filed + * when the option gets selected. + * @default "" + * @public + */ + @property() + displayText!: string; + + /** + * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected. + * For more information on HTML Form support, see the `name` property of `ui5-select`. + * @default "" + * @public + */ + @property() + value!: string; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default false + * @public + * @deprecated + */ + @property({ type: Boolean }) + declare iconEnd: boolean; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "Active" + * @public + * @deprecated + */ + @property({ type: ListItemType, defaultValue: ListItemType.Active }) + declare type: `${ListItemType}`; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default {} + * @public + * @deprecated + */ + @property({ type: Object }) + declare accessibilityAttributes: CustomOptionAccessibilityAttributes; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default false + * @public + * @deprecated + */ + @property({ type: Boolean }) + declare navigated: boolean; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "None" + * @public + * @deprecated + */ + @property({ type: HighlightTypes, defaultValue: HighlightTypes.None }) + declare highlight: `${HighlightTypes}`; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default false + * @public + * @deprecated + */ + @property({ type: Boolean }) + declare movable: boolean; + + /** + * **Note:** The property is inherited and not supported. If set, it won't take any effect. + * @default "" + * @public + * @deprecated + */ + @property() + declare accessibleName: string; + + /** + * **Note:** The slot is inherited and not supported. If set, it won't take any effect. + * @public + * @deprecated + */ + @slot() + declare deleteButton: Array; + + /** + * 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, invalidateOnChildChange: true }) + content!: Array; + + get effectiveDisplayText() { + return this.displayText || this.textContent || ""; + } +} + +OptionCustom.define(); + +export default OptionCustom; diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 3784722f06ac..dd2daba08771 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -31,7 +31,7 @@ {{#if hasCustomLabel}} {{else}} - {{_text}} + {{text}} {{/if}} diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 889bb8ad7414..98a35dd83e0b 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -4,7 +4,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.js"; import { isSpace, isUp, @@ -17,7 +16,6 @@ import { isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js"; -import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js"; import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; @@ -51,13 +49,12 @@ import { SELECT_ROLE_DESCRIPTION, FORM_SELECTABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js"; -import Option from "./Option.js"; import Label from "./Label.js"; import ResponsivePopover from "./ResponsivePopover.js"; import Popover from "./Popover.js"; -import StandardListItem from "./StandardListItem.js"; import Icon from "./Icon.js"; import Button from "./Button.js"; +import ListItemBase from "./ListItemBase.js"; // Templates import SelectTemplate from "./generated/templates/SelectTemplate.lit.js"; @@ -67,25 +64,19 @@ import selectCss from "./generated/themes/Select.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import SelectPopoverCss from "./generated/themes/SelectPopover.css.js"; -import type ListItemBase from "./ListItemBase.js"; -import type SelectMenu from "./SelectMenu.js"; -import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js"; /** * Interface for components that may be slotted inside `ui5-select` as options * @public */ -interface IOption extends UI5Element { - selected: boolean, +type IOption = ListItemBase & { tooltip: string, icon?: string | null, value: string, additionalText?: string, focused?: boolean, - text?: Array, - stableDomRef: string, - displayText?: string, -} + effectiveDisplayText: string, +}; type SelectChangeEventDetail = { selectedOption: IOption, @@ -110,15 +101,10 @@ type SelectLiveChangeEventDetail = { * The available options of the Select are defined by using the Option component. * The Option comes with predefined design and layout, including `icon`, `text` and `additional-text`. * - * 2. With SelectMenu (`ui5-select-menu`) and SelectMenuOption (`ui5-select-menu-option`) web components: - * - * The SelectMenu can be used as alternative to define the Select's dropdown - * and can be used via the `menu` property of the Select to reference SelectMenu by its ID. - * The component gives the possibility to customize the Select's dropdown - * by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles. + * 2. With OptionCustom (`ui5-option-custom`) web component. * - * **Note:** SelectMenu is a popover and placing it top-level in the HTML page is recommended, - * because some page styles (for example transitions) can misplace the SelectMenu. + * Options with custom content are defined by using the OptionCustom component + * The OptionCustom component comes with no predefined layout and it expects consumers to define it. * * ### Keyboard Handling * The `ui5-select` provides advanced keyboard handling. @@ -133,7 +119,8 @@ type SelectLiveChangeEventDetail = { * ### ES6 Module Import * `import "@ui5/webcomponents/dist/Select";` * - * `import "@ui5/webcomponents/dist/Option";` (comes with `ui5-select`) + * `import "@ui5/webcomponents/dist/IOption";` (comes with `ui5-select`) + * `import "@ui5/webcomponents/dist/OptionCustom";` (comes with `ui5-select`) * @constructor * @extends UI5Element * @public @@ -152,12 +139,10 @@ type SelectLiveChangeEventDetail = { SelectPopoverCss, ], dependencies: [ - Option, Label, ResponsivePopover, Popover, List, - StandardListItem, Icon, Button, ], @@ -204,20 +189,6 @@ type SelectLiveChangeEventDetail = { class Select extends UI5Element implements IFormInputElement { static i18nBundle: I18nBundle; - /** - * Defines a reference (ID or DOM element) of component's menu of options - * as alternative to define the select's dropdown. - * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the menu. - * You can only set the `opener` attribute to a DOM Reference when using JavaScript. - * - * **Note:** Usage of `ui5-select-menu` is recommended. - * @default undefined - * @public - * @since 1.17.0 - */ - @property({ validator: DOMReference }) - menu?: HTMLElement | string; - /** * Defines whether the component is in disabled state. * @@ -285,12 +256,6 @@ class Select extends UI5Element implements IFormInputElement { @property() accessibleNameRef!: string; - /** - * @private - */ - @property({ type: String, noAttribute: true }) - _text?: string | null; - /** * @private */ @@ -315,24 +280,14 @@ class Select extends UI5Element implements IFormInputElement { @property({ type: Boolean }) focused!: boolean; - /** - * @private - */ - @property({ validator: Integer, defaultValue: -1, noAttribute: true }) - _selectedIndex!: number; - - _syncedOptions: Array; _selectedIndexBeforeOpen: number; _escapePressed: boolean; _lastSelectedOption: IOption | null; _typedChars: string; _typingTimeoutID?: Timeout | number; responsivePopover!: ResponsivePopover; - selectedItem?: string | null; valueStatePopover?: Popover; - selectMenu?: SelectMenu; - /** * Defines the component options. * @@ -364,7 +319,7 @@ class Select extends UI5Element implements IFormInputElement { * Defines the HTML element that will be displayed in the component input part, * representing the selected option. * - * **Note:** If not specified and `ui5-select-menu-option` is used, + * **Note:** If not specified and `ui5-option-custom` is used, * either the option's `display-text` or its textContent will be displayed. * * **Note:** If not specified and `ui5-option` is used, @@ -375,14 +330,6 @@ class Select extends UI5Element implements IFormInputElement { @slot() label!: Array; - _onMenuClick: (e: CustomEvent) => void; - _onMenuClose: () => void; - _onMenuOpen: () => void; - _onMenuBeforeOpen: () => void; - _onMenuChange: (e: CustomEvent) => void; - _attachMenuListeners: (menu: HTMLElement) => void; - _detachMenuListeners: (menu: HTMLElement) => void; - get formValidityMessage() { return Select.i18nBundle.getText(FORM_SELECTABLE_REQUIRED); } @@ -410,34 +357,16 @@ class Select extends UI5Element implements IFormInputElement { constructor() { super(); - this._syncedOptions = []; this._selectedIndexBeforeOpen = -1; this._escapePressed = false; this._lastSelectedOption = null; this._typedChars = ""; - this._onMenuClick = this.onMenuClick.bind(this); - this._onMenuClose = this.onMenuClose.bind(this); - this._onMenuOpen = this.onMenuOpen.bind(this); - this._onMenuBeforeOpen = this.onMenuBeforeOpen.bind(this); - this._onMenuChange = this.onMenuChange.bind(this); - this._attachMenuListeners = this.attachMenuListeners.bind(this); - this._detachMenuListeners = this.detachMenuListeners.bind(this); - this._upgradeProperty("value"); } onBeforeRendering() { - const menu = this._getSelectMenu(); - - if (menu) { - menu.value = this.value; - // To cause invalidation when the menu is used for another Select that could have the same value as the previous. - // Otherwise, the menu won't re-render. - menu.selectId = this.__id; - } else { - this._syncSelection(); - } + this._ensureSingleSelection(); this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`); } @@ -450,8 +379,19 @@ class Select extends UI5Element implements IFormInputElement { this._listWidth = this.responsivePopover.offsetWidth; } } + } - this._attachRealDomRefs(); + _ensureSingleSelection() { + // if no item is selected => select the first one + // if multiple items are selected => select the last selected one + let selectedIndex = this.options.findLastIndex(option => option.selected); + selectedIndex = selectedIndex === -1 ? 0 : selectedIndex; + for (let i = 0; i < this.options.length; i++) { + this.options[i].selected = selectedIndex === i; + if (selectedIndex === i) { + break; + } + } } _onfocusin() { @@ -463,12 +403,6 @@ class Select extends UI5Element implements IFormInputElement { } get _isPickerOpen() { - const menu = this._getSelectMenu(); - - if (menu) { - return menu.open; - } - return !!this.responsivePopover && this.responsivePopover.open; } @@ -492,10 +426,9 @@ class Select extends UI5Element implements IFormInputElement { * @formEvents change liveChange */ set value(newValue: string) { - const menu = this._getSelectMenu(); - const selectOptions = Array.from(menu ? menu.children : this.children) as Array; + const options = Array.from(this.children) as Array; - selectOptions.forEach(option => { + options.forEach(option => { option.selected = !!((option.getAttribute("value") || option.textContent) === newValue); }); } @@ -504,56 +437,21 @@ class Select extends UI5Element implements IFormInputElement { return this.selectedOption?.value || this.selectedOption?.textContent || ""; } + get _selectedIndex() { + return this.options.findIndex(option => option.selected); + } + /** * Currently selected `ui5-option` element. * @public * @default undefined */ get selectedOption(): IOption | undefined { - return this.selectOptions.find(option => option.selected); - } - - onMenuClick(e: CustomEvent) { - const optionIndex: number = e.detail.optionIndex; - this._handleSelectionChange(optionIndex); - } - - onMenuBeforeOpen() { - this._beforeOpen(); - } - - onMenuOpen() { - this._afterOpen(); - } - - onMenuClose() { - this._afterClose(); - } - - onMenuChange(e: CustomEvent) { - this._text = e.detail.text; - this._selectedIndex = e.detail.selectedIndex; - } - - _toggleSelectMenu() { - const menu = this._getSelectMenu(); - - if (!menu) { - return; - } - - if (menu.open) { - menu.close(); - } else { - menu.showAt(this, this.offsetWidth); - } + return this.options.find(option => option.selected); } - onExitDOM(): void { - const menu = this._getSelectMenu(); - if (menu) { - this._detachMenuListeners(menu); - } + get text() { + return this.selectedOption?.effectiveDisplayText; } _toggleRespPopover() { @@ -563,12 +461,6 @@ class Select extends UI5Element implements IFormInputElement { this._iconPressed = true; - const menu = this._getSelectMenu(); - if (menu) { - this._toggleSelectMenu(); - return; - } - this.responsivePopover = this._respPopover(); if (this._isPickerOpen) { this.responsivePopover.open = false; @@ -578,104 +470,11 @@ class Select extends UI5Element implements IFormInputElement { } } - _attachRealDomRefs() { - this.responsivePopover = this._respPopover(); - - this.options.forEach(option => { - option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`)!; - }); - } - - _syncSelection() { - let lastSelectedOptionIndex = -1, - firstEnabledOptionIndex = -1; - const options = this.options; - const syncOpts = options.map((opt, index) => { - if (opt.selected) { - lastSelectedOptionIndex = index; - } - if (firstEnabledOptionIndex === -1) { - firstEnabledOptionIndex = index; - } - - opt.selected = false; - opt.focused = false; - - return { - selected: false, - focused: false, - icon: opt.icon, - value: opt.value, - textContent: opt.textContent, - tooltip: opt.tooltip, - additionalText: opt.additionalText, - id: opt._id, - stableDomRef: opt.stableDomRef, - }; - }); - - if (lastSelectedOptionIndex > -1) { - syncOpts[lastSelectedOptionIndex].selected = true; - syncOpts[lastSelectedOptionIndex].focused = true; - options[lastSelectedOptionIndex].selected = true; - options[lastSelectedOptionIndex].focused = true; - this._text = syncOpts[lastSelectedOptionIndex].textContent; - this._selectedIndex = lastSelectedOptionIndex; - } else { - this._text = ""; - this._selectedIndex = -1; - if (syncOpts[firstEnabledOptionIndex]) { - syncOpts[firstEnabledOptionIndex].selected = true; - syncOpts[firstEnabledOptionIndex].focused = true; - options[firstEnabledOptionIndex].selected = true; - options[firstEnabledOptionIndex].focused = true; - this._selectedIndex = firstEnabledOptionIndex; - this._text = options[firstEnabledOptionIndex].textContent; - } - } - - this._syncedOptions = syncOpts as Array; - } - - _getSelectMenu(): SelectMenu | undefined { - return connectToComponent({ - host: this, - propName: "menu", - onConnect: this._attachMenuListeners, - onDisconnect: this._detachMenuListeners, - }) as SelectMenu; - } - - attachMenuListeners(menu: HTMLElement) { - menu.addEventListener("ui5-close", this._onMenuClose); - menu.addEventListener("ui5-open", this._onMenuOpen); - menu.addEventListener("ui5-before-open", this._onMenuBeforeOpen); - // @ts-ignore - menu.addEventListener("ui5-option-click", this._onMenuClick); - // @ts-ignore - menu.addEventListener("ui5-menu-change", this._onMenuChange); - } - - detachMenuListeners(menu: HTMLElement) { - menu.removeEventListener("ui5-close", this._onMenuClose); - menu.removeEventListener("ui5-open", this._onMenuOpen); - menu.removeEventListener("ui5-before-open", this._onMenuBeforeOpen); - // @ts-ignore - menu.removeEventListener("ui5-option-click", this._onMenuClick); - // @ts-ignore - menu.removeEventListener("ui5-menu-change", this._onMenuChange); - } - _onkeydown(e: KeyboardEvent) { const isTab = (isTabNext(e) || isTabPrevious(e)); if (isTab && this._isPickerOpen) { - const menu = this._getSelectMenu(); - if (menu) { - menu.close(true /* preventFocusRestore */); - } else { - this.responsivePopover.open = false; - } + this.responsivePopover.open = false; } else if (isShow(e)) { e.preventDefault(); this._toggleRespPopover(); @@ -724,7 +523,7 @@ class Select extends UI5Element implements IFormInputElement { const itemToSelect = this._searchNextItemByText(text); if (itemToSelect) { - const nextIndex = this.selectOptions.indexOf(itemToSelect); + const nextIndex = this.options.indexOf(itemToSelect); this._changeSelectedItem(this._selectedIndex, nextIndex); @@ -735,13 +534,13 @@ class Select extends UI5Element implements IFormInputElement { } _searchNextItemByText(text: string) { - let orderedOptions = this.selectOptions.slice(0); + let orderedOptions = this.options.slice(0); const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex); const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1); orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected); - return orderedOptions.find(option => (option.displayText || option.textContent || "").toLowerCase().startsWith(text)); + return orderedOptions.find(option => option.effectiveDisplayText.toLowerCase().startsWith(text)); } _handleHomeKey(e: KeyboardEvent) { @@ -761,7 +560,7 @@ class Select extends UI5Element implements IFormInputElement { return; } - const lastIndex = this.selectOptions.length - 1; + const lastIndex = this.options.length - 1; this._changeSelectedItem(this._selectedIndex, lastIndex); } @@ -775,19 +574,23 @@ class Select extends UI5Element implements IFormInputElement { } } - _getSelectedItemIndex(item: ListItemBase) { - return this.selectOptions.findIndex(option => `${option._id}-li` === item.id); + _getItemIndex(item: IOption) { + return this.options.indexOf(item); } _select(index: number) { - this.selectOptions[this._selectedIndex].selected = false; + if (index < 0 || index >= this.options.length || this.options.length === 0) { + return; + } + if (this.options[this._selectedIndex]) { + this.options[this._selectedIndex].selected = false; + } if (this._selectedIndex !== index) { - this.fireEvent("live-change", { selectedOption: this.selectOptions[index] }); + this.fireEvent("live-change", { selectedOption: this.options[index] }); } - this._selectedIndex = index; - this.selectOptions[index].selected = true; + this.options[index].selected = true; } /** @@ -795,8 +598,8 @@ class Select extends UI5Element implements IFormInputElement { * @private */ _handleItemPress(e: CustomEvent) { - const item = e.detail.item; - const selectedItemIndex = this._getSelectedItemIndex(item); + const listItem = e.detail.item; + const selectedItemIndex = this._getItemIndex(listItem as IOption); this._handleSelectionChange(selectedItemIndex); } @@ -863,7 +666,7 @@ class Select extends UI5Element implements IFormInputElement { } _changeSelectedItem(oldIndex: number, newIndex: number) { - const options: Array = this.selectOptions; + const options: Array = this.options; const previousOption = options[oldIndex]; previousOption.selected = false; @@ -873,8 +676,6 @@ class Select extends UI5Element implements IFormInputElement { nextOption.selected = true; nextOption.focused = true; - this._selectedIndex = newIndex; - this.fireEvent("live-change", { selectedOption: nextOption }); if (!this._isPickerOpen) { @@ -884,10 +685,6 @@ class Select extends UI5Element implements IFormInputElement { } _getNextOptionIndex() { - const menu = this._getSelectMenu(); - if (menu) { - return this._selectedIndex === (menu.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1); - } return this._selectedIndex === (this.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1); } @@ -897,7 +694,7 @@ class Select extends UI5Element implements IFormInputElement { _beforeOpen() { this._selectedIndexBeforeOpen = this._selectedIndex; - this._lastSelectedOption = this.selectOptions[this._selectedIndex]; + this._lastSelectedOption = this.options[this._selectedIndex]; } _afterOpen() { @@ -905,6 +702,13 @@ class Select extends UI5Element implements IFormInputElement { this.fireEvent("open"); this.itemSelectionAnnounce(); this._scrollSelectedItem(); + this._applyFocusToSelectedItem(); + } + + _applyFocusToSelectedItem() { + this.options.forEach(option => { + option.focused = option.selected; + }); } _afterClose() { @@ -915,21 +719,13 @@ class Select extends UI5Element implements IFormInputElement { if (this._escapePressed) { this._select(this._selectedIndexBeforeOpen); this._escapePressed = false; - } else if (this._lastSelectedOption !== this.selectOptions[this._selectedIndex]) { - this._fireChangeEvent(this.selectOptions[this._selectedIndex]); - this._lastSelectedOption = this.selectOptions[this._selectedIndex]; + } else if (this._lastSelectedOption !== this.options[this._selectedIndex]) { + this._fireChangeEvent(this.options[this._selectedIndex]); + this._lastSelectedOption = this.options[this._selectedIndex]; } this.fireEvent("close"); } - get selectOptions(): Array { - const menu = this._getSelectMenu(); - if (menu) { - return menu.options; - } - return this.options; - } - get hasCustomLabel() { return !!this.label.length; } @@ -938,11 +734,9 @@ class Select extends UI5Element implements IFormInputElement { const changePrevented = !this.fireEvent("change", { selectedOption }, true); // Angular two way data binding - this.selectedItem = selectedOption.textContent; this.fireEvent("selected-item-changed"); if (changePrevented) { - this.selectedItem = this._lastSelectedOption!.textContent; this._select(this._selectedIndexBeforeOpen); } } @@ -1002,7 +796,7 @@ class Select extends UI5Element implements IFormInputElement { } get _currentlySelectedOption() { - return this.selectOptions[this._selectedIndex]; + return this.options[this._selectedIndex]; } get _effectiveTabIndex() { @@ -1090,7 +884,7 @@ class Select extends UI5Element implements IFormInputElement { itemSelectionAnnounce() { let text; - const optionsCount = this.selectOptions.length; + const optionsCount = this.options.length; const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount); if (this.focused && this._currentlySelectedOption) { @@ -1137,7 +931,7 @@ Select.define(); export default Select; export type { + IOption, SelectChangeEventDetail, SelectLiveChangeEventDetail, - IOption, }; diff --git a/packages/main/src/SelectMenu.hbs b/packages/main/src/SelectMenu.hbs deleted file mode 100644 index 638a84d89c58..000000000000 --- a/packages/main/src/SelectMenu.hbs +++ /dev/null @@ -1,57 +0,0 @@ - - {{#if _isPhone}} -
-
- {{_headerTitleText}} - - -
- {{#if hasValueState}} -
- {{> valueStateMessage}} -
- {{/if}} -
- {{/if}} - {{#unless _isPhone}} - {{#if hasValueState}} -
- - {{> valueStateMessage}} -
- {{/if}} - {{/unless}} - - - - - - - -{{#*inline "valueStateMessage"}} - {{#if hasValueStateSlot}} - {{#each valueStateMessageText}} - {{this}} - {{/each}} - {{else}} - {{ valueStateText }} - {{/if}} -{{/inline}} \ No newline at end of file diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts deleted file mode 100644 index 5c04e6f6b002..000000000000 --- a/packages/main/src/SelectMenu.ts +++ /dev/null @@ -1,292 +0,0 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; -import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; - -// Template -import SelectMenuTemplate from "./generated/templates/SelectMenuTemplate.lit.js"; - -// Styles -import SelectMenuCss from "./generated/themes/SelectMenu.css.js"; -import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; -import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; - -// Deps -import ResponsivePopover from "./ResponsivePopover.js"; -import List from "./List.js"; -import Button from "./Button.js"; - -// Types -import type Select from "./Select.js"; -import type SelectMenuOption from "./SelectMenuOption.js"; -import type { IOption } from "./Select.js"; - -type SelectMenuOptionClick = { - option: SelectMenuOption, - optionIndex: number, -}; - -type SelectMenuChange = { - text: string, - selectedIndex: number, -}; - -/** - * @class - * - * ### Overview - * - * The `ui5-select-menu` is meant to be used together with the `ui5-select` component as alternative - * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone. - * - * The component gives the possibility to the user to customize the `ui5-select`'s dropdown - * by slotting custom options and adding custom styles. - * - * ### Usage - * - * To use `ui5-select` with a `ui5-select-menu`, - * you need to set the `ui5-select` `menu` property to reference `ui5-select-menu` either by ID or DOM reference. - * - * For the `ui5-select-menu` - * ### ES6 Module Import - * - * `import @ui5/webcomponents/dist/SelectMenu.js";` - * @constructor - * @extends UI5Element - * @public - * @since 1.17.0 - */ -@customElement({ - tag: "ui5-select-menu", - renderer: litRender, - styles: [SelectMenuCss, ValueStateMessageCss, ResponsivePopoverCommonCss], - template: SelectMenuTemplate, - dependencies: [ - ResponsivePopover, - List, - Button, - ], -}) -@event("option-click", { - detail: { - option: { type: HTMLElement }, - optionIndex: { type: Integer }, - }, -}) -@event("before-open") -@event("open") -@event("close") -@event("menu-change", { - detail: { - text: { type: String }, - selectedIndex: { type: Integer }, - }, -}) -class SelectMenu extends UI5Element { - constructor() { - super(); - - this.valueStateMessageText = []; - } - - /** - * Defines the options of the component. - * @public - */ - @slot({ - "default": true, - type: HTMLElement, - invalidateOnChildChange: true, - }) - options!: Array; - - /** - * Defines the width of the component. - * @private - */ - @property({ validator: Integer }) - selectWidth?: number; - - @property({ type: Boolean }) - hasValueState!: boolean; - - @property({ type: Boolean }) - hasValueStateSlot!: boolean; - - @property({ type: ValueState, defaultValue: ValueState.None }) - valueState!: `${ValueState}`; - - @property() - valueStateText!: string; - - @property({ type: String, noAttribute: true }) - value!: string; - - @property({ type: String, noAttribute: true }) - selectId?: string; - - valueStateMessageText: Array; - - _headerTitleText?: string; - - select?: Select; - - /** - * Shows the dropdown at the given element. - */ - showAt(opener: Select, openerWidth: number) { - this.selectWidth = openerWidth; - this.respPopover.open = true; - this.respPopover.opener = opener; - this.hasValueState = !!opener.hasValueState; - this.hasValueStateSlot = opener.valueStateMessageText.length > 0; - this.valueStateText = opener.valueStateText; - this.valueStateMessageText = opener.valueStateMessageText; - this.valueState = opener.valueState; - - this._headerTitleText = opener._headerTitleText; - } - - /** - * Closes the dropdown. - */ - close(preventFocusRestore = false) { - this.respPopover.preventFocusRestore = preventFocusRestore; - this.respPopover.open = false; - } - - onBeforeRendering() { - this._syncSelection(); - } - - _syncSelection() { - let lastSelectedOptionIndex = -1, - firstEnabledOptionIndex = -1, - text, - selectedIndex; - const options = this.options; - options.forEach((opt, index) => { - if (opt.selected) { - lastSelectedOptionIndex = index; - } - if (firstEnabledOptionIndex === -1) { - firstEnabledOptionIndex = index; - } - - opt.selected = false; - opt.focused = false; - return opt; - }); - - if (lastSelectedOptionIndex > -1) { - const lastSelectedOption = options[lastSelectedOptionIndex]; - lastSelectedOption.selected = true; - lastSelectedOption.focused = true; - text = lastSelectedOption.displayText || String(lastSelectedOption.textContent); - selectedIndex = lastSelectedOptionIndex; - } else { - text = ""; - selectedIndex = -1; - const firstSelectedOption = options[firstEnabledOptionIndex]; - if (firstSelectedOption) { - firstSelectedOption.selected = true; - firstSelectedOption.focused = true; - selectedIndex = firstEnabledOptionIndex; - text = firstSelectedOption.displayText || String(firstSelectedOption.textContent); - } - } - - this.fireEvent("menu-change", { - text, - selectedIndex, - }); - } - - _onOptionClick(e: CustomEvent) { - const option = e.detail.item; - const optionIndex = this.options.findIndex(_option => option.__id === _option.__id); - - this.fireEvent("option-click", { - option, - optionIndex, - }); - } - - _onBeforeOpen() { - this.fireEvent("before-open"); - } - - _onAfterOpen() { - this.fireEvent("open"); - } - - _onAfterClose() { - this.fireEvent("close"); - } - - _onCloseBtnClick() { - this.close(); - } - - get open() { - return !!this.respPopover?.open; - } - - get respPopover() { - return this.shadowRoot!.querySelector(".ui5-select-menu")!; - } - - get classes() { - return { - popoverValueState: { - "ui5-valuestatemessage-root": true, - "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, - "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, - "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, - "ui5-valuestatemessage--information": this.valueState === ValueState.Information, - }, - popover: { - "ui5-select-popover-valuestate": this.hasValueState, - }, - }; - } - - get styles() { - return { - valueStatePopover: { - "width": `${this.selectWidth!}px`, - }, - responsivePopover: { - "min-width": `${this.selectWidth!}px`, - }, - }; - } - - get _valueStateMessageInputIcon() { - const iconPerValueState = { - Negative: "error", - Critical: "alert", - Positive: "sys-enter-2", - Information: "information", - }; - - return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : ""; - } - - get _isPhone() { - return isPhone(); - } -} - -SelectMenu.define(); - -export default SelectMenu; -export type { - SelectMenuOptionClick, - SelectMenuChange, -}; diff --git a/packages/main/src/SelectMenuOption.ts b/packages/main/src/SelectMenuOption.ts deleted file mode 100644 index 3c83be5556a5..000000000000 --- a/packages/main/src/SelectMenuOption.ts +++ /dev/null @@ -1,123 +0,0 @@ -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; - -// Template -import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js"; - -// Styles -import CustomListItem from "./CustomListItem.js"; -import ListItemType from "./types/ListItemType.js"; -import type { ListItemAccessibilityAttributes as SelectMenuOptionAccessibilityAttributes } from "./ListItem.js"; -import type { IButton } from "./Button.js"; -import type { IOption } from "./Select.js"; - -/** - * @class - * - * ### Overview - * The `ui5-select-menu-option` component represents an option in the `ui5-select-menu`. - * - * ### Usage - * - * For the `ui5-select-menu-option` - * ### ES6 Module Import - * - * `import @ui5/webcomponents/dist/SelectMenuOption.js";` - * @constructor - * @extends CustomListItem - * @implements {IOption} - * @public - * @since 1.17.0 - * @slot {Array} default Defines the content of the component. - */ -@customElement({ - tag: "ui5-select-menu-option", - renderer: litRender, - styles: CustomListItem.styles, - template: CustomListItemTemplate, - dependencies: [], -}) -class SelectMenuOption extends CustomListItem implements IOption { - /** - * Defines the text, displayed inside the `ui5-select` input filed - * when the option gets selected. - * @default "" - * @public - */ - @property() - displayText!: string; - - /** - * Defines whether the component is in disabled state. - * - * **Note:** A disabled component is hidden. - * @default false - * @public - */ - @property({ type: Boolean }) - declare disabled: boolean; - - /** - * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected. - * For more information on HTML Form support, see the `name` property of `ui5-select`. - * @default "" - * @public - */ - @property() - value!: string; - - /** - * **Note:** The property is inherited and not supported. If set, it won't take any effect. - * @default "Active" - * @public - * @deprecated - */ - @property({ type: ListItemType, defaultValue: ListItemType.Active }) - declare type: `${ListItemType}`; - - /** - * **Note:** The property is inherited and not supported. If set, it won't take any effect. - * @default {} - * @public - * @deprecated - */ - @property({ type: Object }) - declare accessibilityAttributes: SelectMenuOptionAccessibilityAttributes; - - /** - * **Note:** The property is inherited and not supported. If set, it won't take any effect. - * @default false - * @public - * @deprecated - */ - @property({ type: Boolean }) - declare navigated: boolean; - - /** - * **Note:** The slot is inherited and not supported. If set, it won't take any effect. - * @public - * @deprecated - */ - @slot() - declare deleteButton: Array; - - get stableDomRef() { - return ""; - } - - get _accInfo() { - const accInfoSettings = { - ariaSelected: this.selected, - }; - return { ...super._accInfo, ...accInfoSettings }; - } -} - -SelectMenuOption.define(); - -export default SelectMenuOption; -export type { - SelectMenuOptionAccessibilityAttributes, -}; diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs index 29da8052952d..f2802366ab1c 100644 --- a/packages/main/src/SelectPopover.hbs +++ b/packages/main/src/SelectPopover.hbs @@ -40,25 +40,12 @@ {{/unless}} - {{#each _syncedOptions}} - - {{this.textContent}} - - {{/each}} + {{/if}} @@ -88,4 +75,4 @@ {{this}} {{/each}} {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts index aff98931413f..103bae31ac26 100644 --- a/packages/main/src/bundle.esm.ts +++ b/packages/main/src/bundle.esm.ts @@ -135,8 +135,8 @@ import ResponsivePopover from "./ResponsivePopover.js"; import SegmentedButton from "./SegmentedButton.js"; import SegmentedButtonItem from "./SegmentedButtonItem.js"; import Select from "./Select.js"; -import SelectMenu from "./SelectMenu.js"; -import SelectMenuOption from "./SelectMenuOption.js"; +import Option from "./Option.js"; +import CustomOption from "./OptionCustom.js"; import Slider from "./Slider.js"; import SplitButton from "./SplitButton.js"; import StepInput from "./StepInput.js"; diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css index 3cbbb2e84963..a7d87c09cac7 100644 --- a/packages/main/src/themes/ListItemBase.css +++ b/packages/main/src/themes/ListItemBase.css @@ -37,7 +37,7 @@ align-items: center; width: 100%; height: 100%; - padding: 0 1rem; + padding: var(--_ui5_list_item_base_padding); box-sizing: border-box; background: inherit; } diff --git a/packages/main/src/themes/SelectMenu.css b/packages/main/src/themes/SelectMenu.css deleted file mode 100644 index 5aa992cc0d79..000000000000 --- a/packages/main/src/themes/SelectMenu.css +++ /dev/null @@ -1,16 +0,0 @@ -.ui5-select-menu::part(content), -.ui5-select-menu::part(header) { - padding: 0; -} - -.ui5-select-menu [ui5-li-custom] { - height: var(--_ui5_list_item_dropdown_base_height); -} - -.ui5-select-menu [ui5-li-custom]::part(native-li) { - padding: 0; -} - -.ui5-select-menu [ui5-icon] { - color: var(--sapList_TextColor); -} \ No newline at end of file diff --git a/packages/main/src/themes/SelectMenuOption.css b/packages/main/src/themes/SelectMenuOption.css deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/main/src/themes/SelectPopover.css b/packages/main/src/themes/SelectPopover.css index 94d5fd7fbaeb..5ad4976e83e5 100644 --- a/packages/main/src/themes/SelectPopover.css +++ b/packages/main/src/themes/SelectPopover.css @@ -3,10 +3,11 @@ padding: 0; } -.ui5-select-popover [ui5-li] { +.ui5-select-popover [ui5-option], +.ui5-select-popover [ui5-option-custom] { height: var(--_ui5_list_item_dropdown_base_height); } -.ui5-select-popover [ui5-li]::part(icon) { +.ui5-select-popover [ui5-option]::part(icon) { color: var(--sapList_TextColor); } diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 8ce19f002340..af1570ca3e0a 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -70,6 +70,7 @@ --_ui5_list_item_img_hn_margin: 0.75rem; --_ui5_list_item_dropdown_base_height: 2.5rem; --_ui5_list_item_base_height: var(--sapElement_LineHeight); + --_ui5_list_item_base_padding: 0 1rem; --_ui5_list_item_icon_size: 1.125rem; --_ui5_list_item_icon_padding-inline-end: 0.5rem; --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); @@ -274,6 +275,7 @@ --_ui5_list_no_data_font_size: var(--sapFontSize); --_ui5_list_item_dropdown_base_height: 2rem; --_ui5_list_item_base_height: 2rem; + --_ui5_list_item_base_padding: 0 1rem; --_ui5_list_item_icon_size: 1rem; --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); --_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2); diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css index 24094dc6ed1f..28d0a822f25f 100644 --- a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css @@ -38,8 +38,8 @@ @import "./RadioButton-parameters.css"; @import "./Switch-parameters.css"; @import "./Select-parameters.css"; -@import "./SelectPopover-parameters.css"; @import "./SplitButton-parameters.css"; +@import "./SelectPopover-parameters.css"; @import "./TabContainer-parameters.css"; @import "./TextArea-parameters.css"; @import "./TimePicker-parameters.css"; diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index 12709f686c77..8502e1c6c62a 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -25,8 +25,8 @@

Content size

- Cozy - Compact + Cozy + Compact Condensed @@ -60,8 +60,8 @@

Positive Select

Information Select

- Cozy - Compact + Cozy + Compact Condensed @@ -124,14 +124,14 @@

Select aria-label and aria-labelledby

info text
- First - Second + First + Second Third - One - Two + One + Two Three
@@ -141,8 +141,8 @@

Select aria-label and aria-labelledby

Select in Compact

- Cozy - Compact + Cozy + Compact Condensed
diff --git a/packages/main/test/pages/SelectCustom.html b/packages/main/test/pages/SelectCustom.html new file mode 100644 index 000000000000..2a8f7e8dd342 --- /dev/null +++ b/packages/main/test/pages/SelectCustom.html @@ -0,0 +1,704 @@ + + + + + + + ui5-option-custom + + + + + + +
+ +
+
+
+
+
+
+ +
+
+ Select + OptionCustom
+ + +
+ Skirt [3] + +
+ + +
+ T-shirt [1] +
+ + +
+
+ + + +
+ Dress [2] +
+ + +
+
+ + + +
+ Skirt [3] +
+ + +
+
+ + + + + +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
+ + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + + + + + +
+ Item 1 Text +
+ + +
+
+ + + +
+ Item 2 Text +
+ + +
+
+ + + +
+ Item 3 Text +
+ + +
+
+ + + + + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + + + +
+ Phone +
+ + +
+
+ + + +
+ Tablet +
+ + +
+
+ + + +
+ Desktop +
+ + +
+
+ + + +
+ + +
+ Select+ OptionCustom Test setup
+ +
+
+
+
+ + + +
Item 1
+ + + +
Item 2
+ + + +
Item 3
+ + + + + Reset counters + Focus out + select.value = "item1" + select.value = "nan" +
+ +
+ Select + Option
+ + + Cozy + Compact + Condensed + + + + Cozy + Compact + Condensed + +
+ + +
+
+ + + diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html deleted file mode 100644 index ef75c959d679..000000000000 --- a/packages/main/test/pages/SelectMenu.html +++ /dev/null @@ -1,715 +0,0 @@ - - - - - - - ui5-select-menu - - - - - - -
- -
-
-
-
-
-
- -
-
- Select + SelectMenu + SelectMenuOption
- - -
- Skirt [3] - -
- - - -
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
- - - - - - - -
- -
- Select+ SelectMenu Test setup
- -
-
-
-
- - - - - Reset counters - Focus out - select.value = "item1" - select.value = "nan" -
- -
- Select + Option
- - - Cozy - Compact - Condensed - - - - Cozy - Compact - Condensed - -
-
-
- - - - -
- T-shirt [1] -
- - -
-
- - - -
- Dress [2] -
- - -
-
- - - -
- Skirt [3] -
- - -
-
- - - - - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - - - - - -
- Item 1 Text -
- - -
-
- - - -
- Item 2 Text -
- - -
-
- - - -
- Item 3 Text -
- - -
-
- - - - - - -
Item 1
- - - -
Item 2
- - - -
Item 3
- - - - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - - - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - - - - diff --git a/packages/main/test/pages/SelectMenuLifecycle.html b/packages/main/test/pages/SelectMenuLifecycle.html deleted file mode 100644 index 36b324e0a0c0..000000000000 --- a/packages/main/test/pages/SelectMenuLifecycle.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - - ui5-select-menu - - - - - - - - - - - - Regular option 1 - Regular option 2 - Regular option 3 - - - - - - -
- T-shirt [1] -
- - -
-
- - - -
- Dress [2] -
- - -
-
- - - -
- Skirt [3] -
- - -
-
- - - - - - -
- Phone -
- - -
-
- - - -
- Tablet -
- - -
-
- - - -
- Desktop -
- - -
-
- - - - - diff --git a/packages/main/test/pages/styles/SelectMenu.css b/packages/main/test/pages/styles/SelectCustom.css similarity index 77% rename from packages/main/test/pages/styles/SelectMenu.css rename to packages/main/test/pages/styles/SelectCustom.css index 0f7eb59a5d5b..ba4c6b8c22e7 100644 --- a/packages/main/test/pages/styles/SelectMenu.css +++ b/packages/main/test/pages/styles/SelectCustom.css @@ -1,4 +1,3 @@ - :not(:defined) { visibility: hidden; } @@ -7,29 +6,31 @@ section { margin-bottom: 2rem; } -.selectMenu-bg { +.selectCustom-bg { background-color: var(--sapBackgroundColor); } -.selectMenu-app { +.selectCustom-app { transform: translate(100px, 100px); } -.selectMenuOption { +.selecOptionCustom { display: flex; align-items: center; justify-content: space-between; - width:100%; + width: 100%; + height: 100%; } -.selectMenuOption--warning { +.selecOptionCustom--warning { color: yellow; } -.selectMenuOptionIcon--warning { +.selectCustomIcon--warning { color: yellow; } .selectLabel { display: flex; + height: 100%; align-items: center; justify-content: space-between; padding-inline-end: 0.25rem; diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js index 1217b340a77c..3180990b96ef 100644 --- a/packages/main/test/specs/Popover.spec.js +++ b/packages/main/test/specs/Popover.spec.js @@ -140,8 +140,7 @@ describe("Popover general interaction", () => { it("tests if overflown content can be reached by scrolling 1", async () => { const manyItemsSelect = await browser.$("#many-items"); - const popover = await manyItemsSelect.shadow$("ui5-responsive-popover"); - const items = await popover.$$("ui5-li"); + const items = await await browser.$$("#many-items ui5-option") await manyItemsSelect.click(); @@ -152,8 +151,7 @@ describe("Popover general interaction", () => { it("tests if overflown content can be reached by scrolling 2", async () => { const manyItemsSelect = await browser.$("#many-items"); - const popover = await manyItemsSelect.shadow$("ui5-responsive-popover"); - const items = await popover.$$("ui5-li"); + const items = await await browser.$$("#many-items ui5-option") const itemBeforeLastItem = items[items.length - 2]; await itemBeforeLastItem.scrollIntoView(); diff --git a/packages/main/test/specs/Select.mobile.spec.js b/packages/main/test/specs/Select.mobile.spec.js index 0915836b7071..6c7e392cfc6c 100644 --- a/packages/main/test/specs/Select.mobile.spec.js +++ b/packages/main/test/specs/Select.mobile.spec.js @@ -17,8 +17,7 @@ describe("Select mobile general interaction", () => { select.click(); // act - move the focus to the first item - const popover = await select.shadow$("ui5-responsive-popover"); - const selectedItem = await popover.$("ui5-li:last-child"); + const selectedItem = await browser.$("#mySelect ui5-option:last-child"); selectedItem.keys("ArrowUp"); selectedItem.keys("ArrowUp"); diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js index 759adb43ba9b..577b965cd871 100644 --- a/packages/main/test/specs/Select.spec.js +++ b/packages/main/test/specs/Select.spec.js @@ -25,8 +25,7 @@ describe("Select general interaction", () => { const EXPECTED_SELECTION_TEXT = "Cozy"; await select.click(); - const popover = await select.shadow$("ui5-responsive-popover"); - const firstItem = (await popover.$$("ui5-li"))[0]; + const firstItem = (await browser.$$("#mySelect ui5-option"))[0]; await firstItem.click(); @@ -42,8 +41,7 @@ describe("Select general interaction", () => { const EXPECTED_SELECTION_TEXT = "Condensed"; await select.click(); - const popover = await select.shadow$("ui5-responsive-popover"); - const secondItem = (await popover.$$("ui5-li"))[1]; + const secondItem = (await browser.$$("#selectPrevent ui5-option"))[1]; await secondItem.click(); @@ -60,9 +58,8 @@ describe("Select general interaction", () => { await select.click(); - const popover = await select.shadow$("ui5-responsive-popover"); - const firstItem = await popover.$("ui5-li:last-child"); - await firstItem.click(); + const lastItem = await browser.$("#mySelect ui5-option:last-child") + await lastItem.click(); assert.strictEqual(await inputResult.getProperty("value"), "", "Event not fired when already selected item is selected"); }); @@ -436,9 +433,7 @@ describe("Select general interaction", () => { await addItemsBtn.click(); const firstOption = await browser.$("#mySelect ui5-option:first-child"); - const select = await browser.$("#mySelect"); - const popover = await select.shadow$("ui5-responsive-popover"); - const firstListItem = await popover.$("ui5-li:first-child"); + const firstListItem = (await browser.$("#mySelect ui5-option:first-child")) assert.ok(await firstOption.getProperty("selected"), "First option should be selected"); assert.ok(await firstListItem.getProperty("selected"), "First list item should be selected"); @@ -493,8 +488,7 @@ describe("Select general interaction", () => { await select.keys("Escape"); await select.click(); - const popover = await select.shadow$("ui5-responsive-popover"); - const firstItem = await popover.$("ui5-li:first-child"); + const firstItem = await browser.$("#mySelect ui5-option:first-child"); await firstItem.click(); @@ -508,9 +502,8 @@ describe("Select general interaction", () => { const EXPECTED_SELECTION_TEXT2 = "Condensed"; await select.click(); - const popover = await select.shadow$("ui5-responsive-popover"); - const firstItem = (await popover.$$("ui5-li"))[0]; - const thirdItem = (await popover.$$("ui5-li"))[2]; + const firstItem = await browser.$("#mySelectEsc ui5-option:first-child"); + const thirdItem = (await browser.$$("#mySelectEsc ui5-option"))[2]; await firstItem.click(); @@ -584,7 +577,7 @@ describe("Select general interaction", () => { it("Tests that the picker is closed when the selected value is clicked", async () => { const select = await browser.$("#mySelect"); const popover = await select.shadow$("ui5-responsive-popover"); - const firstItem = (await popover.$$("ui5-li"))[0]; + const firstItem = await browser.$("#mySelect ui5-option:first-child"); // select the first item await select.click(); @@ -612,37 +605,7 @@ describe("Select general interaction", () => { await select.keys("ArrowDown"); await select.keys("ArrowDown"); - const selectedOption = await popover.$("ui5-list").$("ui5-li[selected]"); + const selectedOption = await browser.$("#warningSelect ui5-option[selected]"); assert.ok(await selectedOption.isClickable(), "Selected option is visible in the viewport."); }); -}); - -describe("Attributes propagation", () => { - before(async () => { - await browser.url(`test/pages/Select.html`); - }); - - it("propagates additional-text attribute", async () => { - const select = await browser.$("#mySelect6"); - const EXPECTED_ADDITIONAL_TEXT = "DZ", - firstOption = await browser.$("#mySelect6 ui5-option:first-child"), - firstItem = (await select.shadow$$("ui5-li"))[0]; - - assert.strictEqual(await firstOption.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is set"); - assert.strictEqual(await firstItem.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is correct"); - }); - - it("Tooltip propagation", async () => { - const select = await browser.$("#selectTooltip"); - const tooltip = "Cozy" - - await select.click(); - - const popover = await select.shadow$("[ui5-responsive-popover]"); - const option = await select.$("[ui5-option]"); - const listItem = await popover.$("[data-ui5-stable='tooltip-test-option']") - - assert.strictEqual(await option.getProperty("tooltip"), tooltip, "Tooltip is correct"); - assert.strictEqual(await listItem.getProperty("tooltip"), tooltip, "Tooltip is correctly propagated"); - }); -}); +}); \ No newline at end of file diff --git a/packages/main/test/specs/SelectMenu.spec.js b/packages/main/test/specs/SelectMenu.spec.js deleted file mode 100644 index 0bafdfe90032..000000000000 --- a/packages/main/test/specs/SelectMenu.spec.js +++ /dev/null @@ -1,153 +0,0 @@ -import { assert } from "chai"; - -describe("Select Menu general interaction", () => { - before(async () => { - await browser.url(`test/pages/SelectMenu.html`); - }); - - it("first option is selected by default", async () => { - const select = await browser.$("#selTest"); - const selectText = select.shadow$(".ui5-select-label-root"); - const EXPECTED_SELECTION_TEXT = "item1"; - - const selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct."); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); - }); - - it("fires 'open' and 'close' events", async () => { - const select = await browser.$("#selTest"); - const inpTestOpen = await browser.$("#testOpen"); - const inpTestClose = await browser.$("#testClose"); - - await select.click(); - assert.strictEqual(await inpTestOpen.getProperty("value"), "1", "Fired 'open' event once."); - - await select.click(); - assert.strictEqual(await inpTestClose.getProperty("value"), "1", "Fired 'close' event once."); - }); - - it("changes selection with Arrow Up/Down when menu is closed", async () => { - const select = await browser.$("#selTest"); - const selectText = select.shadow$(".ui5-select-label-root"); - const inpTestChange = await browser.$("#testChange"); - - const EXPECTED_SELECTION_TEXT1 = "item2"; - const EXPECTED_SELECTION_TEXT2 = "item1"; - - // make sure focus is on closed select - await select.click(); - await select.keys("Escape"); - - await select.keys("ArrowDown"); - let selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Arrow Up should change selected item"); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); - - await select.keys("ArrowUp"); - selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Arrow Down should change selected item"); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); - - assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Change event should have fired twice"); - }); - - it("fires 'change' and 'live-change' on click", async () => { - const btnRest = await browser.$("#clearCounter"); - await btnRest.click(); - - const select = await browser.$("#selTest"); - const selectText = select.shadow$(".ui5-select-label-root"); - const secondItem = await browser.$("#selOption2"); - const EXPECTED_SELECTION_TEXT = "item2"; - const inpTestChange = await browser.$("#testChange"); - const inpTestPreviewChange = await browser.$("#testPreview"); - - await select.click(); - await secondItem.click(); - - assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired 'live-change' event once."); - assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Fired 'change' event once."); - - const selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct."); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); - }); - - it("fires 'change' and 'live-change' on Arrow Down, Arrow Up", async () => { - const btnRest = await browser.$("#clearCounter"); - await btnRest.click(); - - const select = await browser.$("#selTest"); - const selectText = select.shadow$(".ui5-select-label-root"); - - const inpTestChange = await browser.$("#testChange"); - const inpTestPreviewChange = await browser.$("#testPreview"); - - const EXPECTED_SELECTION_TEXT1 = "item3"; - const EXPECTED_SELECTION_TEXT2 = "item2"; - - await select.click(); - await select.keys("ArrowDown"); - await select.keys("Enter"); - - assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired 'live-change' event once."); - assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Fired 'change' event once."); - let selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Select label is correct."); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); - - await select.click(); - await select.keys("ArrowUp"); - await select.keys("Space"); - - assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "2", "Fired 'live-change' once more."); - assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Fired 'change' event once more."); - selectTextHtml = await selectText.getHTML(false); - assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Select label is correct."); - assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); - }); - - it("reverts value on ESC key", async () => { - const btnRest = await browser.$("#clearCounter"); - await btnRest.click(); - - const inpTestChange = await browser.$("#testChange"); - const inpTestPreviewChange = await browser.$("#testPreview"); - - const select = await browser.$("#selTest"); - const selectText = select.shadow$(".ui5-select-label-root"); - const selectTextHtml = await selectText.getHTML(false); - const selectedOption = await browser.$("#selectOptionsTest ui5-select-menu-option[selected]"); - - await select.click(); - await select.keys("ArrowDown"); - await select.keys("Escape"); - - const selectTextAfterEscape = await select.shadow$(".ui5-select-label-root").getHTML(false); - - assert.ok(await selectedOption.getProperty("selected"), "Initially selected item should remain selected"); - assert.strictEqual(await inpTestChange.getProperty("value"), "0", "Change event is not fired"); - assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "2", "Fired 'live-change' twice - ArrDown and ESC."); - assert.strictEqual(selectTextAfterEscape, selectTextHtml, "Select label is correct."); - }); - - it("fires 'change' event after preview selection + focusout", async () => { - const btnRest = await browser.$("#clearCounter"); - await btnRest.click(); - - const select = await browser.$("#selTest"); - const btn = await browser.$("#btnFocusOut"); - const inpTestChange = await browser.$("#testChange"); - const inpTestPreviewChange = await browser.$("#testPreview"); - - await select.click(); - await select.keys("ArrowUp"); - assert.strictEqual(await inpTestPreviewChange.getProperty("value"), "1", "Fired live-change event once."); - - // focus out select - await btn.click(); - - assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Change event should be fired after focus out"); - }); -}); diff --git a/packages/main/test/specs/SelectMenuConnector.spec.js b/packages/main/test/specs/SelectMenuConnector.spec.js deleted file mode 100644 index 4a15ed4527fe..000000000000 --- a/packages/main/test/specs/SelectMenuConnector.spec.js +++ /dev/null @@ -1,43 +0,0 @@ -import { assert } from "chai"; - -describe("Select Menu Connector integration", () => { - beforeEach(async () => { - await browser.url(`test/pages/SelectMenuLifecycle.html`); - }); - - it("Changing the menu property connects and disconnects", async () => { - const select = await browser.$("#sel1"); - const selectLabel = select.shadow$(".ui5-select-label-root"); - - let selectText = await selectLabel.getText(); - assert.strictEqual(selectText, "", "Select with no options and no menu is empty."); - - // Connect the select to a menu - await select.setAttribute("menu", "menu1"); - - selectText = await selectLabel.getText(); - assert.include(selectText, "Skirt [3]", "When connected to a menu, the select should update its label"); - - // Connect the select to another menu - await select.setAttribute("menu", "menu2"); - - selectText = await selectLabel.getText(); - assert.include(selectText, "Phone", "When connected to another menu, the select should update its label"); - }); - - it("Waiting for a menu to be rendered works", async () => { - const select = await browser.$("#sel1"); - const menu = await browser.$("#menu1"); - const selectLabel = select.shadow$(".ui5-select-label-root"); - - let selectText = await selectLabel.getText(); - assert.strictEqual(selectText, "", "Select with no options and no menu is empty."); - - // A menu on the page now matches the "menu" property of the select - await menu.setAttribute("id", "NO_MENU_WITH_THIS_ID"); - await browser.pause(1000); // wait for the polling to take effect - - selectText = await selectLabel.getText(); - assert.include(selectText, "Skirt [3]", "When connected to a menu, the select should update its label"); - }); -}); diff --git a/packages/main/test/ssr/component-imports.js b/packages/main/test/ssr/component-imports.js index 4accada18d0b..cc8fc50dbea9 100644 --- a/packages/main/test/ssr/component-imports.js +++ b/packages/main/test/ssr/component-imports.js @@ -34,8 +34,8 @@ import ResponsivePopover from "../../dist/ResponsivePopover.js"; import SegmentedButton from "../../dist/SegmentedButton.js"; import SegmentedButtonItem from "../../dist/SegmentedButtonItem.js"; import Select from "../../dist/Select.js"; -import SelectMenu from "../../dist/SelectMenu.js"; -import SelectMenuOption from "../../dist/SelectMenuOption.js"; +import Option from "../../dist/Option.js"; +import OptionCustom from "../../dist/OptionCustom.js"; import Slider from "../../dist/Slider.js"; import SplitButton from "../../dist/SplitButton.js"; import StepInput from "../../dist/StepInput.js"; diff --git a/packages/website/docs/_components_pages/main/SelectMenuOption.mdx b/packages/website/docs/_components_pages/main/Select/OptionCustom.mdx similarity index 67% rename from packages/website/docs/_components_pages/main/SelectMenuOption.mdx rename to packages/website/docs/_components_pages/main/Select/OptionCustom.mdx index 42e7713a7b2c..6caa8d05f865 100644 --- a/packages/website/docs/_components_pages/main/SelectMenuOption.mdx +++ b/packages/website/docs/_components_pages/main/Select/OptionCustom.mdx @@ -1,5 +1,5 @@ --- -slug: ../SelectMenuOption +slug: ../../OptionCustom --- <%COMPONENT_OVERVIEW%> diff --git a/packages/website/docs/_components_pages/main/Select/Select.mdx b/packages/website/docs/_components_pages/main/Select/Select.mdx index 79179c357020..a305851fc8b5 100644 --- a/packages/website/docs/_components_pages/main/Select/Select.mdx +++ b/packages/website/docs/_components_pages/main/Select/Select.mdx @@ -29,7 +29,6 @@ Options can dispplay additional text. ### Custom Options -You can define completely custom options via the ui5-select-menu (defining external dropdown) -and ui5-select-menu-option (providing custom content) components. +You can define completely custom options via the ui5-option-custom (providing custom content) component. \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/SelectMenu.mdx b/packages/website/docs/_components_pages/main/SelectMenu.mdx deleted file mode 100644 index accde5f4edae..000000000000 --- a/packages/website/docs/_components_pages/main/SelectMenu.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -slug: ../SelectMenu ---- - -import Basic from "../../_samples/main/SelectMenu/Basic/Basic.md"; - -<%COMPONENT_OVERVIEW%> - -## Basic Sample - - -<%COMPONENT_METADATA%> diff --git a/packages/website/docs/_samples/main/Select/CustomOptions/main.js b/packages/website/docs/_samples/main/Select/CustomOptions/main.js index bdcc43fc651c..f6f3a0162a9e 100644 --- a/packages/website/docs/_samples/main/Select/CustomOptions/main.js +++ b/packages/website/docs/_samples/main/Select/CustomOptions/main.js @@ -1,6 +1,5 @@ import "@ui5/webcomponents/dist/Select.js"; import "@ui5/webcomponents/dist/Icon.js"; -import "@ui5/webcomponents/dist/SelectMenu.js"; -import "@ui5/webcomponents/dist/SelectMenuOption.js"; +import "@ui5/webcomponents/dist/OptionCustom.js"; import "@ui5/webcomponents-icons/dist/employee.js"; import "@ui5/webcomponents-icons/dist/soccer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/Select/CustomOptions/sample.html b/packages/website/docs/_samples/main/Select/CustomOptions/sample.html index 97af8f508462..aebc81d97480 100644 --- a/packages/website/docs/_samples/main/Select/CustomOptions/sample.html +++ b/packages/website/docs/_samples/main/Select/CustomOptions/sample.html @@ -22,33 +22,31 @@ - - - - + +
Argentina
- + - +
Belgium
- + - +
Brazil
- - + + diff --git a/packages/website/docs/_samples/main/SelectMenu/Basic/Basic.md b/packages/website/docs/_samples/main/SelectMenu/Basic/Basic.md deleted file mode 100644 index ffccbf6dd13e..000000000000 --- a/packages/website/docs/_samples/main/SelectMenu/Basic/Basic.md +++ /dev/null @@ -1,4 +0,0 @@ -import html from '!!raw-loader!./sample.html'; -import js from '!!raw-loader!./main.js'; - - \ No newline at end of file diff --git a/packages/website/docs/_samples/main/SelectMenu/Basic/main.js b/packages/website/docs/_samples/main/SelectMenu/Basic/main.js deleted file mode 100644 index bdcc43fc651c..000000000000 --- a/packages/website/docs/_samples/main/SelectMenu/Basic/main.js +++ /dev/null @@ -1,6 +0,0 @@ -import "@ui5/webcomponents/dist/Select.js"; -import "@ui5/webcomponents/dist/Icon.js"; -import "@ui5/webcomponents/dist/SelectMenu.js"; -import "@ui5/webcomponents/dist/SelectMenuOption.js"; -import "@ui5/webcomponents-icons/dist/employee.js"; -import "@ui5/webcomponents-icons/dist/soccer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/SelectMenu/Basic/sample.html b/packages/website/docs/_samples/main/SelectMenu/Basic/sample.html deleted file mode 100644 index fbd4b147db54..000000000000 --- a/packages/website/docs/_samples/main/SelectMenu/Basic/sample.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - Sample - - - - - - - - - - - - -
- - Argentina - -
- - - -
- - Belgium - -
- - - -
- - Brazil - -
- - - - - - - - -