feat(Datagrid): slug to aiLabel renaming #6151

sangeethababu9223 · 2024-10-03T04:26:53Z

Closes #6097

Rename slug aiLabel.

What did you change?

Added new key aiLabel for column / row data
Updated Docs section with aiLabel
Deprecated Slug - Since slug is not a prop here but key value pair being passed as data, doc updated to inform the it will be supported for a limited time only in future.
Use AILabel component instead of Slug
Story renamed to AILabel from Slug, Since the same is done in core carbon
Updated the style with aiLabel classes as per the Core carbon standard

How did you test and verify your work?

Storybook

netlify · 2024-10-03T04:27:11Z

✅ Deploy Preview for carbon-for-ibm-products ready!

Name	Link
🔨 Latest commit	`da518f4`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6717a543f52fc60008305eb7
😎 Deploy Preview	https://deploy-preview-6151--carbon-for-ibm-products.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…to-ailabel

AlexanderMelox · 2024-10-03T14:48:19Z

packages/ibm-products/src/components/Datagrid/types/index.ts

@@ -194,7 +194,8 @@ export interface DataGridHeader<T extends object = any>
    UseSortByColumnProps<T> {
  className(className: any, arg1: { [x: string]: any }): unknown;
  isAction?: boolean;
-  slug?: any;
+  slug?: any; // To be removed once the support for slug is not available
+  aiLabel?: any;


Suggested change

aiLabel?: any;

aiLabel?: ReactNode | boolean;

Thanks @AlexanderMelox. I've updated the type for both slug and aiLabel to ReactNode. Since we would only be passing AILabel component as value for aiLabel, I've not added boolean here.

I've to look into a few more things for this issue, Once that is done I'll change the PR to ready for review

devadula-nandan · 2024-10-07T10:55:32Z

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

should the file name be DatagridAiLabel.tsx? and the folder name as AiLabel? as we are following pascal case? @AlexanderMelox any idea on what to use here ?

Thanks @devadula-nandan.
This is updated.
I was facing some issues with git case sensitivity while renaming. But this is sorted now.

devadula-nandan · 2024-10-07T11:36:46Z

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 */


can we remove this section in this pr itself? and add corresponding aiLabel class names conditionally on presence of aiLabel || slug prop? can refer alex pr.

Some adapters are using slug classes for customising the style for the values passed as slug. Hence completely removing the classes could break such code. To be on the safer side it would be better to keep the slug classes until we completely remove the support for slug.

For now, I've left this as it is. I tried to refactor this section by adding aiLabel classes along with the slug classes. But this feels too bulky and not so readable. Since we are going to remove the slug classes in future anyway, it felt this would make more sense.

devadula-nandan · 2024-10-07T11:41:19Z

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

@@ -315,9 +390,15 @@
    white-space: initial;
  }

+  /* This section to be removed after support for slug dropped  - start */


same here too, this could be removed in this pr itself, and add corresponding aiLabel classname conditionally on presence of aiLabel || slug prop? can refer alex pr.

Some adapters are using slug classes for customising the style for the values passed as slug. Hence completely removing the classes could break such code. To be on the safer side it would be better to keep the slug classes until we completely remove the support for slug.

devadula-nandan · 2024-10-07T11:41:28Z

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

  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
    width: fit-content;
  }
+  /* This section to be removed after support for slug dropped  - end */


same here too, this could be removed in this pr itself, and add corresponding aiLabel classname conditionally on presence of aiLabel || slug prop? can refer alex pr.

Some adapters are using slug classes for customising the style for the values passed as slug. Hence completely removing the classes could break such code. To be on the safer side it would be better to keep the slug classes until we completely remove the support for slug.
I've refactored the style in this section to avoid duplication of styles.

devadula-nandan · 2024-10-07T11:41:48Z

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

@@ -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 */


same here too, this could be removed in this pr itself, and add corresponding aiLabel classname conditionally on presence of aiLabel || slug prop? can refer alex pr.

Some adapters are using slug classes for customising the style for the values passed as slug. Hence completely removing the classes could break such code. To be on the safer side it would be better to keep the slug classes until we completely remove the support for slug.
I've refactored the style in this section to avoid duplication of styles.

devadula-nandan · 2024-10-07T11:44:21Z

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),


this can be removed as we apply aiLabel className on both the props

Suggested change

[`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),

Some adapters are using slug classes for customising the style for the values passed as slug. Hence completely removing the classes could break such code. To be on the safer side it would be better to keep the slug classes until we completely remove the support for slug.

devadula-nandan · 2024-10-07T11:45:11Z

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
+          ),


Suggested change

),

) || isValidElement(row?.original?.slug),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T11:46:15Z

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';


can fix the naming once we get a clarity on this

devadula-nandan · 2024-10-07T11:49:10Z

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

                  [`${blockClass}__with-slug`]:
                    header.slug && React.isValidElement(header?.slug),


can be removed and as we are going to apply aiLable corresponding classname on presence of slug prop or aiLabel prop

Suggested change

[`${blockClass}__with-slug`]:

header.slug && React.isValidElement(header?.slug),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T11:58:21Z

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

@@ -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),


Suggested change

[`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel),

[`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel || isValidElement(row?.original?.slug),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T12:03:52Z

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

                    associatedHeader &&
                    associatedHeader.length &&
                    isValidElement(associatedHeader[0]?.slug),


these and above line can be removed, as we apply corresponding aiLabel classname conditionally on presence of aiLable or slug prop

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T12:04:37Z

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

+                  [`${blockClass}__aiLabel--cell`]:
+                    associatedHeader &&
+                    associatedHeader.length &&
+                    isValidElement(associatedHeader[0]?.aiLabel),


Suggested change

isValidElement(associatedHeader[0]?.aiLabel),

(isValidElement(associatedHeader[0]?.aiLabel) || isValidElement(associatedHeader[0]?.slug),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T12:10:50Z

packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx

@@ -38,39 +38,39 @@ export default {
          blocks={[
            {
              description:
-                "A Carbon AI slug can be used within the Datagrid for both column headers and rows. To include a column header AI slug, include a `slug` property within your column definition and include the Slug component as it's own custom component",
+                "A Carbon AI Label can be used within the Datagrid for both column headers and rows. To include a column header AI Label, include a `aiLabel` property within your column definition and include the AILabel component as it's own custom component. <br/> The `slug` property has been deprecated and will be phased out soon. It will only be supported for a limited time in future. Please use `aiLabel` instead going forward.",


Suggested change

"A Carbon AI Label can be used within the Datagrid for both column headers and rows. To include a column header AI Label, include a `aiLabel` property within your column definition and include the AILabel component as it's own custom component. <br/> The `slug` property has been deprecated and will be phased out soon. It will only be supported for a limited time in future. Please use `aiLabel` instead going forward.",

"A Carbon AI Label can be used within the Datagrid for both column headers and rows. To include a column header AI Label, include a `aiLabel` property within your column definition and include the AILabel component as it's own custom component. <br/> The `slug` property has been deprecated. Please use `aiLabel` property instead.",

Thanks @devadula-nandan.
This is updated.

devadula-nandan · 2024-10-07T12:25:47Z

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

          [`${blockClass}__defaultStringRenderer--slug`]:
            slug && React.isValidElement(slug),


Suggested change

[`${blockClass}__defaultStringRenderer--slug`]:

slug && React.isValidElement(slug),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T12:27:04Z

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

    return (
      <div
        className={cx(`${blockClass}__defaultStringRenderer`, {
          [`${blockClass}__defaultStringRenderer--slug`]:
            slug && React.isValidElement(slug),
+          [`${blockClass}__defaultStringRenderer--aiLabel`]:
+            aiLabel && React.isValidElement(aiLabel),


Suggested change

aiLabel && React.isValidElement(aiLabel),

(aiLabel && React.isValidElement(aiLabel)) || (slug && React.isValidElement(slug)),

Since some adapters are already using the existing slug classes, completely changing the classnames would break their code. Hence a separate class is added for AiLabel. Once we stop the support for slug completely, we could just remove the slug classes. For now it would be safer to keep separate classes.

devadula-nandan · 2024-10-07T12:28:00Z

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

@@ -11,7 +11,7 @@ import { pkg, carbon } from '../../settings';
 import { Button } from '@carbon/react';
 import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
-import { DatagridSlug } from './Datagrid/addons/Slug/DatagridSlug';
+import { DatagridAILabel } from './Datagrid/addons/AILAbel/DatagridLabel';


can check with naming of folder / file

devadula-nandan · 2024-10-07T12:31:09Z

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

+                  {headerProp?.column?.aiLabel ? (
+                    <DatagridAILabel aiLabel={headerProp?.column?.aiLabel} />
+                  ) : (
+                    <DatagridAILabel aiLabel={headerProp?.column?.slug} />
+                  )}


Suggested change

{headerProp?.column?.aiLabel ? (

<DatagridAILabel aiLabel={headerProp?.column?.aiLabel} />

) : (

<DatagridAILabel aiLabel={headerProp?.column?.slug} />

)}

<DatagridAILabel aiLabel={headerProp?.column?.aiLabel || headerProp?.column?.slug} />

Thanks @devadula-nandan.
This is updated.

…to-ailabel

…ngeethababu9223/ibm-products into feat/datagrid-slug-to-ailabel

netlify · 2024-10-11T09:57:54Z

✅ Deploy Preview for ibm-products-web-components ready!

Name	Link
🔨 Latest commit	`da518f4`
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-products-web-components/deploys/6717a5433af3230008aeca14
😎 Deploy Preview	https://deploy-preview-6151--ibm-products-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2024-10-21T05:28:54Z

Codecov Report

Attention: Patch coverage is 74.19355% with 8 lines in your changes missing coverage. Please review.

Project coverage is 78.72%. Comparing base (5c0f2ad) to head (da518f4).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6151      +/-   ##
==========================================
- Coverage   78.72%   78.72%   -0.01%     
==========================================
  Files         395      395              
  Lines       12799    12811      +12     
  Branches     4215     4227      +12     
==========================================
+ Hits        10076    10085       +9     
- Misses       2723     2726       +3

Components	Coverage Δ
ibm-products	`∅ <ø> (∅)`
ibm-products-web-components	`∅ <ø> (∅)`

devadula-nandan

lgtm

feat(Datagrid): change slug to aiLabel

7301fbb

sangeethababu9223 and others added 8 commits October 3, 2024 09:57

Merge remote-tracking branch 'upstream/main' into feat/datagrid-slug-…

ea066cb

…to-ailabel

feat(Datagrid): refactor slug to aiLabel

ed5d9f8

fix(Datagrid): fix example issue

380ccf3

fix(datagrid): folder name case issue update

eddf010

fix(datagrid): ci-check issue

4db828d

fix(Datagrid): ci-check fix

48c7ef0

feat(Datagrid): slug to aiLabel style and class updates

c7ce3f9

Merge branch 'main' into feat/datagrid-slug-to-ailabel

38615c6

AlexanderMelox reviewed Oct 3, 2024

View reviewed changes

feat(Datagrid): update type for slug and aiLabel

cb40ce2

sangeethababu9223 marked this pull request as ready for review October 4, 2024 09:55

sangeethababu9223 requested a review from a team as a code owner October 4, 2024 09:55

sangeethababu9223 requested review from makafsal, devadula-nandan and matthewgallo and removed request for a team October 4, 2024 09:55

sangeethababu9223 enabled auto-merge October 4, 2024 09:57

davidmenendez and others added 2 commits October 4, 2024 12:30

Merge branch 'main' into feat/datagrid-slug-to-ailabel

f233ccd

Merge branch 'main' into feat/datagrid-slug-to-ailabel

7645bc0

devadula-nandan reviewed Oct 7, 2024

View reviewed changes

sangeethababu9223 added 8 commits October 8, 2024 10:03

Merge remote-tracking branch 'upstream/main' into feat/datagrid-slug-…

d850573

…to-ailabel

feat(Datagrid): slug to ai pr comments

054fff6

Merge branch 'feat/datagrid-slug-to-ailabel' of https://github.com/sa…

dc3980a

…ngeethababu9223/ibm-products into feat/datagrid-slug-to-ailabel

fix(Datagrid): ci-check issue

0e09fe8

feat(datagrid): slug to ai PR comments

828f533

feat(Datagrid): pr comments

07f18e0

fix(Datagrid): ci-check issue test

a3232f6

fix(Datagrid): case issue fix rename

5197b11

sangeethababu9223 requested a review from devadula-nandan October 8, 2024 11:08

Merge branch 'main' into feat/datagrid-slug-to-ailabel

4c14a2b

sangeethababu9223 and others added 2 commits October 11, 2024 15:44

feat(Datagrid): aiLabel classes updated per core carbon

38679b5

Merge branch 'main' into feat/datagrid-slug-to-ailabel

1ca0cc5

devadula-nandan reviewed Oct 22, 2024

View reviewed changes

devadula-nandan approved these changes Oct 22, 2024

View reviewed changes

Merge branch 'main' into feat/datagrid-slug-to-ailabel

da518f4

matthewgallo approved these changes Oct 22, 2024

View reviewed changes

sangeethababu9223 added this pull request to the merge queue Oct 22, 2024

Merged via the queue into carbon-design-system:main with commit b0b3c1c Oct 22, 2024
28 checks passed

sangeethababu9223 deleted the feat/datagrid-slug-to-ailabel branch October 22, 2024 13:55

		[`${blockClass}__with-slug`]:
		header.slug && React.isValidElement(header?.slug),

	[`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel),
	[`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel \|\| isValidElement(row?.original?.slug),

	isValidElement(associatedHeader[0]?.aiLabel),
	(isValidElement(associatedHeader[0]?.aiLabel) \|\| isValidElement(associatedHeader[0]?.slug),

		[`${blockClass}__defaultStringRenderer--slug`]:
		slug && React.isValidElement(slug),

	aiLabel && React.isValidElement(aiLabel),
	(aiLabel && React.isValidElement(aiLabel)) \|\| (slug && React.isValidElement(slug)),

feat(Datagrid): slug to aiLabel renaming #6151

feat(Datagrid): slug to aiLabel renaming #6151

Conversation

sangeethababu9223 commented Oct 3, 2024 • edited Loading

What did you change?

How did you test and verify your work?

netlify bot commented Oct 3, 2024 • edited Loading

✅ Deploy Preview for carbon-for-ibm-products ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devadula-nandan Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sangeethababu9223 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sangeethababu9223 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sangeethababu9223 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sangeethababu9223 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sangeethababu9223 Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devadula-nandan Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Oct 11, 2024 • edited Loading

✅ Deploy Preview for ibm-products-web-components ready!

codecov bot commented Oct 21, 2024 • edited Loading

Codecov Report

devadula-nandan left a comment

Choose a reason for hiding this comment

sangeethababu9223 commented Oct 3, 2024 •

edited

Loading

netlify bot commented Oct 3, 2024 •

edited

Loading

devadula-nandan Oct 7, 2024 •

edited

Loading

sangeethababu9223 Oct 8, 2024 •

edited

Loading

sangeethababu9223 Oct 8, 2024 •

edited

Loading

sangeethababu9223 Oct 8, 2024 •

edited

Loading

sangeethababu9223 Oct 8, 2024 •

edited

Loading

sangeethababu9223 Oct 8, 2024 •

edited

Loading

devadula-nandan Oct 7, 2024 •

edited

Loading

netlify bot commented Oct 11, 2024 •

edited

Loading

codecov bot commented Oct 21, 2024 •

edited

Loading