[MGNLUI-5783] [Restyling] Change style in tab sheets Created: 31/Mar/20  Updated: 11/May/20

Status: Open
Project: Magnolia UI
Component/s: widgetset
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Neutral
Reporter: Antti Hietala Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File new tab sheet form layout.png     PNG File tab sheet current.png     PNG File tab sheet new.png    
Issue Links:
Cloners
is cloned by MGNLUI-5784 Collapsible groups in action bar Open
dependency
is depended upon by MGNLUI-5860 [Restyling] Remove title space in all... Open
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Epic Link: Merge preview features

 Description   

MGNLUI-5777 introduces tabs into the action bar.

In relation to that the main tab sheet needs to look hierarchically more important than the tabs in the new action bar. The main tab sheet has to be the primary visual anchor and orientation for the user so he's knows where (in the application) he is. The tabs in new action bar are secondary. So for the main tab sheet we are proposing to increase the font size and change characters to upper case.

1) Primary tab sheet: Restyle the main tab sheet as specified here:

https://zpl.io/2yZK0vq

  • Font size 16px
  • Characters upper case
  • Roboto medium for active tab
  • Roboto light for default tabs

2) Rename the sub app tabs so it is clear what the tab stands for:

  • Make sure the sub app tab displays the name of the content (and not the path as it is currently)
    • e.g. Tours: tour name
    • e.g. Pages: page name
    • e.g. Assets: asset name
    • e.g. Stories: story title
    • e.g. Notifications/tasks: notification/task titles
    • e.g. Personas: persona name
    • etc

3) Secondary tab sheet: Restyle tab sheet in form layout so they align with the ones in the new action bar

https://zpl.io/29xNxQl

  • Font size 13px
  • Characters upper case
  • Roboto medium for active tab
  • Roboto light for default tabs
  • Border 1px #DBDBDB
  • Add border 1px around content

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