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: Inline image 1] Jacob Lucky [email protected] On Thu, Mar 2, 2017 at 9:45 AM, Matt Carrano <[email protected]> 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 <[email protected]> > 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 <[email protected]> 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/patt >>> ern-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/re >>> quired-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) >>> >>> >>> >>> 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: >>> >>> >>> >>> "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 <https://twitter.com/jawnsy> >>> >>> *“Ever tried. Ever failed. No matter. Try again. Fail again. Fail >>> better.”* — Samuel Beckett >>> >>> _______________________________________________ >>> Patternfly mailing list >>> [email protected] >>> https://www.redhat.com/mailman/listinfo/patternfly >>> >>> >> >> _______________________________________________ >> Patternfly mailing list >> [email protected] >> https://www.redhat.com/mailman/listinfo/patternfly >> >> > > > -- > Matt Carrano > Sr. Interaction Designer > Red Hat, Inc. > [email protected] >
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
