Add help policy

[zelenij]

There should be a way to add detailed help/description to individual form fields

[MangelMaxime]

@zelenij Do you have an exemple of what you mean?

Like having a "?" display near the input where the user can hover it?

[zelenij]

I would like to have a choice - either a "Help" icon (yes, can be a ?), with a custom action, or a predefined text with description/instructions. And some field might not have anything, of course. See this example:

[MangelMaxime]

Ok, I see the idea.

This is definitely something we could add, we just need to find a clean API to do it.

I think it will probably go into the Attributes property of the different like the Label, Placeholder.

In your example, I can see that it could be a simple string or something more complex with a link etc.

Perhaps, we should use a custom DUs:

type Help =
   | None
   | Text of string
   | Element of ReactElement

I can't think of a good name for the Element. I don't want to name it ReactElement because Fable.Form has the potential to be renderer agnostic in the future.

I added the None case into the DUs to simplify the code from the consumer perspective. If we were to use Help option for the property the user would have to write Some (Text "Help text goes here") instead of just Text "Help text goes here.

What is your opinion?

[zelenij]

Yes, this is a good start. I'd modify:

type Help =
   | None
   | Text of string
   | Component of ReactElement
   // Display a help icon and call this event on click
   // Maybe add another option, which react to on hover?
   | Action of unit -> unit // or accept the mouse click event?

[MangelMaxime]

If we allow the user to provide a ReactElement he can configure any behavior he wants, as he can register click, hover, events occurring to the ReactElement.

In general, I try to avoid providing really specialized callbacks because it quickly end up bloating the library code.

Also, it is important to remember that this is (almost?) impossible to provide an universal form logic which works for all the applications in the word. That's why Fable.Form is fully extensible so people can write their own logic and view layer to fit their needs.

For example, in all the applications I had to write at work we needed some really specific components.

Example

https://user-images.githubusercontent.com/4760796/134337944-5772a6f9-b6e3-40c6-9a70-cb3be3edb5f5.mp4

So often I ended up writing a specific "library" for the needs of that application.