Optional/required label formatting

[kav]

Prerequisites

• I have read the documentation.

Description

Per https://uxdesign.cc/design-better-forms-96fadca0f49c#.mmbenef8x it'd look a heck of a lot nicer if optional params had -Optional labels rather than required ones having a star.

Alternatively we might be able to move that into CSS so the asterisk or optional text could be controlled there.

I get that some people likely prefer the current behavior so I'd love to see ideas on where to control this otherwise.

Happy to investigate here if a pull request of some kind would be welcomed

[n1k0]

Sure, that's something I wanted to do for a while. A first step could be to just update the existing code to use what this post suggests; the thing is that we don't want to introduce specific stylesheets/styles to avoid introducing too much coupling with the bootstrap semantics.

I've been thinking for a while that we could provide a field template option, basically a stateless component providing the component pieces needed to render a whole field from its props:

// dumb example, more props would be exposed
function MyFieldTemplate({id, label, required, errors, children}) {
  return (
    <div className="my-field">
      <label htmlFor={id}>{label}{required ? "*" : ""}</label>
      {children}
      {errors}
    </div>
  );
}

render(<Form fieldTemplate={MyFieldTemplate} />);

What do you think?

[n1k0]

A first step could be to just update the existing code to use what this post suggests

Done that in #276, feedback welcome.

[cedricmessiant]

This field template thing would be great !
(a few months ago, I had to create a complete SchemaField just to get the markup I needed for my fields).

[kav]

I like the update although it feels a bit like trading one issue for another. Fundamentally this is a form styling question rather than a content one so anything that injects content seems less ideal. Controlling for some formatting of the optional text would be ideal. Injecting fields is handy but seems like overkill for this use case (I can see a few others for sure)

I think a better solution is to simply add a class "form-label-required" or something like that to the label associated with the required control. Then it is crazy easy to control the behavior via css. See this fiddle for an example I threw together. Obviously in react you might put the css in the component style but you get the idea.

https://jsfiddle.net/514r2f18/4/

[olzraiti]

A template system would be a game changer indeed!

[pablen]

Maybe something like labelRenderer prop from react-json-tree would be nice?

https://github.com/alexkuz/react-json-tree#customize-rendering

[n1k0]

I think #284 would address all these quite concerns nicely.

[n1k0]

Now #304 has landed, you have full control over how the labels are rendered. Closing this.