feat(data-table): ai updates

ariellalgilmore · Feb 12, 2024 · 3d44502 · 3d44502
1 parent a1560a5
commit 3d44502
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 54 deletions.
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
@@ -87,7 +87,9 @@
 
 :host(#{$prefix}-table-header-cell[slug]),
 :host(#{$prefix}-table-header-cell[slug]) .#{$prefix}--table-sort {
-  @include ai-gradient('top', 100%);
+  @include ai-table-gradient();
+
+  box-shadow: inset 0 1px $ai-border-strong;
 }
 
 :host(#{$prefix}-table-header-cell[sticky-header]) {
@@ -103,14 +105,14 @@
   padding-block-start: rem(14px);
 }
 
-:host(#{$prefix}-table-header-cell[slug]) {
+:host(#{$prefix}-table-header-cell[slug]:not([is-sortable])) {
   .#{$prefix}--table-header-label--slug {
     display: flex;
     align-items: center;
   }
 
   ::slotted(#{$prefix}-slug) {
-    margin-inline-start: $spacing-03;
+    margin-inline-start: auto;
   }
 }
 
@@ -222,26 +224,6 @@
   }
 }
 
-:host(#{$prefix}-table-header-row[rows-with-slug]) {
-  .#{$prefix}--table-column-checkbox,
-  .#{$prefix}--table-expand {
-    padding-inline-start: $spacing-08;
-  }
-}
-:host(#{$prefix}-table-header-row[rows-with-slug]),
-:host(#{$prefix}-table-row[rows-with-slug]) {
-  #{$prefix}-checkbox {
-    padding-inline-start: $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-inline-start: 0;
-  }
-}
-
 //
 // Table row
 //
@@ -271,7 +253,6 @@
 :host(#{$prefix}-table-cell) {
   padding: 0 $spacing-05;
   border-block-end: 1px solid $border-subtle;
-  border-block-start: 1px solid $layer-01;
 
   ::slotted(#{$prefix}-overflow-menu:hover) {
     background-color: none;
@@ -284,6 +265,10 @@
   }
 }
 
+:host(#{$prefix}-table-cell[slug-in-header]) {
+  @include ai-table-gradient;
+}
+
 :host(#{$prefix}-table-cell-content) {
   @include type-style('label-01');
 
@@ -335,7 +320,6 @@
   .#{$prefix}--table-expand {
     display: table-cell;
     border-block-end: 1px solid $border-subtle;
-    border-block-start: 1px solid $layer-01;
     padding-inline-end: 0;
     transition: transform $duration-moderate-01 motion(standard, productive);
   }
@@ -398,10 +382,12 @@
 :host(#{$prefix}-table-row[selection-name][expandable][highlighted]),
 :host(#{$prefix}-table-row[expandable]:hover),
 :host(#{$prefix}-table-row[selection-name][expandable]:hover) {
-  ::slotted(#{$prefix}-table-cell),
-  .#{$prefix}--table-expand,
-  .#{$prefix}--table-column-checkbox {
-    border-block-end-color: $border-subtle;
+  &:not([slug]) {
+    ::slotted(#{$prefix}-table-cell),
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox {
+      border-block-end-color: $border-subtle;
+    }
   }
 }
 
@@ -421,7 +407,6 @@
   ::slotted(#{$prefix}-table-cell-skeleton) {
     background-color: $layer-accent-01;
     border-block-end: 1px solid $layer-accent-01;
-    border-block-start: 1px solid $layer-accent-01;
   }
 }
 
@@ -448,26 +433,65 @@
   ::slotted(#{$prefix}-table-cell-skeleton) {
     background-color: $background-hover;
     border-block-end: 1px solid $layer-hover-01;
-    border-block-start: 1px solid $layer-hover-01;
   }
 }
 
+//aligns selection and expansion with slug
 :host(#{$prefix}-table-row[rows-with-slug]) {
-  .#{$prefix}--table-column-checkbox,
+  #{$prefix}-checkbox,
+  #{$prefix}-radio-button {
+    padding-inline-start: 2rem;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-inline-start: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand__button {
+    margin-inline-start: $spacing-06;
+  }
+
+  &[slug] {
+    #{$prefix}-checkbox,
+    #{$prefix}-radio-button {
+      padding-inline-start: $spacing-05;
+    }
+
+    .#{$prefix}--table-expand__button {
+      margin-inline-start: $spacing-03;
+    }
+  }
+}
+
+// alighs header with selection and expansion items
+:host(#{$prefix}-table-header-row[rows-with-slug]) {
   .#{$prefix}--table-expand {
     padding-inline-start: $spacing-08;
   }
+  .#{$prefix}--table-column-checkbox {
+    padding-inline-start: $spacing-09;
+  }
+}
 
-  ::slotted(#{$prefix}-slug) {
-    padding: 0 $spacing-03;
-    margin-inline-start: -$spacing-07;
+: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-inline-start: 0;
+  }
+  #{$prefix}-checkbox {
+    padding-inline-start: $spacing-03;
   }
 }
 
 :host(#{$prefix}-table-row[slug]) {
-  @include ai-gradient('left', 50%);
+  @include ai-table-gradient();
 
   background-attachment: fixed;
+  box-shadow: inset 1px 0 $ai-border-strong;
+
+  &:hover {
+    @include ai-table-gradient('hover');
+  }
 }
 
 :host(#{$prefix}-table-header-title) {

diff --git a/packages/carbon-web-components/src/components/data-table/_table-expandable.scss b/packages/carbon-web-components/src/components/data-table/_table-expandable.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2023
+// Copyright IBM Corp. 2020, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -68,3 +68,45 @@
 :host(#{$prefix}-table-expanded-row[selected][highlighted]) {
   background-color: $layer-selected;
 }
+
+:host(#{$prefix}-table-row[slug][expandable][selection-name][selected]),
+:host(#{$prefix}-table-row[slug][expandable]) {
+  &:hover,
+  &[highlighted] {
+    @include ai-table-gradient('hover');
+
+    ::slotted(#{$prefix}-table-cell),
+    ::slotted(#{$prefix}-table-cell-skeleton),
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox {
+      background: none;
+    }
+
+    .#{$prefix}--table-expand {
+      border-block-end-color: transparent;
+    }
+  }
+
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    background: none;
+  }
+
+  .#{$prefix}--table-expand {
+    border-block-end-color: transparent;
+  }
+}
+
+:host(#{$prefix}-table-expanded-row[slug]) {
+  @include ai-table-gradient();
+
+  td {
+    padding-inline-start: to-rem(88px);
+  }
+
+  &[highlighted] {
+    @include ai-table-gradient('hover');
+  }
+}
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
@@ -24,7 +24,6 @@
 :host(#{$prefix}-table-row) {
   .#{$prefix}--table-column-checkbox {
     border-block-end: 1px solid $border-subtle;
-    border-block-start: 1px solid $layer-01;
     padding-inline: $spacing-05 $spacing-02;
 
     .#{$prefix}--checkbox-label {
@@ -50,7 +49,6 @@
     background-color: $layer-accent-01;
     // bottom border acts as separator from other rows
     border-block-end: 1px solid $layer-active;
-    border-block-start: 1px solid $border-subtle-01;
     color: $text-primary;
   }
 
@@ -72,14 +70,29 @@
   display: none !important;
 }
 
-:host(#{$prefix}-table-row[selected][slug]) {
+:host(#{$prefix}-table-expanded-row[selected][slug]:not([highlighted])),
+:host(#{$prefix}-table-row[selected][slug]),
+:host(#{$prefix}-table-row[expandable][selected][slug]) {
+  @include ai-table-gradient('selected');
+
+  &[highlighted],
+  &:hover {
+    @include ai-table-gradient('hover');
+
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .#{$prefix}--table-column-checkbox,
+    ::slotted(#{$prefix}-table-cell),
+    .#{$prefix}--table-expand,
+    .#{$prefix}--table-column-checkbox {
+      background: none;
+    }
+  }
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    background-color: transparent;
+    background: none;
   }
 }
-
-:host(#{$prefix}-table-row[selected][rows-with-slug]) {
-  background-color: $layer-selected;
-}
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
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -57,8 +57,14 @@
   transform: rotate(180deg);
 }
 
-:host(#{$prefix}-table-header-cell[sort-direction]) {
+// places slug near sorting icon in header
+:host(#{$prefix}-table-header-cell[sort-direction][slug]) {
+  .#{$prefix}--table-sort__icon-unsorted,
+  .#{$prefix}--table-sort__icon {
+    margin-inline: auto $spacing-03;
+  }
+
   ::slotted(#{$prefix}-slug) {
-    margin-inline: $spacing-03 auto;
+    margin-inline-end: $spacing-03;
   }
 }
diff --git a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -81,6 +81,12 @@ class CDSTableExpandedRow extends HostListenerMixin(LitElement) {
     `;
   }
 
+  updated() {
+    this.previousElementSibling?.hasAttribute('slug')
+      ? this.setAttribute('slug', '')
+      : this.removeAttribute('slug');
+  }
+
   /**
    * A selector that will return the previous sibling row.
    */

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
@@ -215,16 +215,16 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
         <button
           part="sort-button"
           class="${prefix}--table-sort"
-          title="${this.textContent}"
+          title="${this.innerText}"
           @click=${this._handleClickSortButton}>
           <span class="${prefix}--table-sort__flex">
             <span part="label-text" class="${prefix}--table-header-label"
               ><slot @slotchange=${this._handleSlotChange}></slot
             ></span>
+            ${sortIcon}
             <slot
               name="slug"
               @slotchange="${this._handleSlugSlotChange}"></slot>
-            ${sortIcon}
           </span>
         </button>
       `;

diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts
@@ -779,6 +779,30 @@ class CDSTable extends HostListenerMixin(LitElement) {
         row.removeAttribute('rows-with-slug');
       });
     }
+
+    // Gets table header info to add to the column cells for styles
+    const headersWithSlug = [] as any;
+
+    Array.prototype.slice
+      .call(this._tableHeaderRow.children)
+      .forEach((headerCell, index) => {
+        if (headerCell.querySelector(`${prefix}-slug`)) {
+          headerCell.setAttribute('slug', '');
+          headersWithSlug.push(index);
+        } else {
+          headerCell.removeAttribute('slug');
+        }
+      });
+
+    this._tableRows.forEach((row) => {
+      Array.prototype.slice
+        .call((row as HTMLElement).children)
+        .forEach((cell, index) => {
+          headersWithSlug.includes(index)
+            ? cell.setAttribute('slug-in-header', '')
+            : cell.removeAttribute('slug-in-header');
+        });
+    });
   }
 
   /* eslint-disable no-constant-condition */

diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss
@@ -26,7 +26,6 @@
   align-items: center;
   justify-content: center;
   margin: 0;
-  block-size: calc(100vh - 84px);
   inline-size: calc(100vw - 84px);
 }