Character limit component

[elliejeon]

Issue summary

Character counter breaks the text field when the input text gets longer than the provided space and makes the scroll bar appears.

Expected behavior

Scroll bar should stick to the right side of the text field and allow the entire space inside the field to be used for text input.

Actual behavior

Scroll bar appears in the middle of the field, left to the character counter.
User is also given limited space to input text, left to the invisible column which character counter takes up.
It is also taking up a lot of space, especially when the field width is narrow.

This is related to this issue: #709

Steps to reproduce the problem

@emarchak @dpersing @TheEnzoMar

[ghost]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[emarchak]

On multiline fields overlaying the counter would cause the text to show under the element if it takes the entire space of the field. On this initial look, I could see three options:

1. Accept the overlayed text weirdness that comes with a fixed height + text counter
2. Expand the component to allow the full text to be shown without scroll, thereby avoiding this.
3. Stop the active area (scrollbar) above the text element so that there's space to show the counter, but it would look very janky.

@sarahill do you have any thoughts on this?

[dpersing]

Expand the component to allow the full text to be shown without scroll, thereby avoiding this.

That's my favorite option!

[sarahill]

@emarchak I agree with Devon. Option 2. makes the most sense to me in this case.