refactor!: move chips and overflow chip to light DOM #4832
Conversation
web-padawan
force-pushed
the
refactor/mscb-chips-light-dom
branch
from
7dc11a9 to
06ba6c8
Compare
packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-styles.js
Show resolved
Hide resolved
| /* Override input-container styles */ | ||
| ::slotted([slot='chip']), | ||
| ::slotted([slot='overflow']) { | ||
| padding: 0 0.5rem; | ||
| } |
There was a problem hiding this comment.
For Material theme, we only need to override padding:
| [hidden] { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
This CSS is now moved to vaadin-multi-select-combo-box-chip.
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; |
There was a problem hiding this comment.
These styles are no longer inherited from the host element, so added them here.
web-padawan
force-pushed
the
refactor/mscb-chips-light-dom
branch
from
8b3f7f1 to
8967b67
Compare
packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
Outdated
Show resolved
Hide resolved
| const chips = Array.from(this._chips).slice(1); | ||
| const chips = this._chips; |
There was a problem hiding this comment.
No need to call .slice(1) anymore because this._chips no longer includes overflow chip.
| comboBox.selectedItems = ['apple', 'banana', 'orange']; | ||
| await nextRender(); | ||
| expect(overflow.label).to.equal(2); | ||
| expect(overflow.label).to.equal('2'); |
There was a problem hiding this comment.
The property was previously set as number, apparently because of data binding usage.
packages/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js
Outdated
Show resolved
Hide resolved
web-padawan
force-pushed
the
refactor/mscb-chips-light-dom
branch
from
272d4e1 to
a49bacb
Compare
|
Kudos, SonarCloud Quality Gate passed!
|
|
This ticket/PR has been released with Vaadin 24.0.0. |
Description
Fixes #4300
vaadin-multi-select-combo-box-chipelements to light DOM using corresponding slots,partfrom all chips, includingoverflow-oneandoverflow-twofor the overflow chip,labelto attribute so that we can use[label="2"]instead,vaadin-input-container.Type of change
Before
After