[Patternfly] [PatternFly] Alignment of buttons within wizard

Wed Nov 2 19:54:08 UTC 2016

Hey Matt and Serena,

Thanks so much for letting me know about the ordering of buttons. Serena
has also showed me the page she worked on. I think you both are suggesting
the same thing, as reflected in the revised screens below. But please let
me know if that's still not what you mean.

What's most common:
[image: Inline image 1]

In rare cases, we have one additional action, sitting next to the primary
action:
[image: Inline image 2]

On Wed, Nov 2, 2016 at 3:33 PM, Matt Carrano <mcarrano at redhat.com> wrote:

> We are using an embedded wizard for Storage and arranged the buttons from
> left to right as:  Back, Next (or other action), Cancel.  So Back was
> always the first button and Cancel being the last.
>
>
> I think that's consistent with what you are saying Serena.  You wouldn't
> put the primary action before the Back button, would you?
>
> Matt
>
> On Wed, Nov 2, 2016 at 2:24 PM, Serena Doyle <sdoyle at redhat.com> wrote:
>
>> Josephine,
>>
>> Per the order of the buttons on the embedded wizard, I think that the
>> order should be switched.  I think that the primary button should be left
>> most, and the Cancel would be on the right.  That would be more in line
>> what we did for the Angular PF directive as well.
>>
>>
>>
>> On Wed, Nov 2, 2016 at 11:59 AM, Josephine Qian <joqian at redhat.com>
>> wrote:
>>
>>> Hi Andres,
>>>
>>> Thanks for your comments. Glad to hear that the alignment of buttons
>>> works here.
>>>
>>> I understand your concerns with wizard's general layout on a full web
>>> page. When we designed for this page, we decided to have the fixed footer
>>> because we will have a lot of elements in card and list views. I can see
>>> that become a trouble on small devices. For iPaaS, we can ignore the mobile
>>> use case for now, but I am happy to discuss it from pattern's perspective
>>> if that will help PatternFly.
>>>
>>> On Wed, Nov 2, 2016 at 11:49 AM, Josephine Qian <joqian at redhat.com>
>>> wrote:
>>>
>>>> Hi Allie,
>>>>
>>>> Please ignore the "Test results here" for now, since we are not sure
>>>> what is going to be there. I don't think it would affect the form or the
>>>> buttons.
>>>>
>>>> On Wed, Nov 2, 2016 at 11:43 AM, Allie Jacobs <ajacobs at redhat.com>
>>>> wrote:
>>>>
>>>>> Josephine,
>>>>>
>>>>> Where you have "Test results here" does that mean there will be more
>>>>> content there to 'connect' the form and the buttons at the bottom?
>>>>>
>>>>> On Wed, Nov 2, 2016 at 11:22 AM, Andres Galante <agalante at redhat.com>
>>>>> wrote:
>>>>>
>>>>>> You make a lot of sense Josephine. The right alignment actions are
>>>>>> great on the context of a modal since we know the width of the container.
>>>>>>
>>>>>> But since patternfly is fluid having right alignment actions on a
>>>>>> full screen footer push the actions either too far or too close from the
>>>>>> content.
>>>>>>
>>>>>> I agree that in this examples the btns should be on the left, and for
>>>>>> your specific case this layout works.
>>>>>>
>>>>>> Now, this wizard seems odd in a full page as a common component. When
>>>>>> the form is small, the actions are way too detached from the form, the eye
>>>>>> jump is huge. Having a footer fixes to the bottom of the screen can lead to
>>>>>> challenges in different screen sizes and the overall structure doesn't seem
>>>>>> not reusable enough.
>>>>>>
>>>>>> The question is do we need to redesign the wizard to work in a  full
>>>>>> page environment?
>>>>>>
>>>>>> Also how does this wizard behave on a mobile environment?
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Wed, Nov 2, 2016 at 12:09 PM, Josephine Qian <joqian at redhat.com>
>>>>>> wrote:
>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>> We chatted about the alignment of buttons of *form within a page *yesterday
>>>>>>> on Slack. According to PatternFly's current implementation, those buttons
>>>>>>> are left aligned. What I wanted to make sure if that I am following this
>>>>>>> rule in the right context.
>>>>>>>
>>>>>>> Here you can see 2 iPaaS screens. This is a *wizard* and users will
>>>>>>> need to go thru multiple steps to finish the task. The visualization is
>>>>>>> presented on the left of every screen. On the right, sometimes we have a
>>>>>>> form, sometimes we have a card view or list view. Does anyone has any
>>>>>>> different suggestions? I can see people argue that we have some
>>>>>>> right-aligned buttons in the list view...Interested about what you think!
>>>>>>> Thanks!
>>>>>>>
>>>>>>> Josephine
>>>>>>>
>>>>>>> [image: Inline image 1]
>>>>>>>
>>>>>>> [image: Inline image 2]
>>>>>>>
>>>>>>> --
>>>>>>> Josephine Qian
>>>>>>> Twitter: @qhjj1990
>>>>>>> Blog: https://medium.com/@qhjj1990
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> Patternfly mailing list
>>>>>>> Patternfly at redhat.com
>>>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>>>>
>>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> Patternfly mailing list
>>>>>> Patternfly at redhat.com
>>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>>
>>>>> Allie Jacobs
>>>>> UXD
>>>>>
>>>>> calendar
>>>>> <https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York>
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Josephine Qian
>>>> Twitter: @qhjj1990
>>>> Blog: https://medium.com/@qhjj1990
>>>>
>>>
>>>
>>>
>>> --
>>> Josephine Qian
>>> Twitter: @qhjj1990
>>> Blog: https://medium.com/@qhjj1990
>>>
>>> _______________________________________________
>>> Patternfly mailing list
>>> Patternfly at redhat.com
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>>
>>
>>
>> --
>> - Serena Chechile Doyle
>> *UXD | Unified Management Experience*
>> *Red Hat*
>> *Cell* 508-769-7715 | *IRC* - serena | *Skype* - serenamarie125 |
>> *Twitter* - @serenamarie125
>>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>
>
> --
> Matt Carrano
> Sr. Interaction Designer
> Red Hat, Inc.
> mcarrano at redhat.com
>

-- 
Josephine Qian
Twitter: @qhjj1990
Blog: https://medium.com/@qhjj1990
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/ac8a60f1/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 3.46.30 PM.png
Type: image/png
Size: 77004 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/ac8a60f1/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 10.42.39 AM.png
Type: image/png
Size: 95870 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/ac8a60f1/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 10.38.05 AM.png
Type: image/png
Size: 66106 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/ac8a60f1/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2016-11-02 at 3.46.52 PM.png
Type: image/png
Size: 67169 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/ac8a60f1/attachment-0003.png>