[MGNLUI-2750] Support multi-line labels in dialogs (again) Created: 17/Mar/14  Updated: 11/Mar/21  Resolved: 11/Mar/21

Status: Closed
Project: Magnolia UI
Component/s: design, dialogs, forms
Affects Version/s: 5.2.3
Fix Version/s: None

Type: Improvement Priority: Major
Reporter: Andreas Weder Assignee: Unassigned
Resolution: Won't Do Votes: 2
Labels: estimate-with-uncertainty, forms, looks-unfinished, pain-point, user-feedback, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File example-multiline-label.png    
Issue Links:
Relates
relates to MGNLUI-2535 Field labels ellipsis doesn't work; l... Closed
causality
dependency
depends upon MGNLUI-2749 More subtle looking help/validation m... Closed
duplicate
relation
is related to MGNLUI-3157 If the label is too long, the i18n an... Closed
supersession
supersedes MGNLUI-2471 Form field labels are incoherent and ... Closed
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)
Date of First Response:
Epic Link: AX: improve dialogs
Story Points: 8

 Description   

To fix rendering issues with long labels, we're currently truncating them (MGNLUI-2548). This was mainly to provide a working solution for several support cases.

One of the reasons preventing us to just wrap texts were the in-line validation messages. These, however, are currently not according to design: they should not extend into the column occupied by the labels (MGNLUI-2749). As soon as that issue is fixed, we should enable multi-line labels again and only truncate them, if they extend to more than 3 lines of texts.

To summarize, having well working, multi-line labels requires us to:

  1. Have shorter form error and warning validation messages, as per their original design. This makes space for the actual labels.
  2. Allow labels to go over multiple lines again; we take 3 lines as a maximum. We have to make sure they have a properly spaced right margin. After three lines, we shorten the labels.
  3. A tooltip keeps appearing over shortened labels (it always appears currently) on mouse-over.
  4. Optionally, we always show the tooltip on click/tap to allow this to work on touch devices as well.


 Comments   
Comment by Anja von Gunten [ 17/Nov/17 ]

Hi there,

In the upcoming months we will be working on the redesign of forms and elements. Along that process we will expand the label width so label names can contain more characters than currently possible. That will solve the problem eg. for German language where words are generally longer than in English. From UX perspective labels should in general be as short and precise as possible. Longer descriptions that explains the type of input should be placed in the field description where multiline is possible.

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