Design pattern library: character counter / indicator or recommended text length
Problem
(What’s the problem that this pattern solves? Why is it worth solving?)
Based on #213 (closed) and @pedroms's and @cperessini's ideas on how we could use something similar for indicating recommended text length. We can use something similar but it needs to be softer and guiding instead of restricting.
For example, like in commit message inputs where it's a tip to adhere to best practices, not a restriction. Users can still commit with a very long message.
Solution
(What’s the solution? Why is it like that? What are the benefits?)
We could show the counter only once the user starts to get close to the limit of the recommended length. In this case, the counter never turns bold and red. It should be orange warning or maybe even informative blue.
Example(s)
(One or more images showing the UX pattern. They don’t have to be in GitLab.)
Usage
(When do you use this pattern? And how?)
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
|
|
---|---|
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
- character counter
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)