[Box] Test props to attributes forwarding

[eps1lon]

This currently creates invalid HTML. Not sure if desired or not but the behavior should be documented in some form (e.g. a test).

Box does not forward the props as DOM attributes.

[oliviertassinari]

It's a bug.

[mui-pr-bot]

No bundle size changes comparing db67bf2...5f13632

Generated by 🚫 dangerJS against 5f13632

[eps1lon]

Turns out I was running the wrong test suite. @material-ui/core/Box actually works as expected. The examples at https://next--material-ui.netlify.com/system/basics/ only create invalid HTML.

[oliviertassinari]

@eps1lon It's just a bug in styled-components then?

[eps1lon]

@eps1lon It's just a bug in styled-components then?

I mean not really. Why should styled-components decide what props to forward and which to block? It's following the same behavior that react changed in v16: Forward every prop to the host instance without a warning instead of issuing a warning and blocking those props.

We should probably show in the examples how this could be avoided.

[oliviertassinari]

Why should styled-components decide what props to forward and which to block?

They do it to ease the DX. It's arbitrary, they are using an emotion package actually.

[eps1lon]

Why should styled-components decide what props to forward and which to block?

They do it to ease the DX. It's arbitrary, they are using an emotion package actually.

Since this issue is still open I don't think this is expected behavior. Sounds like they do forward everything.

[oliviertassinari]

@eps1lon Should we close the pull request?

[eps1lon]

@eps1lon Should we close the pull request?

I would keep it as a regression test. I'd have to dig more into styled-components and style function but in the current state I wouldn't recommend using our style functions with styled-components because they pollute the DOM.

[oliviertassinari]

@eps1lon The problem impacts styled-system too https://codesandbox.io/s/kxwwqkrkmv. I'm not aware of any alternative than to write a custom filter logic like we do in Material-UI/Box.

[eps1lon]

Well then even better we put a test for this behavior in place. Sounds like this was deliberately implemented but not actually tested.