Implement index to visualize the current and max length in Input and TextArea Components

[myllenaalves]

Problem

We need this index so the user can visualize the number of characters (current and the maxLimit) while typing the content.

Solution

Link to figma: https://www.figma.com/design/uVFkApBTiuckbOoMiTQY8j/%F0%9F%93%90-Form-handoff---1.0?node-id=40-30666&node-type=section&m=dev

Usage examples

Dependencies

No response

References

https://www.figma.com/design/uVFkApBTiuckbOoMiTQY8j/%F0%9F%93%90-Form-handoff---1.0?node-id=40-30666&node-type=section&m=dev

[felipepowlist]

@davicostalf @beatrizmilhomem In terms of our current design for character length, I am only suggesting that we use color to indicate when the limit is reached (Figma). I'd like your opinion on this. This is not a must have feature, but if it makes sense we could already incorporate this in the implementation

[beatrizmilhomem]

@felipepowlist There's no problem with incorporating the color in your context! You can also create a separate issue with this proposal, so that we can start mapping other possible scenarios and understand if it would make sense to rethink the counter in Shoreline.

[beatrizmilhomem]

@myllenaalves It's possible to implement the counter using the Field props. @lucasaarcoverde @matheusps can you give more details here, please?

[myllenaalves]

Hi, @beatrizmilhomem! I didn't explore the Field component, which solves the problem I bring up here. We may have some small design adjustments, but that probably solves for a while. Thank you ✨

[myllenaalves]

About the small design adjustments:

I discussed it with @felipepowlist, and in the content platform Figma proposal, we have an example where the character count can exceed the limit, and the value also displays the red error color.

Shoreline:

Figma:

[beatrizmilhomem]

@myllenaalves @felipepowlist is the character limit a rule or just a recommendation for the user? The critical color "Conveys that an action failed due to a system or user error." (color best practices), so it is appropriate to use it if the limit is a rule and the user can't submit the form if the limit is exceeded. The warning color is more appropriate if it is a recommendation for the user, like in the first proposal.

[felipepowlist]

I'm late here, but answering to you @beatrizmilhomem this is a validation on the field, meaning the user cannot save the content if they exceed the character limit, this is why we are proposing the "error state".

In the future, we will have "guidelines" for fields, and they will serve as recommendations. For these cases the warining state will be more appropriate.