Part of #19125: Migrate component to TS: Tag

[dhruvv173]

Explanation

• This PR is a part of Migrate components to TS: Tag #19125
  Migrated the components from JS to TS for Tag
  Filepath: ui\components\component-library\tag
  It extends the BoxProps so the controls have increased

Screenshots/Screencaps

Before

After

Manual Testing Steps

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Hey @dhruvv173, thanks for your contribution, you hit it out of the park! LGTM 🚀

[georgewrmarshall]

Ah sorry I missed the error. One small update!

[dhruvv173]

Hey @dhruvv173, thanks for your contribution, you hit it out of the park! LGTM 🚀

Sorry I didn't leave a message for review as a dependency test was failing. However, you've gone out of your way to help me out with it. Thanks a lot!

I'll make the changes and submit the PR. Thanks once again!

[codecov]

Codecov Report

Merging #19186 (2ed6e2b) into develop (9d38e53) will decrease coverage by 0.04%.
The diff coverage is 100.00%.

❗ Current head 2ed6e2b differs from pull request most recent head 0c5f7d9. Consider uploading reports for the commit 0c5f7d9 to get more accurate results

@@             Coverage Diff             @@
##           develop   #19186      +/-   ##
===========================================
- Coverage    70.30%   70.26%   -0.04%     
===========================================
  Files          960      961       +1     
  Lines        36689    36642      -47     
  Branches      9543     9521      -22     
===========================================
- Hits         25793    25745      -48     
- Misses       10896    10897       +1     

Impacted Files	Coverage Δ
ui/components/component-library/tag/tag.tsx	100.00% <100.00%> (ø)

... and 17 files with indirect coverage changes

[dhruvv173]

Hey @georgewrmarshall I have made the changes as suggested, could you please review them?
Thanks!

Edit: I'm sorry for the mistake from my end as I forgot to change the DISPLAY const to an enum. I saw 2 PRs on the issue, should I also make changes and re-commit?

[georgewrmarshall]

Hey @dhruvv173, yes updating the deprecated consts for enums in the Tag component would be great! Thanks

[dhruvv173]

Hey @dhruvv173, yes updating the deprecated consts for enums in the Tag component would be great! Thanks

Hey @georgewrmarshall, sorry for the delayed response but by the time I started working on updating consts -> enums the open PR related to it was already merged. So I just had to make changes in the Tag component file.
Could you please review it?
Thanks

[georgewrmarshall]

Hey @dhruvv173, in my final checks I found some things that could be updated

• deprecated storybook ComponentMeta tags
• PropType issue in storybook

[dhruvv173]

Hey @dhruvv173, in my final checks I found some things that could be updated

• deprecated storybook ComponentMeta tags
• PropType issue in storybook

hey @georgewrmarshall, the deprecated component issue was due to change in the storybook version to v7 for which my branch wasn't updated. However, its fixed now.

• I looked into the PropType issue and found out that the control should be passed in as an array and not an object and thats when the changes are reflected correctly. Does that need to be changed? If yes, I'd like to do it if you could guide me.
  Thanks
  
  

[dhruvv173]

hey @georgewrmarshall, just an update on this issue.
I was going through the already migrated components and faced the same PropType issue for the extended Box props.
The props defined in the .types.ts file work fine but its the extended ones which cause this issue.

Works fine when passed as an array

[georgewrmarshall]

Hey @dhruvv173, Thanks for your time and effort in creating this pull request. We have identified an issue related to the typing of the Box component, specifically with the polymorphic as prop. To address this issue, we have an open ticket at #19239 and a draft pull request at #19363 that needs to be merged before we can proceed with your PR. Thanks for your patience

[dhruvv173]

Hey @dhruvv173, Thanks for your time and effort in creating this pull request. We have identified an issue related to the typing of the Box component, specifically with the polymorphic as prop. To address this issue, we have an open ticket at #19239 and a draft pull request at #19363 that needs to be merged before we can proceed with your PR. Thanks for your patience

hey, can this be worked on now?

[georgewrmarshall]

Hey @dhruvv173, one more blocker that I'm working on now #19572

[dhruvv173]

Hey @dhruvv173, one more blocker that I'm working on now #19572

Apologies for missing that part out:/
I'll keep an eye on that PR and start working once it's merged, thankyou for bringing it to my attention!

[georgewrmarshall]

Blocked by #19949

[dhruvv173]

hello @georgewrmarshall , made changes with a clean commit history and resolved conflicts here