Size property doesn't work properly on extended FABs with text

[eanesparrago]

Hello. It seems like the size properties small and medium doesn't work on extended FABs with text.

Expected Behavior 🤔

Extended FAB would resize accordingly.

Current Behavior 😯

It does not.

Examples 🌈

<Fab className={classes.actionButton} variant="extended" onClick={this.props.createDialogToggle} > <AddCircleIcon className={classes.actionIcon} /> New Job Order </Fab>

<Fab className={classes.actionButton} variant="extended" size="medium" onClick={this.props.createDialogToggle} > <AddCircleIcon className={classes.actionIcon} /> New Job Order </Fab>

[oliviertassinari]

@LJEsp Thank you for raising the issue. It's definitely broken. We should be able to solve the issue with something like this:

Do you want to give it a shot :)?

--- a/docs/src/pages/demos/buttons/ButtonSizes.js
+++ b/docs/src/pages/demos/buttons/ButtonSizes.js
@@ -6,11 +6,15 @@ import Fab from '@material-ui/core/Fab';
 import IconButton from '@material-ui/core/IconButton';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
+import NavigationIcon from '@material-ui/icons/Navigation';

 const styles = theme => ({
   margin: {
     margin: theme.spacing.unit,
   },
+  extendedIcon: {
+    marginRight: theme.spacing.unit,
+  },
 });

 function ButtonSizes(props) {
@@ -61,6 +65,32 @@ function ButtonSizes(props) {
           <AddIcon />
         </Fab>
       </div>
+      <div>
+        <Fab
+          variant="extended"
+          size="small"
+          color="primary"
+          aria-label="Add"
+          className={classes.margin}
+        >
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+        <Fab
+          variant="extended"
+          size="medium"
+          color="primary"
+          aria-label="Add"
+          className={classes.margin}
+        >
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+        <Fab variant="extended" color="primary" aria-label="Add" className={classes.margin}>
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+      </div>
       <div>
         <IconButton aria-label="Delete" className={classes.margin}>
           <DeleteIcon fontSize="small" />
diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js
index 3c7eb4233..fbdc0aa76 100644
--- a/packages/material-ui/src/Fab/Fab.js
+++ b/packages/material-ui/src/Fab/Fab.js
@@ -84,8 +84,23 @@ export const styles = theme => ({
     borderRadius: 48 / 2,
     padding: '0 16px',
     width: 'auto',
+    minHeight: 'auto',
     minWidth: 48,
     height: 48,
+    '&$sizeSmall' : {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34,
+    },
+    '&$sizeMedium' : {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40,
+    },
   },
   /* Styles applied to the ButtonBase root element if the button is keyboard focused. */
   focusVisible: {},