Input anatomy revision

[jsardid]

• Spacing between the input box and the optional elements (label, assistive text, error).
• Preserve/remove the space of the optional elements when they are missing.
• Horizontal alignment of the inputs

[aweell]

Proposed solution

Error message

• Remove the input box margin-bottom and apply a margin-top: var(--spacing-4)
• Save the error space when the prop error is defined with a string or empty string
• Remove it when prop error is not defined

Label and helper text

• Remove the input box margin-top and apply a margin-bottom: var(--spacing-4)
  • If the helper-text is defined, apply the margin-bottom to it
  • If the helper-text is not defined, apply the margin-bottom to the label

Inputs alignment

In forms or other use cases where inputs need to be horizontally aligned, we need to define in the component guidelines that the error space should be preserved even if the field potentially would never have error and set in the row properties the align-items to end.

This alignment should be set as end because some inputs in a form could have helper-text or not, and we want to preserve the box alignment between inputs.

Individual usage

For cases where the inputs need to be isolated and potentially wouldn't be an error to display or they don't need label or helper text, the input box shouldn't have any margin and its space should be defined by the layout