[MGNLUI-5924] Clarify guidelines for styling of dialog footer (and its action buttons) Created: 05/Jun/20  Updated: 13/Nov/23  Resolved: 13/Nov/23

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

Type: Improvement Priority: Minor
Reporter: Šimon Demočko Assignee: Unassigned
Resolution: Won't Do Votes: 0
Labels: 62-UX, ux-improvement
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Bildschirmfoto 2020-06-03 um 16.58.21.png     PNG File Screenshot 2020-03-05 at 11.09.43.png     PNG File image-2020-06-03-18-05-39-268.png    
Issue Links:
Issue split
split from MGNLUI-5711 Improve new asset chooser Closed
Relates
relates to MGNLUI-5951 Restrict green button styling in edit... Open
dependency
is depended upon by MGNLUI-5925 Improve API for adding actions to dia... Open
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: UX improvements
Story Points: 3

 Description   

There's a need for some visual ordering and distinction of buttons of different purposes. 

Current setup is quite messy and mixes two semantics for what is a primary and secondary button vs. action. (addPrimaryAction(), addSecondaryAction(), primary-actions, secondary-actions, primary-button, secondary-button...) We have buttons that

  • close a dialog (right aligned - in code called unfortunately "primaryActions") and
    • confirm (usually green, rightmost, primary-button styled)
      • commit
      • save
      • choose
      • ..?
    • cancel - no operation (transparent, on the right aligned, but to left of primary, secondary-button styled, even though still a primaryAction)
  • do other actions (left aligned, called "secondaryActions", even though a primary-button can be there)

Places where "secondaryActions" occur:

  • Move dialog has three choosing primary-buttons Move before/inside/after and a cancel button. Previously the before after were black, now they are green. Anja wanted to have them white, considering them secondary-buttons. This is still questionable, since all three buttons are essentially equal in the impact of what they do since they move the item, just to different places. 
    • All three buttons could be together and visually same
    • Roman suggested a combo box with options inside/before/after. Maybe cumbersome.
  • Asset chooser will have Upload, Upload and edit button. Those are not choosing - what style should they have?
  • other?

Further changes in API and how actions should be allowed for extenders to be added and reasonably styled require that we have clear guidelines on what types of actions can be here, how they should look, be styled, ordered, aligned etc.



 Comments   
Comment by Mikaël Geljić [ 06/Jul/20 ]

Few pointers here: see previous work on PR #1466, as part of MGNLUI-5711.

  • On the one hand it was not using the correct style-name in EditorActionLayout. Not all action controls are buttons, while action controls may (or may not) have a "secondary" variation. ResurfaceTheme#BUTTON_SECONDARY constant should do the trick.
  • On the other hand, if we do that, apparently all 3 move actions become green, because they all extend from commit-action.
  • Therefore, adding ActionDefinition's name as style-name may be a bit too arbitrary, see info.magnolia.ui.dialog.ActionButton:68.
  • Instead, the footer or EditorActionLayout may assume that the first (or rightest) commit-action added to the primary (right) slot should add the ResurfaceTheme#BUTTON_PRIMARY variation style-name.

See also the full thread onSlack.

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