From e9762c37efb3f22a00d85c28bebdb3a5e32f58b4 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 22 May 2026 16:13:02 +0300 Subject: [PATCH] docs: document MultiSelectComboBox collapse chips API --- .../multi-select-combo-box/index.adoc | 31 +++++++++++ .../multi-select-combo-box-collapse-chips.ts | 55 +++++++++++++++++++ .../multi-select-combo-box-collapse-chips.tsx | 49 +++++++++++++++++ .../MultiSelectComboBoxCollapseChips.java | 39 +++++++++++++ 4 files changed, 174 insertions(+) create mode 100644 frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts create mode 100644 frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx create mode 100644 src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java diff --git a/articles/components/multi-select-combo-box/index.adoc b/articles/components/multi-select-combo-box/index.adoc index 83179e5487..c7c731c066 100644 --- a/articles/components/multi-select-combo-box/index.adoc +++ b/articles/components/multi-select-combo-box/index.adoc @@ -248,6 +248,37 @@ include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-selec endif::[] -- +[role="since:com.vaadin:vaadin@V25.2"] +== Collapse Chips + +By default, the component shows as many chips for selected items as fit, collapsing the remainder into the overflow chip. The component can be configured to instead collapse all chips into the overflow chip whenever they don't all fit. This can be useful when partial chip lists take up too much space or are visually confusing. + +[.example,themes="lumo,aura"] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + == Item Class Names See <<../combo-box#item-class-names, Combo Box, Item Class Names>>. In addition to items in the overlay, custom class names also apply to chips representing selected items. diff --git a/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts b/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts new file mode 100644 index 0000000000..5c8d6c9cc1 --- /dev/null +++ b/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-collapse-chips.ts @@ -0,0 +1,55 @@ +import 'Frontend/demo/init'; // hidden-source-line +import '@vaadin/checkbox'; +import '@vaadin/multi-select-combo-box'; +import '@vaadin/vertical-layout'; +import { html, LitElement } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; +import type { CheckboxChangeEvent } from '@vaadin/checkbox'; +import { getCountries } from 'Frontend/demo/domain/DataService'; +import { applyTheme } from 'Frontend/demo/theme'; +import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country'; + +@customElement('multi-select-combo-box-collapse-chips') +export class Example extends LitElement { + protected override createRenderRoot() { + const root = super.createRenderRoot(); + applyTheme(root); + return root; + } + + @state() + private items: Country[] = []; + + @state() + private collapseChips = true; + + protected override async firstUpdated() { + this.items = await getCountries(); + } + + protected override render() { + return html` + + + + + + + `; + } +} diff --git a/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx new file mode 100644 index 0000000000..a3ea2f03d5 --- /dev/null +++ b/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-collapse-chips.tsx @@ -0,0 +1,49 @@ +import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line +import React, { useEffect } from 'react'; +import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line +import { useComputed, useSignal } from '@vaadin/hilla-react-signals'; +import { Checkbox } from '@vaadin/react-components/Checkbox.js'; +import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js'; +import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js'; +import { getCountries } from 'Frontend/demo/domain/DataService'; +import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country'; + +function Example() { + useSignals(); // hidden-source-line + const items = useSignal([]); + const collapseChips = useSignal(true); + + useEffect(() => { + getCountries().then((countries) => { + items.value = countries; + }); + }, []); + + const selectedItems = useComputed(() => items.value.slice(0, 3)); + + return ( + + {/* tag::snippet[] */} + + {/* end::snippet[] */} + { + collapseChips.value = e.target.checked; + }} + /> + + ); +} + +export default reactExample(Example); // hidden-source-line diff --git a/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java b/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java new file mode 100644 index 0000000000..4456509ea8 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxCollapseChips.java @@ -0,0 +1,39 @@ +package com.vaadin.demo.component.multiselectcombobox; + +import com.vaadin.demo.DemoExporter; // hidden-source-line +import com.vaadin.demo.domain.Country; +import com.vaadin.demo.domain.DataService; +import com.vaadin.flow.component.checkbox.Checkbox; +import com.vaadin.flow.component.combobox.MultiSelectComboBox; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.Route; + +import java.util.List; + +@Route("multi-select-combo-box-collapse-chips") +public class MultiSelectComboBoxCollapseChips extends VerticalLayout { + + public MultiSelectComboBoxCollapseChips() { + MultiSelectComboBox comboBox = new MultiSelectComboBox<>( + "Countries"); + List countries = DataService.getCountries(); + comboBox.setItems(countries); + comboBox.setItemLabelGenerator(Country::getName); + comboBox.select(countries.subList(0, 3)); + comboBox.setWidth("250px"); + // tag::snippet[] + comboBox.setCollapseChips(true); + + Checkbox toggle = new Checkbox("Toggle collapse chips", true); + toggle.addValueChangeListener( + e -> comboBox.setCollapseChips(e.getValue())); + // end::snippet[] + + setPadding(false); + add(comboBox, toggle); + } + + public static class Exporter extends // hidden-source-line + DemoExporter { // hidden-source-line + } // hidden-source-line +}