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

Co-authored-by: web-padawan <[email protected]>
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);
+      });
     });
   });