Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Button/Button.d.ts

@@ -2,20 +2,18 @@ import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
 
-export interface ButtonProps extends StandardProps<
-  ButtonBaseProps,
-  ButtonClassKey
-> {
-  color?: PropTypes.Color | 'contrast';
-  component?: React.ReactType;
-  dense?: boolean;
+export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
+  color?: PropTypes.Color;
+  component?: React.ReactType<ButtonProps>;
   disabled?: boolean;
   disableFocusRipple?: boolean;
   disableRipple?: boolean;
-  fab?: boolean;
+  fullWidth?: boolean;
   href?: string;
-  raised?: boolean;
+  mini?: boolean;
+  size?: 'small' | 'medium' | 'large';
   type?: string;
+  variant?: 'flat' | 'raised' | 'fab';
 }
 
 export type ButtonClassKey =
@@ -23,17 +21,15 @@ export type ButtonClassKey =
   | 'dense'
   | 'label'
   | 'flatPrimary'
-  | 'flatAccent'
-  | 'flatContrast'
+  | 'flatSecondary'
   | 'colorInherit'
   | 'raised'
   | 'keyboardFocused'
   | 'raisedPrimary'
-  | 'raisedAccent'
-  | 'raisedContrast'
+  | 'raisedSecondary'
   | 'fab'
-  ;
+  | 'fullWidth';
 
 declare const Button: React.ComponentType<ButtonProps>;
 
-export default Button
+export default Button;

goTorrentWebUI/node_modules/material-ui/Button/Button.js

@@ -17,13 +17,14 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _ref;
-// @inheritedComponent ButtonBase
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -38,18 +39,20 @@ var _ButtonBase = require('../ButtonBase');
 
 var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
 
+var _helpers = require('../utils/helpers');
+
+var _reactHelpers = require('../utils/reactHelpers');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
-
-var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
+// @inheritedComponent ButtonBase
 
 var styles = exports.styles = function styles(theme) {
   return {
     root: (0, _extends3.default)({}, theme.typography.button, {
       lineHeight: '1.4em', // Improve readability for multiline button.
       boxSizing: 'border-box',
-      minWidth: 88,
+      minWidth: theme.spacing.unit * 11,
       minHeight: 36,
       padding: theme.spacing.unit + 'px ' + theme.spacing.unit * 2 + 'px',
       borderRadius: 2,
@@ -69,12 +72,6 @@ var styles = exports.styles = function styles(theme) {
         }
       }
     }),
-    dense: {
-      padding: theme.spacing.unit - 1 + 'px ' + theme.spacing.unit + 'px',
-      minWidth: 64,
-      minHeight: 32,
-      fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
-    },
     label: {
       width: '100%',
       display: 'inherit',
@@ -82,29 +79,19 @@ var styles = exports.styles = function styles(theme) {
       justifyContent: 'inherit'
     },
     flatPrimary: {
-      color: theme.palette.primary[500],
+      color: theme.palette.primary.main,
       '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary[500], 0.12),
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       }
     },
-    flatAccent: {
-      color: theme.palette.secondary.A200,
+    flatSecondary: {
+      color: theme.palette.secondary.main,
       '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.A200, 0.12),
-        // Reset on mouse devices
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    flatContrast: {
-      color: theme.palette.getContrastText(theme.palette.primary[500]),
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.getContrastText(theme.palette.primary[500]), 0.12),
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.12),
         // Reset on mouse devices
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -126,7 +113,7 @@ var styles = exports.styles = function styles(theme) {
       },
       '&$disabled': {
         boxShadow: theme.shadows[0],
-        backgroundColor: theme.palette.text.divider
+        backgroundColor: theme.palette.action.disabledBackground
       },
       '&:hover': {
         backgroundColor: theme.palette.grey.A100,
@@ -135,40 +122,33 @@ var styles = exports.styles = function styles(theme) {
           backgroundColor: theme.palette.grey[300]
         },
         '&$disabled': {
-          backgroundColor: theme.palette.text.divider,
-          // Reset on mouse devices
-          '@media (hover: none)': {
-            backgroundColor: theme.palette.grey[300]
-          }
+          backgroundColor: theme.palette.action.disabledBackground
         }
       }
     },
     keyboardFocused: {},
     raisedPrimary: {
-      color: theme.palette.getContrastText(theme.palette.primary[500]),
-      backgroundColor: theme.palette.primary[500],
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
       '&:hover': {
-        backgroundColor: theme.palette.primary[700],
+        backgroundColor: theme.palette.primary.dark,
         // Reset on mouse devices
         '@media (hover: none)': {
-          backgroundColor: theme.palette.primary[500]
+          backgroundColor: theme.palette.primary.main
         }
       }
     },
-    raisedAccent: {
-      color: theme.palette.getContrastText(theme.palette.secondary.A200),
-      backgroundColor: theme.palette.secondary.A200,
+    raisedSecondary: {
+      color: theme.palette.secondary.contrastText,
+      backgroundColor: theme.palette.secondary.main,
       '&:hover': {
-        backgroundColor: theme.palette.secondary.A400,
+        backgroundColor: theme.palette.secondary.dark,
         // Reset on mouse devices
         '@media (hover: none)': {
-          backgroundColor: theme.palette.secondary.A200
+          backgroundColor: theme.palette.secondary.main
         }
       }
     },
-    raisedContrast: {
-      color: theme.palette.getContrastText(theme.palette.primary[500])
-    },
     disabled: {
       color: theme.palette.action.disabled
     },
@@ -177,106 +157,66 @@ var styles = exports.styles = function styles(theme) {
       padding: 0,
       minWidth: 0,
       width: 56,
+      fontSize: 24,
       height: 56,
       boxShadow: theme.shadows[6],
       '&:active': {
         boxShadow: theme.shadows[12]
       }
+    },
+    mini: {
+      width: 40,
+      height: 40
+    },
+    sizeSmall: {
+      padding: theme.spacing.unit - 1 + 'px ' + theme.spacing.unit + 'px',
+      minWidth: theme.spacing.unit * 8,
+      minHeight: 32,
+      fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
+    },
+    sizeLarge: {
+      padding: theme.spacing.unit + 'px ' + theme.spacing.unit * 3 + 'px',
+      minWidth: theme.spacing.unit * 14,
+      minHeight: 40,
+      fontSize: theme.typography.pxToRem(theme.typography.fontSize + 1)
+    },
+    fullWidth: {
+      width: '100%'
     }
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Color = require('prop-types').oneOf(['default', 'inherit', 'primary', 'accent', 'contrast']);
-
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * The content of the button.
-   */
-  children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * The color of the component. It's using the theme palette when that makes sense.
-   */
-  color: require('prop-types').oneOf(['default', 'inherit', 'primary', 'accent', 'contrast']),
-
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   * The default value is a `button`.
-   */
-  component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
-
-  /**
-   * Uses a smaller minWidth, ideal for things like card actions.
-   */
-  dense: require('prop-types').bool,
-
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled: require('prop-types').bool,
-
-  /**
-   * If `true`, the  keyboard focus ripple will be disabled.
-   * `disableRipple` must also be true.
-   */
-  disableFocusRipple: require('prop-types').bool,
-
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple: require('prop-types').bool,
-
-  /**
-   * If `true`, will use floating action button styling.
-   */
-  fab: require('prop-types').bool,
-
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: require('prop-types').string,
-
-  /**
-   * If `true`, the button will use raised styling.
-   */
-  raised: require('prop-types').bool,
-
-  /**
-   * @ignore
-   */
-  type: require('prop-types').string
-};
-
-
 function Button(props) {
   var _classNames;
 
-  var children = props.children,
+  var childrenProp = props.children,
       classes = props.classes,
       classNameProp = props.className,
       color = props.color,
-      dense = props.dense,
       disabled = props.disabled,
       disableFocusRipple = props.disableFocusRipple,
-      fab = props.fab,
-      raised = props.raised,
-      other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'color', 'dense', 'disabled', 'disableFocusRipple', 'fab', 'raised']);
+      fullWidth = props.fullWidth,
+      mini = props.mini,
+      size = props.size,
+      variant = props.variant,
+      other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'color', 'disabled', 'disableFocusRipple', 'fullWidth', 'mini', 'size', 'variant']);
 
 
+  var fab = variant === 'fab';
+  var raised = variant === 'raised';
   var flat = !raised && !fab;
-  var className = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.root, true), (0, _defineProperty3.default)(_classNames, classes.raised, raised || fab), (0, _defineProperty3.default)(_classNames, classes.fab, fab), (0, _defineProperty3.default)(_classNames, classes.colorInherit, color === 'inherit'), (0, _defineProperty3.default)(_classNames, classes.flatPrimary, flat && color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.flatAccent, flat && color === 'accent'), (0, _defineProperty3.default)(_classNames, classes.flatContrast, flat && color === 'contrast'), (0, _defineProperty3.default)(_classNames, classes.raisedPrimary, !flat && color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.raisedAccent, !flat && color === 'accent'), (0, _defineProperty3.default)(_classNames, classes.raisedContrast, !flat && color === 'contrast'), (0, _defineProperty3.default)(_classNames, classes.dense, dense), (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), _classNames), classNameProp);
+  var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.raised, raised || fab), (0, _defineProperty3.default)(_classNames, classes.fab, fab), (0, _defineProperty3.default)(_classNames, classes.mini, fab && mini), (0, _defineProperty3.default)(_classNames, classes.colorInherit, color === 'inherit'), (0, _defineProperty3.default)(_classNames, classes.flatPrimary, flat && color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.flatSecondary, flat && color === 'secondary'), (0, _defineProperty3.default)(_classNames, classes.raisedPrimary, !flat && color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.raisedSecondary, !flat && color === 'secondary'), (0, _defineProperty3.default)(_classNames, classes['size' + (0, _helpers.capitalize)(size)], size !== 'medium'), (0, _defineProperty3.default)(_classNames, classes.disabled, disabled), (0, _defineProperty3.default)(_classNames, classes.fullWidth, fullWidth), _classNames), classNameProp);
+
+  var children = childrenProp;
+
+  if (fab) {
+    children = _react2.default.Children.map(children, function (child) {
+      if ((0, _reactHelpers.isMuiElement)(child, ['Icon', 'SvgIcon'])) {
+        return _react2.default.cloneElement(child, { fontSize: true });
+      }
+      return child;
+    });
+  }
 
   return _react2.default.createElement(
     _ButtonBase2.default,
@@ -294,27 +234,80 @@ function Button(props) {
   );
 }
 
-Button.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
-  classes: require('prop-types').object.isRequired,
-  color: require('prop-types').oneOf(['default', 'inherit', 'primary', 'accent', 'contrast']).isRequired,
-  dense: require('prop-types').bool.isRequired,
-  disabled: require('prop-types').bool.isRequired,
-  fab: require('prop-types').bool.isRequired,
-  disableFocusRipple: require('prop-types').bool.isRequired,
-  raised: require('prop-types').bool.isRequired,
-  disableRipple: require('prop-types').bool.isRequired,
-  type: require('prop-types').string.isRequired,
-  children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired
-}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOf(['default', 'inherit', 'primary', 'accent', 'contrast'])), (0, _defineProperty3.default)(_ref, 'component', typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)), (0, _defineProperty3.default)(_ref, 'dense', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'disabled', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'disableFocusRipple', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'disableRipple', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'fab', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'href', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'raised', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'type', require('prop-types').string), _ref) : {};
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the button.
+   */
+  children: _propTypes2.default.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes2.default.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * If `true`, the button will be disabled.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * If `true`, the  keyboard focus ripple will be disabled.
+   * `disableRipple` must also be true.
+   */
+  disableFocusRipple: _propTypes2.default.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: _propTypes2.default.bool,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   */
+  fullWidth: _propTypes2.default.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: _propTypes2.default.string,
+  /**
+   * If `true`, and `variant` is `'fab'`, will use mini floating action button styling.
+   */
+  mini: _propTypes2.default.bool,
+  /**
+   * The size of the button.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
+  /**
+   * @ignore
+   */
+  type: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  variant: _propTypes2.default.oneOf(['flat', 'raised', 'fab'])
+} : {};
+
 Button.defaultProps = {
   color: 'default',
-  dense: false,
   disabled: false,
-  fab: false,
   disableFocusRipple: false,
-  raised: false,
   disableRipple: false,
-  type: 'button'
+  fullWidth: false,
+  mini: false,
+  size: 'medium',
+  type: 'button',
+  variant: 'flat'
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'MuiButton' })(Button);

goTorrentWebUI/node_modules/material-ui/Button/Button.js.flow

@@ -1,19 +1,20 @@
-// @flow
 // @inheritedComponent ButtonBase
 
 import React from 'react';
-import type { ElementType, Node } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
+import { capitalize } from '../utils/helpers';
+import { isMuiElement } from '../utils/reactHelpers';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     ...theme.typography.button,
     lineHeight: '1.4em', // Improve readability for multiline button.
     boxSizing: 'border-box',
-    minWidth: 88,
+    minWidth: theme.spacing.unit * 11,
     minHeight: 36,
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
     borderRadius: 2,
@@ -33,12 +34,6 @@ export const styles = (theme: Object) => ({
       },
     },
   },
-  dense: {
-    padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
-    minWidth: 64,
-    minHeight: 32,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
-  },
   label: {
     width: '100%',
     display: 'inherit',
@@ -46,29 +41,19 @@ export const styles = (theme: Object) => ({
     justifyContent: 'inherit',
   },
   flatPrimary: {
-    color: theme.palette.primary[500],
+    color: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.primary[500], 0.12),
+      backgroundColor: fade(theme.palette.primary.main, 0.12),
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
   },
-  flatAccent: {
-    color: theme.palette.secondary.A200,
+  flatSecondary: {
+    color: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.A200, 0.12),
-      // Reset on mouse devices
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-  flatContrast: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.getContrastText(theme.palette.primary[500]), 0.12),
+      backgroundColor: fade(theme.palette.secondary.main, 0.12),
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -90,7 +75,7 @@ export const styles = (theme: Object) => ({
     },
     '&$disabled': {
       boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.disabledBackground,
     },
     '&:hover': {
       backgroundColor: theme.palette.grey.A100,
@@ -99,40 +84,33 @@ export const styles = (theme: Object) => ({
         backgroundColor: theme.palette.grey[300],
       },
       '&$disabled': {
-        backgroundColor: theme.palette.text.divider,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-          backgroundColor: theme.palette.grey[300],
-        },
+        backgroundColor: theme.palette.action.disabledBackground,
       },
     },
   },
   keyboardFocused: {},
   raisedPrimary: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-    backgroundColor: theme.palette.primary[500],
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: theme.palette.primary[700],
+      backgroundColor: theme.palette.primary.dark,
       // Reset on mouse devices
       '@media (hover: none)': {
-        backgroundColor: theme.palette.primary[500],
+        backgroundColor: theme.palette.primary.main,
       },
     },
   },
-  raisedAccent: {
-    color: theme.palette.getContrastText(theme.palette.secondary.A200),
-    backgroundColor: theme.palette.secondary.A200,
+  raisedSecondary: {
+    color: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: theme.palette.secondary.A400,
+      backgroundColor: theme.palette.secondary.dark,
       // Reset on mouse devices
       '@media (hover: none)': {
-        backgroundColor: theme.palette.secondary.A200,
+        backgroundColor: theme.palette.secondary.main,
       },
     },
   },
-  raisedContrast: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-  },
   disabled: {
     color: theme.palette.action.disabled,
   },
@@ -141,120 +119,81 @@ export const styles = (theme: Object) => ({
     padding: 0,
     minWidth: 0,
     width: 56,
+    fontSize: 24,
     height: 56,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12],
     },
   },
+  mini: {
+    width: 40,
+    height: 40,
+  },
+  sizeSmall: {
+    padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
+    minWidth: theme.spacing.unit * 8,
+    minHeight: 32,
+    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
+  },
+  sizeLarge: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+    minWidth: theme.spacing.unit * 14,
+    minHeight: 40,
+    fontSize: theme.typography.pxToRem(theme.typography.fontSize + 1),
+  },
+  fullWidth: {
+    width: '100%',
+  },
 });
 
-export type Color = 'default' | 'inherit' | 'primary' | 'accent' | 'contrast';
-
-type ProvidedProps = {
-  classes: Object,
-  color: Color,
-  dense: boolean,
-  disabled: boolean,
-  fab: boolean,
-  disableFocusRipple: boolean,
-  raised: boolean,
-  disableRipple: boolean,
-  type: string,
-};
-
-export type Props = {
-  /**
-   * The content of the button.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The color of the component. It's using the theme palette when that makes sense.
-   */
-  color?: Color,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   * The default value is a `button`.
-   */
-  component?: ElementType,
-  /**
-   * Uses a smaller minWidth, ideal for things like card actions.
-   */
-  dense?: boolean,
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the  keyboard focus ripple will be disabled.
-   * `disableRipple` must also be true.
-   */
-  disableFocusRipple?: boolean,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple?: boolean,
-  /**
-   * If `true`, will use floating action button styling.
-   */
-  fab?: boolean,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href?: string,
-  /**
-   * If `true`, the button will use raised styling.
-   */
-  raised?: boolean,
-  /**
-   * @ignore
-   */
-  type?: string,
-};
-
-function Button(props: ProvidedProps & Props) {
+function Button(props) {
   const {
-    children,
+    children: childrenProp,
     classes,
     className: classNameProp,
     color,
-    dense,
     disabled,
     disableFocusRipple,
-    fab,
-    raised,
+    fullWidth,
+    mini,
+    size,
+    variant,
     ...other
   } = props;
 
+  const fab = variant === 'fab';
+  const raised = variant === 'raised';
   const flat = !raised && !fab;
   const className = classNames(
+    classes.root,
     {
-      [classes.root]: true,
       [classes.raised]: raised || fab,
       [classes.fab]: fab,
+      [classes.mini]: fab && mini,
       [classes.colorInherit]: color === 'inherit',
       [classes.flatPrimary]: flat && color === 'primary',
-      [classes.flatAccent]: flat && color === 'accent',
-      [classes.flatContrast]: flat && color === 'contrast',
+      [classes.flatSecondary]: flat && color === 'secondary',
       [classes.raisedPrimary]: !flat && color === 'primary',
-      [classes.raisedAccent]: !flat && color === 'accent',
-      [classes.raisedContrast]: !flat && color === 'contrast',
-      [classes.dense]: dense,
+      [classes.raisedSecondary]: !flat && color === 'secondary',
+      [classes[`size${capitalize(size)}`]]: size !== 'medium',
       [classes.disabled]: disabled,
+      [classes.fullWidth]: fullWidth,
     },
     classNameProp,
   );
 
+  let children = childrenProp;
+
+  if (fab) {
+    children = React.Children.map(children, child => {
+      if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
+        return React.cloneElement(child, { fontSize: true });
+      }
+      return child;
+    });
+  }
+
   return (
     <ButtonBase
       className={className}
@@ -268,15 +207,80 @@ function Button(props: ProvidedProps & Props) {
   );
 }
 
+Button.propTypes = {
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the button will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple will be disabled.
+   * `disableRipple` must also be true.
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * If `true`, and `variant` is `'fab'`, will use mini floating action button styling.
+   */
+  mini: PropTypes.bool,
+  /**
+   * The size of the button.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  variant: PropTypes.oneOf(['flat', 'raised', 'fab']),
+};
+
 Button.defaultProps = {
   color: 'default',
-  dense: false,
   disabled: false,
-  fab: false,
   disableFocusRipple: false,
-  raised: false,
   disableRipple: false,
+  fullWidth: false,
+  mini: false,
+  size: 'medium',
   type: 'button',
+  variant: 'flat',
 };
 
 export default withStyles(styles, { name: 'MuiButton' })(Button);

goTorrentWebUI/node_modules/material-ui/Button/index.js.flow

@@ -1,3 +1 @@
-// @flow
-
 export { default } from './Button';