chore: add decorator in dataTable #18114

preetibansalui · 2024-11-19T15:57:19Z

Closes #18005

Add decorator in dataTable component

Changelog

Added a new component TableDecoratorRow
Added a new deprecated warning function for components

Changed

marked slug as deprecated prop in all dataTable components
marked TableSlugRow component as deprecated
Added few decorators in storybook as ai-lable and decorator both.

Testing / Reviewing

Go to Storybook > DataTable > AILabel story
Check each story under that, All AI slug stories are now a mix of slug and decorator, so all should look fine.
Added few examples of decorator Tooltip as well, that too should look fine.

netlify · 2024-11-19T16:08:22Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`ff2e40c`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/676aa9f56ce2e10008e6a4c0
😎 Deploy Preview	https://deploy-preview-18114--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-11-19T16:14:16Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`ff2e40c`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/676aa9f502f4dd0008e1f572
😎 Deploy Preview	https://deploy-preview-18114--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-11-19T16:14:22Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`ff2e40c`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/676aa9f54f6f9b0008085058
😎 Deploy Preview	https://deploy-preview-18114--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ariellalgilmore

thanks for tackling the data table!!! this is looking really good! left some comments, but lmk if you have any questions!

packages/styles/scss/components/data-table/sort/_data-table-sort.scss

packages/react/src/components/DataTable/TableDecoratorRow.tsx

packages/react/src/components/DataTable/TableExpandRow.tsx

packages/react/src/components/DataTable/TableHeader.tsx

codecov · 2024-12-02T10:14:27Z

Codecov Report

Attention: Patch coverage is 40.32258% with 37 lines in your changes missing coverage. Please review.

Project coverage is 84.15%. Comparing base (03170a8) to head (ff2e40c).

Files with missing lines	Patch %	Lines
...act/src/components/DataTable/TableDecoratorRow.tsx	20.00%	12 Missing ⚠️
...ackages/react/src/prop-types/deprecateComponent.js	10.00%	7 Missing and 2 partials ⚠️
...ges/react/src/components/DataTable/TableHeader.tsx	53.84%	6 Missing ⚠️
.../react/src/components/DataTable/TableExpandRow.tsx	63.63%	4 Missing ⚠️
...ckages/react/src/components/DataTable/TableRow.tsx	42.85%	4 Missing ⚠️
...es/react/src/components/DataTable/TableSlugRow.tsx	0.00%	2 Missing ⚠️

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.
📢 Have feedback on the report? Share it here.

tay1orjones

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

tay1orjones · 2024-12-02T20:55:29Z

packages/react/src/prop-types/deprecateComponent.js

+
+const didWarnAboutDeprecation = {};
+
+export default function deprecateComponent(componentName, message) {


I'm surprised we didn't have this already, thanks for adding it!

ariellalgilmore

looking good just a few minor comments! happy to discuss more too!

ariellalgilmore · 2024-11-27T19:01:48Z

packages/react/src/components/DataTable/TableExpandRow.tsx

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


I think we need both untill v12... people could be targetting these classes

Suggested change

[`${prefix}--data-table--ai-label-row`]: rowHasAILabel,

[`${prefix}--data-table--slug-row`]: slug && rowHasAILabel,

[`${prefix}--data-table--ai-label-row`]: rowHasAILabel,

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.

packages/react/src/components/DataTable/TableHeader.tsx

packages/react/src/components/DataTable/TableRow.tsx

packages/react/src/components/DataTable/tools/normalize.js

preetibansalui · 2024-12-10T07:50:13Z

thanks for tackling the data table!!! this is looking really good! left some comments, but lmk if you have any questions!

Thanks Ari, I have added the comment and made the changes wherever possible. Please review.

emyarod

it looks like the snapshots may need an update to pass CI!

ariellalgilmore

LGTM! just don't forget to put the data table stories back

chore: add decorator in dataTable

7a4f19d

preetibansalui requested review from a team as code owners November 19, 2024 15:57

preetibansalui requested review from tay1orjones and emyarod November 19, 2024 15:57

ariellalgilmore reviewed Nov 19, 2024

View reviewed changes

preetibansalui and others added 6 commits November 21, 2024 16:32

Merge branch 'main' into 18005-add-decorator-in-dataTable

e5ed412

fix: replace slug with ai-lable

7dd3da9

fix: test cases

05f0a99

Merge branch 'main' into 18005-add-decorator-in-dataTable

e2515e0

fix: test case

fbe8f25

fix: test cases

aa7e98d

tay1orjones approved these changes Dec 2, 2024

View reviewed changes

tay1orjones added the status: one more review 👀 label Dec 2, 2024

ariellalgilmore reviewed Dec 3, 2024

View reviewed changes

preetibansalui and others added 2 commits December 10, 2024 11:30

Merge branch 'main' into 18005-add-decorator-in-dataTable

9db81fc

fix: changed const name as per PR suggestions

473e0ee

preetibansalui requested a review from ariellalgilmore December 10, 2024 07:50

tay1orjones and others added 2 commits December 10, 2024 15:09

Merge branch 'main' into 18005-add-decorator-in-dataTable

6b6179c

Merge branch 'main' into 18005-add-decorator-in-dataTable

9134a4b

emyarod reviewed Dec 12, 2024

View reviewed changes

preetibansalui and others added 4 commits December 16, 2024 15:57

fix: css issues

fd9b843

fix: css

703ab52

fix: test

4fa7717

Merge branch 'main' into 18005-add-decorator-in-dataTable

3ae6ca9

ariellalgilmore approved these changes Dec 16, 2024

View reviewed changes

preetibansalui and others added 6 commits December 17, 2024 18:16

Merge branch 'main' into 18005-add-decorator-in-dataTable

d4b9d88

Merge branch 'main' into 18005-add-decorator-in-dataTable

3a37225

fix: removed decorator stories

a646c18

fix: test

ea1c8c7

Merge branch 'main' into 18005-add-decorator-in-dataTable

adb1186

fix: test

ff2e40c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add decorator in dataTable #18114

chore: add decorator in dataTable #18114

preetibansalui commented Nov 19, 2024

netlify bot commented Nov 19, 2024 •

edited

Loading

netlify bot commented Nov 19, 2024 •

edited

Loading

netlify bot commented Nov 19, 2024 •

edited

Loading

ariellalgilmore left a comment

codecov bot commented Dec 2, 2024 •

edited

Loading

tay1orjones left a comment

tay1orjones Dec 2, 2024

ariellalgilmore left a comment

ariellalgilmore Nov 27, 2024

preetibansalui Dec 10, 2024 •

edited

Loading

preetibansalui commented Dec 10, 2024

emyarod left a comment

ariellalgilmore left a comment


		const didWarnAboutDeprecation = {};

		export default function deprecateComponent(componentName, message) {

	[`${prefix}--data-table--ai-label-row`]: rowHasAILabel,
	[`${prefix}--data-table--slug-row`]: slug && rowHasAILabel,
	[`${prefix}--data-table--ai-label-row`]: rowHasAILabel,

chore: add decorator in dataTable #18114

Are you sure you want to change the base?

chore: add decorator in dataTable #18114

Conversation

preetibansalui commented Nov 19, 2024

Changelog

Testing / Reviewing

netlify bot commented Nov 19, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-web-components ready!

netlify bot commented Nov 19, 2024 • edited Loading

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Nov 19, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

ariellalgilmore left a comment

Choose a reason for hiding this comment

codecov bot commented Dec 2, 2024 • edited Loading

Codecov Report

tay1orjones left a comment

Choose a reason for hiding this comment

tay1orjones Dec 2, 2024

Choose a reason for hiding this comment

ariellalgilmore left a comment

Choose a reason for hiding this comment

ariellalgilmore Nov 27, 2024

Choose a reason for hiding this comment

preetibansalui Dec 10, 2024 • edited Loading

Choose a reason for hiding this comment

preetibansalui commented Dec 10, 2024

emyarod left a comment

Choose a reason for hiding this comment

ariellalgilmore left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 19, 2024 •

edited

Loading

netlify bot commented Nov 19, 2024 •

edited

Loading

netlify bot commented Nov 19, 2024 •

edited

Loading

codecov bot commented Dec 2, 2024 •

edited

Loading

preetibansalui Dec 10, 2024 •

edited

Loading