Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Datagrid): slug to aiLabel renaming #6151

Merged
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7301fbb
feat(Datagrid): change slug to aiLabel
sangeethababu9223 Oct 3, 2024
ea066cb
Merge remote-tracking branch 'upstream/main' into feat/datagrid-slug-…
sangeethababu9223 Oct 3, 2024
ed5d9f8
feat(Datagrid): refactor slug to aiLabel
sangeethababu9223 Oct 3, 2024
380ccf3
fix(Datagrid): fix example issue
sangeethababu9223 Oct 3, 2024
eddf010
fix(datagrid): folder name case issue update
sangeethababu9223 Oct 3, 2024
4db828d
fix(datagrid): ci-check issue
sangeethababu9223 Oct 3, 2024
48c7ef0
fix(Datagrid): ci-check fix
sangeethababu9223 Oct 3, 2024
c7ce3f9
feat(Datagrid): slug to aiLabel style and class updates
sangeethababu9223 Oct 3, 2024
38615c6
Merge branch 'main' into feat/datagrid-slug-to-ailabel
sangeethababu9223 Oct 3, 2024
cb40ce2
feat(Datagrid): update type for slug and aiLabel
sangeethababu9223 Oct 4, 2024
f233ccd
Merge branch 'main' into feat/datagrid-slug-to-ailabel
davidmenendez Oct 4, 2024
7645bc0
Merge branch 'main' into feat/datagrid-slug-to-ailabel
sangeethababu9223 Oct 5, 2024
d850573
Merge remote-tracking branch 'upstream/main' into feat/datagrid-slug-…
sangeethababu9223 Oct 8, 2024
054fff6
feat(Datagrid): slug to ai pr comments
sangeethababu9223 Oct 8, 2024
dc3980a
Merge branch 'feat/datagrid-slug-to-ailabel' of https://github.com/sa…
sangeethababu9223 Oct 8, 2024
0e09fe8
fix(Datagrid): ci-check issue
sangeethababu9223 Oct 8, 2024
828f533
feat(datagrid): slug to ai PR comments
sangeethababu9223 Oct 8, 2024
07f18e0
feat(Datagrid): pr comments
sangeethababu9223 Oct 8, 2024
a3232f6
fix(Datagrid): ci-check issue test
sangeethababu9223 Oct 8, 2024
5197b11
fix(Datagrid): case issue fix rename
sangeethababu9223 Oct 8, 2024
4c14a2b
Merge branch 'main' into feat/datagrid-slug-to-ailabel
sangeethababu9223 Oct 11, 2024
38679b5
feat(Datagrid): aiLabel classes updated per core carbon
sangeethababu9223 Oct 11, 2024
1ca0cc5
Merge branch 'main' into feat/datagrid-slug-to-ailabel
sangeethababu9223 Oct 21, 2024
da518f4
Merge branch 'main' into feat/datagrid-slug-to-ailabel
sangeethababu9223 Oct 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -156,6 +156,7 @@
background-color: $background;
}

/* This section to be removed after support for slug dropped - start */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

@sangeethababu9223 sangeethababu9223 Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

.#{$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-ai-label {
/* stylelint-disable-next-line carbon/theme-token-use */
box-shadow: inset 0 1px $ai-border-strong;
}

.#{$block-class} th.#{$block-class}__with-ai-label,
.#{$block-class} td.#{$block-class}__ai-label--cell {
@include ai-table-gradient();
}

.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--row,
.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--row
+ .#{$block-class}__expanded-row {
@include ai-table-gradient();

background-attachment: fixed;
}

.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--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}__ai-label--row:hover,
.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover,
.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--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}__ai-label--row {
@include ai-table-gradient('hover');
}

.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__expandable-row--hover.#{$block-class}__ai-label--row
td {
background-color: transparent;
}

.#{$block-class}
.#{c4p-settings.$carbon-prefix}--data-table
tbody
tr.#{$block-class}__ai-label--row.#{c4p-settings.$carbon-prefix}--data-table--selected {
@include ai-table-gradient('selected');
}

.#{$block-class}
th.#{$block-class}__with-ai-label
.#{c4p-settings.$carbon-prefix}--slug {
margin-left: $spacing-03;
}

.#{$block-class}__grid-container {
display: block;
@@ -315,7 +390,8 @@
white-space: initial;
}

.#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
.#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug,
.#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--ai-label {
width: fit-content;
}

@@ -889,7 +965,9 @@
.#{$block-class} .#{$block-class}__table-row-ai-enabled {
display: flex;
align-items: center;
&.#{$block-class}__slug--expanded {

&.#{$block-class}__slug--expanded,
&.#{$block-class}__ai-label--expanded {
border: none;
}
}
Original file line number Diff line number Diff line change
@@ -37,6 +37,9 @@ const DatagridExpandedRow =
<tr
className={cx(`${blockClass}__expanded-row`, {
[`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Member Author

@sangeethababu9223 sangeethababu9223 Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

[`${blockClass}__ai-label--row`]: isValidElement(
row?.original?.aiLabel
),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

})}
onMouseEnter={(event) => toggleParentHoverClass(event, 'enter')}
onMouseLeave={(event) => toggleParentHoverClass(event)}
Original file line number Diff line number Diff line change
@@ -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/DatagridAiLabel';
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
@@ -247,6 +250,8 @@ const HeaderRow = (
[`${blockClass}__header-actions-column`]: header?.isAction,
[`${blockClass}__with-slug`]:
header.slug && React.isValidElement(header?.slug),
Comment on lines 251 to 252
Copy link
Contributor

@devadula-nandan devadula-nandan Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

[`${blockClass}__with-ai-label`]:
header.aiLabel && React.isValidElement(header?.aiLabel),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
header.aiLabel && React.isValidElement(header?.aiLabel),
header.aiLabel && (React.isValidElement(header?.aiLabel) || React.isValidElement(header?.slug)),

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

},
headerProps.className
)}
@@ -255,7 +260,7 @@ const HeaderRow = (
{...getAccessibilityProps(header)}
>
{header.render('Header')}
{renderSlug(header.slug)}
{renderAILabel(header.aiLabel || header.slug)}
{resizerProps && !header.isAction && (
<ResizeHeader
{...{
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
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/DatagridAiLabel';
import { DataGridState } from '../types';

const blockClass = `${pkg.prefix}--datagrid`;
@@ -132,7 +132,10 @@
};

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 @@
getAsyncSubRows && row.depth > 0,
[`${carbon.prefix}--data-table--selected`]: row.isSelected,
[`${blockClass}__slug--row`]: isValidElement(row?.original?.slug),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

const withActionsColumn = headers
@@ -162,13 +166,21 @@
{...setAdditionalRowProps()}
>
{foundAIRow ? (
row?.original?.slug ? (
row?.original?.aiLabel ? (
<td

Check warning on line 170 in packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx

Codecov / codecov/patch

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx#L169-L170

Added lines #L169 - L170 were not covered by tests
className={cx(`${blockClass}__table-row-ai-enabled`, {
[`${blockClass}__ai-label--expanded`]: row.isExpanded,
})}
>
<DatagridAILabel aiLabel={row?.original?.aiLabel} />
</td>
) : row?.original?.slug ? (

Check warning on line 177 in packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx

Codecov / codecov/patch

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

Added line #L177 was not covered by tests
<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 @@
associatedHeader &&
associatedHeader.length &&
isValidElement(associatedHeader[0]?.slug),
Comment on lines 225 to 227
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

[`${blockClass}__ai-label--cell`]:
associatedHeader &&
associatedHeader.length &&
isValidElement(associatedHeader[0]?.aiLabel),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

},
columnClassname
)}
Original file line number Diff line number Diff line change
@@ -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, {

Check warning on line 28 in packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx

Codecov / codecov/patch

packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx#L28

Added line #L28 was not covered by tests
size: 'mini',
ref,
} as NormalizedAILabeProps);
return normalizedAILabel;

Check warning on line 32 in packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx

Codecov / codecov/patch

packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx#L32

Added line #L32 was not covered by tests
}
return null;
}
);

DatagridAILabel.propTypes = {
/**
* Specify the AI AILabel to be displayed
*/
aiLabel: PropTypes.node,
};

This file was deleted.

Original file line number Diff line number Diff line change
@@ -23,10 +23,10 @@ import { DatagridActions } from '../../utils/DatagridActions';
import { makeData } from '../../utils/makeData';
import { ARG_TYPES } from '../../utils/getArgTypes';
import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage';
import { ExampleSlug } from '../../utils/ExampleSlug';
import { ExampleAILabel } from '../../utils/ExampleAILabel';

export default {
title: 'IBM Products/Components/Datagrid/Slug',
title: 'IBM Products/Components/Datagrid/AILabel',
component: Datagrid,
tags: ['autodocs'],
parameters: {
@@ -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. It will only be supported for a limited time in future. Please use `aiLabel` property instead.",
source: {
code: `
{
Header: 'Visits',
accessor: 'visits',
slug: <ExampleSlug />,
aiLabel: <ExampleAILabel />,
}
`,
},
},
{
description: 'or used directly from the Slug component itself',
description: 'or used directly from the AILabel component itself',
source: {
code: `
{
Header: 'Visits',
accessor: 'visits',
slug: (
<Slug className="slug-container" autoAlign={false} align="bottom-right">
<SlugContent>
aiLabel: (
<AILabel className="ai-label-container" autoAlign={false} align="bottom-right">
<AILabelContent>
...
...
</SlugContent>
</Slug>
</AILabelContent>
</AILabel>
),
}
`,
},
},
{
description:
'To include a slug on the row level, include a `slug` property in your row data with the same structure as outlined above.',
'To include a AILabel on the row level, include a `aiLabel` property in your row data with the same structure as outlined above.',
},
]}
/>
@@ -85,10 +85,10 @@ export default {
},
},
},
excludeStories: ['ExampleSlug'],
excludeStories: ['ExampleAILabel'],
};

const getDefaultHeader = (rowSlug, align) => [
const getDefaultHeader = (rowAiLabel, align) => [
{
Header: 'Row Index',
accessor: (row, i) => i,
@@ -112,12 +112,12 @@ const getDefaultHeader = (rowSlug, align) => [
Header: 'Visits',
accessor: 'visits',
width: 120,
slug: !rowSlug && <ExampleSlug align={align} />,
aiLabel: !rowAiLabel && <ExampleAILabel align={align} />,
},
{
Header: 'Someone 1',
accessor: 'someone1',
slug: !rowSlug && <ExampleSlug align={align} />,
aiLabel: !rowAiLabel && <ExampleAILabel align={align} />,
width: 200,
},
{
@@ -223,20 +223,20 @@ const ExpansionRenderer = ({ row }) => {
);
};

const GridWithSlugColumnHeader = ({
rowSlug,
rowSlugAlign,
const GridWithAILabelColumnHeader = ({
rowAiLabel,
rowAiLabelAlign,
withSorting,
withSelect,
withExpansion,
...args
}) => {
const columns = React.useMemo(
() => getDefaultHeader(rowSlug, rowSlugAlign),
() => getDefaultHeader(rowAiLabel, rowAiLabelAlign),
[]
);
const [data] = useState(
makeData(10, 2, { enableAIRow: rowSlug, slugAlign: rowSlugAlign })
makeData(10, 2, { enableAIRow: rowAiLabel, aiLabelAlign: rowAiLabelAlign })
);
const datagridState = useDatagrid(
{
@@ -254,30 +254,32 @@ const GridWithSlugColumnHeader = ({
return <Datagrid datagridState={datagridState} />;
};

const GridWithSlugColumnHeaderWrapper = ({
rowSlug,
rowSlugAlign,
const GridWithAILabelColumnHeaderWrapper = ({
rowAiLabel,
rowAiLabelAlign,
withSorting,
withSelect,
withExpansion,
...args
}) => {
return (
<GridWithSlugColumnHeader
<GridWithAILabelColumnHeader
defaultGridProps={{ ...args }}
withSorting={withSorting}
rowSlug={rowSlug}
rowSlugAlign={rowSlugAlign}
rowAiLabel={rowAiLabel}
rowAiLabelAlign={rowAiLabelAlign}
withSelect={withSelect}
withExpansion={withExpansion}
/>
);
};

const slugColumnHeaderStoryName = 'Column slug';
export const SlugColumnHeaderStory = GridWithSlugColumnHeaderWrapper.bind({});
SlugColumnHeaderStory.storyName = slugColumnHeaderStoryName;
SlugColumnHeaderStory.argTypes = {
const aiLabelColumnHeaderStoryName = 'Column AILabel';
export const AILabelColumnHeaderStory = GridWithAILabelColumnHeaderWrapper.bind(
{}
);
AILabelColumnHeaderStory.storyName = aiLabelColumnHeaderStoryName;
AILabelColumnHeaderStory.argTypes = {
gridTitle: ARG_TYPES.gridTitle,
gridDescription: ARG_TYPES.gridDescription,
useDenseHeader: ARG_TYPES.useDenseHeader,
@@ -287,15 +289,16 @@ SlugColumnHeaderStory.argTypes = {
expanderButtonTitleExpanded: 'Collapse row',
expanderButtonTitleCollapsed: 'Expand row',
};
SlugColumnHeaderStory.args = {
AILabelColumnHeaderStory.args = {
...controlProps,
};

const slugSortableColumnHeaderStoryName = 'Column slug sort';
export const SlugSortableColumnHeaderStory =
GridWithSlugColumnHeaderWrapper.bind({});
SlugSortableColumnHeaderStory.storyName = slugSortableColumnHeaderStoryName;
SlugSortableColumnHeaderStory.argTypes = {
const aiLabelSortableColumnHeaderStoryName = 'Column AILabel sort';
export const AILabelSortableColumnHeaderStory =
GridWithAILabelColumnHeaderWrapper.bind({});
AILabelSortableColumnHeaderStory.storyName =
aiLabelSortableColumnHeaderStoryName;
AILabelSortableColumnHeaderStory.argTypes = {
gridTitle: ARG_TYPES.gridTitle,
gridDescription: ARG_TYPES.gridDescription,
useDenseHeader: ARG_TYPES.useDenseHeader,
@@ -305,15 +308,15 @@ SlugSortableColumnHeaderStory.argTypes = {
expanderButtonTitleExpanded: 'Collapse row',
expanderButtonTitleCollapsed: 'Expand row',
};
SlugSortableColumnHeaderStory.args = {
AILabelSortableColumnHeaderStory.args = {
...controlProps,
withSorting: true,
};

const slugRowStoryName = 'Row slug';
export const SlugRowStory = GridWithSlugColumnHeaderWrapper.bind({});
SlugRowStory.storyName = slugRowStoryName;
SlugRowStory.argTypes = {
const aiLabelRowStoryName = 'Row AILabel';
export const AILabelRowStory = GridWithAILabelColumnHeaderWrapper.bind({});
AILabelRowStory.storyName = aiLabelRowStoryName;
AILabelRowStory.argTypes = {
gridTitle: ARG_TYPES.gridTitle,
gridDescription: ARG_TYPES.gridDescription,
useDenseHeader: ARG_TYPES.useDenseHeader,
@@ -323,16 +326,18 @@ SlugRowStory.argTypes = {
expanderButtonTitleExpanded: 'Collapse row',
expanderButtonTitleCollapsed: 'Expand row',
};
SlugRowStory.args = {
AILabelRowStory.args = {
...controlProps,
rowSlug: true,
rowSlugAlign: 'right',
rowAiLabel: true,
rowAiLabelAlign: 'right',
};

const slugRowSelectionStoryName = 'Row slug with selection';
export const SlugRowSelectionStory = GridWithSlugColumnHeaderWrapper.bind({});
SlugRowSelectionStory.storyName = slugRowSelectionStoryName;
SlugRowSelectionStory.argTypes = {
const aiLabelRowSelectionStoryName = 'Row AILabel with selection';
export const AILabelRowSelectionStory = GridWithAILabelColumnHeaderWrapper.bind(
{}
);
AILabelRowSelectionStory.storyName = aiLabelRowSelectionStoryName;
AILabelRowSelectionStory.argTypes = {
gridTitle: ARG_TYPES.gridTitle,
gridDescription: ARG_TYPES.gridDescription,
useDenseHeader: ARG_TYPES.useDenseHeader,
@@ -342,19 +347,20 @@ SlugRowSelectionStory.argTypes = {
expanderButtonTitleExpanded: 'Collapse row',
expanderButtonTitleCollapsed: 'Expand row',
};
SlugRowSelectionStory.args = {
AILabelRowSelectionStory.args = {
...controlProps,
rowSlug: true,
rowSlugAlign: 'right',
rowAiLabel: true,
rowAiLabelAlign: 'right',
withSelect: true,
};

const slugRowSelectionAndExpandStoryName =
'Row slug with selection and expansion';
export const SlugRowSelectionAndExpandStory =
GridWithSlugColumnHeaderWrapper.bind({});
SlugRowSelectionAndExpandStory.storyName = slugRowSelectionAndExpandStoryName;
SlugRowSelectionAndExpandStory.argTypes = {
const aiLabelRowSelectionAndExpandStoryName =
'Row AILabel with selection and expansion';
export const AILabelRowSelectionAndExpandStory =
GridWithAILabelColumnHeaderWrapper.bind({});
AILabelRowSelectionAndExpandStory.storyName =
aiLabelRowSelectionAndExpandStoryName;
AILabelRowSelectionAndExpandStory.argTypes = {
gridTitle: ARG_TYPES.gridTitle,
gridDescription: ARG_TYPES.gridDescription,
useDenseHeader: ARG_TYPES.useDenseHeader,
@@ -364,10 +370,10 @@ SlugRowSelectionAndExpandStory.argTypes = {
expanderButtonTitleExpanded: 'Collapse row',
expanderButtonTitleCollapsed: 'Expand row',
};
SlugRowSelectionAndExpandStory.args = {
AILabelRowSelectionAndExpandStory.args = {
...controlProps,
rowSlug: true,
rowSlugAlign: 'right',
rowAiLabel: true,
rowAiLabelAlign: 'right',
withSelect: true,
withExpansion: true,
};
Original file line number Diff line number Diff line change
@@ -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?: ReactNode; // To be removed once the support for slug is not available
aiLabel?: ReactNode;
}

export interface DataGridHeaderGroup<T extends object = any>
Original file line number Diff line number Diff line change
@@ -23,12 +23,14 @@ const useDefaultStringRenderer = (hooks) => {
</div>
);

const HeaderRenderer = (header, slug) => {
const HeaderRenderer = (header, slug, aiLabel) => {
return (
<div
className={cx(`${blockClass}__defaultStringRenderer`, {
[`${blockClass}__defaultStringRenderer--slug`]:
slug && React.isValidElement(slug),
Comment on lines 30 to 31
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

[`${blockClass}__defaultStringRenderer--ai-label`]:
aiLabel && React.isValidElement(aiLabel),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

})}
key={typeof header === 'string' ? header : ''}
>
@@ -42,7 +44,8 @@ const useDefaultStringRenderer = (hooks) => {
Cell: StringRenderer,
...column,
Header:
column.HeaderRenderer || HeaderRenderer(column.Header, column.slug),
column.HeaderRenderer ||
HeaderRenderer(column.Header, column.slug, column.aiLabel),
}));
return [...columnsWithDefaultCells];
};
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
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/DatagridAiLabel';
import { Hooks, TableInstance } from 'react-table';
import { DataGridState } from './types';

@@ -91,11 +91,11 @@
defaultSortableLabelText,
} = instance;
const onSortClick = (event, column) => {
const slug =
const aiLabel =
event.target.classList.contains(`${carbon.prefix}--slug`) ||
event.target.closest(`.${carbon.prefix}--slug`);
// Do not continue with sorting if we find a slug
if (slug) {
if (aiLabel) {

Check warning on line 98 in packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx

Codecov / codecov/patch

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

Added line #L98 was not covered by tests
event.stopPropagation();
return;
}
@@ -156,7 +156,11 @@
renderIcon={(props) => {
return (
<>
<DatagridSlug slug={headerProp?.column?.slug} />
<DatagridAILabel
aiLabel={
headerProp?.column?.aiLabel || headerProp?.column?.slug
}
/>
{icon(headerProp?.column, props)}
</>
);
Original file line number Diff line number Diff line change
@@ -10,16 +10,21 @@
import React from 'react';
import { FolderOpen, View, Folders } from '@carbon/react/icons';
import {
unstable__Slug as Slug,
unstable__SlugContent as SlugContent,
unstable__SlugActions as SlugActions,
AILabel,
AILabelContent,
AILabelActions,
IconButton,
Button,
} from '@carbon/react';

export const ExampleSlug = ({ align = 'bottom-right', ...rest }) => (
<Slug className="slug-container" autoAlign={false} align={align} {...rest}>
<SlugContent>
export const ExampleAILabel = ({ align = 'bottom-right', ...rest }) => (
<AILabel

Check warning on line 21 in packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js

Codecov / codecov/patch

packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js#L21

Added line #L21 was not covered by tests
className="ai-label-container"
autoAlign={false}
align={align}
{...rest}
>
<AILabelContent>
<div>
<p className="secondary">AI Explained</p>
<h1>84%</h1>
@@ -32,7 +37,7 @@
<p className="secondary">Model type</p>
<p className="bold">Foundation model</p>
</div>
<SlugActions>
<AILabelActions>
<IconButton kind="ghost" label="View">
<View />
</IconButton>
@@ -43,7 +48,7 @@
<Folders />
</IconButton>
<Button>View details</Button>
</SlugActions>
</SlugContent>
</Slug>
</AILabelActions>
</AILabelContent>
</AILabel>
);
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
import React from 'react';
import namor from 'namor';
import { inlineEditSelectItems } from './getInlineEditColumns';
import { ExampleSlug } from './ExampleSlug';
import { ExampleAILabel } from './ExampleAILabel';

const getRandomInteger = (min, max, decimalPlaces) => {
const roundedMin = Math.ceil(min);
@@ -156,9 +156,9 @@
bonus: `$\r${getRandomInteger(100, 500, 2)}`,
passwordStrength: getPasswordStrength(),
doc_link: renderDocLink(),
slug: config?.enableAIRow &&
aiLabel: config?.enableAIRow &&
(index === 1 || index === 3 || index === 4) && (
<ExampleSlug align={config?.slugAlign} />
<ExampleAILabel align={config?.aiLabelAlign} />

Check warning on line 161 in packages/ibm-products/src/components/Datagrid/utils/makeData.js

Codecov / codecov/patch

packages/ibm-products/src/components/Datagrid/utils/makeData.js#L161

Added line #L161 was not covered by tests
),
id: config?.id ? `${config?.id}__${index}` : `row_${index}`,
};