<div dir="ltr">Hey Jonathan,<div><br></div><div>Here's a bit of context on the Required Fields blog post on PatternFly, which should clear up the confusion on PatternFly's recommendations. The blog post was published as part of the conceptual phase of the Required Fields pattern. The wrinkle here is that the recommendations in the post differ from final design you see in PatternFly. </div><div><br></div><div>What this means is that the blog post is obsolete, and shouldn't be used as official guidance. It might actually be worthwhile to unpublish it, so that all PatternFly-related content on this topic is internally consistent. </div><div><br></div><div>Hope that provides some clarity!</div><div><br></div><div>Thanks,</div><div>Joe</div></div><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Mar 2, 2017 at 12:43 PM, Jonathan Yu <span dir="ltr"><<a href="mailto:jawnsy@redhat.com" target="_blank">jawnsy@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"><div>Thanks Alexandre,<br></div><div class="gmail_extra"><br><div class="gmail_quote"><span class="">On Thu, Mar 2, 2017 at 8:54 AM, Alexandre Briani Kieling <span dir="ltr"><<a href="mailto:abrianik@redhat.com" target="_blank">abrianik@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 all,<div><br></div><div>The following post has some good suggestions:</div><div><a href="https://uxdesign.cc/design-better-forms-96fadca0f49c" target="_blank">https://uxdesign.cc/design-bet<wbr>ter-forms-96fadca0f49c</a></div></div></blockquote><div><br></div></span><div>I've seen this blog before, but it suggests using "Optional" (text) to indicate optional fields, which directly contradicts the PatternFly recommendations. I'd like to stick with the PatternFly design language and have appropriate recommendations incorporated into it, so that we have a consistent experience across Red Hat's product portfolio.<br><br></div><div>As mentioned, Jake and I both like the look of the "optional" text in the background of the input mentioned in the <a href="https://blog.patternfly.org/required-fields/" target="_blank">PatternFly blog</a>, and would be happy just knowing what HTML/CSS classes we need to apply to achieve that behavior. It should also be incorporated in the "official" design docs rather than just a blog post.<br><br>It seems like jsniezek (I'm guessing Joe Sniezek) has done some good user research to back the recommended design, and I think we should make sure it's captured in our stylesheets and documentation. I also wonder how to apply a style like that to other input element types like <select>.<br></div><div><div class="h5"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div><br></div><div><br></div><div>Cheers,</div><div>Alexandre</div><div><br></div></div><div class="gmail_extra"><div><div class="m_-8236990106673167945h5"><br><div class="gmail_quote">On Thu, Mar 2, 2017 at 11:45 AM, Matt Carrano <span dir="ltr"><<a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@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"><div><div><div>Hi Jonathan,<br><br></div>Thanks for raising this issue. As it so happens, I'm currently in the process of re-writing our forms guidelines on PatternFly and I agree that our current recommendations are somewhat incomplete. I welcome any input or ideas you have and I also would be interested in seeing how others may have addressed this problem.<br><br></div>Thanks,<br><br></div>Matt<br></div><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Mar 2, 2017 at 5:48 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">Hi Jonathan, I completely agree it seems silly to mark almost every line with the *.<div><br></div><div>Using "optional" as a placeholder brings some undesired side effects. for example, if a user wants to have a placeholder as a hint, then the optional will have a conflicts. Also if the input is complete the placeholder would disappear. Therefore we can't recommend using optional as a placeholder as a universal solution for patternfly.</div><div><br></div><div>Maybe we should revisit this recommendation and try to find a better solution for mostly mandatory fields.</div><div><br></div><div>Would you be able to work on it and propose a solution?</div><div><br></div><div>Thanks,</div><div><br></div><div>Andrés</div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="m_-8236990106673167945m_3899209194327826661m_7584548339430394736h5">On Wed, Mar 1, 2017 at 8:46 PM, Jonathan Yu <span dir="ltr"><<a href="mailto:jawnsy@redhat.com" target="_blank">jawnsy@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_-8236990106673167945m_3899209194327826661m_7584548339430394736h5"><div dir="ltr"><div>Hey PatternFlyers!<br><br></div>We have a form that consists mostly of required fields, with a few optional fields. It seems silly to mark all required fields with an asterisk (*) as it's 80%+ of the fields, but I can't figure out the correct style to get the behavior we want.<br><div><br></div><div>I was using <span class="text-muted">(Optional)<<wbr>/span> to indicate these fields, but the PatternFly Forms guidance recommends against it:<span style="color:rgb(36,41,46);font-family:sfmono-regular,consolas,"liberation mono",menlo,courier,monospace;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:pre-wrap;word-spacing:0px;background-color:rgb(255,255,255);text-decoration-style:initial;text-decoration-color:initial;display:inline;float:none"></span><span style="color:rgb(36,41,46);font-family:sfmono-regular,consolas,"liberation mono",menlo,courier,monospace;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:pre-wrap;word-spacing:0px;background-color:rgb(255,255,255);text-decoration-style:initial;text-decoration-color:initial;display:inline;float:none"></span></div><div><br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Required field: Required fields should be denoted with an * (asterisk) symbol.<br>Due to responsiveness issues, we do not recommend labeling optional fields with “(optional)”<br></blockquote><br></div><div>See the Design tab of <a href="http://www.patternfly.org/pattern-library/forms-and-controls/forms/#/design" target="_blank">http://www.patternfly.org/patt<wbr>ern-library/forms-and-controls<wbr>/forms/#/design</a> (aside: why can't we link directly to the Design tab?)<br><br></div><div>I came across a blog, which recommends using something that looks somewhat like a placeholder: <a href="https://blog.patternfly.org/required-fields/" target="_blank">https://blog.patternfly.org/re<wbr>quired-fields/</a> - Design A1, which is labelled as the Recommended way to do things. Does anyone know what CSS class I need for this? (the little "optional" text in the inputs there)<br><br><img style="margin-right:0px" src="cid:ii_izrlzghe0_15a8c426d600e5a5" height="333" width="286"><br><br></div><div>Currently we're using standard input placeholders, but I don't think this is the best use of them (they seem better used for syntax hints) - see the Middle Initial input:<br><br><img src="cid:ii_izrm187b1_15a8c43b11f1916c" height="357" width="509"><br><br></div><div>"Greeting" is also optional but I'm not sure the best way to indicate that?<span class="m_-8236990106673167945m_3899209194327826661m_7584548339430394736m_-7537910795668671773HOEnZb"><font color="#888888"><br clear="all"></font></span></div><span class="m_-8236990106673167945m_3899209194327826661m_7584548339430394736m_-7537910795668671773HOEnZb"><font color="#888888"><div><div><br>-- <br><div class="m_-8236990106673167945m_3899209194327826661m_7584548339430394736m_-7537910795668671773m_3240904793367632426gmail_signature"><div dir="ltr"><div style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><span><span>Jonathan</span><span> </span><span>Yu</span><span> </span></span>/<span> </span><span>Software Engineer</span>,<span> </span><span>OpenShift</span><span> </span>by<span> </span><span>Red Hat</span><span> </span>/<span> </span><a href="https://twitter.com/jawnsy" style="color:rgb(49,175,89);text-decoration:none" target="_blank">140-character rants 'n raves</a></div><br style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><i style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px">“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.”</i><span style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;display:inline;float:none"><span> </span>— Samuel Beckett</span></div></div>
</div></div></font></span></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><span class="m_-8236990106673167945m_3899209194327826661HOEnZb"><font color="#888888"><br><br clear="all"><br>-- <br><div class="m_-8236990106673167945m_3899209194327826661m_7584548339430394736gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div><div>Matt Carrano<br></div>Sr. Interaction Designer<br></div>Red Hat, Inc.<br></div><a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a><br></div></div>
</font></span></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>-- <br></div></div><div class="m_-8236990106673167945m_3899209194327826661gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><font face="monospace, monospace" size="2"><b>Alexandre Kieling</b></font><div style="font-size:12.8px"><div><div><font face="monospace, monospace" size="2">Senior Software Engineer</font></div><div><font face="monospace, monospace" size="2"><font color="#990000">Red Hat, Inc.</font> | JBoss Middleware</font></div></div></div></div></div>
</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></div></div><div><div class="h5"><br><br clear="all"><br>-- <br><div class="m_-8236990106673167945gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div style="color:rgb(68,68,68);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><span><span>Jonathan</span><span> </span><span>Yu</span><span> </span></span>/<span> </span><span>Software Engineer</span>,<span> </span><span>OpenShift</span><span> </span>by<span> </span><span>Red Hat</span><span> </span>/<span> </span><a href="https://twitter.com/jawnsy" style="color:rgb(49,175,89);text-decoration:none" target="_blank">140-character rants 'n raves</a></div><br style="color:rgb(68,68,68);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px"><i style="color:rgb(68,68,68);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12px;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px">“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.”</i><span style="color:rgb(68,68,68);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;display:inline!important;float:none"><span> </span>— Samuel Beckett</span></div></div>
</div></div></div></div>
</blockquote></div><br></div>