Add extension points for context-sensitive help and for error display

[odf]

Currently error messages and field descriptions are shown as tooltips via the HTML title property. We need a more flexible method that will also accommodate extensive help texts.

Since there are so many possible approaches, it is probably best to let the caller decide. So I am proposing two new extension points, showError and showHelp, to be passed into the form component as props. If either of these is set, it is assumed to be a React component class, and an instance of it is included with each section and individual field.

I imagine that in the case of showHelp, it would be sufficient to pass in the path to the element in question as a prop. For showError, the current value and error message (or messages) associated with the element would also have to be included.

It seems to me that this method covers all potential use cases. Inline display within the form is straightforward, but if, for example, help text is to be displayed at some fixed location elsewhere in the document, the showHelp component could use a callback to achieve this.

I will implement these in a new branch and use the RCSR project as my guinea pig. In the meantime, I am open to comments and suggestions.

[odf]

After giving this some more thought, I think the suggestion above does not cover the case where a form element as a whole is supposed to react to, for example, a hover or focus event. A typical use case would be to highlight the element and display help/error messages either in a pop-over next to it or at a central place. The element in question could be an individual field together with its label or a complete section, corresponding to a property of type object within the schema.

A more general approach might be to allow for the caller to pass a wrapper function, say render-element. It would receive an array of pre-rendered contents for the element. If the element was a field, the pre-rendered label would be passed separately to distinguish it from other content. The function would also receive the element path, current value and errors. The default wrapper function would simply render a div with all the content in it.

[odf]

There is now (as of 85a1adb75ed07256dbe0df352a3786ba8b115207) support for two optional props fieldWrapper and sectionWrapper to be passed into the Form component. These are expected to behave like React components and will be called with props including the path to the field or section, the title and description, and the list of current errors.