feat(text-area): React|WC Parity

[maradwan26]

trafficstars

Closes #19480 Closes #19660

Updated text-area WC component so that it matches the React version

• [X] See parent issue for baseline criteria
• [X] AI Label gradient is missing ~~(this could potentially be resolved by fixing TextInput since TextArea inherits from TextInput)~~
• [X] Add counterMode (characters/words), ensure it supports non-latin characters (see #19544)

Changelog

New

• Added AI Label gradient styling
• Added counterMode prop, respective logic and storybook controls
• Added updating logic so that when the user toggles counterMode, the attributes update immediately

Changed

• Fixed typo with cols prop description
• Fixed an issue with the "With AI Label" story where the AI Label content would clip into the right side of the page
• Changed text-area__wrapper--slug to text-area__wrapper--decorator since it's been deprecated.
• Changed labels, helperText, attributes, etc. in stories to match React stories

Removed

• Removed Playground story and moved the controls to the Default story

Testing / Reviewing

• Make sure AI Label gradient is present
• Make sure counterMode prop works properly, specifically with counterMode = 'word'
• Ensure there is non-latin character support
• Ensure no regression

[netlify[bot]]

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

Name	Link
🔨 Latest commit	a196e7b884d49df157f211b31e72c026e64c4f60
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/685ad2d8860ddc000885891c
😎 Deploy Preview	https://deploy-preview-19648--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	a196e7b884d49df157f211b31e72c026e64c4f60
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/685ad2d84edfab0008a1c403
😎 Deploy Preview	https://deploy-preview-19648--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.

[codecov[bot]]

Codecov Report

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

Project coverage is 84.83%. Comparing base (a4b0d90) to head (a196e7b). Report is 30 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #19648   +/-   ##
=======================================
  Coverage   84.83%   84.83%           
=======================================
  Files         371      371           
  Lines       14773    14763   -10     
  Branches     4821     4817    -4     
=======================================
- Hits        12532    12524    -8     
+ Misses       2092     2090    -2     
  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.

[riddhybansal]

@alina-jacob I am not sure what should be the right alignment here. In react I can see that word count and error message are aligned , so as the text increases looks like the ui breaks. I feel invalid text should wrap in multiple lines and word count should hang in corner. Can you share the spec here ? Will create a seperate issue for react.

[riddhybansal]

Here is the link for the react issue .

[maradwan26]

@riddhybansal

I think there is some alignment issue when I play with cols prop having invalid true and a really long invalid text. The icon should not be out of the input field !!

Fixed 👍

[maradwan26]

@riddhybansal @alina-jacob

I agree with @riddhybansal I think it's supposed to overflow. I've pushed changes that address this issue in both web components and react versions.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	a196e7b884d49df157f211b31e72c026e64c4f60
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/685ad2d805342e0008264614
😎 Deploy Preview	https://deploy-preview-19648--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 project configuration.