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. |
packages/styles/scss/components/data-table/sort/_data-table-sort.scss
Outdated
Show resolved
Hide resolved
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #18114 +/- ##
==========================================
- Coverage 84.31% 84.15% -0.17%
==========================================
Files 404 406 +2
Lines 14359 14407 +48
Branches 4656 4636 -20
==========================================
+ Hits 12107 12124 +17
- Misses 2090 2119 +29
- Partials 162 164 +2 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
LGTM! Worth calling out that this more tightly couples this prop with AILabel due to the few instances where the display name is checked. e.g. decorator?.type?.displayName === 'AILabel'. It's not a huge deal, but it does mean things will behave differently if someone implements their own AILabel, as unlikely as that may be.
packages/react/src/components/DataTable/stories/DataTable-ai-label.stories.js
Outdated
Show resolved
Hide resolved
|
|
||
| const didWarnAboutDeprecation = {}; | ||
|
|
||
| export default function deprecateComponent(componentName, message) { |
There was a problem hiding this comment.
I'm surprised we didn't have this already, thanks for adding it!
| @@ -98,15 +107,15 @@ const TableExpandRow = React.forwardRef( | |||
| [`${prefix}--parent-row`]: true, | |||
| [`${prefix}--expandable-row`]: isExpanded, | |||
| [`${prefix}--data-table--selected`]: isSelected, | |||
| [`${prefix}--data-table--slug-row`]: rowHasSlug, | |||
| [`${prefix}--data-table--ai-label-row`]: rowHasAILabel, | |||
There was a problem hiding this comment.
I think we need both untill v12... people could be targetting these classes
| [`${prefix}--data-table--ai-label-row`]: rowHasAILabel, | |
| [`${prefix}--data-table--slug-row`]: slug && rowHasAILabel, | |
| [`${prefix}--data-table--ai-label-row`]: rowHasAILabel, |
There was a problem hiding this comment.
Hey Ari, here Slug is just a constant name which I have changed to decorator in line no 78 of this file and added condition for both Slug or decorator. However, yes we can add both the classes [${prefix}--data-table--slug-row] and [${prefix}--data-table--ai-label-row] on same condition keeping in mind if any user is using the [${prefix}--data-table--slug-row] class name.
Thanks Ari, I have added the comment and made the changes wherever possible. Please review. |
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