feat(list-item): Add content-bottom slot for placing content below th…

…e label and description of the component (#8183) **Related Issue:** #8173 ## Summary - Adds a new slot `content-bottom`. - `content-bottom` is indented the same as the item. - screenshot tests
Esri · Nov 24, 2023 · 5ed0d79 · 5ed0d79
1 parent 2f60131
commit 5ed0d79
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 13 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -74,7 +74,8 @@ td:focus {
 }
 
 .label,
-.description {
+.description,
+.content-bottom {
   @apply text-n2 word-break font-sans font-normal;
   &:only-child {
     @apply m-0 py-1;
@@ -102,6 +103,13 @@ td:focus {
   @apply flex-auto;
 }
 
+.content-bottom {
+  @apply bg-foreground-1 flex flex-col;
+  padding-inline-start: calc(
+    var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier)
+  );
+}
+
 .content-container--has-center-content .content-start,
 .content-container--has-center-content .content-end {
   @apply flex-initial;

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -51,6 +51,7 @@ import {
  * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
+ * @slot content-bottom - A slot for adding content below the component's `label` and `description`.
  */
 @Component({
   tag: "calcite-list-item",
@@ -276,6 +277,8 @@ export class ListItem
 
   @State() hasContentEnd = false;
 
+  @State() hasContentBottom = false;
+
   containerEl: HTMLTableRowElement;
 
   contentEl: HTMLTableCellElement;
@@ -474,6 +477,35 @@ export class ListItem
     );
   }
 
+  renderContentBottom(): VNode {
+    const { hasContentBottom, visualLevel } = this;
+    return (
+      <div
+        class={CSS.contentBottom}
+        hidden={!hasContentBottom}
+        style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
+      >
+        <slot name={SLOTS.contentBottom} onSlotchange={this.handleContentBottomSlotChange} />
+      </div>
+    );
+  }
+
+  renderDefaultContainer(): VNode {
+    return (
+      <div
+        class={{
+          [CSS.nestedContainer]: true,
+          [CSS.nestedContainerHidden]: this.openable && !this.open,
+        }}
+      >
+        <slot
+          onSlotchange={this.handleDefaultSlotChange}
+          ref={(el: HTMLSlotElement) => (this.defaultSlotEl = el)}
+        />
+      </div>
+    );
+  }
+
   renderContentProperties(): VNode {
     const { label, description, hasCustomContent } = this;
 
@@ -535,6 +567,7 @@ export class ListItem
       selectionAppearance,
       selectionMode,
       closed,
+      visualLevel,
     } = this;
 
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
@@ -559,7 +592,7 @@ export class ListItem
           onFocus={this.focusCellNull}
           onKeyDown={this.handleItemKeyDown}
           role="row"
-          style={{ "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }}
+          style={{ "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }}
           tabIndex={active ? 0 : -1}
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={(el) => (this.containerEl = el)}
@@ -571,17 +604,8 @@ export class ListItem
           {this.renderContentContainer()}
           {this.renderActionsEnd()}
         </tr>
-        <div
-          class={{
-            [CSS.nestedContainer]: true,
-            [CSS.nestedContainerHidden]: openable && !open,
-          }}
-        >
-          <slot
-            onSlotchange={this.handleDefaultSlotChange}
-            ref={(el: HTMLSlotElement) => (this.defaultSlotEl = el)}
-          />
-        </div>
+        {this.renderContentBottom()}
+        {this.renderDefaultContainer()}
       </Host>
     );
   }
@@ -621,6 +645,10 @@ export class ListItem
     this.hasContentEnd = slotChangeHasAssignedElement(event);
   };
 
+  handleContentBottomSlotChange = (event: Event): void => {
+    this.hasContentBottom = slotChangeHasAssignedElement(event);
+  };
+
   setSelectionDefaults(): void {
     const { parentListEl, selectionMode, selectionAppearance } = this;
 

diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
@@ -14,6 +14,7 @@ export const CSS = {
   label: "label",
   description: "description",
   contentEnd: "content-end",
+  contentBottom: "content-bottom",
   actionsEnd: "actions-end",
   selectionContainer: "selection-container",
   openContainer: "open-container",
@@ -24,6 +25,7 @@ export const SLOTS = {
   actionsStart: "actions-start",
   contentStart: "content-start",
   content: "content",
+  contentBottom: "content-bottom",
   contentEnd: "content-end",
   actionsEnd: "actions-end",
 };

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -217,6 +217,34 @@ export const startAndEndContentSlots = (): string => html`<calcite-list ${knobsH
   </calcite-list-item>
 </calcite-list> `;
 
+export const contentBottomSlots = (): string => html`<calcite-list ${knobsHTML()}>
+  <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+    <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+  </calcite-list-item>
+  <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+    <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+  </calcite-list-item>
+  <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+    <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+  </calcite-list-item>
+</calcite-list> `;
+
+export const contentBottomSlotsNested = (): string => html`<calcite-list ${knobsHTML()}>
+  <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" open>
+    <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+    <calcite-list
+      ><calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom" open>
+        <span slot="content-bottom">Some value or something and a <b>thing</b>.</span
+        ><calcite-list
+          ><calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+            <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+          </calcite-list-item></calcite-list
+        >
+      </calcite-list-item></calcite-list
+    >
+  </calcite-list-item>
+</calcite-list> `;
+
 export const richContent = (): string => html`
   <calcite-list ${knobsHTML()}>
     <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">