[Button] Add extended FAB variant (mui#11941)

* [POC] Remove theme.spacing.unit
acroyear · Jul 14, 2018 · 9b20bf7 · 9b20bf7
1 parent a459f1a
commit 9b20bf7
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 113 deletions.
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtons.js b/docs/src/pages/demos/buttons/FloatingActionButtons.js
@@ -5,11 +5,15 @@ 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: {
+    marginRight: theme.spacing.unit,
+  },
 });
 
 function FloatingActionButtons(props) {
@@ -22,6 +26,10 @@ function FloatingActionButtons(props) {
       <Button variant="fab" color="secondary" aria-label="edit" className={classes.button}>
         <Icon>edit_icon</Icon>
       </Button>
+      <Button variant="extendedFab" aria-label="delete" className={classes.button}>
+        <NavigationIcon className={classes.extendedIcon} />
+        Extended
+      </Button>
       <Button variant="fab" disabled aria-label="delete" className={classes.button}>
         <DeleteIcon />
       </Button>

diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
@@ -13,12 +13,13 @@ 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' | 'extendedFab';
 }
 
 export type ButtonClassKey =
   | 'root'
   | 'label'
+  | 'text'
   | 'textPrimary'
   | 'textSecondary'
   | 'flat'

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -13,9 +13,9 @@ export const styles = theme => ({
     ...theme.typography.button,
     lineHeight: '1.4em', // Improve readability for multiline button.
     boxSizing: 'border-box',
-    minWidth: theme.spacing.unit * 11,
+    minWidth: 88,
     minHeight: 36,
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: '8px 16px',
     borderRadius: 4,
     color: theme.palette.text.primary,
     transition: theme.transitions.create(['background-color', 'box-shadow'], {
@@ -37,11 +37,11 @@ export const styles = theme => ({
     },
   },
   label: {
-    width: '100%',
     display: 'inherit',
     alignItems: 'inherit',
     justifyContent: 'inherit',
   },
+  text: {},
   textPrimary: {
     color: theme.palette.primary.main,
     '&:hover': {
@@ -62,17 +62,14 @@ export const styles = theme => ({
       },
     },
   },
-  flat: {},
-  flatPrimary: {},
-  flatSecondary: {},
+  flat: {}, // legacy
+  flatPrimary: {}, // legacy
+  flatSecondary: {}, // legacy
   outlined: {
     border: `1px solid ${
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
     }`,
   },
-  colorInherit: {
-    color: 'inherit',
-  },
   contained: {
     color: theme.palette.getContrastText(theme.palette.grey[300]),
     backgroundColor: theme.palette.grey[300],
@@ -121,36 +118,45 @@ export const styles = theme => ({
       },
     },
   },
-  raised: {},
-  raisedPrimary: {},
-  raisedSecondary: {},
-  focusVisible: {},
-  disabled: {},
+  raised: {}, // legacy
+  raisedPrimary: {}, // legacy
+  raisedSecondary: {}, // legacy
   fab: {
     borderRadius: '50%',
     padding: 0,
     minWidth: 0,
     width: 56,
-    fontSize: 24,
     height: 56,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12],
     },
   },
+  extendedFab: {
+    borderRadius: 24,
+    padding: '0 16px',
+    width: 'initial',
+    minWidth: 48,
+    height: 48,
+  },
+  focusVisible: {},
+  disabled: {},
+  colorInherit: {
+    color: 'inherit',
+  },
   mini: {
     width: 40,
     height: 40,
   },
   sizeSmall: {
-    padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
-    minWidth: theme.spacing.unit * 8,
+    padding: '7px 8px',
+    minWidth: 64,
     minHeight: 32,
     fontSize: theme.typography.pxToRem(13),
   },
   sizeLarge: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
-    minWidth: theme.spacing.unit * 14,
+    padding: '8px 24px',
+    minWidth: 112,
     minHeight: 40,
     fontSize: theme.typography.pxToRem(15),
   },
@@ -175,31 +181,32 @@ function Button(props) {
     ...other
   } = props;
 
-  const fab = variant === 'fab';
+  const fab = variant === 'fab' || variant === 'extendedFab';
   const contained = variant === 'contained' || variant === 'raised';
-  const text = !contained && !fab;
+  const text = variant === 'text' || variant === 'flat' || variant === 'outlined';
   const className = classNames(
     classes.root,
     {
-      [classes.contained]: contained || fab,
       [classes.fab]: fab,
       [classes.mini]: fab && mini,
-      [classes.colorInherit]: color === 'inherit',
+      [classes.extendedFab]: variant === 'extendedFab',
+      [classes.text]: text,
       [classes.textPrimary]: text && color === 'primary',
       [classes.textSecondary]: text && color === 'secondary',
-      [classes.flat]: text,
-      [classes.flatPrimary]: text && color === 'primary',
-      [classes.flatSecondary]: text && color === 'secondary',
-      [classes.containedPrimary]: !text && color === 'primary',
-      [classes.containedSecondary]: !text && color === 'secondary',
+      [classes.flat]: variant === 'text' || variant === 'flat',
+      [classes.flatPrimary]: (variant === 'text' || variant === 'flat') && color === 'primary',
+      [classes.flatSecondary]: (variant === 'text' || variant === 'flat') && color === 'secondary',
+      [classes.contained]: contained || fab,
+      [classes.containedPrimary]: (contained || fab) && color === 'primary',
+      [classes.containedSecondary]: (contained || fab) && color === 'secondary',
       [classes.raised]: contained || fab,
       [classes.raisedPrimary]: (contained || fab) && color === 'primary',
       [classes.raisedSecondary]: (contained || fab) && color === 'secondary',
-      [classes.text]: variant === 'text',
       [classes.outlined]: variant === 'outlined',
       [classes[`size${capitalize(size)}`]]: size !== 'medium',
       [classes.disabled]: disabled,
       [classes.fullWidth]: fullWidth,
+      [classes.colorInherit]: color === 'inherit',
     },
     classNameProp,
   );
@@ -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',
+    'extendedFab',
+  ]),
 };
 
 Button.defaultProps = {