feat: add option to always show all chips for selected items #6515
Conversation
|
Kudos, SonarCloud Quality Gate passed!
|
| @@ -45,6 +45,14 @@ const multiSelectComboBox = css` | |||
| flex-basis: 0; | |||
| padding: 0; | |||
| } | |||
|
|
|||
| :host([all-chips-visible]) #chips { | |||
| display: contents; | |||
There was a problem hiding this comment.
This is needed to get <input> element wrapping together with chip elements. In case of Goran's addon, it worked out of the box because there wasn't any additional container around chip elements.
| } | ||
|
|
||
| :host([all-chips-visible]) [class$='container'] { | ||
| width: fit-content; |
There was a problem hiding this comment.
This ensures the component expands when selecting a new item, until max-width is reached.
| ::slotted([slot='chip']:not([readonly]):not([disabled])) { | ||
| padding-inline-end: 0; | ||
| } | ||
|
|
||
| :host([all-chips-visible]) ::slotted([slot='input']) { | ||
| min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs)); |
There was a problem hiding this comment.
Reduced min-height to align input more nicely when chips wrap into multiple lines.
web-padawan
force-pushed
the
feat/mscb-all-chips-visible
branch
from
979d0b3 to
e3192ee
Compare
packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js
Outdated
Show resolved
Hide resolved
packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js
Outdated
Show resolved
Hide resolved
packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js
Outdated
Show resolved
Hide resolved
|
Kudos, SonarCloud Quality Gate passed!
|
|
This ticket/PR has been released with Vaadin 24.3.0.alpha1 and is also targeting the upcoming stable 24.3.0 version. |
|
This ticket/PR has been released with Vaadin 23.4.0. |
Description
Related to #4625
The look and feel is inspired by the original Multi Select Combo Box addon.
Type of change
Note
This PR is a draft, it lacks unit tests and API design (we need to decide how the property should be named)