[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]

Re: [Patternfly] How to indicate Optional form fields?



Thanks Alexandre,

On Thu, Mar 2, 2017 at 8:54 AM, Alexandre Briani Kieling <abrianik redhat com> wrote:
Hi all,

The following post has some good suggestions:

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.

As mentioned, Jake and I both like the look of the "optional" text in the background of the input mentioned in the PatternFly blog, 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.

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>.


Cheers,
Alexandre


On Thu, Mar 2, 2017 at 11:45 AM, Matt Carrano <mcarrano 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 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 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)



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

“Ever tried. Ever failed. No matter. Try again. Fail again. Fail better.” — Samuel Beckett

_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly



_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly




--
Matt Carrano
Sr. Interaction Designer
Red Hat, Inc.
mcarrano redhat com

_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly




--
Alexandre Kieling
Senior Software Engineer
Red Hat, Inc. | JBoss Middleware

_______________________________________________
Patternfly mailing list
Patternfly redhat com
https://www.redhat.com/mailman/listinfo/patternfly




--
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

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]