fix: textarea invalid icon

[riddhybansal]

Closes #16355
Closes #16649

Error icon appears outside of the textarea element when user passes cols property to TextArea component

Changelog

Changed

• Some styles.

Testing / Reviewing

Pass cols prop in Textarea component
Set invalid prop to true, The icon should lie in the textarea itself

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	aa294b8
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6665b3bdcbc1280008135b3b
😎 Deploy Preview	https://deploy-preview-16725--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.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	aa294b8
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6665b3bdd415a7000854b4a4
😎 Deploy Preview	https://deploy-preview-16725--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]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	536b25b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/666af631afe28b0008afb14c
😎 Deploy Preview	https://deploy-preview-16725--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.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	536b25b
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/666af631302c190008aea155
😎 Deploy Preview	https://deploy-preview-16725--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.

[alisonjoseph]

This LGTM, just a minor formatting update suggestion.

[preetibansalui]

Hey, a minor thing I noticed, Is it ok that if it shows the number of characters out of the box?

[riddhybansal]

Hey, a minor thing I noticed, Is it ok that if it shows the number of characters out of the box?

Am not sure of it may be @alina-jacob would be a right person to answer this.

[alina-jacob]

Hi @preetibansalui and @riddhybansal, good catch on the word-counter!
Its supposed to re-size based the width of the text area

The screenshot one is a bug, the counter would sit on the right-edge of the text-area (parallel to the lable, above the input field), not in the far right corner

Here's the spec for it: Website link

[riddhybansal]

Hi @preetibansalui and @riddhybansal, good catch on the word-counter! Its supposed to re-size based the width of the text area

The screenshot one is a bug, the counter would sit on the right-edge of the text-area (parallel to the lable, above the input field), not in the far right corner

Here's the spec for it: Website link

For this , will be creating another issue.