feat(TextareaField): add character length counter

[booc0mtaco]

Summary:

• only shows up if max length is specified
• turns red if the default value is greater than allowed
• updates as you type
• currently no warning color as you approach limit
• by default textareas do not allow entry above maxlength
• but you can delete if somehow above maxlength
• field not in error state when above max length

Test Plan:

• Wrote automated tests
• CI tests / new tests are not applicable
• Manually tested my changes, but I want to keep the details secret
• Manually tested my changes, and here are the details:
  • review snapshot / chromatic changes

[github-actions]

size-limit report 📦

Path	Size
components	118.96 KB (+0.25% 🔺)
styles	3.12 KB (0%)

[codecov]

Codecov Report

Merging #1580 (dab979f) into next (b581814) will increase coverage by 0.06%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             next    #1580      +/-   ##
==========================================
+ Coverage   91.63%   91.69%   +0.06%     
==========================================
  Files         279      279              
  Lines        4267     4289      +22     
  Branches      776      786      +10     
==========================================
+ Hits         3910     3933      +23     
+ Misses        331      330       -1     
  Partials       26       26              

Impacted Files	Coverage Δ
...components/TextareaField/TextareaField.stories.tsx	100.00% <100.00%> (ø)
src/components/TextareaField/TextareaField.tsx	100.00% <100.00%> (+3.33%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[ghost]

I don't see a story that includes the character count, would it be worth capturing that state?

[booc0mtaco]

I don't see a story that includes the character count, would it be worth capturing that state?

@jeremiah-clothier We apply character count when there's a maxlength specified, so stories like this one will do the trick

[ghost]

I don't see a story that includes the character count, would it be worth capturing that state?

@jeremiah-clothier We apply character count when there's a maxlength specified, so stories like this one will do the trick

Oh, I guess I was looking at the wrong chromatic build. I didn't realize their had been a few for the PR and the stories with that character limit displayed were already accepted

[jinlee93]

Any thoughts on having character count validation either as a recipe or a wrapping component to also be used on InputField?

[booc0mtaco]

@jinlee93 having the counter exist as a separate composable component isn't a bad idea. We can confer with design if any other fields like InputField could use this. I'm inclined to keep it as an integral part of TextareaField for now, since that's the only place in Figma that it lives currently.

[jinlee93]

@jinlee93 having the counter exist as a separate composable component isn't a bad idea. We can confer with design if any other fields like InputField could use this. I'm inclined to keep it as an integral part of TextareaField for now, since that's the only place in Figma that it lives currently.

Makes sense to me, thanks