Improve spacing and promote help text in form UIs.

Review Request #12780 — Created Jan. 11, 2023 and submitted

Information

Review Board
release-5.0.x

Reviewers

Our admin UI forms can sometimes get a bit cluttered, with fields,
labels, help text, and action buttons blurring together at times. This
was particularly an issue on mobile.

To help avoid this, this change tweaks some of the spacing and visual
hints of the forms.

There's now double the vertical space between fields, helping
differentiate fields.

Spacing for fieldsets have been tweaked accordingly, providing more
consistent spacing for fieldsets with/without descriptions or other
content, just to keep everything even regardless of content.

Action buttons have spacing above it, making it harder to hit them when
trying to click/tap a field.

The icon for help text is now a bit larger and uses the solid variant of
the FontAwesome icon, helping to keep the ? visible on all displays.
It's also a light blue, helping visually distinguish it from labels or
other field/fieldset content.

Tested various admin UI settings and model change forms, looking for any
regressions in visuals. Tested this in both desktop and mobile.

Verified this solved some messy UI in an upcoming change I'm working on.

Summary ID
Improve spacing and promote help text in form UIs.
Our admin UI forms can sometimes get a bit cluttered, with fields, labels, help text, and action buttons blurring together at times. This was particularly an issue on mobile. To help avoid this, this change tweaks some of the spacing and visual hints of the forms. There's now double the vertical space between fields, helping differentiate fields. Spacing for fieldsets have been tweaked accordingly, providing more consistent spacing for fieldsets with/without descriptions or other content, just to keep everything even regardless of content. Action buttons have spacing above it, making it harder to hit them when trying to click/tap a field. The icon for help text is now a bit larger and uses the solid variant of the FontAwesome icon, helping to keep the `?` visible on all displays. It's also a light blue, helping visually distinguish it from labels or other field/fieldset content.
0e6691ccf79a4e52eabec418af164b456352e488

david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-5.0.x (178be74)
Loading...