feat(combobox-item): Add support for content-start slot (#11250)

**Related Issue:** #9322 ## Summary Adds support for `content-start` slot. @SkyeSeitz @ashetland can you confirm the "kitchen sink" case spacing with icon prop, slotted content, etc.
Esri · Jan 10, 2025 · 233a7fd · 233a7fd
1 parent 0250ed6
commit 233a7fd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -26,6 +26,7 @@ declare global {
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  * @slot content-end - A slot for adding non-actionable elements after the component's content.
+ * @slot content-start - A slot for adding non-actionable elements before the component's content.
  */
 export class ComboboxItem extends LitElement implements InteractiveComponent {
   // #region Static Members
@@ -283,6 +284,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
         >
           <li class={classes} id={this.guid} onClick={this.itemClickHandler}>
             {this.renderSelectIndicator(selectionIcon)}
+            <slot name={SLOTS.contentStart} />
             {this.renderIcon(icon)}
             <div class={CSS.centerContent}>
               <div class={CSS.title}>

diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts
@@ -19,4 +19,5 @@ export const CSS = {
 
 export const SLOTS = {
   contentEnd: "content-end",
+  contentStart: "content-start",
 };
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -389,7 +389,7 @@ export const longItemsAllSelectionModes = (): string => html`
       <calcite-combobox open selection-mode="single" style="margin-right: 20px;">
         <calcite-combobox-item text-label="Layers">
         <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
-        <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>ß</calcite-combobox-item>
+        <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item></calcite-combobox-item>
       </calcite-combobox>
 
       <calcite-combobox open selection-mode="single-persist">
@@ -901,37 +901,76 @@ export const filterHighlighting = (): string => html`
   </calcite-combobox>
 `;
 
-export const withDescriptionShortLabelAndContentEndSlot = (): string => html`
+export const withDescriptionIconsAndContentSlots = (): string => html`
+  <calcite-combobox open>
+    <calcite-combobox-item
+      icon="layer"
+      description="the first installment in this thrilling series"
+      selected
+      short-heading="#1"
+      text-label="1ne"
+      value="one"
+    >
+      <calcite-icon icon="arrow-left" slot="content-start" scale="s"></calcite-icon>
+      <calcite-icon icon="arrow-right" slot="content-end" scale="s"></calcite-icon>
+    </calcite-combobox-item>
+    <calcite-combobox-item
+      icon="layer"
+      description="the sequel to the smash hit 'one'"
+      short-heading="#2"
+      text-label="2woo"
+      value="two"
+    >
+      <calcite-icon icon="arrow-left" slot="content-start" scale="s"></calcite-icon>
+      <calcite-icon icon="arrow-right" slot="content-end" scale="s"></calcite-icon>
+    </calcite-combobox-item>
+    <calcite-combobox-item
+      icon="layer"
+      description="the thrilling conclusion to the number series"
+      short-heading="#3"
+      text-label="Thr333"
+      value="three"
+    >
+      <calcite-icon icon="arrow-left" slot="content-start" scale="s"></calcite-icon>
+      <calcite-icon icon="arrow-right" slot="content-end" scale="s"></calcite-icon>
+    </calcite-combobox-item>
+  </calcite-combobox>
+`;
+
+export const withDescriptionShortLabelAndContentSlots = (): string => html`
   <calcite-combobox-item
     description="the first installment in this thrilling series"
     selected
     short-heading="#1"
     text-label="1ne"
     value="one"
   >
-    <calcite-icon icon="number-circle-1" slot="content-end"></calcite-icon>
+    <calcite-icon icon="number-circle-1" slot="content-start" scale="s"></calcite-icon>
+    <calcite-icon icon="number-circle-2" slot="content-end" scale="s"></calcite-icon>
   </calcite-combobox-item>
   <calcite-combobox-item
     description="the sequel to the smash hit 'one'"
     short-heading="#2"
     text-label="2woo"
     value="two"
   >
-    <calcite-icon icon="number-circle-2" slot="content-end"></calcite-icon>
+    <calcite-icon icon="number-circle-3" slot="content-start" scale="s"></calcite-icon>
+    <calcite-icon icon="number-circle-4" slot="content-end" scale="s"></calcite-icon>
   </calcite-combobox-item>
   <calcite-combobox-item
     description="the thrilling conclusion to the number series"
     short-heading="#3"
     text-label="Thr333"
     value="three"
   >
-    <calcite-icon icon="number-circle-3" slot="content-end"></calcite-icon>
+    <calcite-icon icon="number-circle-5" slot="content-start" scale="s"></calcite-icon>
+    <calcite-icon icon="number-circle-6" slot="content-end" scale="s"></calcite-icon>
   </calcite-combobox-item>
 `;
-withDescriptionShortLabelAndContentEndSlot.args = {
+withDescriptionShortLabelAndContentSlots.args = {
   selectionMode: ["single", "multiple"],
 };
-withDescriptionShortLabelAndContentEndSlot.decorators = [allScaleComboboxBuilder];
-withDescriptionShortLabelAndContentEndSlot.parameters = {
+withDescriptionShortLabelAndContentSlots.decorators = [allScaleComboboxBuilder];
+withDescriptionShortLabelAndContentSlots.parameters = {
   chromatic: { delay: 1000 },
 };