[MGNLUI-6075] Restyle focus state in grid to be more subtle Created: 24/Jul/20  Updated: 13/Jan/21  Resolved: 19/Aug/20

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2.3

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Šimon Demočko
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: 1.9h
Original Estimate: Not Specified

Attachments: File Screen Recording 2020-07-29 at 11.02.54.mov     PNG File image-2020-07-29-08-16-33-294.png     PNG File image-2020-07-29-11-14-23-538.png    
Issue Links:
Relates
relates to MGNLUI-5833 highlighted row when entering the app... 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: UI framework: grids and browsing
Sprint: UI FW 9
Story Points: 1

 Description   

Users don't seem to understand the black focus border around the first item in grid.

We want to keep its functionality, which is different to how it was in M5: focus and select are two separate states.

However the black border is too strong, irritates users so we concluded that it needs to be visually more subtle.

Acceptance criteria 

extracted from comments

We'll go with: 

  • 3px vertical border from left side with 0 radius, black color. This follows a common pattern seen in gmail or even here in jira, you can use p/n to navigate comments and you get a blue bar on the left. 2px would be a bit hard to see due to the fact that it is touching the edge of the window and possibly a black monitor frame.
  • In the future, we'll likely introduce a similar vertical stripe of probably white color to a focused action in action bar.
  • Buttons and form fields would keep a black outline.


 Comments   
Comment by Šimon Demočko [ 29/Jul/20 ]

Ok, so we had a sess w/ avongunten and experimented with the looks a bit.

We'll go with: 

  • 3px vertical border from left side with 0 radius, black color. This follows a common pattern seen in gmail or even here in jira, you can use p/n to navigate comments and you get a blue bar on the left. 2px would be a bit hard to see due to the fact that it is touching the edge of the window and possibly a black monitor frame.
  • In the future, we'll likely introduce a similar vertical stripe of probably white color to a focused action in action bar.
  • Buttons and form fields would keep a black outline.
Generated at Mon Feb 12 09:32:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.