[MGNLUI-1087] Implement all button states according to the design Created: 11/Apr/13  Updated: 20/Nov/18  Resolved: 07/Jun/13

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

Type: Task Priority: Critical
Reporter: Andreas Weder Assignee: Samuli Penttilä
Resolution: Fixed Votes: 0
Labels: design
Remaining Estimate: 0d
Time Spent: 1d 1.5h
Original Estimate: Not Specified
Environment:

magnolia-bundle_stable build #35 (2013-04-08 14:27:35)


Attachments: PNG File Active.png     PNG File Hover - Mouse over - kbd focus.png     PNG File Inactive.png     PNG File Pressed.png     PNG File Style guide for buttons.png    
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Sprint: RC 1

 Description   

Please implement all changes and states of buttons as described below.

  • Use "active.png" for an active button, "inactive.png" for an inactive one.
  • Use "pressed.png" for the pressed/click/tapped state.
  • Use "hover...png" for the mouse over/hover state as well as when the button has the keyboard focus.

Please also make sure that buttons conform to the definition shown on the style guide, which I also attached to this issue.

  • Make sure that we use the 20px margin the minimal buttons width for small buttons with 4 characters of less (2nd definition)
  • But our buttons are actually 23px high - leave this, plz, as is. The 23px work better for us.

See also http://wiki.magnolia-cms.com/display/UX/State+of+input+fields+in+forms (section on buttons).



 Comments   
Comment by Christopher Zimmermann [ 04/Jun/13 ]

Test

Comment by Samuli Penttilä [ 07/Jun/13 ]

Implemented hover and active states and increased button height to 23px.

Comment by Mikaël Geljić [ 07/Jun/13 ]

Didn't fully complete review so far - currently adding a snippet to showcase app to test light dialogs.

Meanwhile see those first comments:

  • hover/active background should not affect all buttons, e.g. link button, datepicker [31] button as well as calendar arrows
  • for "magnolia-styled" native buttons, pressed state padding is wrong, button label should move just 1px down.
Comment by Andreas Weder [ 07/Jun/13 ]

Actually, please do NOT move the label down. Just leave it in-place and make the button turn white on press.

Comment by Mikaël Geljić [ 07/Jun/13 ]

Comments for buttons in LightDialogs:

  • INFO: text color doesn't turn blue on hover for default button
  • ERROR: text color doesn't remain red on clicked state if taking mouse out (might be the way to go actually)

You may now pull showcase-app module, I added a fourth tab for notifications/confirm dialog showcase.

Comment by Andreas Weder [ 07/Jun/13 ]

Thanks for the ptr, Mikael: I'd say the button should remain as when pressed, if you move the mouse out.

Comment by Samuli Penttilä [ 10/Jun/13 ]

Prevented style leaking to date/time pickers and fixed issues observed with light dialogs.

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