feat(data-table):slug to more stories

ariellalgilmore · Dec 12, 2023 · bdc244f · bdc244f
1 parent 0bd689f
commit bdc244f
Show file tree

Hide file tree

Showing 5 changed files with 387 additions and 53 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
@@ -71,13 +71,13 @@
   height: $spacing-09;
   position: relative;
 
-  .#{$prefix}--table-sort__flex{
+  .#{$prefix}--table-sort__flex {
     display: flex;
     align-items: center;
     justify-content: space-between;
     block-size: 100%;
     inline-size: 100%;
-    min-block-size: 3rem;
+    min-block-size: $spacing-09;
   }
 }
 
@@ -99,7 +99,7 @@
   padding-top: rem(14px);
 }
 
-:host(#{$prefix}-table-header-cell[slug]){
+:host(#{$prefix}-table-header-cell[slug]) {
   .#{$prefix}--table-header-label--slug {
     display: flex;
     align-items: center;
@@ -211,6 +211,26 @@
   }
 }
 
+: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[selection-name][rows-with-slug]),
+:host(#{$prefix}-table-row[selection-name][expandable]) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: $spacing-03;
+  }
+}
+
 //
 // Table row
 //
@@ -421,6 +441,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-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
@@ -39,9 +39,11 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
    *
    */
   private _handleClickSortButton(event) {
-    if(!(event.target as HTMLElement).matches(
-      (this.constructor as typeof CDSTableHeaderCell).slugItem
-    )){
+    if (
+      !(event.target as HTMLElement).matches(
+        (this.constructor as typeof CDSTableHeaderCell).slugItem
+      )
+    ) {
       const nextSortDirection = this._getNextSort();
       const init = {
         bubbles: true,
@@ -179,10 +181,10 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
     if (this.isSortable && !changedProperties.has('sortDirection')) {
       this.sortDirection = TABLE_SORT_DIRECTION.NONE;
     }
-    if(this._hasSlug){
+    if (this._hasSlug) {
       this.setAttribute('slug', '');
     } else {
-      this.removeAttribute('slug')
+      this.removeAttribute('slug');
     }
   }
 
@@ -213,14 +215,18 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) {
             <span part="label-text" class="${prefix}--table-header-label"
               ><slot @slotchange=${this._handleSlotChange}></slot
             ></span>
-            <slot name="slug" @slotchange="${this._handleSlugSlotChange}"></slot>
-          ${sortIcon}
+            <slot
+              name="slug"
+              @slotchange="${this._handleSlugSlotChange}"></slot>
+            ${sortIcon}
           </span>
-
         </button>
       `;
     }
-    return html`<span part="label-text" class="${labelClasses}"> <slot></slot><slot name="slug" @slotchange="${this._handleSlugSlotChange}"></slot></span> `;
+    return html`<span part="label-text" class="${labelClasses}">
+      <slot></slot
+      ><slot name="slug" @slotchange="${this._handleSlugSlotChange}"></slot
+    ></span> `;
   }
 
   /**

diff --git a/packages/carbon-web-components/src/components/data-table/table-row.ts b/packages/carbon-web-components/src/components/data-table/table-row.ts
@@ -174,11 +174,14 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
     const { _handleClickExpando: handleClickExpando } = this;
     return html`
       <div class="${prefix}--table-expand">
-        <button
-          class="${prefix}--table-expand__button"
-          @click="${handleClickExpando}">
-          ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
-        </button>
+        <div style="display: flex; height: 100%">
+          <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
+          <button
+            class="${prefix}--table-expand__button"
+            @click="${handleClickExpando}">
+            ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
+          </button>
+        </div>
       </div>
     `;
   }
@@ -220,17 +223,20 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
       ? undefined
       : html`
           <div class="${prefix}--table-column-checkbox">
-            ${radio
-              ? html`<cds-radio-button data-table></cds-radio-button>`
-              : html`<cds-checkbox
-                  hide-label
-                  ?hide-checkbox="${hideCheckbox}"
-                  label-text="${selectionLabel}"
-                  name=${selectionName}
-                  data-table
-                  ?disabled=${disabled}
-                  ?checked=${selected}
-                  value=${selectionValue}></cds-checkbox> `}
+            <div style="display: flex; height: 100%">
+              <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
+              ${radio
+                ? html`<cds-radio-button data-table></cds-radio-button>`
+                : html`<cds-checkbox
+                    hide-label
+                    ?hide-checkbox="${hideCheckbox}"
+                    label-text="${selectionLabel}"
+                    name=${selectionName}
+                    data-table
+                    ?disabled=${disabled}
+                    ?checked=${selected}
+                    value=${selectionValue}></cds-checkbox> `}
+            </div>
           </div>
         `;
   }
@@ -375,14 +381,10 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
       }
     }
 
-    // if(this._hasSlug){
-    //   this.setAttribute("slug", "");
-    // } else {
-    //   this.removeAttribute("slug")
-    // }
-
-    if(this._hasSlug){
-      console.log(this.parentElement?.parentElement?.setAttribute("has-slug", ""))
+    if (this._hasSlug) {
+      this.setAttribute('slug', '');
+    } else {
+      this.removeAttribute('slug');
     }
   }
 
@@ -393,7 +395,6 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
       )?.setAttribute('is-selectable', '');
     }
     return html`
-      <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
       ${this.expandable ? this._renderExpandButton() : ''}
       ${this._renderFirstCells()}
       <slot></slot>
@@ -450,7 +451,6 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
     return `${prefix}-slug`;
   }
 
-
   /**
    * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.
    * Cancellation of this event stops the user-initiated action of toggling the expanded state.

diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts
@@ -37,8 +37,6 @@ export { TABLE_SIZE };
  */
 @customElement(`${prefix}-table`)
 class CDSTable extends HostListenerMixin(LitElement) {
-
-  private _rowsWithAI = false;
   /**
    * The map of how sorting direction affects sorting order.
    */
@@ -220,6 +218,12 @@ class CDSTable extends HostListenerMixin(LitElement) {
   @property({ type: Boolean, attribute: 'with-header', reflect: true })
   withHeader;
 
+  /**
+   *  true if slugs are added in the rows
+   */
+  @property({ type: Boolean, attribute: 'with-row-slugs' })
+  withRowSlugs = false;
+
   private _handleSlotChange({ target }: Event) {
     const hasContent = (target as HTMLSlotElement)
       .assignedNodes()
@@ -726,6 +730,18 @@ class CDSTable extends HostListenerMixin(LitElement) {
       );
       (tableBody as any).useZebraStyles = this.useZebraStyles;
     }
+
+    if (this.withRowSlugs) {
+      this._tableHeaderRow.setAttribute('rows-with-slug', '');
+      this._tableRows.forEach((row) => {
+        row.setAttribute('rows-with-slug', '');
+      });
+    } else {
+      this._tableHeaderRow.removeAttribute('rows-with-slug');
+      this._tableRows.forEach((row) => {
+        row.removeAttribute('rows-with-slug');
+      });
+    }
   }
 
   /* eslint-disable no-constant-condition */