[Fab] Extract from Button as new component

[mbrookes]

• I have followed (at least) the PR section of the contributing guide.

The floating action button doesn't share many styles with the default button component.
We are extracting the variant into its own component. This way, we better isolate the concerns.
It's making the Button implementation more lightweight, a win for people overriding our styles.

Upgrade path

-import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';

-<Button variant="fab" color="primary">
+<Fab color="primary">
  <AddIcon />
-</Button>
+</Fab>

[mbrookes]

@eps1lon Is there a way to prevent the warning from causing these test to fail?

[joshwooding]

I know it's probably not the perfect fix but if you use consoleErrorMock you can intercept the warning which will prevent the warning and even write tests for them :)

[mbrookes]

Ah, right, @eps1lon had done that for the other legacy variant test. Thanks!

[eps1lon]

@mbrookes Just in case you're wondering about codecov failure: Codecov will do that if HEAD points to a merge commit. An empty commit should do the trick.

[mbrookes]

@eps1lon Thanks, good to know. I usually fix merge conflicts locally, but as it was a quick one, thought I'd use github. No time saved after all!

[oliviertassinari]

@mbrookes I have done some minor changes, great work! This change makes me happy 💯. I can't wait v4 to remove all the deprecated code.

[wyqydsyq]

I am currently using @material-ui/core @ 3.6.0, I get the following warning about the fab variant being deprecated:

Warning: Failed prop type: The `fab` variant will be removed in the next major release. The `<Fab>` component is equivalent and should be used instead.

But then trying to follow those instructions, TSC yells at me because there are no TS definitions for Fab:

It seems the index re-exporter has been updated to include Fab, but the TypeScript definitions need to be rebuilt and published to account for this change. Unsure if this is big enough to warrant it's own issue (I imagine it would be done automatically as part of a future release anyway) so I've just commented here.

[oliviertassinari]

@wyqydsyq Sorry about that. We have forgotten the TypeScript defintions in this pull request! It's important, we will take care of it. If you have some time, feel free to give it a go.

[mbrookes]

We have forgotten the TypeScript defintions in this pull request!

We haven't:

https://github.com/mui-org/material-ui/pull/13573/files#diff-6656a4772d50c2237902506187b79972

Fab just need to be added to packages/material-ui/src/index.d.ts (No idea why TS insists on its own index file, but there you go...)

[oliviertassinari]

@wyqydsyq Do you want to add the missing import in the index.d.ts and overrides.d.ts?

[wyqydsyq]

I would have submitted a PR but I have no idea about how TS is being used in this project, are these definitions being maintained by hand or generated by tsc?

[oliviertassinari]

It's done by hand.