[MGNLUI-345] Style read-only fields Created: 05/Dec/12  Updated: 11/Feb/13  Resolved: 05/Dec/12

Status: Closed
Project: Magnolia UI
Component/s: design, dialogs
Affects Version/s: 5.0
Fix Version/s: 5.0

Type: Improvement Priority: Major
Reporter: Federico Grilli Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File read-only field.new.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)

 Description   

Currently a read-only field looks like a normal input field, which of course is wrong and misleading. Here's what Andreas suggested to do

  • change the background color of disabled and of read-only fields to #e6e6e6 [04]
  • leave all other colors the way they are: in particular the text color should remain black and the border shall remain visible.

The visual idea behind the shades of grey in forms is that elements which have or could have the edit or keyboard focus are bright (white usually) to make them stick out and to use darker, diminishing shades of gray for the other elements. For read-only fields, there's no need to emphasize fields like this, so we've kept them in the form background color, but left the border visible so that they still appear to be fields. This works as the contrast is still high enough for the actual value of the field to remain readable.

One other thing I noticed while looking at this is that the borders around input fields are actually too strong: they use color [02] instead of [03]. Could you thus please also:

  • change the border color of text input fields to: #cccccc [03]


 Comments   
Comment by Federico Grilli [ 05/Dec/12 ]

Here's what a read-only field should look like

Generated at Mon Feb 12 08:35:58 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.