fix: add missing custom CSS property for chip min-width (#7861)

Co-authored-by: web-padawan <iamkulykov@gmail.com>
vaadin · Sep 25, 2024 · 8ec8cf2 · 8ec8cf2
1 parent 723b59c
commit 8ec8cf2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts
@@ -147,6 +147,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width` | Min width of the chip | `50px`
  * `--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`
  *
  * ### Internal components

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
@@ -26,6 +26,7 @@ import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixi
 const multiSelectComboBox = css`
  :host {
  --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+ --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
  }
 
  [hidden] {
@@ -122,6 +123,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `--vaadin-field-default-width` | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width` | Min width of the chip | `50px`
  * `--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`
  *
  * ### Internal components

diff --git a/packages/multi-select-combo-box/test/chips.test.js b/packages/multi-select-combo-box/test/chips.test.js
@@ -207,6 +207,29 @@ describe('chips', () => {
  await nextRender();
  expect(overflow.hasAttribute('hidden')).to.be.true;
  });
+
+ it('should always show at least one chip in addition to overflow', async () => {
+ comboBox.style.width = 'auto';
+ await nextResize(comboBox);
+ comboBox.selectedItems = ['apple', 'orange'];
+ await nextRender();
+ const chips = getChips(comboBox);
+ expect(chips.length).to.equal(2);
+ expect(getChipContent(chips[1])).to.equal('orange');
+ });
+
+ it('should set show max width on the chip based on CSS property', async () => {
+ comboBox.style.width = 'auto';
+ comboBox.clearButtonVisible = true;
+ await nextResize(comboBox);
+ comboBox.selectedItems = ['apple', 'orange'];
+ await nextRender();
+
+ const chips = getChips(comboBox);
+ const minWidth = getComputedStyle(comboBox).getPropertyValue('--_chip-min-width');
+ expect(minWidth).to.be.ok;
+ expect(chips[1].style.maxWidth).to.equal(minWidth);
+ });
  });
  });