fundamental icon indicating copy to clipboard operation
fundamental copied to clipboard

[Docs] Show example of textarea with char message

Open saad-mo opened this issue 6 years ago • 1 comments

  • The maximum length of the content shall be defined in characters. If defined, the number of remaining / exceeding characters are shown
    screen shot 2018-10-11 at 10 08 54 am
  • We don't show any error states for text area (same as input states)
  • Full specs

We don't need an explicit design for this. It can be shown as a part of the new Textarea section defined in #822. We can use existing helpers to demonstrate how to accomplish this character count field.

<div class="fd-form__item">
    <label class="fd-form__label" for="j7QPr100">
        Field Label:
    </label>
    <textarea class="fd-textarea fd-form__control is-invalid" id="j7QPr100">Pellentesque metus lacus commodo eget justo ut rutrum varius nunc. Sed non rhoncus risus. Morbi sodales gravida pulvinar. Duis malesuada odio volutpat elementum vulputate massa magna scelerisque ante et accumsan tellus nunc in sem.</textarea>
    <span class="fd-form__message fd-has-color-status-3 fd-has-text-align-right">
    4 characters exceeded</span>
</div>

in the above, the is-invalid class would be toggled on the control and the fd-has-color-status-3 classes on the message field.

Some refactoring would be needed to accomplish this solely with the existing message container. For example, the error icon is included as an :after and cannot easily move to the right, and the message container uses a modifier which should change to a state class so that it can be toggled. The Nunjucks template does not make these mods very easily so that would need to be rebuilt.

saad-mo avatar Oct 15 '18 14:10 saad-mo

we are waiting for specs from @jeannewalters

saad-mo avatar Nov 14 '18 00:11 saad-mo