feat(Datagrid): add ai slug support to col headers (#4163)

* feat(Datagrid): start slug addition in col headers

* feat(Datagrid): add column header slug support

* chore: update initial widths

* chore: revert copyright header change

* chore: small refactor

packages/core/story-structure.js

@@ -54,6 +54,7 @@ const s = [
               'c/Datagrid/Extensions/EditableCell',
               'c/Datagrid/Extensions/ColumnCustomization',
               'c/Datagrid/Extensions/Skeleton',
+              'c/Datagrid/Extensions/Slug',
             ],
           },
           { n: 'DelimitedList', s: ['c/DelimitedList'] },

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

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
@@ -157,6 +158,16 @@
   background-color: $background;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug {
+  @include ai-gradient('top', 100%);
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-slug
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
+
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
@@ -243,6 +254,10 @@
     white-space: initial;
   }
 
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
+    width: fit-content;
+  }
+
   .#{$block-class}__expanded-row {
     display: flex;
     overflow: hidden;

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /**
- * 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.
@@ -17,6 +17,7 @@ import {
   handleColumnResizingEvent,
 } from './addons/stateReducer';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
+import { ColumnHeaderSlug } from './addons/Slug/ColumnHeaderSlug';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
@@ -92,7 +93,7 @@ const ResizeHeader = ({
 };
 
 const HeaderRow = (datagridState, headRef, headerGroup) => {
-  const { resizerAriaLabel } = datagridState;
+  const { resizerAriaLabel, isTableSortable } = datagridState;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   useEffect(() => {
@@ -149,6 +150,13 @@ const HeaderRow = (datagridState, headRef, headerGroup) => {
     ...headerGroupProps
   } = headerGroup.getHeaderGroupProps();
 
+  const renderSlug = (slug) => {
+    if (isTableSortable) {
+      return;
+    }
+    return <ColumnHeaderSlug slug={slug} />;
+  };
+
   return (
     <TableRow
       {...headerGroupProps}
@@ -185,12 +193,15 @@ const HeaderRow = (datagridState, headRef, headerGroup) => {
                   datagridState.isTableSortable && header.id !== 'spacer',
                 [`${blockClass}__isSorted`]: header.isSorted,
                 [`${blockClass}__header-actions-column`]: header.isAction,
+                [`${blockClass}__with-slug`]:
+                  header.slug && React.isValidElement(header.slug),
               })}
               key={header.id}
               aria-hidden={header.id === 'spacer' && 'true'}
               {...getAccessibilityProps(header)}
             >
               {header.render('Header')}
+              {renderSlug(header.slug)}
               {resizerProps && !header.isAction && (
                 <ResizeHeader
                   {...{

packages/ibm-products/src/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js

@@ -0,0 +1,27 @@
+/**
+ * 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, { forwardRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+
+export const ColumnHeaderSlug = forwardRef(({ slug }, ref) => {
+  if (slug && isValidElement(slug)) {
+    const normalizedSlug = React.cloneElement(slug, {
+      size: 'mini',
+      ref,
+    });
+    return normalizedSlug;
+  }
+  return;
+});
+
+ColumnHeaderSlug.propTypes = {
+  /**
+   * Specify the AI slug to be displayed
+   */
+  slug: PropTypes.node,
+};