Fluentui: IRenderFunction should return ReactNode

[brandonthomas]

Describe the feature that you would like added
IRenderFunction is a pretty useful pattern but I find JSX.Element | null to be pretty restrictive. Can we change this to take React.ReactNode instead? This would allow for a lot more flexibility and be a patch level change

What component or utility would this be added to
IRenderFunction

Have you discussed this feature with our team, and if so, who
Not yet but hoping to :)

Additional context/screenshots

[dzearing]

I think that is a fair change!

[brandonthomas]

Having compiler issues but still trying to get this working. I'll update!

[brandonthomas]

I've gotten a little bit further with React.ReactChild but still have an issue where if a consumer expected JSX.Element | null and we move to ReactChild or ReactNode there will be a type mismatch. With ReactNode it barfs at the inclusion of {} in the typings and with ReactChild it doesn't like string

[brandonthomas]

I'm hesitant to try to update all of our internal typings here as it would still be a breaking change for any partner teams. I was hoping doing React.ReactNode | (JSX.Element | null) would fix it but same result.

[brandonthomas]

What I'm trying to do might just be an intentional limitation https://github.com/Microsoft/TypeScript/issues/7230

[khmakoto]

@brandonthomas I tried the same approach and arrived to similar conclusions.

@dzearing any ideas of how we could go around this? I honestly don't see a way to make this a non-breaking change if we intend to use ReactNode.

[brandonthomas]

Is this something that we'll need to mark for the next major change then? We should support ReactNode since that interface accurately reflects what you can render (string, bool, etc).

[dzearing]

How about any? I'm not sure here. :-|

[dzearing]

What kind of errors do you get with ReactType?

[zenaidura]

onRenderSubMenu : Method to call when trying to render a submenu.
This method never gets called within the subMenuProps interface. I want to render my own Callout on rendering sub menu items.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[brandonthomas]

@dzearing @khmakoto thoughts on taking this for FluentUI?

[khmakoto]

@brandonthomas I'll reference this in the FluentUI v8 issue so it doesn't get lost.