[Patternfly] [PatternFly] Alignment of buttons within wizard

Thu Nov 17 21:33:25 UTC 2016

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161117/8889e4f4/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/20161117/8889e4f4/attachment.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/20161117/8889e4f4/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/20161117/8889e4f4/attachment-0002.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/20161117/8889e4f4/attachment-0003.png>