[Patternfly] [PatternFly] Alignment of buttons within wizard

Thu Nov 3 12:33:35 UTC 2016

Yes, this is what we are doing for storage.  One question- are you assuming
that the buttons live in a fixed footer so they always display at the
bottom of the page despite the height of the viewport?  Is there any
concern that the content will overflow the screen height?  In that case
what happens?

Matt

On Wed, Nov 2, 2016 at 3:54 PM, Josephine Qian <joqian at redhat.com> wrote:

> 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
>

-- 
Matt Carrano
Sr. Interaction Designer
Red Hat, Inc.
mcarrano at redhat.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161103/66a9db43/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/20161103/66a9db43/attachment.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/20161103/66a9db43/attachment-0001.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/20161103/66a9db43/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/20161103/66a9db43/attachment-0003.png>