Support passing through extra properties

[mscharley]

Reference: https://material-ui.com/guides/api/#spread

My specific use-case was attaching ARIA properties to a button. In React, these would filter down to the <button> element ultimately and just work. The strict typing gets in the way a little here. Perhaps all the components should inherit the props from ReactDOMRe.props and then extend from there?

It feels like #27 is related to this too.

[jsiebern]

@mscharley In reason we unfortunately cannot inherit props from other components, it would be quite the manual mess to add all of those props. It would be super helpful if you could write up a list of props that makes sense for a given component (like the aria ones on the button).

[mscharley]

So far, the ARIA properties are the only ones I run into consistently when trying to follow along with the examples from the Material UI website. Most of the ARIA properties should probably make sense on most of the elements. If I run into others then I can add onto this issue or make another one though.

[jsiebern]

You're probably right, I still don't want to add the aria props to every component just because. It'll take some time to properly assign them as it stands then :(

[jeddeloh]

We use aria-label extensively in testing for similar reasons discussed here: testing-library/react-testing-library#16. Any progress on this or help needed? I can get that list of props for each component if still needed. Just skimming the built-in MUI typescript definitions, it seems likely that every non-helper component extends the same React.HTMLAttributes there.

Huge thanks for the quick update to hooks, btw!

[studious]

I'm also trying to get onClick to work on TableRow which regular javascript I guess passes through. Any suggestions for onClick on a TableRow?

BTW I'm keenly waiting on your JSX3 support from your hooks branch.
Thanks

[dakotamurphyucf]

A workaround to this is using the component input. Create a JS component that uses the same underlying dom element that is used in Material-UI but adds the properties you need.

const CustomDiv = React.forwardRef(
    (props , ref) => 
        <div aria-label="some-label" aria-required="true" ref={ref} {...props} />
)
export default CustomDiv

Then through FFI import it and use that as the component.

// Type as React.element Since the component field is typed for polymorphic variants that wrap strings or React.element.
// Material-ui should implement as expected since it is a jsx returning function.
[@bs.module "./path/toCustomDiv.js"]
external customDiv: React.element = "default";

[jsiebern]

I'll mark this as closed as there haven't been any new language developments to address this issue.
A solution to this problem would be the following code as an example (not very clean, but that's the only way in reason I know of!):

module CircularProgressAria = {
  let makeProps = MaterialUi.CircularProgress.makeProps;
  let make = props => {
    React.cloneElement(
      <MaterialUi.CircularProgress />,
      Js.Obj.assign(props, {"aria-something": "something"}),
    );
  };
};
let component = <CircularProgressAria className="some-class" />;