Controls: Add max length config to text control

[stevensacks]

Issue: Added maxLength to text control and fixed two bugs with control story

What I did

• Added a maxLength to text control and it displays the count to the right of the text area and turns red when it hits the limit.
• Fixed issue where label was overriding children - now label bolds children
• Fixed issue where background color was not being set

How to test

• Is this testable with Jest or Chromatic screenshots?
  Maybe?

• Does this need a new example in the kitchen sink apps?
  No.

• Does this need an update to the documentation?
  Yes. The addition of maxLength to the text control should be included in the controls documentation. I'll leave it to @shilman to write it up since he'll need to do some touchup on the design anyway.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit fd265db. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[MichaelArestad]

What are some specific use cases where you would need to add a max-length to an input in Controls?

[ndelangen]

This looks fine to me.. I'm sure there are use-cases for a max-length. Doesn't seem to add that much complexity to me.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stevensacks]

@MichaelArestad Here’s my use case (and why I added this).

You have a text field in your component that you want to have a max length and be able to test different strings inside of it. More specifically, let’s say the business or marketing team wants to know what a certain string will look like in the component. You don’t necessarily want to ellipses overflow the text, either. You work with the designer to come up with a reasonable limit, and now the biz/mkt team can play around with the component in storybook and know what strings are too long, etc.

It’s unrealistic to expect them to count characters in those strings (which they are in all likelihood copy/pasting from somewhere else). We, as developers, know how to do it, but some of them don’t even know a browser has a console much less the JavaScript to truncate a string.

Currently, I have to add my own character counter and soft-limiter inside my actual stories where I need this because Storybook’s input doesn’t have a max length option. This means that the string in the input is longer than the string that is rendered. It’s a confusing user experience.

As @ndelangen pointed out, this is a simple change, and I think the value it adds is worth it.