feat(list): Add slots for filter actions (#7183)

**Related Issue:** #6600 ## Summary - adds slot `filter-actions-start`. - adds slot `filter-actions-end`. - Uses `calcite-stack` internally for layout. - Adds story - Updates demo file
Esri · Jun 28, 2023 · da07ab1 · da07ab1
1 parent 35d4bbb
commit da07ab1
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 19 deletions.
diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
@@ -25,6 +25,11 @@
   @apply w-full border-collapse;
 }
 
+.stack {
+  --calcite-stack-padding-inline: 0;
+  --calcite-stack-padding-block: 0;
+}
+
 ::slotted(calcite-list-item) {
   @apply shadow-border-bottom mb-px;
 }
@@ -34,12 +39,11 @@
 }
 
 .sticky-pos {
-  @apply sticky top-0 z-sticky;
+  @apply sticky
+  top-0
+  z-sticky
+  bg-foreground-1;
   & th {
     @apply p-0;
   }
 }
-
-calcite-filter {
-  @apply mb-px;
-}
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -543,3 +543,50 @@ export const filteredChildListItems_TestOnly = (): string => html` <calcite-list
       </calcite-list-item>
     </calcite-list-item-group>
   </calcite-list>`;
+
+export const filterActions_TestOnly = (): string => html`<calcite-list
+  selection-mode="single"
+  label="test"
+  filter-enabled
+>
+  <calcite-action
+    appearance="transparent"
+    icon="banana"
+    text="menu"
+    label="menu"
+    slot="filter-actions-start"
+  ></calcite-action>
+  <calcite-action
+    appearance="transparent"
+    icon="ellipsis"
+    text="menu"
+    label="menu"
+    slot="filter-actions-start"
+  ></calcite-action>
+  <calcite-action
+    appearance="transparent"
+    icon="filter"
+    text="menu"
+    label="menu"
+    slot="filter-actions-end"
+  ></calcite-action>
+  <calcite-action
+    appearance="transparent"
+    icon="sort-ascending"
+    text="menu"
+    label="menu"
+    slot="filter-actions-end"
+  ></calcite-action>
+  <calcite-list-item label="test1" value="test1" description="hello world 1">
+    <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
+  <calcite-list-item label="test2" value="test2" description="hello world 2">
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
+  <calcite-list-item label="test3" value="test3" description="hello world 3">
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
+  <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
+</calcite-list>`;
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
@@ -12,7 +12,7 @@ import {
   Watch
 } from "@stencil/core";
 import { debounce } from "lodash-es";
-import { toAriaBoolean } from "../../utils/dom";
+import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -24,7 +24,8 @@ import { SelectionMode } from "../interfaces";
 import { ItemData } from "../list-item/interfaces";
 import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
-import { CSS, debounceTimeout, SelectionAppearance } from "./resources";
+import { CSS, debounceTimeout, SelectionAppearance, SLOTS } from "./resources";
+import { SLOTS as STACK_SLOTS } from "../stack/resources";
 
 const listItemSelector = "calcite-list-item";
 const parentSelector = "calcite-list-item-group, calcite-list-item";
@@ -40,6 +41,8 @@ import {
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
  * @slot - A slot for adding `calcite-list-item` elements.
+ * @slot filter-actions-start - A slot for adding actionable `calcite-action` elements before the filter component.
+ * @slot filter-actions-end - A slot for adding actionable `calcite-action` elements after the filter component.
  */
 @Component({
   tag: "calcite-list",
@@ -247,6 +250,10 @@ export class List implements InteractiveComponent, LoadableComponent {
 
   @State() dataForFilter: ItemData = [];
 
+  @State() hasFilterActionsStart = false;
+
+  @State() hasFilterActionsEnd = false;
+
   filterEl: HTMLCalciteFilterElement;
 
   // --------------------------------------------------------------------------
@@ -276,7 +283,9 @@ export class List implements InteractiveComponent, LoadableComponent {
       dataForFilter,
       filterEnabled,
       filterPlaceholder,
-      filterText
+      filterText,
+      hasFilterActionsStart,
+      hasFilterActionsEnd
     } = this;
     return (
       <div class={CSS.container}>
@@ -288,20 +297,32 @@ export class List implements InteractiveComponent, LoadableComponent {
           onKeyDown={this.handleListKeydown}
           role="treegrid"
         >
-          {filterEnabled ? (
+          {filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (
             <thead>
               <tr class={{ [CSS.sticky]: true }}>
                 <th colSpan={MAX_COLUMNS}>
-                  <calcite-filter
-                    aria-label={filterPlaceholder}
-                    disabled={loading || disabled}
-                    items={dataForFilter}
-                    onCalciteFilterChange={this.handleFilterChange}
-                    placeholder={filterPlaceholder}
-                    value={filterText}
-                    // eslint-disable-next-line react/jsx-sort-props
-                    ref={this.setFilterEl}
-                  />
+                  <calcite-stack class={CSS.stack}>
+                    <slot
+                      name={SLOTS.filterActionsStart}
+                      onSlotchange={this.handleFilterActionsStartSlotChange}
+                      slot={STACK_SLOTS.actionsStart}
+                    />
+                    <calcite-filter
+                      aria-label={filterPlaceholder}
+                      disabled={loading || disabled}
+                      items={dataForFilter}
+                      onCalciteFilterChange={this.handleFilterChange}
+                      placeholder={filterPlaceholder}
+                      value={filterText}
+                      // eslint-disable-next-line react/jsx-sort-props
+                      ref={this.setFilterEl}
+                    />
+                    <slot
+                      name={SLOTS.filterActionsEnd}
+                      onSlotchange={this.handleFilterActionsEndSlotChange}
+                      slot={STACK_SLOTS.actionsEnd}
+                    />
+                  </calcite-stack>
                 </th>
               </tr>
             </thead>
@@ -324,6 +345,14 @@ export class List implements InteractiveComponent, LoadableComponent {
     updateListItemChildren(getListItemChildren(event));
   };
 
+  private handleFilterActionsStartSlotChange = (event: Event): void => {
+    this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
+  };
+
+  private handleFilterActionsEndSlotChange = (event: Event): void => {
+    this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
+  };
+
   private setActiveListItem = (): void => {
     const { enabledListItems } = this;
 

diff --git a/packages/calcite-components/src/components/list/resources.ts b/packages/calcite-components/src/components/list/resources.ts
@@ -2,10 +2,16 @@ export const CSS = {
   container: "container",
   table: "table",
   scrim: "scrim",
+  stack: "stack",
   tableContainer: "table-container",
   sticky: "sticky-pos"
 };
 
 export const debounceTimeout = 0;
 
 export type SelectionAppearance = "border" | "icon";
+
+export const SLOTS = {
+  filterActionsStart: "filter-actions-start",
+  filterActionsEnd: "filter-actions-end"
+};
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
@@ -39,6 +39,34 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
 
         <div class="child">
           <calcite-list selection-mode="single" label="test" filter-enabled>
+            <calcite-action
+              appearance="transparent"
+              icon="banana"
+              text="menu"
+              label="menu"
+              slot="filter-actions-start"
+            ></calcite-action>
+            <calcite-action
+              appearance="transparent"
+              icon="ellipsis"
+              text="menu"
+              label="menu"
+              slot="filter-actions-start"
+            ></calcite-action>
+            <calcite-action
+              appearance="transparent"
+              icon="filter"
+              text="menu"
+              label="menu"
+              slot="filter-actions-end"
+            ></calcite-action>
+            <calcite-action
+              appearance="transparent"
+              icon="sort-ascending"
+              text="menu"
+              label="menu"
+              slot="filter-actions-end"
+            ></calcite-action>
             <calcite-list-item label="test1" value="test1" description="hello world 1">
               <calcite-icon icon="banana" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
             </calcite-list-item>