[ButtonBase] Expose internal component (#7727)

docs/src/pages/component-api/ButtonBase/ButtonBase.md

@@ -0,0 +1,34 @@
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ButtonBase
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| centerRipple | boolean | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
+| children | Element |  | The content of the component. |
+| classes | Object | {} | Useful to extend the style applied to components. |
+| component | union:&nbsp;string<br>&nbsp;Function<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| disableRipple | boolean | false | If `true`, the ripple effect will be disabled. |
+| disabled | boolean |  | If `true`, the base button will be disabled. |
+| focusRipple | boolean | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
+| keyboardFocusedClassName | string |  | The CSS class applied while the component is keyboard focused. |
+| onKeyboardFocus | Function |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+
+Any other properties supplied will be spread to the root element.
+
+## CSS API
+
+You can overrides all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `disabled`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiButtonBase`.

docs/src/pages/component-demos/buttons/ButtonBases.js

@@ -0,0 +1,145 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import ButtonBase from 'material-ui/ButtonBase';
+import Typography from 'material-ui/Typography';
+import breakfastImage from 'docs/src/assets/images/grid-list/breakfast.jpg';
+import burgersImage from 'docs/src/assets/images/grid-list/burgers.jpg';
+import cameraImage from 'docs/src/assets/images/grid-list/camera.jpg';
+
+const styleSheet = createStyleSheet(theme => ({
+  root: {
+    marginTop: theme.spacing.unit * 4,
+    display: 'flex',
+    flexWrap: 'wrap',
+    minWidth: 300,
+    width: '100%',
+  },
+  image: {
+    position: 'relative',
+    height: 200,
+    [theme.breakpoints.down('sm')]: {
+      width: '100% !important', // Overrides inline-style
+      height: 100,
+    },
+    '&:hover': {
+      zIndex: 1,
+    },
+    '&:hover $imageBackdrop': {
+      opacity: 0.15,
+    },
+    '&:hover $imageMarked': {
+      opacity: 0,
+    },
+    '&:hover $imageTitle': {
+      border: '4px solid currentColor',
+    },
+  },
+  imageButton: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.palette.common.white,
+  },
+  imageSrc: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center 40%',
+  },
+  imageBackdrop: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    background: theme.palette.common.black,
+    opacity: 0.4,
+    transition: theme.transitions.create('opacity'),
+  },
+  imageTitle: {
+    position: 'relative',
+    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`,
+  },
+  imageMarked: {
+    height: 3,
+    width: 18,
+    background: theme.palette.common.white,
+    position: 'absolute',
+    bottom: -2,
+    left: 'calc(50% - 9px)',
+    transition: theme.transitions.create('opacity'),
+  },
+}));
+
+const images = [
+  {
+    url: breakfastImage,
+    title: 'Breakfast',
+    width: '40%',
+  },
+  {
+    url: burgersImage,
+    title: 'Burgers',
+    width: '30%',
+  },
+  {
+    url: cameraImage,
+    title: 'Camera',
+    width: '30%',
+  },
+];
+
+function ButtonBases(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      {images.map(image =>
+        <ButtonBase
+          focusRipple
+          key={image.title}
+          className={classes.image}
+          style={{
+            width: image.width,
+          }}
+        >
+          <div
+            className={classes.imageSrc}
+            style={{
+              backgroundImage: `url(${image.url})`,
+            }}
+          />
+          <div className={classes.imageBackdrop} />
+          <div className={classes.imageButton}>
+            <Typography
+              component="h3"
+              type="subheading"
+              color="inherit"
+              className={classes.imageTitle}
+            >
+              {image.title}
+              <div className={classes.imageMarked} />
+            </Typography>
+          </div>
+        </ButtonBase>,
+      )}
+    </div>
+  );
+}
+
+ButtonBases.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(ButtonBases);

docs/src/pages/component-demos/buttons/FlatButtons.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Button from 'material-ui/Button';
+import Link from 'react-router/lib/Link';
 
 const styleSheet = createStyleSheet(theme => ({
   button: {
@@ -31,6 +32,9 @@ function FlatButtons(props) {
       <Button href="#flat-buttons" className={classes.button}>
         Link
       </Button>
+      <Button disabled component={Link} to="/" className={classes.button}>
+        Link disabled
+      </Button>
       <Button dense className={classes.button}>
         Dense
       </Button>

docs/src/pages/component-demos/buttons/buttons.md

@@ -1,5 +1,5 @@
 ---
-components: Button, IconButton
+components: Button, IconButton, ButtonBase
 ---
 
 # Buttons
@@ -42,3 +42,10 @@ Icon buttons are commonly found in app bars and toolbars.
 Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
 
 {{demo='pages/component-demos/buttons/IconButtons.js'}}
+
+## Complex Buttons
+
+The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.
+You can take advantage of this lower level component to build custom interactions.
+
+{{demo='pages/component-demos/buttons/ButtonBases.js'}}

src/BottomNavigation/BottomNavigationButton.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import Icon from '../Icon';
 
 export const styleSheet = createStyleSheet('MuiBottomNavigationButton', theme => ({

src/Button/Button.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 
 export const styleSheet = createStyleSheet('MuiButton', theme => ({
   root: {

src/internal/ButtonBase.js → src/ButtonBase/ButtonBase.js

@@ -27,6 +27,7 @@ export const styleSheet = createStyleSheet('MuiButtonBase', theme => ({
     color: 'inherit',
   },
   disabled: {
+    pointerEvents: 'none', // Disable link interactions
     cursor: 'default',
   },
 }));
@@ -41,6 +42,10 @@ type DefaultProps = {
 };
 
 export type Props = {
+  /**
+   * If `true`, the ripples will be centered.
+   * They won't start at the cursor interaction position.
+   */
   centerRipple?: boolean,
   /**
    * The content of the component.
@@ -73,20 +78,68 @@ export type Props = {
    * `disableRipple` must also be `false`.
    */
   focusRipple?: boolean,
+  /**
+   * The CSS class applied while the component is keyboard focused.
+   */
   keyboardFocusedClassName?: string,
+  /**
+   * @ignore
+   */
   onBlur?: Function,
+  /**
+   * @ignore
+   */
   onClick?: Function,
+  /**
+   * @ignore
+   */
   onFocus?: Function,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   *
+   * @param {object} event The event source of the callback
+   */
   onKeyboardFocus?: Function,
+  /**
+   * @ignore
+   */
   onKeyDown?: Function,
+  /**
+   * @ignore
+   */
   onKeyUp?: Function,
+  /**
+   * @ignore
+   */
   onMouseDown?: Function,
+  /**
+   * @ignore
+   */
   onMouseLeave?: Function,
+  /**
+   * @ignore
+   */
   onMouseUp?: Function,
+  /**
+   * @ignore
+   */
   onTouchEnd?: Function,
+  /**
+   * @ignore
+   */
   onTouchStart?: Function,
+  /**
+   * @ignore
+   */
   role?: string,
+  /**
+   * @ignore
+   */
   tabIndex?: string,
+  /**
+   * @ignore
+   */
   type: string,
 };
 
@@ -96,9 +149,6 @@ type State = {
   keyboardFocused: boolean,
 };
 
-/**
- * @ignore - internal component.
- */
 class ButtonBase extends Component<DefaultProps, AllProps, State> {
   props: AllProps;
   static defaultProps: DefaultProps = {

src/ButtonBase/index.js

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

src/IconButton/IconButton.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import { capitalizeFirstLetter } from '../utils/helpers';
 import Icon from '../Icon';
 import { isMuiComponent } from '../utils/reactHelpers';

src/List/ListItem.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import { isMuiComponent } from '../utils/reactHelpers';
 
 export const styleSheet = createStyleSheet('MuiListItem', theme => ({

src/Table/TableSortLabel.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import ArrowDownwardIcon from '../svg-icons/arrow-downward';
 
 export const styleSheet = createStyleSheet('MuiTableSortLabel', theme => ({

src/Tabs/Tab.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import { capitalizeFirstLetter } from '../utils/helpers';
 import Icon from '../Icon';
 

src/Tabs/TabScrollButton.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import createStyleSheet from '../styles/createStyleSheet';
 import withStyles from '../styles/withStyles';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import KeyboardArrowLeft from '../svg-icons/keyboard-arrow-left';
 import KeyboardArrowRight from '../svg-icons/keyboard-arrow-right';
 

src/Tabs/TabScrollButton.spec.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { createShallow, createMount, getClasses } from '../test-utils';
 import TabScrollButton, { styleSheet } from './TabScrollButton';
-import ButtonBase from '../internal/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import KeyboardArrowLeft from '../svg-icons/keyboard-arrow-left';
 import KeyboardArrowRight from '../svg-icons/keyboard-arrow-right';