More subtle looking help/validation messages in forms (MGNLUI-2749)

[MGNLUI-3559] Change help and validation messages in forms to look less blocky and alarming Created: 08/Sep/15  Updated: 08/Mar/21  Resolved: 08/Mar/21

Status: Closed
Project: Magnolia UI
Component/s: design, forms
Affects Version/s: None
Fix Version/s: 5.4.x

Type: Sub-task Priority: Neutral
Reporter: Andreas Weder Assignee: Unassigned
Resolution: Obsolete Votes: 0
Labels: forms, ux, visual-design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLUI-3558 Tweak how we show warnings and errors... Closed
relates to MGNLUI-3560 Change the main message banner in for... Closed
Template:

 Description   

MGNLUI-2749 asks for a more set-back, subtle visual appearance of form help, warnings and error messages. Our current message look to blocky and too alarming.

Please change the visual appearance of help, warning and error messages so that it corresponds more to the original design:

  • The message box has the same width as the value part of a field they're pointing to. In general, it should cover the right part of a form, which is form width minus left/right padding minus label width.
    • Left edge is where all input fields start.
    • Right edge is where the area for input fields ends: 42 px from right border.
  • Change the padding of that box so that it appears to be less high:
    • Use 6px above and below.
    • Increase left and right padding to 12px.
  • Move the arrow of the message box closer to the field it points to. The div also has a 5px top padding: remove that.
    • The arrow should be at 100px from left edge of message box for smaller, half-width input fields.
    • The arrow should be horizontally centered for large, full-width input fields.

Generated at Mon Feb 12 09:07:49 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.