[Patternfly] [PatternFly] Alignment of buttons within wizard

Fri Nov 18 14:36:47 UTC 2016

I think that makes sense.

Matt

On Thu, Nov 17, 2016 at 4:33 PM, Josephine Qian <joqian at redhat.com> wrote:

> Hi Matt,
>
> Sorry for the late response. I missed it. Yes we need a fixed footer for
> buttons. Please look at this screen below. I included a scrollbar on this
> screen. Users can scroll the content area that has cards. Any concerns?
>
> https://redhat.invisionapp.com/share/VQ8UZ7PCE#/198707867_Create_An_
> Integration_Step2
>
> On Thu, Nov 3, 2016 at 8:33 AM, Matt Carrano <mcarrano at redhat.com> wrote:
>
>> 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
>>
>
>
>
> --
> 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/20161118/b4fb4d24/attachment.htm>
-------------- 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/20161118/b4fb4d24/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/20161118/b4fb4d24/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/20161118/b4fb4d24/attachment-0002.png>
-------------- 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/20161118/b4fb4d24/attachment-0003.png>