<div dir="ltr">Josephine,<div><br></div><div>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.</div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Nov 2, 2016 at 11:59 AM, Josephine Qian <span dir="ltr"><<a href="mailto:joqian@redhat.com" target="_blank">joqian@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Andres,<div><br></div><div>Thanks for your comments. Glad to hear that the alignment of buttons works here.</div><div><br></div><div>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.</div></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Nov 2, 2016 at 11:49 AM, Josephine Qian <span dir="ltr"><<a href="mailto:joqian@redhat.com" target="_blank">joqian@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Allie,<div><br></div><div>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.</div></div><div class="m_-3948387791747094809HOEnZb"><div class="m_-3948387791747094809h5"><div class="gmail_extra"><br><div class="gmail_quote">On Wed, Nov 2, 2016 at 11:43 AM, Allie Jacobs <span dir="ltr"><<a href="mailto:ajacobs@redhat.com" target="_blank">ajacobs@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Josephine,<div><br></div><div>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?</div></div><div class="gmail_extra"><div><div class="m_-3948387791747094809m_-451893957750347141h5"><br><div class="gmail_quote">On Wed, Nov 2, 2016 at 11:22 AM, Andres Galante <span dir="ltr"><<a href="mailto:agalante@redhat.com" target="_blank">agalante@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">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.<div><br></div><div>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.</div><div><br></div><div>I agree that in this examples the btns should be on the left, and for your specific case this layout works.</div><div><br></div><div>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.</div><div><br></div><div>The question is do we need to redesign the wizard to work in a  full page environment?</div><div><br></div><div>Also how does this wizard behave on a mobile environment?<br><div><br></div><div><br></div></div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="m_-3948387791747094809m_-451893957750347141m_-6398044269306478037h5">On Wed, Nov 2, 2016 at 12:09 PM, Josephine Qian <span dir="ltr"><<a href="mailto:joqian@redhat.com" target="_blank">joqian@redhat.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div class="m_-3948387791747094809m_-451893957750347141m_-6398044269306478037h5"><div dir="ltr">Hi,<div><br></div><div>We chatted about the alignment of buttons of <b>form within a page </b>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.</div><div><br></div><div>Here you can see 2 iPaaS screens. This is a <b>wizard</b> 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!</div><div><br></div><div>Josephine</div><div><br></div><div><img src="cid:ii_15825816459f4e0a" alt="Inline image 1" width="562" height="460"></div><div><br></div><div><img src="cid:ii_15825818fe861df2" alt="Inline image 2" width="562" height="460"><span class="m_-3948387791747094809m_-451893957750347141m_-6398044269306478037m_-475977315165436833HOEnZb"><font color="#888888"><br clear="all"><div><br></div>-- <br><div class="m_-3948387791747094809m_-451893957750347141m_-6398044269306478037m_-475977315165436833m_-2084474050065498884gmail_signature"><div dir="ltr"><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Josephine Qian</font></span></div><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Twitter: @qhjj1990</font></span></div><div style="margin:0px"><div style="margin:0px"><font color="#444444"><span style="font-size:small;font-family:arial">Blog: </span><font face="arial" size="2"><a href="https://medium.com/@qhjj1990" target="_blank">https://medium.com/@qhjj<wbr>1990</a></font></font></div></div></div></div>
</font></span></div></div>
<br></div></div>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br></div>
<br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br>
<br></blockquote></div><br><br clear="all"><div><br></div></div></div><span class="m_-3948387791747094809m_-451893957750347141HOEnZb"><font color="#888888">-- <br><div class="m_-3948387791747094809m_-451893957750347141m_-6398044269306478037gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><br></div>







Allie Jacobs<br>UXD
<p><span><a href="https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York" target="_blank">calendar</a></span></p></div></div>
</font></span></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="m_-3948387791747094809m_-451893957750347141gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Josephine Qian</font></span></div><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Twitter: @qhjj1990</font></span></div><div style="margin:0px"><div style="margin:0px"><font color="#444444"><span style="font-size:small;font-family:arial">Blog: </span><font face="arial" size="2"><a href="https://medium.com/@qhjj1990" target="_blank">https://medium.com/@qhjj<wbr>1990</a></font></font></div></div></div></div>
</div>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="m_-3948387791747094809gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Josephine Qian</font></span></div><div style="margin:0px;font-size:12px"><span style="font-family:arial;font-size:small"><font color="#444444">Twitter: @qhjj1990</font></span></div><div style="margin:0px"><div style="margin:0px"><font color="#444444"><span style="font-size:small;font-family:arial">Blog: </span><font face="arial" size="2"><a href="https://medium.com/@qhjj1990" target="_blank">https://medium.com/@<wbr>qhjj1990</a></font></font></div></div></div></div>
</div>
</div></div><br>______________________________<wbr>_________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/<wbr>mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div style="color:rgb(0,0,0)">- Serena Chechile Doyle</div><div style="color:rgb(0,0,0)"><i>UXD | Unified Management Experience</i></div><div style="color:rgb(0,0,0)"><b style="color:rgb(0,0,173);font-family:'trebuchet ms',sans-serif;font-size:11px">Red Hat</b></div><div style="color:rgb(0,0,0);font-family:'trebuchet ms',sans-serif"><span style="font-size:11px"><b style="color:rgb(0,0,173)">Cell</b><span style="color:rgb(0,0,173)"> </span><a href="tel:508-769-7715" value="+15087697715" style="color:rgb(17,85,204)" target="_blank">508-769-7715</a> | <b style="color:rgb(0,0,173)">IRC</b> - serena | <b style="color:rgb(0,0,173)">Skype</b> - serenamarie125 </span><span style="font-size:11px">| </span><b style="font-size:11px;color:rgb(0,0,173)">Twitter</b><span style="font-size:11px"> - @serenamarie125</span></div></div></div></div></div></div></div>
</div>