[Patternfly] [PatternFly] Alignment of buttons within wizard

[Josephine Qian]

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