feat(Datagrid): slug to aiLabel renaming #6151
There are no files selected for viewing
| 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 { 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 renderAILabel = (aiLabel) => { | ||||||
| if (isTableSortable) { | ||||||
| return; | ||||||
| } | ||||||
| return <DatagridAILabel aiLabel={aiLabel} />; | ||||||
| }; | ||||||
|
|
||||||
| 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
There was a problem hiding this comment. can be removed and as we are going to apply aiLable corresponding classname on presence of slug prop or aiLabel prop
Suggested change
There was a problem hiding this comment. 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), | ||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. 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')} | ||||||
| {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 { 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?.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), | ||||||
|
There was a problem hiding this comment. can be removed and as we are going to apply aiLable corresponding classname on presence of slug prop or aiLabel prop
Suggested change
There was a problem hiding this comment. 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?.aiLabel ? ( | ||||||
| <td | ||||||
| className={cx(`${blockClass}__table-row-ai-enabled`, { | ||||||
| [`${blockClass}__ai-label--expanded`]: row.isExpanded, | ||||||
| })} | ||||||
| > | ||||||
| <DatagridAILabel aiLabel={row?.original?.aiLabel} /> | ||||||
| </td> | ||||||
| ) : row?.original?.slug ? ( | ||||||
| <td | ||||||
| className={cx(`${blockClass}__table-row-ai-enabled`, { | ||||||
| [`${blockClass}__slug--expanded`]: row.isExpanded, | ||||||
| })} | ||||||
| > | ||||||
| <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
There was a problem hiding this comment. these and above line can be removed, as we apply corresponding aiLabel classname conditionally on presence of aiLable or slug prop There was a problem hiding this comment. 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), | ||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. 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
|
||
| size: 'mini', | ||
| ref, | ||
| } as NormalizedAILabeProps); | ||
| return normalizedAILabel; | ||
|
Check warning on line 32 in packages/ibm-products/src/components/Datagrid/Datagrid/addons/AiLabel/DatagridAiLabel.tsx
|
||
| } | ||
| return null; | ||
| } | ||
| ); | ||
|
|
||
| DatagridAILabel.propTypes = { | ||
| /** | ||
| * Specify the AI AILabel to be displayed | ||
| */ | ||
| aiLabel: PropTypes.node, | ||
| }; | ||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.