[Patternfly] [PatternFly] Alignment of buttons within wizard

[Serena Doyle]

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