feat(Datagrid): apply latest ai gradients to Datagrid (#4377)

* fix(DataGrid): add support for selectrow and nestedrow * feat(Datagrid): apply latest ai gradients * chore: remove comments * chore: revert nested row changes pulled in accidentally * chore: update snapshot * chore: refactor how row class names are applied * fix: remove extra border --------- Co-authored-by: Ratheesh Rajan <[email protected]>
carbon-design-system · Feb 21, 2024 · 3702c93 · 3702c93
1 parent 1a1c488
commit 3702c93
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 23 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -3201,16 +3201,41 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--datagrid th.c4p--datagrid__with-slug {
-  background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 0 1px var(--cds-ai-border-strong, #4589ff);
+}
+
+.c4p--datagrid th.c4p--datagrid__with-slug,
+.c4p--datagrid td.c4p--datagrid__slug--cell {
+  background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
 }
 
-.c4p--datagrid .cds--data-table tbody tr:has(> .c4p--datagrid__table-row-ai-enabled) {
-  background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
-  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row,
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row + .c4p--datagrid__expanded-row {
+  background: linear-gradient(to right, var(--cds-ai-aura-start-table, rgba(69, 137, 255, 0.15)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%);
   background-attachment: fixed;
 }
 
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 1px 0 var(--cds-ai-border-strong, #4589ff);
+}
+
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row:hover,
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected:hover,
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.c4p--datagrid__carbon-row-expanded:hover + .c4p--datagrid__expanded-row,
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row {
+  background: linear-gradient(to right, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%), var(--cds-ai-aura-hover-background, #edf5ff);
+}
+
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__expandable-row--hover.c4p--datagrid__slug--row td {
+  background-color: transparent;
+}
+
+.c4p--datagrid .cds--data-table tbody tr.c4p--datagrid__slug--row.cds--data-table--selected {
+  background: linear-gradient(to right, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), var(--cds-layer-selected);
+}
+
 .c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
   margin-left: 0.5rem;
 }
@@ -3750,6 +3775,9 @@ p.c4p--about-modal__copyright-text:first-child {
   display: flex;
   align-items: center;
 }
+.c4p--datagrid .c4p--datagrid__table-row-ai-enabled.c4p--datagrid__slug--expanded {
+  border: none;
+}
 
 .c4p--datagrid .c4p--datagrid__table-row-ai-spacer,
 .c4p--datagrid .c4p--datagrid__table-row-ai-enabled {

diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.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.
@@ -159,18 +159,72 @@
 }
 
 .#{$block-class} th.#{$block-class}__with-slug {
-  @include ai-gradient('top', 100%);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 0 1px $ai-border-strong;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug,
+.#{$block-class} td.#{$block-class}__slug--cell {
+  @include ai-table-gradient();
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row,
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table
   tbody
-  tr:has(> .#{$block-class}__table-row-ai-enabled) {
-  @include ai-gradient('left', 50%);
+  tr.#{$block-class}__slug--row
+  + .#{$block-class}__expanded-row {
+  @include ai-table-gradient();
 
   background-attachment: fixed;
 }
 
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 1px 0 $ai-border-strong;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{$block-class}__carbon-row-expanded:hover
+  + .#{$block-class}__expanded-row,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__slug--row {
+  @include ai-table-gradient('hover');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__slug--row
+  td {
+  background-color: transparent;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__slug--row.#{c4p-settings.$carbon-prefix}--data-table--selected {
+  @include ai-table-gradient('selected');
+}
+
 .#{$block-class}
   th.#{$block-class}__with-slug
   .#{c4p-settings.$carbon-prefix}--slug {
@@ -804,6 +858,9 @@
 .#{$block-class} .#{$block-class}__table-row-ai-enabled {
   display: flex;
   align-items: center;
+  &.#{$block-class}__slug--expanded {
+    border: none;
+  }
 }
 
 .#{$block-class} .#{$block-class}__table-row-ai-spacer,

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.js
@@ -1,12 +1,13 @@
 /**
- * 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.
  */
 
-import React from 'react';
+import React, { isValidElement } from 'react';
 import { pkg } from '../../../settings';
+import cx from 'classnames';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
@@ -18,8 +19,8 @@ const DatagridExpandedRow =
 
     const toggleParentHoverClass = (event, eventType) => {
       /* istanbul ignore else */
-      if (event?.target?.parentNode?.previousElementSibling) {
-        const parentNode = event.target.parentNode.previousElementSibling;
+      if (event?.target?.closest('tr').previousElementSibling) {
+        const parentNode = event?.target?.closest('tr').previousElementSibling;
         if (eventType === 'enter') {
           parentNode.classList.add(`${blockClass}__expandable-row--hover`);
         } else {
@@ -30,7 +31,9 @@ const DatagridExpandedRow =
 
     return (
       <tr
-        className={`${blockClass}__expanded-row`}
+        className={cx(`${blockClass}__expanded-row`, {
+          [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
+        })}
         onMouseEnter={(event) => toggleParentHoverClass(event, 'enter')}
         onMouseLeave={(event) => toggleParentHoverClass(event)}
       >

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.js
@@ -36,6 +36,7 @@ const DatagridRow = (datagridState) => {
     withExpandedRows,
     withMouseHover,
     setMouseOverRowIndex,
+    headers,
   } = datagridState;
 
   const getVisibleNestedRowCount = ({ isExpanded, subRows }) => {
@@ -116,12 +117,6 @@ const DatagridRow = (datagridState) => {
     }
   };
 
-  const rowClassNames = cx(`${blockClass}__carbon-row`, {
-    [`${blockClass}__carbon-row-expanded`]: row.isExpanded,
-    [`${blockClass}__carbon-row-expandable`]: row.canExpand,
-    [`${carbon.prefix}--data-table--selected`]: row.isSelected,
-  });
-
   const setAdditionalRowProps = () => {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -132,14 +127,21 @@ const DatagridRow = (datagridState) => {
   };
 
   // eslint-disable-next-line no-unused-vars
-  const { role, ...rowProps } = row.getRowProps();
+  const { role, className, ...rowProps } = row.getRowProps();
   const foundAIRow = rows.some((r) => isValidElement(r?.original?.slug));
 
+  const rowClassNames = cx(`${blockClass}__carbon-row`, {
+    [`${blockClass}__carbon-row-expanded`]: row.isExpanded,
+    [`${blockClass}__carbon-row-expandable`]: row.canExpand,
+    [`${carbon.prefix}--data-table--selected`]: row.isSelected,
+    [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
+  });
+
   return (
     <React.Fragment key={key}>
       <TableRow
-        className={rowClassNames}
         {...rowProps}
+        className={cx(rowClassNames, className)}
         key={row.id}
         onMouseEnter={hoverHandler}
         onMouseLeave={handleMouseLeave}
@@ -150,7 +152,11 @@ const DatagridRow = (datagridState) => {
       >
         {foundAIRow ? (
           row?.original?.slug ? (
-            <td className={`${blockClass}__table-row-ai-enabled`}>
+            <td
+              className={cx(`${blockClass}__table-row-ai-enabled`, {
+                [`${blockClass}__slug--expanded`]: row.isExpanded,
+              })}
+            >
               <DatagridSlug slug={row?.original?.slug} />
             </td>
           ) : (
@@ -172,11 +178,18 @@ const DatagridRow = (datagridState) => {
             return cell.render('Cell', { key: cell.column.id });
           }
           const title = content?.props?.children[0]?.props?.value;
+          const associatedHeader = headers.filter(
+            (h) => h.id === cell.column.id
+          );
           return (
             <TableCell
               className={cx(`${blockClass}__cell`, {
                 [`${blockClass}__expandable-row-cell`]:
                   row.canExpand && index === 0,
+                [`${blockClass}__slug--cell`]:
+                  associatedHeader &&
+                  associatedHeader.length &&
+                  isValidElement(associatedHeader[0]?.slug),
               })}
               {...restProps}
               key={cell.column.id}