[Slide] The Slide send direction to children

[marcelocarmona]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I'm not sure if this is a bug or an expected behavior, but Slide sends the prop direction to the children

Current Behavior 😯

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/4zlov9w479

1. Go to the link
2. Open the console

Your Environment 🌎

Tech	Version
Material-UI	v3.6.2
React	v16.6.3

[joshwooding]

@oliviertassinari This isn’t a slider problem, it’s the Transition component Slide

[oliviertassinari]

@joshwooding Oh by bad, thank you for raising it.
@marcelocarmona It's an issue with our property forwarding logic. react-transition-group forwards all the properties to the child:

return React.cloneElement(child, childProps)

https://github.com/reactjs/react-transition-group/blob/977c9ce44a8b3bc2a04a25f6288b206a2a5812c3/src/Transition.js#L368

I think that it can be fixed like this:

  render() {
    const {
      children,
+     direction,
      onEnter,
      onEntering,
      onExit,
      onExited,
      style: styleProp,
      theme,
      ...other
    } = this.props;

    let style = {};

    // We use this state to handle the server-side rendering.
    // We don't know the width of the children ahead of time.
    // We need to render it.
    if (!this.props.in && !this.mounted) {
      style.visibility = 'hidden';
    }

It was never spotted before because this doesn't raise any warning:

import React from "react";
import ReactDOM from "react-dom";
import { Slide } from "@material-ui/core";

const Foo = (props) => {
  return <div {...props} />
}

function App() {
  return (
    <Slide direction="up" in>
      <Foo />
    </Slide>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Damn, this is a Murphy's law outcome!

Do you want to work on it? :)