[Patternfly] How to indicate Optional form fields?

Thu Mar 2 18:22:20 UTC 2017

Hey Jonathan,

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.

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.

Hope that provides some clarity!

Thanks,
Joe

On Thu, Mar 2, 2017 at 12:43 PM, Jonathan Yu <jawnsy at redhat.com> wrote:

> Thanks Alexandre,
>
> On Thu, Mar 2, 2017 at 8:54 AM, Alexandre Briani Kieling <
> abrianik at redhat.com> wrote:
>
>> Hi all,
>>
>> The following post has some good suggestions:
>> https://uxdesign.cc/design-better-forms-96fadca0f49c
>>
>
> 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
> <https://blog.patternfly.org/required-fields/>, 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 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/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
>>>>> 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
>>>
>>>
>>
>>
>> --
>> *Alexandre Kieling*
>> Senior Software Engineer
>> Red Hat, Inc. | JBoss Middleware
>>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>
>
> --
> 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/73efa075/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Optional-Design.png
Type: image/png
Size: 15817 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/73efa075/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot from 2017-03-01 15-15-09.png
Type: image/png
Size: 47491 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170302/73efa075/attachment-0001.png>