From 7301fbbea13abe9a3ff8f1dfab4b403fbeaf1558 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 09:52:43 +0530 Subject: [PATCH 01/15] feat(Datagrid): change slug to aiLabel --- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 5 +- .../Datagrid/Datagrid/DatagridRow.tsx | 18 ++- .../AILabel.stories.jsx} | 114 +++++++++--------- .../src/components/Datagrid/types/index.ts | 1 + .../Datagrid/useDefaultStringRenderer.js | 8 +- .../Datagrid/useSortableColumns.tsx | 6 +- .../Datagrid/utils/ExampleAiLabel.js | 49 ++++++++ .../src/components/Datagrid/utils/makeData.js | 6 +- 8 files changed, 139 insertions(+), 68 deletions(-) rename packages/ibm-products/src/components/Datagrid/Extensions/{Slug/Slug.stories.jsx => AILabel/AILabel.stories.jsx} (71%) create mode 100644 packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index c02f8d0c05..f1d40c0bb2 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx @@ -243,7 +243,8 @@ const HeaderRow = ( [`${blockClass}__isSorted`]: header?.isSorted, [`${blockClass}__header-actions-column`]: header?.isAction, [`${blockClass}__with-slug`]: - header.slug && React.isValidElement(header?.slug), + (header.slug && React.isValidElement(header?.slug)) || + (header.aiLabel && React.isValidElement(header?.aiLabel)), }, headerProps.className )} @@ -252,7 +253,7 @@ const HeaderRow = ( {...getAccessibilityProps(header)} > {header.render('Header')} - {renderSlug(header.slug)} + {renderSlug(header.aiLabel) || renderSlug(header.slug)} {resizerProps && !header.isAction && ( { }; const { className, ...rowProps } = row.getRowProps({ role: undefined }); - const foundAIRow = rows.some((r) => isValidElement(r?.original?.slug)); + const foundAIRow = rows.some( + (r) => + isValidElement(r?.original?.slug) || isValidElement(r?.original?.aiLabel) + ); const rowClassNames = cx(`${blockClass}__carbon-row`, { [`${blockClass}__carbon-row-expanded`]: row.isExpanded, @@ -140,7 +143,9 @@ const DatagridRow = (datagridState: DataGridState) => { [`${blockClass}__carbon-row-expandable--async`]: getAsyncSubRows && row.depth > 0, [`${carbon.prefix}--data-table--selected`]: row.isSelected, - [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug), + [`${blockClass}__slug--row`]: + isValidElement(row?.original?.slug) || + isValidElement(row?.original?.aiLabel), }); const withActionsColumn = headers @@ -162,13 +167,15 @@ const DatagridRow = (datagridState: DataGridState) => { {...setAdditionalRowProps()} > {foundAIRow ? ( - row?.original?.slug ? ( + row?.original?.aiLabel || row?.original?.slug ? ( - + ) : ( @@ -212,7 +219,8 @@ const DatagridRow = (datagridState: DataGridState) => { [`${blockClass}__slug--cell`]: associatedHeader && associatedHeader.length && - isValidElement(associatedHeader[0]?.slug), + (isValidElement(associatedHeader[0]?.aiLabel) || + isValidElement(associatedHeader[0]?.slug)), }, columnClassname )} diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/Slug/Slug.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx similarity index 71% rename from packages/ibm-products/src/components/Datagrid/Extensions/Slug/Slug.stories.jsx rename to packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx index 30432a7aae..0cdd5c0ab6 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/Slug/Slug.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx @@ -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,31 +38,31 @@ 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", source: { code: ` { Header: 'Visits', accessor: 'visits', - slug: , + aiLabel: , } `, }, }, { - 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: ( - - + aiLabel: ( + + ... ... - - + + ), } `, @@ -70,7 +70,7 @@ export default { }, { 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.', }, ]} /> @@ -88,7 +88,7 @@ export default { excludeStories: ['ExampleSlug'], }; -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 && , + aiLabel: !rowAiLabel && , }, { Header: 'Someone 1', accessor: 'someone1', - slug: !rowSlug && , + aiLabel: !rowAiLabel && , width: 200, }, { @@ -224,19 +224,19 @@ const ExpansionRenderer = ({ row }) => { }; const GridWithSlugColumnHeader = ({ - rowSlug, - rowSlugAlign, + 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( { @@ -255,8 +255,8 @@ const GridWithSlugColumnHeader = ({ }; const GridWithSlugColumnHeaderWrapper = ({ - rowSlug, - rowSlugAlign, + rowAiLabel, + rowAiLabelAlign, withSorting, withSelect, withExpansion, @@ -266,18 +266,20 @@ const GridWithSlugColumnHeaderWrapper = ({ ); }; -const slugColumnHeaderStoryName = 'Column slug'; -export const SlugColumnHeaderStory = GridWithSlugColumnHeaderWrapper.bind({}); -SlugColumnHeaderStory.storyName = slugColumnHeaderStoryName; -SlugColumnHeaderStory.argTypes = { +const aiLabelColumnHeaderStoryName = 'Column AILabel'; +export const AILabelColumnHeaderStory = GridWithSlugColumnHeaderWrapper.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 = +const aiLabelSortableColumnHeaderStoryName = 'Column AILabel sort'; +export const AILabelSortableColumnHeaderStory = GridWithSlugColumnHeaderWrapper.bind({}); -SlugSortableColumnHeaderStory.storyName = slugSortableColumnHeaderStoryName; -SlugSortableColumnHeaderStory.argTypes = { +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 = GridWithSlugColumnHeaderWrapper.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 = GridWithSlugColumnHeaderWrapper.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 = +const aiLabelRowSelectionAndExpandStoryName = + 'Row AILabel with selection and expansion'; +export const AILabelRowSelectionAndExpandStory = GridWithSlugColumnHeaderWrapper.bind({}); -SlugRowSelectionAndExpandStory.storyName = slugRowSelectionAndExpandStoryName; -SlugRowSelectionAndExpandStory.argTypes = { +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, }; diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts index 8dc68c789c..dbaed74fc4 100644 --- a/packages/ibm-products/src/components/Datagrid/types/index.ts +++ b/packages/ibm-products/src/components/Datagrid/types/index.ts @@ -195,6 +195,7 @@ export interface DataGridHeader className(className: any, arg1: { [x: string]: any }): unknown; isAction?: boolean; slug?: any; + aiLabel?: any; } export interface DataGridHeaderGroup diff --git a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js index 8fe1b97062..f1984fc583 100644 --- a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js +++ b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js @@ -23,12 +23,13 @@ const useDefaultStringRenderer = (hooks) => { ); - const HeaderRenderer = (header, slug) => { + const HeaderRenderer = (header, slug, aiLabel) => { return (
@@ -42,7 +43,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]; }; diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index c11abd566d..55381c2aa5 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx @@ -156,7 +156,11 @@ const useSortableColumns = (hooks: Hooks) => { renderIcon={(props) => { return ( <> - + {icon(headerProp?.column, props)} ); diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js new file mode 100644 index 0000000000..8afdd2ea29 --- /dev/null +++ b/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js @@ -0,0 +1,49 @@ +/* eslint-disable react/prop-types */ +/** + * Copyright IBM Corp. 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. + */ + +//cspell: disable +import React from 'react'; +import { FolderOpen, View, Folders } from '@carbon/react/icons'; +import { + AILabel, + AILabelContent, + AILabelActions, + IconButton, + Button, +} from '@carbon/react'; + +export const ExampleAiLabel = ({ align = 'bottom-right', ...rest }) => ( + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + + + + + + + + + + + + +); diff --git a/packages/ibm-products/src/components/Datagrid/utils/makeData.js b/packages/ibm-products/src/components/Datagrid/utils/makeData.js index 24773222ef..323c969aba 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/makeData.js +++ b/packages/ibm-products/src/components/Datagrid/utils/makeData.js @@ -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 @@ const newPerson = (index, config) => { bonus: `$\r${getRandomInteger(100, 500, 2)}`, passwordStrength: getPasswordStrength(), doc_link: renderDocLink(), - slug: config?.enableAIRow && + aiLabel: config?.enableAIRow && (index === 1 || index === 3 || index === 4) && ( - + ), id: config?.id ? `${config?.id}__${index}` : `row_${index}`, }; From ed5d9f864d1da5173eed08ad5aa90fdc521e3077 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:07:45 +0530 Subject: [PATCH 02/15] feat(Datagrid): refactor slug to aiLabel --- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 4 +- .../Datagrid/Datagrid/DatagridRow.tsx | 6 +-- .../addons/AILAbel/DatagridAILabel.tsx | 43 +++++++++++++++++++ .../Datagrid/addons/Slug/DatagridSlug.tsx | 43 ------------------- .../Extensions/AILabel/AILabel.stories.jsx | 10 ++--- .../Datagrid/useSortableColumns.tsx | 6 +-- .../{ExampleSlug.js => ExampleAILabel.js} | 0 .../Datagrid/utils/ExampleAiLabel.js | 20 ++++----- .../src/components/Datagrid/utils/makeData.js | 4 +- 9 files changed, 68 insertions(+), 68 deletions(-) create mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.tsx delete mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.tsx rename packages/ibm-products/src/components/Datagrid/utils/{ExampleSlug.js => ExampleAILabel.js} (100%) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index f1d40c0bb2..79e4425edf 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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/DatagridAILabel'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, @@ -186,7 +186,7 @@ const HeaderRow = ( if (isTableSortable) { return; } - return ; + return ; }; const foundAIRow = rows.some((r) => isValidElement(r?.original?.slug)); diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index 9801f2098a..2a9bd7fea1 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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/DatagridAILabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; @@ -173,8 +173,8 @@ const DatagridRow = (datagridState: DataGridState) => { [`${blockClass}__slug--expanded`]: row.isExpanded, })} > - ) : ( diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.tsx new file mode 100644 index 0000000000..1c668e8cff --- /dev/null +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.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; +} + +export const DatagridAILabel = forwardRef( + ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef) => { + 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, +}; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.tsx deleted file mode 100644 index 614294fdb5..0000000000 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Slug/DatagridSlug.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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 DatagridSlugProps { - slug?: ReactNode; -} - -interface NormalizedSlugProps { - size?: string; - ref?: ForwardedRef; -} - -export const DatagridSlug = forwardRef( - ({ slug }: DatagridSlugProps, ref: ForwardedRef) => { - if (slug && isValidElement(slug)) { - const normalizedSlug = React.cloneElement(slug, { - size: 'mini', - ref, - } as NormalizedSlugProps); - return normalizedSlug; - } - return null; - } -); - -DatagridSlug.propTypes = { - /** - * Specify the AI slug to be displayed - */ - slug: PropTypes.node, -}; diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx index 0cdd5c0ab6..7316c88999 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx @@ -23,7 +23,7 @@ import { DatagridActions } from '../../utils/DatagridActions'; import { makeData } from '../../utils/makeData'; import { ARG_TYPES } from '../../utils/getArgTypes'; import { StoryDocsPage } from '../../../../global/js/utils/StoryDocsPage'; -import { ExampleAiLabel } from '../../utils/ExampleAiLabel'; +import { ExampleAILabel } from '../../utils/ExampleAILabel'; export default { title: 'IBM Products/Components/Datagrid/AILabel', @@ -44,7 +44,7 @@ export default { { Header: 'Visits', accessor: 'visits', - aiLabel: , + aiLabel: , } `, }, @@ -85,7 +85,7 @@ export default { }, }, }, - excludeStories: ['ExampleSlug'], + excludeStories: ['ExampleAILabel'], }; const getDefaultHeader = (rowAiLabel, align) => [ @@ -112,12 +112,12 @@ const getDefaultHeader = (rowAiLabel, align) => [ Header: 'Visits', accessor: 'visits', width: 120, - aiLabel: !rowAiLabel && , + aiLabel: !rowAiLabel && , }, { Header: 'Someone 1', accessor: 'someone1', - aiLabel: !rowAiLabel && , + aiLabel: !rowAiLabel && , width: 200, }, { diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 55381c2aa5..2cdab00fc8 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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/DatagridAILabel'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; @@ -156,8 +156,8 @@ const useSortableColumns = (hooks: Hooks) => { renderIcon={(props) => { return ( <> - diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleSlug.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js similarity index 100% rename from packages/ibm-products/src/components/Datagrid/utils/ExampleSlug.js rename to packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js index 8afdd2ea29..ed2a7ffd45 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js +++ b/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js @@ -10,16 +10,16 @@ import React from 'react'; import { FolderOpen, View, Folders } from '@carbon/react/icons'; import { - AILabel, - AILabelContent, - AILabelActions, + unstable__Slug as Slug, + unstable__SlugContent as SlugContent, + unstable__SlugActions as SlugActions, IconButton, Button, } from '@carbon/react'; -export const ExampleAiLabel = ({ align = 'bottom-right', ...rest }) => ( - - +export const ExampleSlug = ({ align = 'bottom-right', ...rest }) => ( + +

AI Explained

84%

@@ -32,7 +32,7 @@ export const ExampleAiLabel = ({ align = 'bottom-right', ...rest }) => (

Model type

Foundation model

- + @@ -43,7 +43,7 @@ export const ExampleAiLabel = ({ align = 'bottom-right', ...rest }) => ( - - - + + + ); diff --git a/packages/ibm-products/src/components/Datagrid/utils/makeData.js b/packages/ibm-products/src/components/Datagrid/utils/makeData.js index 323c969aba..673728e149 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/makeData.js +++ b/packages/ibm-products/src/components/Datagrid/utils/makeData.js @@ -8,7 +8,7 @@ import React from 'react'; import namor from 'namor'; import { inlineEditSelectItems } from './getInlineEditColumns'; -import { ExampleAiLabel } from './ExampleAiLabel'; +import { ExampleAILabel } from './ExampleAILabel'; const getRandomInteger = (min, max, decimalPlaces) => { const roundedMin = Math.ceil(min); @@ -158,7 +158,7 @@ const newPerson = (index, config) => { doc_link: renderDocLink(), aiLabel: config?.enableAIRow && (index === 1 || index === 3 || index === 4) && ( - + ), id: config?.id ? `${config?.id}__${index}` : `row_${index}`, }; From 380ccf31a268085be454fc85e9ff274d9691682d Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:14:08 +0530 Subject: [PATCH 03/15] fix(Datagrid): fix example issue --- .../Datagrid/utils/ExampleAILabel.js | 20 ++++---- .../Datagrid/utils/ExampleAiLabel.js | 49 ------------------- 2 files changed, 10 insertions(+), 59 deletions(-) delete mode 100644 packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js index ed2a7ffd45..33bb1963a3 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js +++ b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js @@ -10,16 +10,16 @@ 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 }) => ( - - +export const ExampleAILabel = ({ align = 'bottom-right', ...rest }) => ( + +

AI Explained

84%

@@ -32,7 +32,7 @@ export const ExampleSlug = ({ align = 'bottom-right', ...rest }) => (

Model type

Foundation model

- + @@ -43,7 +43,7 @@ export const ExampleSlug = ({ align = 'bottom-right', ...rest }) => ( - - - + + + ); diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js deleted file mode 100644 index ed2a7ffd45..0000000000 --- a/packages/ibm-products/src/components/Datagrid/utils/ExampleAiLabel.js +++ /dev/null @@ -1,49 +0,0 @@ -/* eslint-disable react/prop-types */ -/** - * Copyright IBM Corp. 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. - */ - -//cspell: disable -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, - IconButton, - Button, -} from '@carbon/react'; - -export const ExampleSlug = ({ align = 'bottom-right', ...rest }) => ( - - -
-

AI Explained

-

84%

-

Confidence score

-

- Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. -

-
-

Model type

-

Foundation model

-
- - - - - - - - - - - - - - -); From eddf0106a520bbcac12ec20d39c97e507574ec1b Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:41:57 +0530 Subject: [PATCH 04/15] fix(datagrid): folder name case issue update --- .../addons/AILabel/DatagridAILabel.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx new file mode 100644 index 0000000000..1c668e8cff --- /dev/null +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.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; +} + +export const DatagridAILabel = forwardRef( + ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef) => { + 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, +}; From 4db828d2f132fedfa4807f48860627c2af09ecc9 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 15:00:00 +0530 Subject: [PATCH 05/15] fix(datagrid): ci-check issue --- .../src/components/Datagrid/Datagrid/DatagridRow.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index 2a9bd7fea1..bdc6079c88 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AILabel/DatagridAILabel'; +// import { DatagridAILabel } from './addons/AILabel/DatagridAILabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; @@ -172,11 +172,7 @@ const DatagridRow = (datagridState: DataGridState) => { className={cx(`${blockClass}__table-row-ai-enabled`, { [`${blockClass}__slug--expanded`]: row.isExpanded, })} - > - - + > ) : ( ) From 48c7ef00bf5aedeb3fbb4897b3fd97b57ba37c6a Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 15:19:59 +0530 Subject: [PATCH 06/15] fix(Datagrid): ci-check fix --- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../Datagrid/Datagrid/DatagridRow.tsx | 8 +++- ...{DatagridAILabel.tsx => DatagridLabel.tsx} | 0 .../addons/AILabel/DatagridAILabel.tsx | 43 ------------------- .../Datagrid/useSortableColumns.tsx | 2 +- 5 files changed, 8 insertions(+), 47 deletions(-) rename packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/{DatagridAILabel.tsx => DatagridLabel.tsx} (100%) delete mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index 79e4425edf..dea4e5782f 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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 { DatagridAILabel } from './addons/AILabel/DatagridAILabel'; +import { DatagridAILabel } from './addons/AILAbel/DatagridLabel'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index bdc6079c88..6d444722fa 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AILabel/DatagridAILabel'; +import { DatagridAILabel } from './addons/AILAbel/DatagridLabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; @@ -172,7 +172,11 @@ const DatagridRow = (datagridState: DataGridState) => { className={cx(`${blockClass}__table-row-ai-enabled`, { [`${blockClass}__slug--expanded`]: row.isExpanded, })} - > + > + + ) : ( ) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridLabel.tsx similarity index 100% rename from packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridAILabel.tsx rename to packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridLabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx deleted file mode 100644 index 1c668e8cff..0000000000 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILabel/DatagridAILabel.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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; -} - -export const DatagridAILabel = forwardRef( - ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef) => { - 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, -}; diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 2cdab00fc8..a5d518dab6 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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 { DatagridAILabel } from './Datagrid/addons/AILabel/DatagridAILabel'; +import { DatagridAILabel } from './Datagrid/addons/AILAbel/DatagridLabel'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; From c7ce3f9f39d23782bb5118da97ac60ad0f4cdbbc Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 3 Oct 2024 16:51:58 +0530 Subject: [PATCH 07/15] feat(Datagrid): slug to aiLabel style and class updates --- .../components/Datagrid/styles/_datagrid.scss | 88 +++++++++++++++++++ .../Datagrid/Datagrid/DatagridExpandedRow.tsx | 3 + .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 18 ++-- .../Datagrid/Datagrid/DatagridRow.tsx | 28 +++--- .../Extensions/AILabel/AILabel.stories.jsx | 20 ++--- .../src/components/Datagrid/types/index.ts | 2 +- .../Datagrid/useDefaultStringRenderer.js | 5 +- .../Datagrid/useSortableColumns.tsx | 14 +-- .../Datagrid/utils/ExampleAILabel.js | 7 +- 9 files changed, 148 insertions(+), 37 deletions(-) diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss index 8405aa7048..5753221c6b 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss +++ b/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; @@ -878,9 +959,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, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx index c44f4c74c2..10374b51c7 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx @@ -37,6 +37,9 @@ const DatagridExpandedRow = toggleParentHoverClass(event, 'enter')} onMouseLeave={(event) => toggleParentHoverClass(event)} diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index dea4e5782f..ac61da3f10 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx @@ -182,14 +182,17 @@ const HeaderRow = ( const { className: headerGroupClassName, ...headerGroupProps } = headerGroup.getHeaderGroupProps({ role: undefined }); - const renderSlug = (slug) => { + const renderAILabel = (aiLabel) => { if (isTableSortable) { return; } - return ; + return ; }; - 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 @@ -243,8 +246,9 @@ const HeaderRow = ( [`${blockClass}__isSorted`]: header?.isSorted, [`${blockClass}__header-actions-column`]: header?.isAction, [`${blockClass}__with-slug`]: - (header.slug && React.isValidElement(header?.slug)) || - (header.aiLabel && React.isValidElement(header?.aiLabel)), + header.slug && React.isValidElement(header?.slug), + [`${blockClass}__with-aiLabel`]: + header.aiLabel && React.isValidElement(header?.aiLabel), }, headerProps.className )} @@ -253,7 +257,9 @@ const HeaderRow = ( {...getAccessibilityProps(header)} > {header.render('Header')} - {renderSlug(header.aiLabel) || renderSlug(header.slug)} + {header.aiLabel + ? renderAILabel(header.aiLabel) + : renderAILabel(header.slug)} {resizerProps && !header.isAction && ( { const { className, ...rowProps } = row.getRowProps({ role: undefined }); const foundAIRow = rows.some( (r) => - isValidElement(r?.original?.slug) || isValidElement(r?.original?.aiLabel) + isValidElement(r?.original?.aiLabel) || isValidElement(r?.original?.slug) ); const rowClassNames = cx(`${blockClass}__carbon-row`, { @@ -143,9 +143,8 @@ const DatagridRow = (datagridState: DataGridState) => { [`${blockClass}__carbon-row-expandable--async`]: getAsyncSubRows && row.depth > 0, [`${carbon.prefix}--data-table--selected`]: row.isSelected, - [`${blockClass}__slug--row`]: - isValidElement(row?.original?.slug) || - isValidElement(row?.original?.aiLabel), + [`${blockClass}__slug--row`]: isValidElement(row?.original?.slug), + [`${blockClass}__aiLabel--row`]: isValidElement(row?.original?.aiLabel), }); const withActionsColumn = headers @@ -167,15 +166,21 @@ const DatagridRow = (datagridState: DataGridState) => { {...setAdditionalRowProps()} > {foundAIRow ? ( - row?.original?.aiLabel || row?.original?.slug ? ( + row?.original?.aiLabel ? ( + + + + ) : row?.original?.slug ? ( - + ) : ( @@ -219,8 +224,11 @@ const DatagridRow = (datagridState: DataGridState) => { [`${blockClass}__slug--cell`]: associatedHeader && associatedHeader.length && - (isValidElement(associatedHeader[0]?.aiLabel) || - isValidElement(associatedHeader[0]?.slug)), + isValidElement(associatedHeader[0]?.slug), + [`${blockClass}__aiLabel--cell`]: + associatedHeader && + associatedHeader.length && + isValidElement(associatedHeader[0]?.aiLabel), }, columnClassname )} diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx index 7316c88999..98efb147de 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/AILabel/AILabel.stories.jsx @@ -38,7 +38,7 @@ export default { blocks={[ { description: - "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", + "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.
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.", source: { code: ` { @@ -57,7 +57,7 @@ export default { Header: 'Visits', accessor: 'visits', aiLabel: ( - + ... ... @@ -223,7 +223,7 @@ const ExpansionRenderer = ({ row }) => { ); }; -const GridWithSlugColumnHeader = ({ +const GridWithAILabelColumnHeader = ({ rowAiLabel, rowAiLabelAlign, withSorting, @@ -254,7 +254,7 @@ const GridWithSlugColumnHeader = ({ return ; }; -const GridWithSlugColumnHeaderWrapper = ({ +const GridWithAILabelColumnHeaderWrapper = ({ rowAiLabel, rowAiLabelAlign, withSorting, @@ -263,7 +263,7 @@ const GridWithSlugColumnHeaderWrapper = ({ ...args }) => { return ( - UseSortByColumnProps { 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; } diff --git a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js index f1984fc583..2927e28c19 100644 --- a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js +++ b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js @@ -28,8 +28,9 @@ const useDefaultStringRenderer = (hooks) => {
diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index a5d518dab6..e59e9b6356 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx @@ -91,11 +91,11 @@ const useSortableColumns = (hooks: Hooks) => { 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) { event.stopPropagation(); return; } @@ -156,11 +156,11 @@ const useSortableColumns = (hooks: Hooks) => { renderIcon={(props) => { return ( <> - + {headerProp?.column?.aiLabel ? ( + + ) : ( + + )} {icon(headerProp?.column, props)} ); diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js index 33bb1963a3..749e1657ce 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js +++ b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js @@ -18,7 +18,12 @@ import { } from '@carbon/react'; export const ExampleAILabel = ({ align = 'bottom-right', ...rest }) => ( - +

AI Explained

From cb40ce29aac85f5ec2d0ba93b0c76323d11374fb Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Fri, 4 Oct 2024 10:18:41 +0530 Subject: [PATCH 08/15] feat(Datagrid): update type for slug and aiLabel --- packages/ibm-products/src/components/Datagrid/types/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts index de4b999352..cc87bdd7fe 100644 --- a/packages/ibm-products/src/components/Datagrid/types/index.ts +++ b/packages/ibm-products/src/components/Datagrid/types/index.ts @@ -194,8 +194,8 @@ export interface DataGridHeader UseSortByColumnProps { className(className: any, arg1: { [x: string]: any }): unknown; isAction?: boolean; - slug?: any; // To be removed once the support for slug is not available - aiLabel?: any; + slug?: ReactNode; // To be removed once the support for slug is not available + aiLabel?: ReactNode; } export interface DataGridHeaderGroup From 054fff64fba171e6b2624c5c36f6016c313d9d12 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 10:52:58 +0530 Subject: [PATCH 09/15] feat(Datagrid): slug to ai pr comments --- .../src/components/Datagrid/styles/_datagrid.scss | 14 ++------------ .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 4 +--- .../AiLabel.stories.tsx} | 2 +- .../src/components/Datagrid/useSortableColumns.tsx | 10 +++++----- 4 files changed, 9 insertions(+), 21 deletions(-) rename packages/ibm-products/src/components/Datagrid/Extensions/{AILabel/AILabel.stories.jsx => AiLabel/AiLabel.stories.tsx} (98%) diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss index 776b78c6a7..7472ab3835 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss @@ -390,12 +390,7 @@ 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--slug, .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--aiLabel { width: fit-content; } @@ -971,12 +966,7 @@ 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}__slug--expanded, &.#{$block-class}__aiLabel--expanded { border: none; } diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index ac61da3f10..bf60f343f7 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx @@ -257,9 +257,7 @@ const HeaderRow = ( {...getAccessibilityProps(header)} > {header.render('Header')} - {header.aiLabel - ? renderAILabel(header.aiLabel) - : renderAILabel(header.slug)} + {renderAILabel(header.aiLabel || header.slug)} {resizerProps && !header.isAction && ( 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.
The `slug` property has been deprecated. It will only be supported for a limited time in future. Please use `aiLabel` property instead.", source: { code: ` { diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index e59e9b6356..6b4261ddbe 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx @@ -156,11 +156,11 @@ const useSortableColumns = (hooks: Hooks) => { renderIcon={(props) => { return ( <> - {headerProp?.column?.aiLabel ? ( - - ) : ( - - )} + {icon(headerProp?.column, props)} ); From 0e09fe84fd8b3f510af2370de98acae2aae68814 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:10:52 +0530 Subject: [PATCH 10/15] fix(Datagrid): ci-check issue --- .../AiLabel/{AiLabel.stories.tsx => AiLabel.stories.jsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/{AiLabel.stories.tsx => AiLabel.stories.jsx} (100%) diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.tsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx similarity index 100% rename from packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.tsx rename to packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx From 828f53366b250f8152ffa08ee6048a0640d99d9f Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:22:38 +0530 Subject: [PATCH 11/15] feat(datagrid): slug to ai PR comments --- .../src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../src/components/Datagrid/Datagrid/DatagridRow.tsx | 2 +- .../{AILAbel/DatagridLabel.tsx => AiLAbel/DatagridAiLabel.tsx} | 0 .../ibm-products/src/components/Datagrid/useSortableColumns.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/ibm-products/src/components/Datagrid/Datagrid/addons/{AILAbel/DatagridLabel.tsx => AiLAbel/DatagridAiLabel.tsx} (100%) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index bf60f343f7..f4e9f187dc 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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 { DatagridAILabel } from './addons/AILAbel/DatagridLabel'; +import { DatagridAILabel } from './addons/AiLAbel/DatagridAiLabel'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index 47fdf8ed77..0c431b630a 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AILAbel/DatagridLabel'; +import { DatagridAILabel } from './addons/AiLAbel/DatagridAiLabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridLabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLAbel/DatagridAiLabel.tsx similarity index 100% rename from packages/ibm-products/src/components/Datagrid/Datagrid/addons/AILAbel/DatagridLabel.tsx rename to packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLAbel/DatagridAiLabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 6b4261ddbe..6977d2c95e 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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 { DatagridAILabel } from './Datagrid/addons/AILAbel/DatagridLabel'; +import { DatagridAILabel } from './Datagrid/addons/AiLAbel/DatagridAiLabel'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; From 07f18e0bb31a7cd6e14f894720fead59371110c8 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:30:50 +0530 Subject: [PATCH 12/15] feat(Datagrid): pr comments --- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../Datagrid/Datagrid/DatagridRow.tsx | 2 +- .../addons/AiLabel/DatagridAiLabel.tsx | 43 +++++++++++++++++++ .../Datagrid/useSortableColumns.tsx | 2 +- 4 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index f4e9f187dc..3c3d053a6a 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLAbel/DatagridAiLabel'; +import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index 0c431b630a..f1930616db 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLAbel/DatagridAiLabel'; +import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx new file mode 100644 index 0000000000..1c668e8cff --- /dev/null +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.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; +} + +export const DatagridAILabel = forwardRef( + ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef) => { + 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, +}; diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 6977d2c95e..39e3bc2e4f 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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 { DatagridAILabel } from './Datagrid/addons/AiLAbel/DatagridAiLabel'; +import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; From a3232f69fe37ca0b1b8c961f880c9fe7278dd29d Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:43:30 +0530 Subject: [PATCH 13/15] fix(Datagrid): ci-check issue test --- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../Datagrid/Datagrid/DatagridRow.tsx | 2 +- .../addons/AiLabel/DatagridAiLabel.tsx | 43 ------------------- .../DatagridAiLabel1.tsx} | 0 .../Datagrid/useSortableColumns.tsx | 2 +- 5 files changed, 3 insertions(+), 46 deletions(-) delete mode 100644 packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx rename packages/ibm-products/src/components/Datagrid/Datagrid/addons/{AiLAbel/DatagridAiLabel.tsx => AiLabel1/DatagridAiLabel1.tsx} (100%) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index 3c3d053a6a..9e9c4b973a 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; +import { DatagridAILabel } from './addons/AiLabel1/DatagridAiLabel1'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index f1930616db..761254ad63 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; +import { DatagridAILabel } from './addons/AiLabel1/DatagridAiLabel1'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx deleted file mode 100644 index 1c668e8cff..0000000000 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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; -} - -export const DatagridAILabel = forwardRef( - ({ aiLabel }: DatagridAILabelProps, ref: ForwardedRef) => { - 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, -}; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLAbel/DatagridAiLabel.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel1/DatagridAiLabel1.tsx similarity index 100% rename from packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLAbel/DatagridAiLabel.tsx rename to packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel1/DatagridAiLabel1.tsx diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 39e3bc2e4f..7aa6686897 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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 { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel'; +import { DatagridAILabel } from './Datagrid/addons/AiLabel1/DatagridAiLabel1'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; From 5197b114eecde0e30508ddf4aacaed53ce228e6e Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:51:09 +0530 Subject: [PATCH 14/15] fix(Datagrid): case issue fix rename --- .../src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../src/components/Datagrid/Datagrid/DatagridRow.tsx | 2 +- .../DatagridAiLabel1.tsx => AiLabel/DatagridAiLabel.tsx} | 0 .../ibm-products/src/components/Datagrid/useSortableColumns.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/ibm-products/src/components/Datagrid/Datagrid/addons/{AiLabel1/DatagridAiLabel1.tsx => AiLabel/DatagridAiLabel.tsx} (100%) diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx index 9e9c4b973a..3c3d053a6a 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridHeaderRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLabel1/DatagridAiLabel1'; +import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; import { useInitialColumnSort } from '../useInitialColumnSort'; import { DataGridHeader, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx index 761254ad63..f1930616db 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridRow.tsx +++ b/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 { DatagridAILabel } from './addons/AiLabel1/DatagridAiLabel1'; +import { DatagridAILabel } from './addons/AiLabel/DatagridAiLabel'; import { DataGridState } from '../types'; const blockClass = `${pkg.prefix}--datagrid`; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel1/DatagridAiLabel1.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx similarity index 100% rename from packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel1/DatagridAiLabel1.tsx rename to packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx diff --git a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx b/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx index 7aa6686897..39e3bc2e4f 100644 --- a/packages/ibm-products/src/components/Datagrid/useSortableColumns.tsx +++ b/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 { DatagridAILabel } from './Datagrid/addons/AiLabel1/DatagridAiLabel1'; +import { DatagridAILabel } from './Datagrid/addons/AiLabel/DatagridAiLabel'; import { Hooks, TableInstance } from 'react-table'; import { DataGridState } from './types'; From 38679b59ff61a624ccf47762998f92724e1327ff Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:44:04 +0530 Subject: [PATCH 15/15] feat(Datagrid): aiLabel classes updated per core carbon --- .../components/Datagrid/styles/_datagrid.scss | 30 +++++++++---------- .../Datagrid/Datagrid/DatagridExpandedRow.tsx | 2 +- .../Datagrid/Datagrid/DatagridHeaderRow.tsx | 2 +- .../Datagrid/Datagrid/DatagridRow.tsx | 6 ++-- .../Extensions/AiLabel/AiLabel.stories.jsx | 2 +- .../Datagrid/useDefaultStringRenderer.js | 2 +- .../Datagrid/utils/ExampleAILabel.js | 2 +- 7 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss index 7472ab3835..81869a6c49 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss @@ -231,24 +231,24 @@ } /* This section to be removed after support for slug dropped - end */ -.#{$block-class} th.#{$block-class}__with-aiLabel { +.#{$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-aiLabel, -.#{$block-class} td.#{$block-class}__aiLabel--cell { +.#{$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}__aiLabel--row, + tr.#{$block-class}__ai-label--row, .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table tbody - tr.#{$block-class}__aiLabel--row + tr.#{$block-class}__ai-label--row + .#{$block-class}__expanded-row { @include ai-table-gradient(); @@ -258,7 +258,7 @@ .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table tbody - tr.#{$block-class}__aiLabel--row { + tr.#{$block-class}__ai-label--row { /* stylelint-disable-next-line carbon/theme-token-use */ box-shadow: inset 1px 0 $ai-border-strong; } @@ -266,27 +266,27 @@ .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table tbody - tr.#{$block-class}__aiLabel--row:hover, + tr.#{$block-class}__ai-label--row:hover, .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table tbody - tr.#{$block-class}__aiLabel--row.#{c4p-settings.$carbon-prefix}--data-table--selected:hover, + 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}__aiLabel--row.#{$block-class}__carbon-row-expanded:hover + 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}__aiLabel--row { + 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}__aiLabel--row + tr.#{$block-class}__expandable-row--hover.#{$block-class}__ai-label--row td { background-color: transparent; } @@ -294,12 +294,12 @@ .#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table tbody - tr.#{$block-class}__aiLabel--row.#{c4p-settings.$carbon-prefix}--data-table--selected { + tr.#{$block-class}__ai-label--row.#{c4p-settings.$carbon-prefix}--data-table--selected { @include ai-table-gradient('selected'); } .#{$block-class} - th.#{$block-class}__with-aiLabel + th.#{$block-class}__with-ai-label .#{c4p-settings.$carbon-prefix}--slug { margin-left: $spacing-03; } @@ -391,7 +391,7 @@ } .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug, - .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--aiLabel { + .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--ai-label { width: fit-content; } @@ -967,7 +967,7 @@ align-items: center; &.#{$block-class}__slug--expanded, - &.#{$block-class}__aiLabel--expanded { + &.#{$block-class}__ai-label--expanded { border: none; } } diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx index 10374b51c7..554d1fe330 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridExpandedRow.tsx @@ -37,7 +37,7 @@ const DatagridExpandedRow = { 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), + [`${blockClass}__ai-label--row`]: isValidElement(row?.original?.aiLabel), }); const withActionsColumn = headers @@ -169,7 +169,7 @@ const DatagridRow = (datagridState: DataGridState) => { row?.original?.aiLabel ? ( @@ -225,7 +225,7 @@ const DatagridRow = (datagridState: DataGridState) => { associatedHeader && associatedHeader.length && isValidElement(associatedHeader[0]?.slug), - [`${blockClass}__aiLabel--cell`]: + [`${blockClass}__ai-label--cell`]: associatedHeader && associatedHeader.length && isValidElement(associatedHeader[0]?.aiLabel), diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx index 6f22cd4348..31abdb9ab1 100644 --- a/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx +++ b/packages/ibm-products/src/components/Datagrid/Extensions/AiLabel/AiLabel.stories.jsx @@ -57,7 +57,7 @@ export default { Header: 'Visits', accessor: 'visits', aiLabel: ( - + ... ... diff --git a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js index 2927e28c19..cc96af696c 100644 --- a/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js +++ b/packages/ibm-products/src/components/Datagrid/useDefaultStringRenderer.js @@ -29,7 +29,7 @@ const useDefaultStringRenderer = (hooks) => { className={cx(`${blockClass}__defaultStringRenderer`, { [`${blockClass}__defaultStringRenderer--slug`]: slug && React.isValidElement(slug), - [`${blockClass}__defaultStringRenderer--aiLabel`]: + [`${blockClass}__defaultStringRenderer--ai-label`]: aiLabel && React.isValidElement(aiLabel), })} key={typeof header === 'string' ? header : ''} diff --git a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js index 749e1657ce..5069034062 100644 --- a/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js +++ b/packages/ibm-products/src/components/Datagrid/utils/ExampleAILabel.js @@ -19,7 +19,7 @@ import { export const ExampleAILabel = ({ align = 'bottom-right', ...rest }) => (