Forms: Add Docs to Form Section
The form docs are missing examples of input fields.
The following examples need to be added to page: https://design.gitlab.com/components/form
A lot of these will first require creating examples in the GitLab UI repo
-
Layout (vertical) form https://design.gitlab.com/components/form#layout -
Layout (horizontal) form https://design.gitlab.com/components/form#layout -
Label (sort by dropdown) https://design.gitlab.com/components/form#labels -
Label (horizontally distributed form) https://design.gitlab.com/components/form#labels -
Input (input field types) https://design.gitlab.com/components/form/#input-fields -
Input (disabled input) https://design.gitlab.com/components/form/#input-fields -
Input (inputs of different widths) https://design.gitlab.com/components/form/#input-fields -
Input (predefined widths from specs + 100% width) https://design.gitlab.com/components/form/#predefined-widths -
Text Area https://design.gitlab.com/components/form/#text-area -
Placeholder https://design.gitlab.com/components/form/#placeholders -
Input validation https://design.gitlab.com/components/form/#validation -
Submit button https://design.gitlab.com/components/form/#submit-form-buttons -
Input with optional text: https://design.gitlab.com/components/form/#required-information -
Help Text https://design.gitlab.com/components/form/#help-text
Additional examples are also needed but not yet built. These may need to be broken out into a separate issue:
-
Input field character counter (https://design.gitlab.com/components/form/#preventing-text-overlap). See issue (#648 (closed)) for progress -
Text area character counter (https://design.gitlab.com/components/form/#preventing-text-overlap). See issue (#648 (closed)) for progress -
Inserting Icons into an input field: https://design.gitlab.com/components/form/#icons