chore: add decorator in dataTable #18114
Conversation
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| margin-inline: auto convert.to-rem(8px); | ||
| } | ||
| .#{$prefix}--table-sort__header--slug .#{$prefix}--ai-label, | ||
| .#{$prefix}--table-sort__header--slug .#{$prefix}--slug { | ||
| .#{$prefix}--table-sort__header--slug .#{$prefix}--slug, | ||
| .#{$prefix}--table-sort__header--decorator .#{$prefix}--tooltip { |
There was a problem hiding this comment.
since we don't know what will be in the decorator prop there should be some inner wrapper to target something like:
| .#{$prefix}--table-sort__header--decorator .#{$prefix}--tooltip { | |
| .#{$prefix}--table-sort__header--decorator .#{$prefix}--table-sort__inner-header--decorator > * { |
| /** | ||
| * @deprecated please use decorator instead. | ||
| * Provide a `Slug` component to be rendered inside the `TableSlugRow` component | ||
| */ | ||
| slug?: ReactNode; |
There was a problem hiding this comment.
do we need the deprecated slug if we are introducing a new component?
| @@ -75,9 +75,15 @@ const TableExpandRow = React.forwardRef( | |||
|
|
|||
| // We need to put the slug before the expansion arrow and all other table cells after the arrow. | |||
| let rowHasSlug; | |||
There was a problem hiding this comment.
since this is internal it might be nice to update to use AILabel instead to keep consistency and shouldn't break anything on the adopter side
| let rowHasSlug; | |
| let rowHasAILabel; |
| @@ -106,7 +115,7 @@ const TableExpandRow = React.forwardRef( | |||
|
|
|||
| return ( | |||
| <tr {...rest} ref={ref as never} className={className} data-parent-row> | |||
| {slug} | |||
| {decorator} | |||
There was a problem hiding this comment.
I can't comment on it, but after line 110: [${prefix}--data-table--slug-row]: rowHasSlug,
I think there should also be [${prefix}--data-table--ai-label-row]: rowHasAILabel,
so that we can eventually get rid of the the slug-row class in v12
| // Slug is always size `mini` | ||
| const slugRef = useRef<HTMLInputElement>(null); |
There was a problem hiding this comment.
| // Slug is always size `mini` | |
| const slugRef = useRef<HTMLInputElement>(null); | |
| // AILabel is always size `mini` | |
| const AILabelRef = useRef<HTMLInputElement>(null); |
| } | ||
|
|
||
| const headerLabelClassNames = classNames({ | ||
| [`${prefix}--table-header-label`]: true, | ||
| [`${prefix}--table-header-label--slug`]: slug, | ||
| [`${prefix}--table-header-label--slug`]: colHasSlug, |
There was a problem hiding this comment.
i'm not sure i am following why this needed to be updated to colHasSlug instead of slug if just decorator works below
Closes #18005
Add decorator in dataTable component
Changelog
Added a new component
TableDecoratorRowAdded a new deprecated warning function for components
Changed
slugas deprecated prop in all dataTable componentsTableSlugRowcomponent as deprecatedai-lableanddecoratorboth.Testing / Reviewing