[Fab] Floating action buttion doesn't support colors

[mmacu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Fab component doesn't support any color other than primary or secondary. This is inconsistent with behaviour of other components like Button for example.

This is where the issue lies:

https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L113-L136

Instead of theme.palette.primary.main there should be theme.palette[ownerState.color].main etc. (some conditions around need to be changed as well here)

Expected behavior 🤔

color property of Fab should be consistent with that of other components (like Button and many other) and accept all defined colors.

Steps to reproduce 🕹

https://codesandbox.io/s/customcolor-material-demo-forked-l5fml?file=/demo.js

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[alisasanib]

I would like to work on this issue. I think it is a good idea to include other types for the color such as success, error, warning etc. for the Fab component, exactly like the Button component.

[danilo-leal]

It makes total sense to me! However, wouldn't this be a breaking change? 🤔

[alisasanib]

I don't think it would be a breaking change. To achieve this, we need to change some conditions to include other values for the color prop only in the Fab component. Changes will not be significant and they'll not affect other components