feat(data-table): slug (carbon-design-system#11224)

* feat(data-table): slug * feat(data-table):slug to more stories * fix(table): align checkbox header * fix(data-table): checkbox styling * fix(data-table): story cleanup * Update packages/carbon-web-components/src/components/slug/slug-data-table-story.ts Co-authored-by: Anna Wen <[email protected]> * fix(data-table): ai spacing * fix(selected): gradient styles --------- Co-authored-by: Carbon for IBM.com Bot <[email protected]> Co-authored-by: Anna Wen <[email protected]>
ariellalgilmore · Dec 14, 2023 · 46baa0d · 46baa0d
1 parent 0c1f656
commit 46baa0d
Show file tree

Hide file tree

Showing 12 changed files with 872 additions and 45 deletions.
diff --git a/.yarn/cache/@carbon-styles-npm-1.45.0-67fc1de473-8372874f57.zip b/.yarn/cache/@carbon-styles-npm-1.45.0-67fc1de473-8372874f57.zip
diff --git a/packages/carbon-web-components/src/components/data-table/_table-core.scss b/packages/carbon-web-components/src/components/data-table/_table-core.scss
@@ -70,6 +70,20 @@
 :host(#{$prefix}-table-header-cell[sort-direction]) {
   height: $spacing-09;
   position: relative;
+
+  .#{$prefix}--table-sort__flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+    min-block-size: $spacing-09;
+  }
+}
+
+:host(#{$prefix}-table-header-cell[slug]),
+:host(#{$prefix}-table-header-cell[slug]) .#{$prefix}--table-sort {
+  @include ai-gradient('top', 100%);
 }
 
 :host(#{$prefix}-table-header-cell[sticky-header]) {
@@ -85,6 +99,17 @@
   padding-top: rem(14px);
 }
 
+:host(#{$prefix}-table-header-cell[slug]) {
+  .#{$prefix}--table-header-label--slug {
+    display: flex;
+    align-items: center;
+  }
+
+  ::slotted(#{$prefix}-slug) {
+    margin-inline-start: $spacing-03;
+  }
+}
+
 //
 // Common style for table cell and table header cell
 //
@@ -186,6 +211,35 @@
   }
 }
 
+:host(#{$prefix}-table-header-row),
+:host(#{$prefix}-table-row) {
+  .#{$prefix}--table-column-checkbox div,
+  .#{$prefix}--table-expand div {
+    display: flex;
+    height: 100%;
+  }
+}
+
+:host(#{$prefix}-table-header-row[rows-with-slug]) {
+  .#{$prefix}--table-column-checkbox,
+  .#{$prefix}--table-expand {
+    padding-left: $spacing-08;
+  }
+}
+:host(#{$prefix}-table-header-row[rows-with-slug]),
+:host(#{$prefix}-table-row[rows-with-slug]) {
+  #{$prefix}-checkbox {
+    padding-left: $spacing-03;
+  }
+}
+
+:host(#{$prefix}-table-header-row[rows-with-slug][selection-name][expandable]),
+:host(#{$prefix}-table-row[rows-with-slug][selection-name][expandable]) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: 0;
+  }
+}
+
 //
 // Table row
 //
@@ -396,6 +450,26 @@
   }
 }
 
+:host(#{$prefix}-table-row[rows-with-slug]) {
+  ::slotted(#{$prefix}-slug) {
+    padding: 0 $spacing-03;
+    margin-left: -$spacing-07;
+  }
+}
+
+:host(#{$prefix}-table-row[rows-with-slug]) {
+  .#{$prefix}--table-column-checkbox,
+  .#{$prefix}--table-expand {
+    padding-left: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-table-row[slug]) {
+  @include ai-gradient('left', 50%);
+
+  background-attachment: fixed;
+}
+
 :host(#{$prefix}-table-header-title) {
   @extend .#{$prefix}--data-table-header__title;
 

diff --git a/packages/carbon-web-components/src/components/data-table/_table-selection.scss b/packages/carbon-web-components/src/components/data-table/_table-selection.scss
@@ -71,3 +71,16 @@
 :host(#{$prefix}-table-row[filtered]) {
   display: none !important;
 }
+
+:host(#{$prefix}-table-row[selected][slug]) {
+  .#{$prefix}--table-column-checkbox,
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    background-color: transparent;
+  }
+}
+
+:host(#{$prefix}-table-row[selected][rows-with-slug]) {
+  background-color: $layer-selected;
+}
diff --git a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
@@ -185,13 +185,6 @@
 //
 // "selection" and "expandable" sizes
 //
-:host(#{$prefix}-table-header-row[selection-name][expandable]),
-:host(#{$prefix}-table-row[selection-name][expandable]) {
-  ::slotted(#{$prefix}-table-header-cell),
-  ::slotted(#{$prefix}-table-cell) {
-    padding-left: $spacing-03;
-  }
-}
 
 :host(#{$prefix}-table-header-row[selection-name][expandable][size='xs']),
 :host(#{$prefix}-table-row[selection-name][expandable][size='xs']) {

diff --git a/packages/carbon-web-components/src/components/data-table/_table-sort.scss b/packages/carbon-web-components/src/components/data-table/_table-sort.scss
@@ -57,3 +57,10 @@
   .#{$prefix}--table-sort__icon {
   transform: rotate(180deg);
 }
+
+:host(#{$prefix}-table-header-cell[sort-direction]) {
+  ::slotted(#{$prefix}-slug) {
+    margin-inline-end: auto;
+    margin-inline-start: $spacing-03;
+  }
+}
diff --git a/packages/carbon-web-components/src/components/data-table/data-table.scss b/packages/carbon-web-components/src/components/data-table/data-table.scss
@@ -14,6 +14,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/checkbox';
 
 @use '@carbon/styles/scss/components/data-table' as *;

diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
@@ -9,6 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
 import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
 import { prefix } from '../../globals/settings';
@@ -37,23 +38,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
    * Handles `click` event on the sort button.
    *
    */
-  private _handleClickSortButton() {
-    const nextSortDirection = this._getNextSort();
-    const init = {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: {
-        oldSortDirection: this.sortDirection,
-        sortDirection: nextSortDirection,
-      },
-    };
-    const constructor = this.constructor as typeof CDSTableHeaderCell;
+  private _handleClickSortButton(event) {
     if (
-      this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))
+      !(event.target as HTMLElement).matches(
+        (this.constructor as typeof CDSTableHeaderCell).slugItem
+      )
     ) {
-      this.sortActive = true;
-      this.sortDirection = nextSortDirection;
+      const nextSortDirection = this._getNextSort();
+      const init = {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          oldSortDirection: this.sortDirection,
+          sortDirection: nextSortDirection,
+        },
+      };
+      const constructor = this.constructor as typeof CDSTableHeaderCell;
+      if (
+        this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))
+      ) {
+        this.sortActive = true;
+        this.sortDirection = nextSortDirection;
+      }
     }
   }
 
@@ -65,6 +72,26 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
     this.requestUpdate();
   }
 
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlugSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSTableHeaderCell).slugItem
+            )
+          : false
+      );
+    if (hasContent.length > 0) {
+      this._hasSlug = Boolean(hasContent);
+      (hasContent[0] as HTMLElement).setAttribute('size', 'mini');
+    }
+    this.requestUpdate();
+  }
+
   /**
    * @returns The next sort direction.
    */
@@ -94,6 +121,11 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
     return directions[(index + 1) % directions.length];
   }
 
+  /**
+   * `true` if there is a slug.
+   */
+  protected _hasSlug = false;
+
   /**
    * `true` if the table has expandable rows
    */
@@ -149,10 +181,19 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
     if (this.isSortable && !changedProperties.has('sortDirection')) {
       this.sortDirection = TABLE_SORT_DIRECTION.NONE;
     }
+    if (this._hasSlug) {
+      this.setAttribute('slug', '');
+    } else {
+      this.removeAttribute('slug');
+    }
   }
 
   render() {
     const { sortDirection } = this;
+    const labelClasses = classMap({
+      [`${prefix}--table-header-label`]: true,
+      [`${prefix}--table-header-label--slug`]: this._hasSlug,
+    });
     if (sortDirection) {
       const sortIcon =
         sortDirection === TABLE_SORT_DIRECTION.NONE
@@ -170,14 +211,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
           class="${prefix}--table-sort"
           title="${this.textContent}"
           @click=${this._handleClickSortButton}>
-          <span part="label-text" class="${prefix}--table-header-label"
-            ><slot @slotchange=${this._handleSlotChange}></slot
-          ></span>
-          ${sortIcon}
+          <span class="${prefix}--table-sort__flex">
+            <span part="label-text" class="${prefix}--table-header-label"
+              ><slot @slotchange=${this._handleSlotChange}></slot
+            ></span>
+            <slot
+              name="slug"
+              @slotchange="${this._handleSlugSlotChange}"></slot>
+            ${sortIcon}
+          </span>
         </button>
       `;
     }
-    return html` <slot></slot> `;
+    return html`<span part="label-text" class="${labelClasses}">
+      <slot></slot
+      ><slot name="slug" @slotchange="${this._handleSlugSlotChange}"></slot
+    ></span> `;
+  }
+
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
   }
 
   /**