[Tooltip] Fix the property forwarding priority

[oliviertassinari]

The change is summarised by this test case:

    it('should respect the properties priority', () => {
      const wrapper = shallow(
        <Tooltip className="foo" {...defaultProps}>
          <h1 className="bar">H1</h1>
        </Tooltip>,
      );
      const className = wrapper.find('h1').props().className;

      // Before : className === 'foo'
      // After : className === 'bar'
    });

[eps1lon]

We do the same thing for Button though. Sure that is a little bit different since Button has actual styles in root. I would still vote to have a consistent API and use className={classNames(classes.root, classNameProp)} to allow <EveryMuiComponent className="c1" classes={{ root: 'c2' }} /> which is perfectly valid for Button and will be equivalent to <ButtonBase className="c1 c2" /> but for SpeedDialAction this would only be <Tooltip className="c1" />.

So I would always "suffer" the increased API surface if this increases API consistency.

[oliviertassinari]

This change reverts a pull request I have merged too quickly without waiting for the visual regression tests. It was breaking the Speed Dial.
It's how I have discovered the Tooltip property priority issue.

For the SpeedDial, IMHO we should rename the button classes root. But I think that it's for another pull request. Here, I focus on the tooltip and going back to the previous state of affaire.

[oliviertassinari]

but for SpeedDialAction this would only be .

It should be c1 c2 with the current implementation. The className isn't applied on the Tooltip. #13634

[eps1lon]

Has nothing to do with this PR but this is why forwarding/merging props with cloneElement is always dangerous. At least by looking at it it might be obvious that foo will be ignored but you could also argue that this warrants a special merge strategy for the props (i.e. concatenating classes). If the child props are opaque then this will be less obvious e.g. the child is another component without passed props that then renders the h1 with a different class and you're then debugging why foo is not applied in the DOM.

[oliviertassinari]

I agree, let's merge the class names. I believe it's what we do by "default" in the other components.