feat(combo-box): make ComboBox slottable (#1181)

Closes #1176

COMPONENT_INDEX.md

@@ -686,7 +686,9 @@ export interface ComboBoxItem {
 
 ### Slots
 
-None.
+| Slot name | Default | Props                                               | Fallback                          |
+| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
+| --        | Yes     | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -1639,7 +1639,14 @@
         }
       ],
       "moduleExports": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "{itemToString(item)}",
+          "slot_props": "{ item: ComboBoxItem; index: number }"
+        }
+      ],
       "events": [
         {
           "type": "dispatched",

docs/src/pages/components/ComboBox.svx

@@ -18,6 +18,12 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
+### Custom slot
+
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
+
+<FileSource src="/framed/ComboBox/ComboBoxSlot" />
+
 ### Selected id
 
 <ComboBox titleText="Contact" placeholder="Select contact method"

docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { ComboBox } from "carbon-components-svelte";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+  let:item
+  let:index
+>
+  <div>
+    <strong>{item.text}</strong>
+  </div>
+  <div>
+    id: {item.id} - index:
+    {index}
+  </div>
+</ComboBox>
+
+<style>
+  :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
+    height: auto;
+  }
+</style>

src/ComboBox/ComboBox.svelte

@@ -3,6 +3,7 @@
    * @typedef {any} ComboBoxItemId
    * @typedef {{ id: ComboBoxItemId; text: string; }} ComboBoxItem
    * @event {{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }} select
+   * @slot {{ item: ComboBoxItem; index: number }}
    */
 
   /**
@@ -363,7 +364,9 @@
               highlightedIndex = i;
             }}"
           >
+            <slot item="{item}" index="{i}">
               {itemToString(item)}
+            </slot>
             {#if selectedItem && selectedItem.id === item.id}
               <Checkmark16 class="bx--list-box__menu-item__selected-icon" />
             {/if}

tests/ComboBox.test.svelte

@@ -23,7 +23,12 @@
   on:select="{(e) => {
     console.log(e.detail.selectedId);
   }}"
-/>
+  let:item
+  let:index
+>
+  {item.id}
+  {index}
+</ComboBox>
 
 <ComboBox
   titleText="Contact"

types/ComboBox/ComboBox.svelte.d.ts

@@ -157,7 +157,7 @@ export default class ComboBox extends SvelteComponentTyped<
     clear: WindowEventMap["clear"];
     scroll: WindowEventMap["scroll"];
   },
-  {}
+  { default: { item: ComboBoxItem; index: number } }
 > {
   /**
    * Clear the combo box programmatically