[RFC] Overload icon prop to accept ReactElement list for unified DSL

[shayanhabibi]

As it currently stands, the x.icon prop accepts either a ReactElement or a list of Properties.

There is a common pattern of creating buncleIcon objects. When used in conjunction with x.icon, we pass a list of properties to the bundleIcon for local styling such as size. Because of these consecutive calls, we then have to explicitly scope the parameters to their function calls:

x.icon ( bundledIcon [ icon.size.``20`` ] )

Due to the Feliz DSL, users might expect the following to work too:

x.icon [ bundledIcon [ icon.size.``20``] ]

This currently hits the overload for parameters and therefore hits an error.

If we introduce an overload such as this, we can incorporate the above DSL with some user caution:

static member inline icon ([<ParamList>] elems: Fable.React.ReactElement seq) =
        let elemToUse =
            match elems |> Seq.length with
            | l when l < 1 -> "" // some default or placeholder here?
            | _ -> elems |> _.[0]
        Interop.mkProperty<IMenuProp> "icon" elemToUse

[sydsutton]

Yeah, I can add an overload. No problem.

[sydsutton]

Actually, on second thought, I think I'm going to not add overloads for any property that only takes a single ReactElement. I've added convenience overloads in the past, but only for the children property for components that can only take a single child. I added the overload for those components because .children [ is so engrained in my head, and I'm sure a lot of other peoples' heads that I thought it would help. There are over 200 other properties that can only take a single ReactElement that isn't children, and I don't feel like adding those 200+ overloads would add that much to the user experience.

If you feel strongly about it, let me know and maybe we can figure out a way to add those Slot overloads in a reusable/ dynamic way that wouldn't be a huge PIA.

[sydsutton]

By the way, in the past, this is how I've added said overload:

    /// WARNING: Tooltip can contain no more than one child element.
    /// If you try to use more than one child, only the first you pass to this function will be used.
    static member inline children ([<ParamList>] elems: Fable.React.ReactElement seq) =
        match elems |> Seq.tryHead with
        | Some el -> Interop.mkProperty<ITooltipProp> "children" el
        | None -> Interop.mkProperty<ITooltipProp> "children" Html.none