Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-5924

Clarify guidelines for styling of dialog footer (and its action buttons)

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Won't Do
    • Icon: Minor Minor
    • None
    • None
    • None
    • 3

      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.

        Acceptance criteria

              Unassigned Unassigned
              sdemocko Šimon Demočko
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved:

                  Task DoD