[MGNLUI-4162] Restyle combobox and its positioning Created: 15/Mar/17 Updated: 24/Jul/17 Resolved: 21/Jul/17 |
|
| Status: | Closed |
| Project: | Magnolia UI |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | 5.5.6, 5.6 |
| Type: | Improvement | Priority: | Neutral |
| Reporter: | Evzen Fochr | Assignee: | Sang Ngo Huu |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | 0d | ||
| Time Spent: | 7d | ||
| Original Estimate: | 3d | ||
| Attachments: |
|
||||||||||||||||||||
| Issue Links: |
|
||||||||||||||||||||
| 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)
|
||||||||||||||||||||
| Sprint: | Saigon 101, Saigon 102, Saigon 103, Saigon 104, Saigon 105 | ||||||||||||||||||||
| Story Points: | 5 | ||||||||||||||||||||
| Description |
|
We've discussed this in UX. Our main aim now is to avoid that a second combobox (or any other UI element) on the right jumps horizontally if the value in the combobox changes. This has been the main feedback so far, and it's perfectly valid, and it makes sense from a visual design standpoint as well. We also still want to keep the arrow next to the value so that it remains clear that that value can be changed. One common solution in visual design - and the one we've settled with - is to give such elements a fixed, configurable width and visually anchor the element with faint separators on the left and the right - see part "A" in the explanations attached below. You'll also find a similar solution in the original design for selectors in the edit bar (see e.g. [^3-1 Visual design of selectors.png]). Part "B" lists the details on paddings, fonts and colors used. The main design intent is:
Please let us know if you plan to adapt other instances of the combobox. We might want to slightly translate or adjust this design. |