[Button] Add extended FAB variant

docs/src/pages/demos/buttons/FloatingActionButtons.js

@@ -5,11 +5,19 @@ import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
 import Icon from '@material-ui/core/Icon';
 import DeleteIcon from '@material-ui/icons/Delete';
+import NavigationIcon from '@material-ui/icons/Navigation';
 
 const styles = theme => ({
   button: {
     margin: theme.spacing.unit,
   },
+  extendedIcon: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+  },
+  extendedLabel: {
+    marginRight: 12,
+  },
 });
 
 function FloatingActionButtons(props) {
@@ -22,6 +30,10 @@ function FloatingActionButtons(props) {
       <Button variant="fab" color="secondary" aria-label="edit" className={classes.button}>
         <Icon>edit_icon</Icon>
       </Button>
+      <Button variant="extended-fab" aria-label="delete" className={classes.button}>
+        <NavigationIcon className={classes.extendedIcon} />
+        <span className={classes.extendedLabel}>Extended</span>
+      </Button>
       <Button variant="fab" disabled aria-label="delete" className={classes.button}>
         <DeleteIcon />
       </Button>

packages/material-ui/src/Button/Button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassK
   mini?: boolean;
   size?: 'small' | 'medium' | 'large';
   type?: string;
-  variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'raised' | 'fab';
+  variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'raised' | 'fab' | 'extended-fab';
 }
 
 export type ButtonClassKey =

packages/material-ui/src/Button/Button.js

@@ -37,7 +37,6 @@ export const styles = theme => ({
     },
   },
   label: {
-    width: '100%',
     display: 'inherit',
     alignItems: 'inherit',
     justifyContent: 'inherit',
@@ -131,13 +130,19 @@ export const styles = theme => ({
     padding: 0,
     minWidth: 0,
     width: 56,
-    fontSize: 24,
     height: 56,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12],
     },
   },
+  extended: {
+    borderRadius: 24,
+    padding: 8,
+    width: 'initial',
+    minWidth: 48,
+    height: 48,
+  },
   mini: {
     width: 40,
     height: 40,
@@ -175,14 +180,16 @@ function Button(props) {
     ...other
   } = props;
 
-  const fab = variant === 'fab';
+  const extended = variant === 'extended-fab';
+  const fab = variant === 'fab' || extended;
   const contained = variant === 'contained' || variant === 'raised';
   const text = !contained && !fab;
   const className = classNames(
     classes.root,
     {
       [classes.contained]: contained || fab,
       [classes.fab]: fab,
+      [classes.extended]: extended,
       [classes.mini]: fab && mini,
       [classes.colorInherit]: color === 'inherit',
       [classes.textPrimary]: text && color === 'primary',
@@ -282,7 +289,15 @@ Button.propTypes = {
   /**
    * The type of button.
    */
-  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab']),
+  variant: PropTypes.oneOf([
+    'text',
+    'flat',
+    'outlined',
+    'contained',
+    'raised',
+    'fab',
+    'extended-fab',
+  ]),
 };
 
 Button.defaultProps = {

packages/material-ui/src/Button/Button.test.js

@@ -381,6 +381,34 @@ describe('<Button />', () => {
       'should have the contained class',
     );
     assert.strictEqual(wrapper.hasClass(classes.fab), true, 'should have the fab class');
+    assert.strictEqual(
+      wrapper.hasClass(classes.extended),
+      false,
+      'should not have the extended class',
+    );
+    assert.strictEqual(wrapper.hasClass(classes.flat), false, 'should not have the flat class');
+    assert.strictEqual(
+      wrapper.hasClass(classes.textPrimary),
+      false,
+      'should not have the textPrimary class',
+    );
+    assert.strictEqual(
+      wrapper.hasClass(classes.textSecondary),
+      false,
+      'should not have the textSecondary class',
+    );
+  });
+
+  it('should render an extended floating action button', () => {
+    const wrapper = shallow(<Button variant="extended-fab">Hello World</Button>);
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
+    assert.strictEqual(
+      wrapper.hasClass(classes.contained),
+      true,
+      'should have the contained class',
+    );
+    assert.strictEqual(wrapper.hasClass(classes.fab), true, 'should have the fab class');
+    assert.strictEqual(wrapper.hasClass(classes.extended), true, 'should have the extended class');
     assert.strictEqual(wrapper.hasClass(classes.flat), false, 'should not have the flat class');
     assert.strictEqual(
       wrapper.hasClass(classes.textPrimary),

packages/material-ui/src/styles/MuiThemeProvider.test.js

@@ -86,7 +86,7 @@ describe('<MuiThemeProvider />', () => {
       assert.notStrictEqual(markup.match('Hello World'), null);
       assert.strictEqual(sheetsRegistry.registry.length, 3);
       assert.strictEqual(sheetsRegistry.toString().length > 4000, true);
-      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiTouchRipple-root-26');
+      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiTouchRipple-root-27');
       assert.deepEqual(
         sheetsRegistry.registry[1].classes,
         {

pages/api/button.md

@@ -23,7 +23,7 @@ filename: /packages/material-ui/src/Button/Button.js
 | <span class="prop-name">href</span> | <span class="prop-type">string |   | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
 | <span class="prop-name">mini</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. |
 | <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'&nbsp;&#124;<br>&nbsp;'large'<br> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
-| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text', 'flat', 'outlined', 'contained', 'raised', 'fab'<br> | <span class="prop-default">'text'</span> | The type of button. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extended-fab'<br> | <span class="prop-default">'text'</span> | The type of button. |
 
 Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).
 
@@ -49,6 +49,7 @@ This property accepts the following keys:
 - `focusVisible`
 - `disabled`
 - `fab`
+- `extended`
 - `mini`
 - `sizeSmall`
 - `sizeLarge`