chore(ui5-toolbar-select): value and label added

packages/main/cypress/specs/Toolbar.cy.tsx

@@ -492,6 +492,40 @@ describe("Toolbar Select", () => {
 			});
 		});
 	});
+
+	it("Should correctly handle the 'value' property and 'label' slot of ToolbarSelect", () => {
+		// Mount the Toolbar with a ToolbarSelect component
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect value="Option 2">
+					<span slot="label">Select an Option:</span>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+
+		// Verify the initial value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.should("have.attr", "value", "Option 2");
+
+		// Verify the label slot content
+		cy.get("ui5-toolbar-select")
+			.find("span[slot='label']")
+			.should("contain.text", "Select an Option:");
+
+		// Change the value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.realClick()
+			.find("ui5-option")
+			.contains("Option 3")
+			.realClick();
+
+		// Verify the updated value of the ToolbarSelect
+		cy.get("ui5-select", { includeShadowDom: true })
+			.should("have.attr", "value", "Option 3");
+	});
 });
 
 describe("Toolbar Button", () => {

packages/main/src/ToolbarSelect.ts

@@ -87,9 +87,23 @@ class ToolbarSelect extends ToolbarItem {
 	 * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.
 	 * @public
 	 */
-	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+	@slot({
+		"default": true,
+		type: HTMLElement,
+		invalidateOnChildChange: true,
+		individualSlots: true,
+	})
 	options!: Array<ToolbarSelectOption>;
 
+	/**
+	 * Defines the HTML element that will be displayed in the component input part,
+	 * representing the selected option.
+	 * @public
+	 * @since 2.13.0
+	*/
+	@slot()
+	label!: Array<HTMLElement>;
+
 	/**
 	 * Defines the value state of the component.
 	 * @default "None"
@@ -124,6 +138,16 @@ class ToolbarSelect extends ToolbarItem {
 	@property()
 	accessibleNameRef?: string;
 
+	/**
+	 * Defines the value of the component:
+	 *
+	 * @public
+	 * @default ""
+	 * @since 2.13.0
+	 */
+	@property()
+	value?: string;
+
 	onClick(e: Event): void {
 		e.stopImmediatePropagation();
 		const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement });
@@ -174,6 +198,10 @@ class ToolbarSelect extends ToolbarItem {
 			width: this.width,
 		};
 	}
+
+	get hasCustomLabel() {
+		return !!this.label.length;
+	}
 }
 
 ToolbarSelect.define();

packages/main/src/ToolbarSelectTemplate.tsx

@@ -7,6 +7,7 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 		<Select
 			class={this.classes.root}
 			style={this.styles}
+			value={this.value}
 			data-ui5-external-action-item-id={this._id}
 			valueState={this.valueState}
 			disabled={this.disabled}
@@ -17,6 +18,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			onOpen={(...args) => this.onOpen(...args)}
 			onChange={(...args) => this.onChange(...args)}
 		>
+			{this.hasCustomLabel &&
+				<slot name="label" slot="label">
+				</slot>
+			}
 			{this.options.map((option, index) => (
 				<Option
 					selected={option.selected}
@@ -25,6 +30,5 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 					{option.textContent}
 				</Option>
 			))}
-		</Select>
-	);
+		</Select>);
 }

packages/main/test/pages/Toolbar.html

@@ -71,6 +71,10 @@
 				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
 				<ui5-toolbar-select id="toolbar-select">
+					<div class="selectLabel" slot="label">
+						<span id="mainText">Skirt [3]</span>
+						<ui5-avatar id="avatar" size="XS" initials="S"></ui5-avatar>
+					</div>
 					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
 					<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
 					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>