ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

refactor(ui5-multi-combobox): enable hierarchical groups

Open ivoplashkov opened this issue 1 year ago • 0 comments

Removes the ui5-mcb-group-item component.

BREAKING CHANGE: The ui5-mcb-group-item component is removed. Groups can now be created with the ui5-mcb-group. Instead of using ui5-mcb-group-item as separator in a flat structure:

<ui5-multi-combobox placeholder="Select a country">
	<ui5-mcb-group-item text="Asia"></ui5-mcb-group-item>
        <ui5-mcb-item text="Afghanistan"></ui5-mcb-item>
        <ui5-mcb-item text="China"></ui5-mcb-item>
        <ui5-mcb-item text="India"></ui5-mcb-item>
        <ui5-mcb-item text="Indonesia"></ui5-mcb-item>
	<ui5-mcb-group-item text="Europe"></ui5-mcb-group-item>
        <ui5-mcb-item text="Austria"></ui5-mcb-item>
        <ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
        <ui5-mcb-item text="Germany"></ui5-mcb-item>
        <ui5-mcb-item text="Italy"></ui5-mcb-item>
</ui5-multi-combobox>

The API supports nesting of ui5-mcb-item components inside an ui5-mcb-group:

<ui5-multi-combobox placeholder="Select a country">
	<ui5-mcb-group text="Asia">
		<ui5-mcb-item text="Afghanistan"></ui5-mcb-item>
		<ui5-mcb-item text="China"></ui5-mcb-item>
		<ui5-mcb-item text="India"></ui5-mcb-item>
		<ui5-mcb-item text="Indonesia"></ui5-mcb-item>
	</ui5-mcb-group>
	<ui5-mcb-group text="Europe">
		<ui5-mcb-item text="Austria"></ui5-mcb-item>
		<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
		<ui5-mcb-item text="Germany"></ui5-mcb-item>
		<ui5-mcb-item text="Italy"></ui5-mcb-item>
	</ui5-mcb-group>
</ui5-multi-combobox>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

ivoplashkov avatar May 09 '24 13:05 ivoplashkov