feat(Datagrid): slug to aiLabel renaming

packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss

@@ -156,6 +156,7 @@
   background-color: $background;
 }
 
+/* This section to be removed after support for slug dropped  - start */
 .#{$block-class} th.#{$block-class}__with-slug {
   /* stylelint-disable-next-line carbon/theme-token-use */
   box-shadow: inset 0 1px $ai-border-strong;
@@ -228,6 +229,80 @@
   .#{c4p-settings.$carbon-prefix}--slug {
   margin-left: $spacing-03;
 }
+/* This section to be removed after support for slug dropped  - end */
+
+.#{$block-class} th.#{$block-class}__with-aiLabel {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  box-shadow: inset 0 1px $ai-border-strong;
+}
+
+.#{$block-class} th.#{$block-class}__with-aiLabel,
+.#{$block-class} td.#{$block-class}__aiLabel--cell {
+  @include ai-table-gradient();
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--row,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--row
+  + .#{$block-class}__expanded-row {
+  @include ai-table-gradient();
+
+  background-attachment: fixed;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--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}__aiLabel--row:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover,
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--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}__aiLabel--row {
+  @include ai-table-gradient('hover');
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__expandable-row--hover.#{$block-class}__aiLabel--row
+  td {
+  background-color: transparent;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr.#{$block-class}__aiLabel--row.#{c4p-settings.$carbon-prefix}--data-table--selected {
+  @include ai-table-gradient('selected');
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-aiLabel
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
 
 .#{$block-class}__grid-container {
   display: block;
@@ -315,9 +390,15 @@
     white-space: initial;
   }
 
+  /* This section to be removed after support for slug dropped  - start */
   .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
     width: fit-content;
   }
+  /* This section to be removed after support for slug dropped  - end */
+
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--aiLabel {
+    width: fit-content;
+  }
 
   .#{$block-class}__expanded-row {
     display: flex;
@@ -889,9 +970,16 @@
 .#{$block-class} .#{$block-class}__table-row-ai-enabled {
   display: flex;
   align-items: center;
+
+  /* This section to be removed after support for slug dropped  - start */
   &.#{$block-class}__slug--expanded {
     border: none;
   }
+  /* This section to be removed after support for slug dropped  - end */
+
+  &.#{$block-class}__aiLabel--expanded {
+    border: none;
+  }
 }
 
 .#{$block-class} .#{$block-class}__table-row-ai-spacer,

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx

@@ -37,6 +37,9 @@ const DatagridExpandedRow =
       <tr
         className={cx(`${blockClass}__expanded-row`, {
           [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
+          [`${blockClass}__aiLabel--row`]: isValidElement(
+            row?.original?.aiLabel
+          ),
         })}
         onMouseEnter={(event) => toggleParentHoverClass(event, 'enter')}
         onMouseLeave={(event) => toggleParentHoverClass(event)}

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx

@@ -22,7 +22,7 @@ import {
   handleColumnResizingEvent,
 } from './addons/stateReducer';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
-import { DatagridSlug } from './addons/Slug/DatagridSlug';
+import { DatagridAILabel } from './addons/AILAbel/DatagridLabel';
 import { useInitialColumnSort } from '../useInitialColumnSort';
 import {
   DataGridHeader,
@@ -182,14 +182,17 @@ const HeaderRow = (
   const { className: headerGroupClassName, ...headerGroupProps } =
     headerGroup.getHeaderGroupProps({ role: undefined });
 
-  const renderSlug = (slug) => {
+  const renderAILabel = (aiLabel) => {
     if (isTableSortable) {
       return;
     }
-    return <DatagridSlug slug={slug} />;
+    return <DatagridAILabel aiLabel={aiLabel} />;
   };
 
-  const foundAIRow = rows.some((r) => isValidElement(r?.original?.slug));
+  const foundAIRow = rows.some(
+    (r) =>
+      isValidElement(r?.original?.aiLabel) || isValidElement(r?.original?.slug)
+  );
   const { key, ...rowProps } = headerGroupProps;
   const withActionsColumn = headers
     ? !!headers.filter((header) => header.isAction).length
@@ -244,6 +247,8 @@ const HeaderRow = (
                   [`${blockClass}__header-actions-column`]: header?.isAction,
                   [`${blockClass}__with-slug`]:
                     header.slug && React.isValidElement(header?.slug),
+                  [`${blockClass}__with-aiLabel`]:
+                    header.aiLabel && React.isValidElement(header?.aiLabel),
                 },
                 headerProps.className
               )}
@@ -252,7 +257,9 @@ const HeaderRow = (
               {...getAccessibilityProps(header)}
             >
               {header.render('Header')}
-              {renderSlug(header.slug)}
+              {header.aiLabel
+                ? renderAILabel(header.aiLabel)
+                : renderAILabel(header.slug)}
               {resizerProps && !header.isAction && (
                 <ResizeHeader
                   {...{

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx

@@ -11,7 +11,7 @@ import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';
-import { DatagridSlug } from './addons/Slug/DatagridSlug';
+import { DatagridAILabel } from './addons/AILAbel/DatagridLabel';
 import { DataGridState } from '../types';
 
 const blockClass = `${pkg.prefix}--datagrid`;
@@ -132,7 +132,10 @@ const DatagridRow = (datagridState: DataGridState) => {
   };
 
   const { className, ...rowProps } = row.getRowProps({ role: undefined });
-  const foundAIRow = rows.some((r) => isValidElement(r?.original?.slug));
+  const foundAIRow = rows.some(
+    (r) =>
+      isValidElement(r?.original?.aiLabel) || isValidElement(r?.original?.slug)
+  );
 
   const rowClassNames = cx(`${blockClass}__carbon-row`, {
     [`${blockClass}__carbon-row-expanded`]: row.isExpanded,
@@ -141,6 +144,7 @@ const DatagridRow = (datagridState: DataGridState) => {
       getAsyncSubRows && row.depth > 0,
     [`${carbon.prefix}--data-table--selected`]: row.isSelected,
     [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
+    [`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel),
   });
 
   const withActionsColumn = headers
@@ -162,13 +166,21 @@ const DatagridRow = (datagridState: DataGridState) => {
         {...setAdditionalRowProps()}
       >
         {foundAIRow ? (
-          row?.original?.slug ? (
+          row?.original?.aiLabel ? (
+            <td
+              className={cx(`${blockClass}__table-row-ai-enabled`, {
+                [`${blockClass}__aiLabel--expanded`]: row.isExpanded,
+              })}
+            >
+              <DatagridAILabel aiLabel={row?.original?.aiLabel} />
+            </td>
+          ) : row?.original?.slug ? (
             <td
               className={cx(`${blockClass}__table-row-ai-enabled`, {
                 [`${blockClass}__slug--expanded`]: row.isExpanded,
               })}
             >
-              <DatagridSlug slug={row?.original?.slug} />
+              <DatagridAILabel aiLabel={row?.original?.slug} />
             </td>
           ) : (
             <td className={`${blockClass}__table-row-ai-spacer`} />
@@ -213,6 +225,10 @@ const DatagridRow = (datagridState: DataGridState) => {
                     associatedHeader &&
                     associatedHeader.length &&
                     isValidElement(associatedHeader[0]?.slug),
+                  [`${blockClass}__aiLabel--cell`]:
+                    associatedHeader &&
+                    associatedHeader.length &&
+                    isValidElement(associatedHeader[0]?.aiLabel),
                 },
                 columnClassname
               )}

packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridLabel.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2024, 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, {
+  ForwardedRef,
+  ReactNode,
+  forwardRef,
+  isValidElement,
+} from 'react';
+import PropTypes from 'prop-types';
+
+interface DatagridAILabelProps {
+  aiLabel?: ReactNode;
+}
+
+interface NormalizedAILabeProps {
+  size?: string;
+  ref?: ForwardedRef<HTMLDivElement>;
+}
+
+export const DatagridAILabel = forwardRef(
+  ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef<HTMLDivElement>) => {
+    if (aiLabel && isValidElement(aiLabel)) {
+      const normalizedAILabel = React.cloneElement(aiLabel, {
+        size: 'mini',
+        ref,
+      } as NormalizedAILabeProps);
+      return normalizedAILabel;
+    }
+    return null;
+  }
+);
+
+DatagridAILabel.propTypes = {
+  /**
+   * Specify the AI AILabel to be displayed
+   */
+  aiLabel: PropTypes.node,
+};