[Patternfly] How to indicate Optional form fields?

[Thomas Maas]

Hi Jacob,

I’m guessing that came with the Wordpress template in use. It’s not a very accessible implementation as it’s done by the use of an image.

-Thomas

> On 2 Mar 2017, at 15:52, Jake Lucky <jlucky at redhat.com> wrote:
> 
> Hi Matt,
> 
> We actually liked the solution shown on the PatternFly blog, with the word "optional" overlayed over the right side of the form field in a de-emphasized gray font,  but we didn't know how exactly to implement it. I know I have implemented this look myself in the past on other sites, but we were hoping PatternFly had something built-in for this after seeing it on the blog.
> 
> https://blog.patternfly.org/required-fields/
> 
> <image.png>
> 
> Jacob Lucky
> jlucky at redhat.com
> 
> On Thu, Mar 2, 2017 at 9:45 AM, Matt Carrano <mcarrano at redhat.com> wrote:
> Hi Jonathan,
> 
> 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.
> 
> Thanks,
> 
> Matt
> 
> On Thu, Mar 2, 2017 at 5:48 AM, Andres Galante <agalante at redhat.com> wrote:
> Hi Jonathan, I completely agree it seems silly to mark almost every line with the *.
> 
> 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.
> 
> Maybe we should revisit this recommendation and try to find a better solution for mostly mandatory fields.
> 
> Would you be able to work on it and propose a solution?
> 
> Thanks,
> 
> Andrés
> 
> 
> 
> On Wed, Mar 1, 2017 at 8:46 PM, Jonathan Yu <jawnsy at redhat.com> wrote:
> Hey PatternFlyers!
> 
> 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.
> 
> I was using <span class="text-muted">(Optional)</span> to indicate these fields, but the PatternFly Forms guidance recommends against it:
> 
> Required field: Required fields should be denoted with an * (asterisk) symbol.
> Due to responsiveness issues, we do not recommend labeling optional fields with “(optional)”
> 
> See the Design tab of http://www.patternfly.org/pattern-library/forms-and-controls/forms/#/design (aside: why can't we link directly to the Design tab?)
> 
> I came across a blog, which recommends using something that looks somewhat like a placeholder: https://blog.patternfly.org/required-fields/ - 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)
> 
> <Optional-Design.png>
> 
> 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:
> 
> <Screenshot from 2017-03-01 15-15-09.png>
> ​​
> "Greeting" is also optional but I'm not sure the best way to indicate that?
> 
> -- 
> Jonathan Yu / Software Engineer, OpenShift by Red Hat / 140-character rants 'n raves
> 
> “Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.” — Samuel Beckett
> 
> _______________________________________________
> 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
> 
> 
> 
> 
> -- 
> Matt Carrano
> Sr. Interaction Designer
> Red Hat, Inc.
> mcarrano at redhat.com
> 
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly