fix(TileGroup): add generic type support for value and onchange handler

[MichCest]

Closes #19602

Addresses an issue where the TileGroup component's onChange prop is typed with unknown for the selected value causing state updates to require type assertions.

Benefits of this change:

• Enables strong typing of the selected value in consuming components.
• Eliminates the need for type assertions like selection as MyType.
• Improves developer experience and type safety in TypeScript projects.
• Maintains full backward compatibility by defaulting T to string | number.

Changelog

New

• Added generic type parameter to TileGroup - This allows consumers of TileGroup to specify the type of the selected value (e.g., 'one' | 'two' | 'three') for better type safety.

Changed

• Typed the onChange prop with the generic - This ensures that the onChange callback receives a strongly typed selection value, eliminating the need for type assertions in consuming components.
• Updated component definition to use the generic - This enables the component to propagate the generic type throughout its internal logic and props.
• Use the generic in internal state and handlers - To ensure the internal state and onChange handler are consistent with the generic type T.

Removed

• N/A

Testing / Reviewing

I wasn't sure how this could be tested without using Stackblitz. I forked the stackblitz where the original bug was reported and updated it there. Let me know if there's a different way to do it. https://stackblitz.com/edit/github-6lca4mxc-p8whridu?file=src%2FApp.tsx,src%2FTileGroup.tsx

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• [ ] Reviewed every line of the diff
• [ ] Updated documentation and storybook examples
• [ ] Wrote passing tests that cover this change
• [ ] Addressed any impact on accessibility (a11y)
• [ ] Tested for cross-browser consistency
• [ ] Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[github-actions[bot]]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[MichCest]

I wasn't sure how this could be tested without using Stackblitz. I forked the stackblitz where the original bug was reported and updated it there. Let me know if there's a different way to do it. https://stackblitz.com/edit/github-6lca4mxc-p8whridu?file=src%2FApp.tsx,src%2FTileGroup.tsx

[netlify[bot]]

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

Name	Link
🔨 Latest commit	7124ca8e01d13705ea5acbe514c9684cd38bcd7b
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/684c7dfd4c6b5b0008692f20
😎 Deploy Preview	https://deploy-preview-19649--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 project configuration.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7124ca8e01d13705ea5acbe514c9684cd38bcd7b
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/684c7dfd0f41b30008d3e4b6
😎 Deploy Preview	https://deploy-preview-19649--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 project configuration.

[netlify[bot]]

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

Name	Link
🔨 Latest commit	fc477d2d623f709ef2d3d66f3ee4bb4845520f56
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/685d3cf27aa2480008871238
😎 Deploy Preview	https://deploy-preview-19649--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 project configuration.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	fc477d2d623f709ef2d3d66f3ee4bb4845520f56
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/685d3cf2ee44ca0008943af8
😎 Deploy Preview	https://deploy-preview-19649--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 project configuration.

[adamalston]

I wasn't sure how this could be tested without using Stackblitz. I forked the stackblitz where the original bug was reported and updated it there. Let me know if there's a different way to do it. stackblitz.com/edit/github-6lca4mxc-p8whridu?file=src%2FApp.tsx,src%2FTileGroup.tsx

For manual testing, copy the code from the reproduction into a TypeScript file in the codebase (e.g., packages/react/src/components/Modal/Modal.tsx) and check whether a type error is thrown.

For automated testing, see https://github.com/carbon-design-system/carbon/issues/19011 and https://github.com/carbon-design-system/carbon/issues/16361.

I checked out your branch locally. The changes appear to address the issue.

[MichCest]

I have read the DCO document and I hereby sign the DCO.

[MichCest]

recheck

[Gururajj77]

Hey @MichCest , you can create a test story for the reviewers to see the fix.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.73%. Comparing base (34dfc74) to head (fc477d2). Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #19649   +/-   ##
=======================================
  Coverage   84.73%   84.73%           
=======================================
  Files         369      369           
  Lines       14678    14679    +1     
  Branches     4838     4809   -29     
=======================================
+ Hits        12437    12438    +1     
  Misses       2092     2092           
  Partials      149      149           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MichCest]

@Gururajj77 could you please direct me to an example of how to create a test story? Is this the best way to test out this type of bug?

As @adamalston mentioned, I could put instructions on how to manually test if this is sufficient for the reviewers

"For manual testing, copy the code from the reproduction into a TypeScript file in the codebase (e.g., packages/react/src/components/Modal/Modal.tsx) and check whether a type error is thrown."

Apologies, this is my first contribution to this project!

[2nikhiltom]

@MichCest ! just some conflicts in .all-contributorsrc needs attention

[MichCest]

@MichCest ! just some conflicts in .all-contributorsrc needs attention

@2nikhiltom fixed the conflicts, thanks!