<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">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><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><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/<wbr>pattern-library/forms-and-<wbr>controls/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/<wbr>required-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="HOEnZb"><font color="#888888"><br clear="all"></font></span></div><span class="HOEnZb"><font color="#888888"><div><div><br>-- <br><div class="m_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>______________________________<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></div>