feat(value-list-item): add new slot labelled as content-center to replace label/description (#3373)

src/components/calcite-pick-list-item/calcite-pick-list-item.scss

@@ -21,10 +21,10 @@
 .label {
   @apply bg-transparent
     flex
-    flex-auto
     items-center
     cursor-pointer
-    focus-base;
+    focus-base
+    w-full;
   &:focus {
     @apply focus-inset;
   }
@@ -38,7 +38,8 @@
 }
 
 :host([non-interactive]) .label,
-:host([non-interactive]) .icon {
+:host([non-interactive]) .icon,
+:host([non-interactive]) .content--select {
   @apply pointer-events-none;
 }
 
@@ -91,9 +92,51 @@
 }
 
 .actions {
-  @apply items-stretch flex justify-end m-0 flex-initial;
+  @apply items-stretch flex m-0 flex-initial;
 }
 
 .actions--start ~ .label {
   padding-inline-start: theme("padding.1");
 }
+
+.actions--end {
+  @apply justify-end flex-1;
+}
+
+.content {
+  @apply w-full
+  h-full
+  relative
+  flex
+  items-center;
+}
+
+.content--select {
+  @apply bg-transparent
+    cursor-pointer
+    focus-base
+    w-full
+    h-full
+    absolute;
+  &:focus {
+    @apply focus-inset;
+  }
+  &:hover {
+    @apply bg-foreground-2;
+  }
+}
+
+.content--slot {
+  @apply py-2
+  px-3;
+}
+
+:host([non-interactive]) .content {
+  @apply cursor-default;
+  &:focus {
+    @apply focus-base;
+  }
+  &:hover {
+    @apply bg-transparent;
+  }
+}

src/components/calcite-pick-list-item/calcite-pick-list-item.tsx

@@ -17,6 +17,7 @@ import { getSlotted } from "../../utils/dom";
 /**
  * @slot actions-end - a slot for adding actions or content to the end side of the item.
  * @slot actions-start - a slot for adding actions or content to the start side of the item.
+ * @slot content - a slot for adding content at the center of the item and it will take precedence over label prop if utilized.
  */
 @Component({
   tag: "calcite-pick-list-item",
@@ -127,7 +128,7 @@ export class CalcitePickListItem {
 
   @Element() el: HTMLCalcitePickListItemElement;
 
-  private focusEl: HTMLLabelElement;
+  private focusEl: HTMLLabelElement | HTMLDivElement;
 
   shiftPressed: boolean;
 
@@ -270,6 +271,46 @@ export class CalcitePickListItem {
     ) : null;
   }
 
+  renderContent(): VNode {
+    const { description, label, el } = this;
+    const hasContentSlot = getSlotted(el, SLOTS.content);
+
+    return hasContentSlot ? (
+      <div class={CSS.content}>
+        <div
+          aria-checked={this.selected.toString()}
+          class={CSS.contentSelect}
+          onClick={this.pickListClickHandler}
+          onKeyDown={this.pickListKeyDownHandler}
+          ref={(focusEl): HTMLDivElement => (this.focusEl = focusEl)}
+          role="menuitemcheckbox"
+          tabIndex={0}
+        />
+        <div class={CSS.contentSlot}>
+          <slot name={SLOTS.content} />
+        </div>
+      </div>
+    ) : (
+      <label
+        aria-label={label}
+        class={CSS.label}
+        onClick={this.pickListClickHandler}
+        onKeyDown={this.pickListKeyDownHandler}
+        ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}
+        tabIndex={0}
+      >
+        <div
+          aria-checked={this.selected.toString()}
+          class={CSS.textContainer}
+          role="menuitemcheckbox"
+        >
+          <span class={CSS.title}>{label}</span>
+          {description ? <span class={CSS.description}>{description}</span> : null}
+        </div>
+      </label>
+    );
+  }
+
   renderActionsEnd(): VNode {
     const { el, removable } = this;
     const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
@@ -283,29 +324,11 @@ export class CalcitePickListItem {
   }
 
   render(): VNode {
-    const { description, label } = this;
-
     return (
       <Fragment>
         {this.renderIcon()}
         {this.renderActionsStart()}
-        <label
-          aria-label={label}
-          class={CSS.label}
-          onClick={this.pickListClickHandler}
-          onKeyDown={this.pickListKeyDownHandler}
-          ref={(focusEl): HTMLLabelElement => (this.focusEl = focusEl)}
-          tabIndex={0}
-        >
-          <div
-            aria-checked={this.selected.toString()}
-            class={CSS.textContainer}
-            role="menuitemcheckbox"
-          >
-            <span class={CSS.title}>{label}</span>
-            {description ? <span class={CSS.description}>{description}</span> : null}
-          </div>
-        </label>
+        {this.renderContent()}
         {this.renderActionsEnd()}
       </Fragment>
     );

src/components/calcite-pick-list-item/resources.ts

@@ -2,6 +2,9 @@ export const CSS = {
   actions: "actions",
   actionsEnd: "actions--end",
   actionsStart: "actions--start",
+  content: "content",
+  contentSelect: "content--select",
+  contentSlot: "content--slot",
   description: "description",
   handle: "handle",
   handleActivated: "handle--activated",
@@ -20,6 +23,7 @@ export const ICONS = {
 };
 
 export const SLOTS = {
+  content: "content",
   actionsEnd: "actions-end",
   actionsStart: "actions-start"
 };

src/components/calcite-value-list-item/calcite-value-list-item.scss

@@ -21,7 +21,7 @@ calcite-pick-list-item {
 
 :host([active]),
 :host([selected]) {
-  @apply ring;
+  @apply shadow-outline-active;
 }
 
 .handle {

src/components/calcite-value-list-item/calcite-value-list-item.tsx

@@ -20,6 +20,7 @@ import { getSlotted } from "../../utils/dom";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
+ * @slot content - a slot for adding content at the center of the item and it will take precedence over label prop if utilized.
  */
 @Component({
   tag: "calcite-value-list-item",
@@ -67,7 +68,7 @@ export class CalciteValueListItem {
   /**
    * The main label for this item. Appears next to the icon.
    */
-  @Prop({ reflect: true }) label!: string;
+  @Prop({ reflect: true }) label: string;
 
   /**
    * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
@@ -186,6 +187,13 @@ export class CalciteValueListItem {
     ) : null;
   }
 
+  renderContent(): VNode {
+    const { el } = this;
+    const hasContentSlot = getSlotted(el, SLOTS.content);
+
+    return hasContentSlot ? <slot name={SLOTS.content} slot={PICK_LIST_SLOTS.content} /> : null;
+  }
+
   renderHandle(): VNode {
     const { icon } = this;
     if (icon === ICON_TYPES.grip) {
@@ -226,6 +234,7 @@ export class CalciteValueListItem {
           value={this.value}
         >
           {this.renderActionsStart()}
+          {this.renderContent()}
           {this.renderActionsEnd()}
         </calcite-pick-list-item>
       </Host>

src/components/calcite-value-list-item/resources.ts

@@ -4,5 +4,6 @@ export const ICONS = {
 
 export const SLOTS = {
   actionsEnd: "actions-end",
-  actionsStart: "actions-start"
+  actionsStart: "actions-start",
+  content: "content"
 };

src/components/calcite-value-list/calcite-value-list.stories.ts

@@ -105,6 +105,23 @@ export const basic = (): string =>
     `
   );
 
+export const withContentSlot = (): string =>
+  create(
+    "calcite-value-list",
+    createAttributes(),
+    html`
+      <calcite-value-list-item label="Default label and description" description="used as content" value="dogs">
+        ${action}
+      </calcite-value-list-item>
+      <calcite-value-list-item value="cats">
+        <div slot="content">
+          <calcite-input placeholder="slot content"></calcite-input>
+        </div>
+        ${action}
+      </calcite-value-list-item>
+    `
+  );
+
 export const darkThemeRTL = (): string =>
   create(
     "calcite-value-list",