[Patternfly] [PatternFly] Alignment of buttons within wizard

Wed Nov 2 19:33:15 UTC 2016

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161102/d0195f0b/attachment.htm>
-------------- 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/d0195f0b/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/20161102/d0195f0b/attachment-0001.png>