Ability to provide Underlay as a component/function

[oyeanuj]

Hi @davidtheclark! I was wondering what your thoughts are around being able to provide the Underlay as a function or a component?

I am using Styled Components and I'd prefer to be able to specify the styled component to render than to pass inline styles, or classname. It would also allow anyone using any of the styled libraries to be able to reuse their styling and components.

Another related thing I noticed is that the library provides dialogId in order to customize it but not a corresponding underlayId (the underlayClass has overriding issues`). Curious to understand the thinking behind that?

Thoughts?

[davidtheclark]

@oyeanuj: Could you propose how you think this might work in practice? That is, what combination of props and children — what would it look like to the user?

[oyeanuj]

@davidtheclark Thanks for the quick response. My initial thinking has been something along these lines:

<AriaModal
  titleText="demo one"
  onExit={this.deactivateModal}
  initialFocus="#demo-one-deactivate"
  getApplicationNode={this.getApplicationNode}
  underlay = {MyUnderlayComponent} 
/>

This would replace the need potentially for users needing to pass in classnames, styles, underlayId or color. From glancing at the source code, it seems like the only other thing which is happening is adding of a click handler for underlayClickExits prop. That, I imagine we can add to the component passed.

I was earlier also thinking that you could accept a function for underlay prop but then adding click handler wouldn't be easy - hence the underlay as a component above.

[davidtheclark]

It's not clear to me how this would play out. How, for example, would you get props to MyUnderlayComponent? I guess if you'd like to illustrate with a PR, I'm curious to see what you have in mind.

[oyeanuj]

@davidtheclark wo patterns that I see commonly used is the underlay prop being a function to which you'd pass the props that a user should spread into their Underlay. React-AutoSuggest is a good example of that function as a child pattern. Alternatively, the library could clone and inject props to the underlay component.

But I'll think more about it and see if I can create a PR.

[davidtheclark]

Closing as stale, since I'm still not sure this suggestion would work out. Happy to field a PR, though.