diff --git a/docs/src/components/AppContent.js b/docs/src/components/AppContent.js index 8d9737d98e699f..6334d3461430f2 100644 --- a/docs/src/components/AppContent.js +++ b/docs/src/components/AppContent.js @@ -6,21 +6,19 @@ import classNames from 'classnames'; import { withStyles, createStyleSheet } from 'material-ui/styles'; import MarkdownElement from 'docs/src/components/MarkdownElement'; -const styleSheet = createStyleSheet('AppContent', (theme) => { - return { - content: theme.mixins.gutters({ - paddingTop: 80, - flex: '1 1 100%', - maxWidth: '100%', - margin: '0 auto', - }), - [theme.breakpoints.up(948)]: { - content: { - maxWidth: 900, - }, +const styleSheet = createStyleSheet('AppContent', (theme) => ({ + content: theme.mixins.gutters({ + paddingTop: 80, + flex: '1 1 100%', + maxWidth: '100%', + margin: '0 auto', + }), + [theme.breakpoints.up(948)]: { + content: { + maxWidth: 900, }, - }; -}); + }, +})); function AppContent(props) { const { diff --git a/docs/src/components/AppDrawer.js b/docs/src/components/AppDrawer.js index 063249b81b3597..6352f52a49558d 100644 --- a/docs/src/components/AppDrawer.js +++ b/docs/src/components/AppDrawer.js @@ -11,28 +11,26 @@ import Divider from 'material-ui/Divider'; import AppDrawerNavItem from 'docs/src/components/AppDrawerNavItem'; import Link from 'docs/src/components/Link'; -const styleSheet = createStyleSheet('AppDrawer', (theme) => { - return { - paper: { - width: 250, - backgroundColor: theme.palette.background.paper, +const styleSheet = createStyleSheet('AppDrawer', (theme) => ({ + paper: { + width: 250, + backgroundColor: theme.palette.background.paper, + }, + title: { + color: theme.palette.text.secondary, + '&:hover': { + color: theme.palette.primary[500], }, - title: { - color: theme.palette.text.secondary, - '&:hover': { - color: theme.palette.primary[500], - }, - }, - toolbar: { - flexDirection: 'column', - alignItems: 'flex-start', - justifyContent: 'center', - }, - anchor: { - color: theme.palette.text.secondary, - }, - }; -}); + }, + toolbar: { + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'center', + }, + anchor: { + color: theme.palette.text.secondary, + }, +})); function renderNavItems(props, navRoot) { let navItems = null; @@ -120,8 +118,4 @@ AppDrawer.propTypes = { routes: PropTypes.array.isRequired, }; -AppDrawer.contextTypes = { - styleManager: PropTypes.object.isRequired, -}; - export default withStyles(styleSheet)(AppDrawer); diff --git a/docs/src/components/AppDrawerNavItem.js b/docs/src/components/AppDrawerNavItem.js index d31ccb7f0d9cd8..e386cd5aa95a7e 100644 --- a/docs/src/components/AppDrawerNavItem.js +++ b/docs/src/components/AppDrawerNavItem.js @@ -9,39 +9,37 @@ import { ListItem } from 'material-ui/List'; import Button from 'material-ui/Button'; import Collapse from 'material-ui/transitions/Collapse'; -const styleSheet = createStyleSheet('AppDrawerNavItem', (theme) => { - return { - button: theme.mixins.gutters({ - borderRadius: 0, - justifyContent: 'flex-start', - textTransform: 'none', - width: '100%', - '&:hover': { - textDecoration: 'none', - }, - }), - navItem: { - ...theme.typography.body2, - display: 'block', - paddingTop: 0, - paddingBottom: 0, +const styleSheet = createStyleSheet('AppDrawerNavItem', (theme) => ({ + button: theme.mixins.gutters({ + borderRadius: 0, + justifyContent: 'flex-start', + textTransform: 'none', + width: '100%', + '&:hover': { + textDecoration: 'none', }, - navLink: { - fontWeight: theme.typography.fontWeightRegular, - display: 'flex', - paddingTop: 0, - paddingBottom: 0, - }, - navLinkButton: { - color: theme.palette.text.secondary, - textIndent: 24, - fontSize: 13, - }, - activeButton: { - color: theme.palette.text.primary, - }, - }; -}); + }), + navItem: { + ...theme.typography.body2, + display: 'block', + paddingTop: 0, + paddingBottom: 0, + }, + navLink: { + fontWeight: theme.typography.fontWeightRegular, + display: 'flex', + paddingTop: 0, + paddingBottom: 0, + }, + navLinkButton: { + color: theme.palette.text.secondary, + textIndent: 24, + fontSize: 13, + }, + activeButton: { + color: theme.palette.text.primary, + }, +})); class AppDrawerNavItem extends Component { static defaultProps = { diff --git a/docs/src/components/AppFrame.js b/docs/src/components/AppFrame.js index 680a0eccac28ac..f6dc3479b57bec 100644 --- a/docs/src/components/AppFrame.js +++ b/docs/src/components/AppFrame.js @@ -28,65 +28,63 @@ function getTitle(routes) { return null; } -const styleSheet = createStyleSheet('AppFrame', (theme) => { - return { - '@global': { - html: { - boxSizing: 'border-box', - }, - '*, *:before, *:after': { - boxSizing: 'inherit', - }, - body: { - margin: 0, - background: theme.palette.background.default, - color: theme.palette.text.primary, - lineHeight: '1.2', - overflowX: 'hidden', - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - }, - img: { - maxWidth: '100%', - height: 'auto', - width: 'auto', - }, +const styleSheet = createStyleSheet('AppFrame', (theme) => ({ + '@global': { + html: { + boxSizing: 'border-box', }, - appFrame: { - display: 'flex', - alignItems: 'stretch', - minHeight: '100vh', - width: '100%', + '*, *:before, *:after': { + boxSizing: 'inherit', }, - grow: { - flex: '1 1 auto', + body: { + margin: 0, + background: theme.palette.background.default, + color: theme.palette.text.primary, + lineHeight: '1.2', + overflowX: 'hidden', + WebkitFontSmoothing: 'antialiased', // Antialiasing. + MozOsxFontSmoothing: 'grayscale', // Antialiasing. }, - title: { - marginLeft: 24, - flex: '0 1 auto', + img: { + maxWidth: '100%', + height: 'auto', + width: 'auto', }, - appBar: { - left: 'auto', - right: 0, - transition: theme.transitions.create('width'), + }, + appFrame: { + display: 'flex', + alignItems: 'stretch', + minHeight: '100vh', + width: '100%', + }, + grow: { + flex: '1 1 auto', + }, + title: { + marginLeft: 24, + flex: '0 1 auto', + }, + appBar: { + left: 'auto', + right: 0, + transition: theme.transitions.create('width'), + }, + appBarHome: { + backgroundColor: 'transparent', + boxShadow: 'none', + }, + [theme.breakpoints.up('lg')]: { + drawer: { + width: '250px', }, - appBarHome: { - backgroundColor: 'transparent', - boxShadow: 'none', + appBarShift: { + width: 'calc(100% - 250px)', }, - [theme.breakpoints.up('lg')]: { - drawer: { - width: '250px', - }, - appBarShift: { - width: 'calc(100% - 250px)', - }, - navIconHide: { - display: 'none', - }, + navIconHide: { + display: 'none', }, - }; -}); + }, +})); class AppFrame extends Component { state = { diff --git a/docs/src/components/AppSearch.js b/docs/src/components/AppSearch.js index 9f9cc4bfe30b5c..251120324c9d50 100644 --- a/docs/src/components/AppSearch.js +++ b/docs/src/components/AppSearch.js @@ -38,73 +38,71 @@ function removeDocsearch() { clearInterval(searchTimer); } -const styleSheet = createStyleSheet('AppSearch', (theme) => { - return { - '@global': { - '.algolia-autocomplete': { - fontFamily: theme.typography.fontFamily, - '& .algolia-docsearch-suggestion--title': { - ...theme.typography.title, - }, - '& .algolia-docsearch-suggestion--text': { - ...theme.typography.body1, - }, - '& .ds-dropdown-menu': { - boxShadow: theme.shadows[1], - borderRadius: 2, - '&::before': { - display: 'none', - }, - '& [class^=ds-dataset-]': { - border: 0, - borderRadius: 2, - }, - }, - }, - }, - wrapper: { +const styleSheet = createStyleSheet('AppSearch', (theme) => ({ + '@global': { + '.algolia-autocomplete': { fontFamily: theme.typography.fontFamily, - position: 'relative', - borderRadius: 2, - background: fade(white, 0.15), - '&:hover': { - background: fade(white, 0.25), + '& .algolia-docsearch-suggestion--title': { + ...theme.typography.title, + }, + '& .algolia-docsearch-suggestion--text': { + ...theme.typography.body1, }, - '& $input': { - transition: theme.transitions.create('width'), - width: 200, - '&:focus': { - width: 250, + '& .ds-dropdown-menu': { + boxShadow: theme.shadows[1], + borderRadius: 2, + '&::before': { + display: 'none', + }, + '& [class^=ds-dataset-]': { + border: 0, + borderRadius: 2, }, }, }, - search: { - width: theme.spacing.unit * 9, - height: '100%', - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', + }, + wrapper: { + fontFamily: theme.typography.fontFamily, + position: 'relative', + borderRadius: 2, + background: fade(white, 0.15), + '&:hover': { + background: fade(white, 0.25), }, - input: { - font: 'inherit', - padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${ - theme.spacing.unit}px ${theme.spacing.unit * 9}px`, - border: 0, - display: 'block', - verticalAlign: 'middle', - whiteSpace: 'normal', - background: 'none', - margin: 0, // Reset for Safari - color: 'inherit', - width: '100%', + '& $input': { + transition: theme.transitions.create('width'), + width: 200, '&:focus': { - outline: 0, + width: 250, }, }, - }; -}); + }, + search: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + input: { + font: 'inherit', + padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${ + theme.spacing.unit}px ${theme.spacing.unit * 9}px`, + border: 0, + display: 'block', + verticalAlign: 'middle', + whiteSpace: 'normal', + background: 'none', + margin: 0, // Reset for Safari + color: 'inherit', + width: '100%', + '&:focus': { + outline: 0, + }, + }, +})); function AppSearch(props) { const { diff --git a/docs/src/components/Demo.js b/docs/src/components/Demo.js index c6ec556c96ca73..df7428ffe93213 100644 --- a/docs/src/components/Demo.js +++ b/docs/src/components/Demo.js @@ -11,59 +11,53 @@ import MarkdownElement from 'docs/src/components/MarkdownElement'; const requireDemos = require.context('docs/src', true, /\.js$/); const requireDemoSource = require.context('!raw-loader!docs/src', true, /\.js$/); -const styleSheet = createStyleSheet('Demo', (theme) => { - return { - root: { - fontFamily: theme.typography.fontFamily, - position: 'relative', - backgroundColor: theme.palette.background.contentFrame, - marginBottom: 40, - marginLeft: -16, - marginRight: -16, +const styleSheet = createStyleSheet('Demo', (theme) => ({ + root: { + fontFamily: theme.typography.fontFamily, + position: 'relative', + backgroundColor: theme.palette.background.contentFrame, + marginBottom: 40, + marginLeft: -16, + marginRight: -16, + }, + demo: theme.mixins.gutters({ + display: 'flex', + justifyContent: 'center', + paddingTop: 20, + paddingBottom: 20, + }), + codeButton: { + display: 'none', + zIndex: 10, + position: 'absolute', + top: 2, + right: 7, + }, + code: { + display: 'none', + padding: 0, + margin: 0, + '& pre': { + overflow: 'auto', + margin: '0px !important', + borderRadius: '0px !important', }, - demo: theme.mixins.gutters({ - display: 'flex', - justifyContent: 'center', - paddingTop: 20, - paddingBottom: 20, - }), + }, + [theme.breakpoints.up(600)]: { codeButton: { - display: 'none', - zIndex: 10, - position: 'absolute', - top: 2, - right: 7, + display: 'block', }, code: { - display: 'none', - padding: 0, - margin: 0, - '& pre': { - overflow: 'auto', - margin: '0px !important', - borderRadius: '0px !important', - }, + display: 'block', }, - [theme.breakpoints.up(600)]: { - codeButton: { - display: 'block', - }, - code: { - display: 'block', - }, - root: { - marginLeft: 0, - marginRight: 0, - }, + root: { + marginLeft: 0, + marginRight: 0, }, - }; -}); + }, +})); class Demo extends Component { - static contextTypes = { - styleManager: PropTypes.object.isRequired, - }; - state = { codeOpen: false, }; diff --git a/docs/src/pages/component-api/AppBar/AppBar.md b/docs/src/pages/component-api/AppBar/AppBar.md index 37cd77beff569f..6a4c3be0c9a998 100644 --- a/docs/src/pages/component-api/AppBar/AppBar.md +++ b/docs/src/pages/component-api/AppBar/AppBar.md @@ -7,6 +7,7 @@ |:-----|:-----|:--------|:------------| | accent | bool | false | If `true`, the AppBar will use the theme's accent color. | | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Avatar/Avatar.md b/docs/src/pages/component-api/Avatar/Avatar.md index c8dbe976ccf58a..bad7658e4150d2 100644 --- a/docs/src/pages/component-api/Avatar/Avatar.md +++ b/docs/src/pages/component-api/Avatar/Avatar.md @@ -7,6 +7,7 @@ |:-----|:-----|:--------|:------------| | alt | string | '' | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | | children | node | | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.
This can be an element, or just a string. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | sizes | string | | The `sizes` attribute for the `img` element. | | src | string | | The `src` attribute for the `img` element. | diff --git a/docs/src/pages/component-api/Badge/Badge.md b/docs/src/pages/component-api/Badge/Badge.md index c02f59916f5a25..3aaa081c8c8c93 100644 --- a/docs/src/pages/component-api/Badge/Badge.md +++ b/docs/src/pages/component-api/Badge/Badge.md @@ -1,10 +1,6 @@ # Badge -```jsx - - folder - -``` + ## Props | Name | Type | Default | Description | @@ -13,6 +9,7 @@ | badgeClassName | string | | The CSS class name of the badge element. | | badgeContent * | node | | The content rendered within the badge. | | children * | node | | The badge will be added relative to this node. | +| classes | object | | Useful to extend the style applied to components. | | primary | bool | false | If `true`, the badge will use the primary badge colors. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/BottomNavigation/BottomNavigation.md b/docs/src/pages/component-api/BottomNavigation/BottomNavigation.md index 37d53e3ddce2eb..bea75d9ab92066 100644 --- a/docs/src/pages/component-api/BottomNavigation/BottomNavigation.md +++ b/docs/src/pages/component-api/BottomNavigation/BottomNavigation.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children * | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | index | number | | The index of the currently selected `BottomNavigationButton`. | | onChange | function | | Function called when the index changes. | | showLabels | bool | false | If `true`, all `BottomNavigationButton`s will show their labels. By default only the selected `BottomNavigationButton` will show its label. | diff --git a/docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md b/docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md index fdbabda32cb46f..9eb5ef95144b08 100644 --- a/docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md +++ b/docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | icon | node | | The icon element. If a string is provided, it will be used as a font ligature. | | label | node | | The label element. | | showLabel | bool | | If `true`, the BottomNavigationButton will show its label. | diff --git a/docs/src/pages/component-api/Button/Button.md b/docs/src/pages/component-api/Button/Button.md index b68a16922ce46a..a8a6f8e2b5c7b7 100644 --- a/docs/src/pages/component-api/Button/Button.md +++ b/docs/src/pages/component-api/Button/Button.md @@ -1,14 +1,13 @@ # Button -```jsx - -``` + ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | accent | bool | false | If `true`, the button will use the theme's accent color. | | children * | node | | The content of the button. | +| classes | object | | Useful to extend the style applied to components. | | compact | bool | false | Uses a smaller minWidth, ideal for things like card actions. | | component | union: string
 func
| 'button' | The component used for the root node. Either a string to use a DOM element or a component. | | contrast | bool | false | If `true`, the button will use the theme's contrast color. | diff --git a/docs/src/pages/component-api/Card/Card.md b/docs/src/pages/component-api/Card/Card.md index dbe27329c8169a..43e42533bebc42 100644 --- a/docs/src/pages/component-api/Card/Card.md +++ b/docs/src/pages/component-api/Card/Card.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | raised | bool | false | If `true`, the card will use raised styling. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Card/CardActions.md b/docs/src/pages/component-api/Card/CardActions.md index 61acc54d6fb441..1644f78a7625fa 100644 --- a/docs/src/pages/component-api/Card/CardActions.md +++ b/docs/src/pages/component-api/Card/CardActions.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | disableActionSpacing | bool | false | If `true`, the card actions do not have additional margin. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Card/CardContent.md b/docs/src/pages/component-api/Card/CardContent.md index d69aa3cd55843a..e8dbac16451b93 100644 --- a/docs/src/pages/component-api/Card/CardContent.md +++ b/docs/src/pages/component-api/Card/CardContent.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Card/CardHeader.md b/docs/src/pages/component-api/Card/CardHeader.md index 218e23683de0a2..e025fb6db049b7 100644 --- a/docs/src/pages/component-api/Card/CardHeader.md +++ b/docs/src/pages/component-api/Card/CardHeader.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | avatar | node | | The Avatar for the Card Header. | +| classes | object | | Useful to extend the style applied to components. | | subheader | node | | The content of the component. | | title | node | | The content of the Card Title. | diff --git a/docs/src/pages/component-api/Card/CardMedia.md b/docs/src/pages/component-api/Card/CardMedia.md index 02d1848a6a761f..55fbf1fc73bad2 100644 --- a/docs/src/pages/component-api/Card/CardMedia.md +++ b/docs/src/pages/component-api/Card/CardMedia.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Checkbox/Checkbox.md b/docs/src/pages/component-api/Checkbox/Checkbox.md index f001cc1b3834b2..341ddcf49d517d 100644 --- a/docs/src/pages/component-api/Checkbox/Checkbox.md +++ b/docs/src/pages/component-api/Checkbox/Checkbox.md @@ -1,7 +1,6 @@ # Checkbox -[Checkboxes](https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox) -allow the user to select multiple options from a set. + ## Props | Name | Type | Default | Description | @@ -9,6 +8,7 @@ allow the user to select multiple options from a set. | checked | union: bool
 string
| | If `true`, the component is checked. | | checkedClassName | string | | The CSS class name of the root element when checked. | | checkedIcon | node | | The icon to display when the component is checked. | +| classes | object | | Useful to extend the style applied to components. | | disabled | bool | | If `true`, the switch will be disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | | icon | node | | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. | diff --git a/docs/src/pages/component-api/Chip/Chip.md b/docs/src/pages/component-api/Chip/Chip.md index 096a7cef584ba1..968957d095c058 100644 --- a/docs/src/pages/component-api/Chip/Chip.md +++ b/docs/src/pages/component-api/Chip/Chip.md @@ -2,15 +2,11 @@ Chips represent complex entities in small blocks, such as a contact. -```jsx -} label="Label text" /> -``` - ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | avatar | node | | Avatar element. | -| className | string | | The CSS `className` of the root element. | +| classes | object | | Useful to extend the style applied to components. | | deleteIconClassName | string | | The CSS class name of the delete icon element. | | label | node | | The content of the label. | | labelClassName | string | | The CSS `className` of the label. | diff --git a/docs/src/pages/component-api/Dialog/Dialog.md b/docs/src/pages/component-api/Dialog/Dialog.md index ddb89c7e5af74d..bd08da95e9ace7 100644 --- a/docs/src/pages/component-api/Dialog/Dialog.md +++ b/docs/src/pages/component-api/Dialog/Dialog.md @@ -2,35 +2,29 @@ Dialogs are overlaid modal paper based components with a backdrop. -```jsx - - ... - ... - -``` - ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Dialog children, usually the included sub-components. | -| fullScreen | bool | false | If `true`, the dialog will be full-screen. | -| ignoreBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onRequestClose` callback. | -| ignoreEscapeKeyUp | bool | false | If `true`, hitting escape will not fire the `onRequestClose` callback. | +| children | Element | | Dialog children, usually the included sub-components. | +| classes | any | | Useful to extend the style applied to components. | +| fullScreen | boolean | false | If `true`, it will be full-screen | +| ignoreBackdropClick | boolean | false | If `true`, clicking the backdrop will not fire the `onRequestClose` callback. | +| ignoreEscapeKeyUp | boolean | false | If `true`, hitting escape will not fire the `onRequestClose` callback. | | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. | | leaveTransitionDuration | number | duration.leavingScreen | Duration of the animation when the element is leaving. | -| maxWidth | enum: 'xs'
 'sm'
 'md'
| 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. | -| onBackdropClick | function | | Callback fired when the backdrop is clicked. | -| onEnter | function | | Callback fired before the dialog enters. | -| onEntering | function | | Callback fired when the dialog is entering. | -| onEntered | function | | Callback fired when the dialog has entered. | -| onEscapeKeyUp | function | | Callback fires when the escape key is released and the modal is in focus. | -| onExit | function | | Callback fired before the dialog exits. | -| onExiting | function | | Callback fired when the dialog is exiting. | -| onExited | function | | Callback fired when the dialog has exited. | -| onRequestClose | function | | Callback fired when the dialog requests to be closed. | -| open | bool | false | If `true`, the Dialog is open. | +| maxWidth | union: 'xs'
 'sm'
 'md'
| 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. | +| onBackdropClick | Function | | Callback fired when the backdrop is clicked. | +| onEnter | Function | | Callback fired before the dialog enters. | +| onEntering | Function | | Callback fired when the dialog is entering. | +| onEntered | Function | | Callback fired when the dialog has entered. | +| onEscapeKeyUp | Function | | Callback fires when the escape key is released and the modal is in focus. | +| onExit | Function | | Callback fired before the dialog exits. | +| onExiting | Function | | Callback fired when the dialog is exiting. | +| onExited | Function | | Callback fired when the dialog has exited. | +| onRequestClose | Function | | Callback fired when the dialog requests to be closed. | +| open | boolean | false | If `true`, the Dialog is open. | | paperClassName | string | | The CSS class name of the paper inner element. | -| transition | union: func
 element
| Fade | Transition component. | +| transition | union: Function
 Element<*>
| Fade | Transition component. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Dialog/DialogActions.md b/docs/src/pages/component-api/Dialog/DialogActions.md index b10cdf0815b3bb..fa093873d1903f 100644 --- a/docs/src/pages/component-api/Dialog/DialogActions.md +++ b/docs/src/pages/component-api/Dialog/DialogActions.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Dialog/DialogContent.md b/docs/src/pages/component-api/Dialog/DialogContent.md index ba212ea176d2b2..eadfeea0d701ce 100644 --- a/docs/src/pages/component-api/Dialog/DialogContent.md +++ b/docs/src/pages/component-api/Dialog/DialogContent.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Dialog/DialogContentText.md b/docs/src/pages/component-api/Dialog/DialogContentText.md index 0373ecb16683c7..90348971c4c51e 100644 --- a/docs/src/pages/component-api/Dialog/DialogContentText.md +++ b/docs/src/pages/component-api/Dialog/DialogContentText.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Dialog/DialogTitle.md b/docs/src/pages/component-api/Dialog/DialogTitle.md index f501eb00296051..1986d60bb44928 100644 --- a/docs/src/pages/component-api/Dialog/DialogTitle.md +++ b/docs/src/pages/component-api/Dialog/DialogTitle.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, that can be usefull to can render an h4 instead of a | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Divider/Divider.md b/docs/src/pages/component-api/Divider/Divider.md index e0608f240a5ea9..628da28fc4ebbd 100644 --- a/docs/src/pages/component-api/Divider/Divider.md +++ b/docs/src/pages/component-api/Divider/Divider.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | absolute | bool | false | | +| classes | object | | Useful to extend the style applied to components. | | inset | bool | false | If `true`, the divider will be indented. | | light | bool | false | If `true`, the divider will have a lighter color. | diff --git a/docs/src/pages/component-api/Drawer/Drawer.md b/docs/src/pages/component-api/Drawer/Drawer.md index 5da74acdc92dba..7302cfdff0bf2a 100644 --- a/docs/src/pages/component-api/Drawer/Drawer.md +++ b/docs/src/pages/component-api/Drawer/Drawer.md @@ -1,12 +1,13 @@ # Drawer -This is a drawer. + ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | anchor | enum: 'left'
 'top'
 'right'
 'bottom'
| 'left' | Side which will the drawer will appear from. | | children | node | | The contents of the drawer. | +| classes | object | | Useful to extend the style applied to components. | | docked | bool | false | If `true`, the drawer will dock itself and will no longer slide in with an overlay. | | elevation | number | 16 | The elevation of the drawer. | | enterTransitionDuration | number | duration.enteringScreen | Customizes duration of enter animation (ms) | diff --git a/docs/src/pages/component-api/Form/FormControl.md b/docs/src/pages/component-api/Form/FormControl.md index 7b47a26c40ab1e..c40ec342ab6bdd 100644 --- a/docs/src/pages/component-api/Form/FormControl.md +++ b/docs/src/pages/component-api/Form/FormControl.md @@ -1,11 +1,12 @@ # FormControl -FormControl - provides context such as dirty/focused/error/required for form inputs +Provides context such as dirty/focused/error/required for form inputs. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The contents of the form control. | +| classes | object | | Useful to extend the style applied to components. | | error | bool | false | If `true`, the label should be displayed in an error state. | | required | bool | false | If `true`, the label will indicate that the input is required. | diff --git a/docs/src/pages/component-api/Form/FormGroup.md b/docs/src/pages/component-api/Form/FormGroup.md index 89dbf5b3b3af06..1aae021a965c60 100644 --- a/docs/src/pages/component-api/Form/FormGroup.md +++ b/docs/src/pages/component-api/Form/FormGroup.md @@ -8,6 +8,7 @@ Upon focusing on one of the child controls, it will propagate `focused` to the l | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | row | bool | false | Display group of elements in a compact row. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Form/FormLabel.md b/docs/src/pages/component-api/Form/FormLabel.md index f6050a61c0728f..ab2968881414df 100644 --- a/docs/src/pages/component-api/Form/FormLabel.md +++ b/docs/src/pages/component-api/Form/FormLabel.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | error | bool | | Whether the label should be displayed in an error state. | | focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). | | required | bool | | If `true`, the label will indicate that the input is required. | diff --git a/docs/src/pages/component-api/Grid/Grid.md b/docs/src/pages/component-api/Grid/Grid.md index 44e258f13158bd..095e862270d1d6 100644 --- a/docs/src/pages/component-api/Grid/Grid.md +++ b/docs/src/pages/component-api/Grid/Grid.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | Element | | The content of the component. | +| classes | any | | Useful to extend the style applied to components. | | component | union: string
 Function
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | container | boolean | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | | item | boolean | false | It true, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. | diff --git a/docs/src/pages/component-api/Icon/Icon.md b/docs/src/pages/component-api/Icon/Icon.md index da64c068c8ff90..a846f64b812302 100644 --- a/docs/src/pages/component-api/Icon/Icon.md +++ b/docs/src/pages/component-api/Icon/Icon.md @@ -1,8 +1,6 @@ # Icon -```jsx -account_circle -``` + ## Props | Name | Type | Default | Description | @@ -10,6 +8,7 @@ | accent | bool | false | If `true`, the button will use the theme's accent color. | | action | bool | false | If `true`, the button will use the theme's action.active color. | | children | node | | The name of the icon font ligature. | +| classes | object | | Useful to extend the style applied to components. | | contrast | bool | false | If `true`, the button will contrast the theme's primary color. | | disabled | bool | false | If `true`, the button will use the theme's action.disabled color. | | error | bool | false | If `true`, the text will use the theme's error color. | diff --git a/docs/src/pages/component-api/IconButton/IconButton.md b/docs/src/pages/component-api/IconButton/IconButton.md index cc718109ae0c41..1856736ceb5ce0 100644 --- a/docs/src/pages/component-api/IconButton/IconButton.md +++ b/docs/src/pages/component-api/IconButton/IconButton.md @@ -1,13 +1,5 @@ # IconButton -``` -account_circle -``` - -``` - -``` - Refer to the [Icons](/style/icons) section of the documentation regarding the available icon options. @@ -16,6 +8,7 @@ regarding the available icon options. |:-----|:-----|:--------|:------------| | accent | bool | false | If `true`, will use the theme's accent color. | | children | node | | The icon element. If a string is provided, it will be used as an icon font ligature. | +| classes | object | | Useful to extend the style applied to components. | | contrast | bool | false | If `true`, the icon button will use the theme's contrast color. | | disabled | bool | false | If `true`, the button will be disabled. | | disableRipple | bool | false | If `true`, the ripple will be disabled. | diff --git a/docs/src/pages/component-api/Input/Input.md b/docs/src/pages/component-api/Input/Input.md index 0123ba3fddc37e..279cd15065eda7 100644 --- a/docs/src/pages/component-api/Input/Input.md +++ b/docs/src/pages/component-api/Input/Input.md @@ -1,10 +1,11 @@ # Input -Input + ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | className | string | | The CSS class name of the wrapper element. | | component | union: string
 func
| | The component used for the root node. Either a string to use a DOM element or a component. It's an `input` by default. | | defaultValue | string | | The default value of the `Input` element. | @@ -14,6 +15,7 @@ Input | id | string | | | | inputClassName | string | | The CSS class name of the input element. | | inputProps | object | | Properties applied to the `input` element. | +| inputRef | function | | Use that property to pass a ref callback to the native input component. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | rows | union: string
 number
| | Number of rows to display when multiline option is set to true. | | rowsMax | union: string
 number
| | Maxium number of rows to display when multiline option is set to true. | diff --git a/docs/src/pages/component-api/Input/InputLabel.md b/docs/src/pages/component-api/Input/InputLabel.md index a16eb384b9591f..41dca00c328f10 100644 --- a/docs/src/pages/component-api/Input/InputLabel.md +++ b/docs/src/pages/component-api/Input/InputLabel.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The contents of the `InputLabel`. | +| classes | object | | Useful to extend the style applied to components. | | disableAnimation | bool | false | If `true`, the transition animation is disabled. | | error | bool | | If `true`, the label will be displayed in an error state. | | focused | bool | | If `true`, the input of this label is focused. | diff --git a/docs/src/pages/component-api/Input/Textarea.md b/docs/src/pages/component-api/Input/Textarea.md index d59ddd13b58983..d1bca8dd4c90e1 100644 --- a/docs/src/pages/component-api/Input/Textarea.md +++ b/docs/src/pages/component-api/Input/Textarea.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | className | string | | | | defaultValue | any | | | | disabled | bool | | | @@ -13,6 +14,7 @@ | onHeightChange | function | | | | rows | union: string
 number
| 1 | Number of rows to display when multiline option is set to true. | | rowsMax | union: string
 number
| | Maxium number of rows to display when multiline option is set to true. | +| textareaRef | function | | Use that property to pass a ref callback to the native textarea component. | | value | string | | | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/List/List.md b/docs/src/pages/component-api/List/List.md index 9a833d1ba22b3d..96178da8a6fe2d 100644 --- a/docs/src/pages/component-api/List/List.md +++ b/docs/src/pages/component-api/List/List.md @@ -1,20 +1,16 @@ # List -A material list root element. -```jsx - - .... - -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the `dense` context. | | disablePadding | bool | false | If `true`, vertical padding will be removed from the list. | +| rootRef | function | | Use that property to pass a ref callback to the root component. | | subheader | node | | The content of the component, normally `ListItem`. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/List/ListItem.md b/docs/src/pages/component-api/List/ListItem.md index 0b9052a452c1b7..1236ec5dd2ebaa 100644 --- a/docs/src/pages/component-api/List/ListItem.md +++ b/docs/src/pages/component-api/List/ListItem.md @@ -7,6 +7,7 @@ |:-----|:-----|:--------|:------------| | button | bool | false | If `true`, the ListItem will be a button. | | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | diff --git a/docs/src/pages/component-api/List/ListItemAvatar.md b/docs/src/pages/component-api/List/ListItemAvatar.md index 50e5430c17949c..0696f44dacb7c5 100644 --- a/docs/src/pages/component-api/List/ListItemAvatar.md +++ b/docs/src/pages/component-api/List/ListItemAvatar.md @@ -1,17 +1,12 @@ # ListItemAvatar -`` is a simple wrapper to apply the `dense` mode styles to `Avatar`. - -``` - - - -``` +It's a simple wrapper to apply the `dense` mode styles to `Avatar`. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children * | element | | The content of the component, normally `Avatar`. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/List/ListItemIcon.md b/docs/src/pages/component-api/List/ListItemIcon.md index c2e9dd7baf184a..477060f6ea0291 100644 --- a/docs/src/pages/component-api/List/ListItemIcon.md +++ b/docs/src/pages/component-api/List/ListItemIcon.md @@ -1,16 +1,12 @@ # ListItemIcon A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. -``` - - - -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children * | element | | The content of the component, normally `Icon`, `SvgIcon`, or a `material-ui-icons` SVG icon component. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/List/ListItemSecondaryAction.md b/docs/src/pages/component-api/List/ListItemSecondaryAction.md index 6b4c9533cd01fc..c5ae1aef37642c 100644 --- a/docs/src/pages/component-api/List/ListItemSecondaryAction.md +++ b/docs/src/pages/component-api/List/ListItemSecondaryAction.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component, normally an `IconButton` or selection control. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/List/ListItemText.md b/docs/src/pages/component-api/List/ListItemText.md index 86ea2ea50ba12a..4687fbe4fe40e4 100644 --- a/docs/src/pages/component-api/List/ListItemText.md +++ b/docs/src/pages/component-api/List/ListItemText.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | | primary | node | false | | | secondary | node | false | | diff --git a/docs/src/pages/component-api/List/ListSubheader.md b/docs/src/pages/component-api/List/ListSubheader.md index f244ec2449ec08..653b847a5e6880 100644 --- a/docs/src/pages/component-api/List/ListSubheader.md +++ b/docs/src/pages/component-api/List/ListSubheader.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | inset | bool | false | If `true`, the List Subheader will be indented. | | primary | bool | false | If `true`, the List Subheader will have the theme primary color. | diff --git a/docs/src/pages/component-api/Menu/Menu.md b/docs/src/pages/component-api/Menu/Menu.md index 8f512f13e361dc..f20dc45ac8e61d 100644 --- a/docs/src/pages/component-api/Menu/Menu.md +++ b/docs/src/pages/component-api/Menu/Menu.md @@ -7,6 +7,7 @@ |:-----|:-----|:--------|:------------| | anchorEl | object | | The DOM element used to set the position of the menu. | | children | node | | Menu contents, normally `MenuItem`s. | +| classes | object | | Useful to extend the style applied to components. | | MenuListProps | object | | Properties applied to the `MenuList` element. | | onEnter | function | | Callback fired before the Menu enters. | | onEntering | function | | Callback fired when the Menu is entering. | diff --git a/docs/src/pages/component-api/Menu/MenuItem.md b/docs/src/pages/component-api/Menu/MenuItem.md index 27acc45a4fc209..6911884b47d0e2 100644 --- a/docs/src/pages/component-api/Menu/MenuItem.md +++ b/docs/src/pages/component-api/Menu/MenuItem.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | Menu item contents. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string
 func
| | The component used for the root node. Either a string to use a DOM element or a component. | | selected | bool | false | Use to apply selected styling. | diff --git a/docs/src/pages/component-api/Paper/Paper.md b/docs/src/pages/component-api/Paper/Paper.md index 11943960551d1a..193e0e4dd394da 100644 --- a/docs/src/pages/component-api/Paper/Paper.md +++ b/docs/src/pages/component-api/Paper/Paper.md @@ -1,17 +1,11 @@ # Paper -A piece of material paper. -```js -import Paper from 'material-ui/Paper'; - -const Component = () => Hello World; -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes * | object | | Useful to extend the style applied to components. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | elevation | number | 2 | Shadow depth, corresponds to `dp` in the spec. It's accepting values between 0 and 24 inclusive. | | square | bool | false | If `true`, rounded corners are disabled. | diff --git a/docs/src/pages/component-api/Progress/CircularProgress.md b/docs/src/pages/component-api/Progress/CircularProgress.md index bd1ae615d6b2b5..c042ff87d31671 100644 --- a/docs/src/pages/component-api/Progress/CircularProgress.md +++ b/docs/src/pages/component-api/Progress/CircularProgress.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | size | number | 40 | The size of the circle. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Progress/LinearProgress.md b/docs/src/pages/component-api/Progress/LinearProgress.md index 1605540ab2f069..ebe386a135eaf0 100644 --- a/docs/src/pages/component-api/Progress/LinearProgress.md +++ b/docs/src/pages/component-api/Progress/LinearProgress.md @@ -5,7 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| className | string | | | +| classes | object | | Useful to extend the style applied to components. | | mode | enum: 'determinate'
 'indeterminate'
 'buffer'
 'query'
| 'indeterminate' | The mode of show your progress, indeterminate for when there is no value for progress. | | value | number | 0 | The value of progress, only works in determinate and buffer mode. Value between 0 and 100. | | valueBuffer | number | | The value of buffer, only works in buffer mode. Value between 0 and 100. | diff --git a/docs/src/pages/component-api/Radio/Radio.md b/docs/src/pages/component-api/Radio/Radio.md index 2afd1a5e1d3c2a..f976df8fce1b76 100644 --- a/docs/src/pages/component-api/Radio/Radio.md +++ b/docs/src/pages/component-api/Radio/Radio.md @@ -1,7 +1,6 @@ # Radio -[Radio buttons](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) -are switches used for selection from multiple options. + ## Props | Name | Type | Default | Description | @@ -9,6 +8,7 @@ are switches used for selection from multiple options. | checked | union: bool
 string
| | If `true`, the component appears selected. | | checkedClassName | string | | The CSS class name of the root element when selected. | | checkedIcon | node | | The icon to display when selected. | +| classes | object | | Useful to extend the style applied to components. | | disabled | bool | | If `true`, the component disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | | icon | node | | The icon to display when the component is unselected. | diff --git a/docs/src/pages/component-api/Radio/RadioGroup.md b/docs/src/pages/component-api/Radio/RadioGroup.md index 217e2be3a48b0c..2fa3094c3c307f 100644 --- a/docs/src/pages/component-api/Radio/RadioGroup.md +++ b/docs/src/pages/component-api/Radio/RadioGroup.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | name | string | | The name used to reference the value of the control. | | onChange | function | | Callback fired when a radio button is selected.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* `change` event
*checked:* The `checked` value of the switch | | selectedValue | string | | Value of the selected radio button | diff --git a/docs/src/pages/component-api/SvgIcon/SvgIcon.md b/docs/src/pages/component-api/SvgIcon/SvgIcon.md index c3c224898b2b8d..bf05951c87366c 100644 --- a/docs/src/pages/component-api/SvgIcon/SvgIcon.md +++ b/docs/src/pages/component-api/SvgIcon/SvgIcon.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | Elements passed into the SVG Icon. | +| classes | object | | Useful to extend the style applied to components. | | titleAccess | string | | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent | | viewBox | string | '0 0 24 24' | Allows you to redefine what the coordinates without units mean inside an svg element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the svg will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. | diff --git a/docs/src/pages/component-api/Switch/Switch.md b/docs/src/pages/component-api/Switch/Switch.md index 20b127d6f03527..0554750addd15e 100644 --- a/docs/src/pages/component-api/Switch/Switch.md +++ b/docs/src/pages/component-api/Switch/Switch.md @@ -8,6 +8,7 @@ | checked | union: bool
 string
| | If `true`, the component appears selected. | | checkedClassName | string | | The CSS class name of the root element when checked. | | checkedIcon | node | | The icon to display when the component is checked. | +| classes | object | | Useful to extend the style applied to components. | | disabled | bool | | If `true`, the switch will be disabled. | | disabledClassName | string | | The CSS class name of the root element when disabled. | | icon | node | | The icon to display when the component is unchecked. | diff --git a/docs/src/pages/component-api/Table/Table.md b/docs/src/pages/component-api/Table/Table.md index b7cb07ca2075f7..a894c172d30184 100644 --- a/docs/src/pages/component-api/Table/Table.md +++ b/docs/src/pages/component-api/Table/Table.md @@ -1,18 +1,12 @@ # Table -A material table root element. -```jsx - - ... - ... -
-``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the table, normally `TableHeader` and `TableBody`. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Table/TableBody.md b/docs/src/pages/component-api/Table/TableBody.md index da33ecf4efe25c..730db20b7f2e1a 100644 --- a/docs/src/pages/component-api/Table/TableBody.md +++ b/docs/src/pages/component-api/Table/TableBody.md @@ -1,17 +1,12 @@ # TableBody -A material table body. -```jsx - - ... - -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component, normally `TableRow`. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Table/TableCell.md b/docs/src/pages/component-api/Table/TableCell.md index 554fc70d742689..e6503c5cd8c427 100644 --- a/docs/src/pages/component-api/Table/TableCell.md +++ b/docs/src/pages/component-api/Table/TableCell.md @@ -1,18 +1,13 @@ # TableCell -A material table cell. -When placed in a `TableHead`, this will automatically render a `th` element. - -```jsx -... -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | checkbox | bool | false | If `true`, the cell padding will be adjusted to accommodate a checkbox. | | children | node | | The table cell contents. | +| classes | object | | Useful to extend the style applied to components. | | compact | bool | false | If `true`, compact cell padding will be used to accommodate more content. | | disablePadding | bool | false | If `true`, left/right cell padding will be disabled. | | numeric | bool | false | If `true`, content will align to the right. | diff --git a/docs/src/pages/component-api/Table/TableHead.md b/docs/src/pages/component-api/Table/TableHead.md index b328b2ff1ee9b2..5d4e9fbc5c6144 100644 --- a/docs/src/pages/component-api/Table/TableHead.md +++ b/docs/src/pages/component-api/Table/TableHead.md @@ -1,17 +1,12 @@ # TableHead -A material table head. -```jsx - - ... - -``` ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | Should be valid `` children such as `TableRow`. | +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Table/TableRow.md b/docs/src/pages/component-api/Table/TableRow.md index 5773f9bceee7fa..394746bbbd7552 100644 --- a/docs/src/pages/component-api/Table/TableRow.md +++ b/docs/src/pages/component-api/Table/TableRow.md @@ -1,20 +1,13 @@ # TableRow -A material table row. - Will automatically set dynamic row height -based on the material table element parent (head, body, etc) - -```jsx - - ... - -``` +based on the material table element parent (head, body, etc). ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | Should be valid `` children such as `TableCell`. | +| classes | object | | Useful to extend the style applied to components. | | hover | bool | false | If `true`, the table row will shade on hover. | | selected | bool | false | If `true`, the table row will have the selected shading. | diff --git a/docs/src/pages/component-api/Table/TableSortLabel.md b/docs/src/pages/component-api/Table/TableSortLabel.md index 5859476379196b..85c87cd51c8183 100644 --- a/docs/src/pages/component-api/Table/TableSortLabel.md +++ b/docs/src/pages/component-api/Table/TableSortLabel.md @@ -7,6 +7,7 @@ A button based label for placing inside `TableCell` for column sorting. |:-----|:-----|:--------|:------------| | active | bool | false | If `true`, the label will have the active styling (should be true for the sorted column). | | children | node | | Label contents, the arrow will be appended automatically. | +| classes | object | | Useful to extend the style applied to components. | | direction | enum: 'asc'
 'desc'
| 'desc' | The current sort direction. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Tabs/Tab.md b/docs/src/pages/component-api/Tabs/Tab.md index b3edb2cd5a661d..b9a12f7fa0bb5f 100644 --- a/docs/src/pages/component-api/Tabs/Tab.md +++ b/docs/src/pages/component-api/Tabs/Tab.md @@ -5,6 +5,7 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | | disabled | bool | false | If `true`, the tab will be disabled. | | icon | node | | The icon element. If a string is provided, it will be used as a font ligature. | | label | node | | The label element. | diff --git a/docs/src/pages/component-api/Tabs/TabIndicator.md b/docs/src/pages/component-api/Tabs/TabIndicator.md index fd0340c7ae16e0..aa407f68a530b9 100644 --- a/docs/src/pages/component-api/Tabs/TabIndicator.md +++ b/docs/src/pages/component-api/Tabs/TabIndicator.md @@ -1,10 +1,11 @@ # TabIndicator - +@ignore - internal component. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Tabs/TabScrollButton.md b/docs/src/pages/component-api/Tabs/TabScrollButton.md index 338e326aabc980..4da781e052a640 100644 --- a/docs/src/pages/component-api/Tabs/TabScrollButton.md +++ b/docs/src/pages/component-api/Tabs/TabScrollButton.md @@ -1,10 +1,11 @@ # TabScrollButton - +@ignore - internal component. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| classes | object | | Useful to extend the style applied to components. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-api/Tabs/Tabs.md b/docs/src/pages/component-api/Tabs/Tabs.md index 4995588ed1978e..d60ffcfbd94cc6 100644 --- a/docs/src/pages/component-api/Tabs/Tabs.md +++ b/docs/src/pages/component-api/Tabs/Tabs.md @@ -8,6 +8,7 @@ | buttonClassName | string | | The CSS class name of the scroll button elements. | | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. | | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views. | | index | number | | The index of the currently selected `Tab`. | | indicatorClassName | string | | The CSS class name of the indicator element. | diff --git a/docs/src/pages/component-api/TextField/TextField.md b/docs/src/pages/component-api/TextField/TextField.md index 7f10db399250f0..8125d0812cd208 100644 --- a/docs/src/pages/component-api/TextField/TextField.md +++ b/docs/src/pages/component-api/TextField/TextField.md @@ -1,8 +1,6 @@ # TextField -``` - -``` + ## Props | Name | Type | Default | Description | @@ -14,6 +12,7 @@ | inputClassName | string | | The CSS class name of the `Input` element. | | inputProps | object | | Properties applied to the `input` element. | | InputProps | object | | Properties applied to the `Input` element. | +| inputRef | function | | Use that property to pass a ref callback to the native input component. | | label | node | | The label content. | | labelClassName | string | | The CSS class name of the label element. | | multiline | bool | | If `true`, a textarea element will be rendered instead of an input. | diff --git a/docs/src/pages/component-api/TextField/TextFieldLabel.md b/docs/src/pages/component-api/TextField/TextFieldLabel.md index 629fa39da4f1a5..7ef68b98e4a9ea 100644 --- a/docs/src/pages/component-api/TextField/TextFieldLabel.md +++ b/docs/src/pages/component-api/TextField/TextFieldLabel.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | +| classes | object | | Useful to extend the style applied to components. | | disableAnimation | bool | false | If `true`, the transition animation is disabled. | | error | bool | | If `true`, the label is displayed in an error state. | | focused | bool | | If `true`, the input of this label is focused. | diff --git a/docs/src/pages/component-api/Toolbar/Toolbar.md b/docs/src/pages/component-api/Toolbar/Toolbar.md index c73b48afc686be..69eb0692a7ff04 100644 --- a/docs/src/pages/component-api/Toolbar/Toolbar.md +++ b/docs/src/pages/component-api/Toolbar/Toolbar.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | Can be a `ToolbarGroup` to render a group of related items. | +| classes | object | | Useful to extend the style applied to components. | | disableGutters | bool | false | If `true`, disables gutter padding. | Any other properties supplied will be spread to the root element. diff --git a/docs/src/pages/component-api/Typography/Typography.md b/docs/src/pages/component-api/Typography/Typography.md index 041c35ce488414..3735ad97ab2f7d 100644 --- a/docs/src/pages/component-api/Typography/Typography.md +++ b/docs/src/pages/component-api/Typography/Typography.md @@ -7,6 +7,7 @@ |:-----|:-----|:--------|:------------| | align | union: 'left'
 'center'
 'right'
 'justify'
| | | | children | Element | | | +| classes | any | | Useful to extend the style applied to components. | | colorInherit | boolean | false | If `true`, the text will inherit its color. | | component | union: string
 Function
| | The component used for the root node. Either a string to use a DOM element or a component. By default we map the type to a good default headline component. | | gutterBottom | boolean | false | If `true`, the text will have a bottom margin. | diff --git a/docs/src/pages/component-api/transitions/Collapse.md b/docs/src/pages/component-api/transitions/Collapse.md index 3e749070dbb962..38429e52516ea8 100644 --- a/docs/src/pages/component-api/transitions/Collapse.md +++ b/docs/src/pages/component-api/transitions/Collapse.md @@ -6,6 +6,7 @@ | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content node to be collapsed. | +| classes | object | | Useful to extend the style applied to components. | | containerClassName | string | | The CSS class name passed to the wrapping container required for holding & measuring the expanding content. | | in | bool | false | If `true`, the component will transition in. | | onEnter | function | | Callback fired before the component is entering. | diff --git a/docs/src/pages/component-api/transitions/Fade.md b/docs/src/pages/component-api/transitions/Fade.md index 769fc28f504417..116de28aa77385 100644 --- a/docs/src/pages/component-api/transitions/Fade.md +++ b/docs/src/pages/component-api/transitions/Fade.md @@ -5,16 +5,16 @@ ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | | -| in | bool | false | If `true`, the component will transition in. | +| in | boolean | false | If `true`, the component will transition in. | | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. | | leaveTransitionDuration | number | duration.leavingScreen | Duration of the animation when the element is exiting. | -| onEnter | function | | Callback fired before the component enters. | -| onEntering | function | | Callback fired when the component is entering. | -| onEntered | function | | Callback fired when the component has entered. | -| onExit | function | | Callback fired before the component exits. | -| onExiting | function | | Callback fired when the component is exiting. | -| onExited | function | | Callback fired when the component has exited. | +| children | Element | | | +| onEnter | Function | | Callback fired before the component enters. | +| onEntering | Function | | Callback fired when the component is entering. | +| onEntered | Function | | Callback fired when the component has entered. | +| onExit | Function | | Callback fired before the component exits. | +| onExiting | Function | | Callback fired when the component is exiting. | +| onExited | Function | | Callback fired when the component has exited. | Any other properties supplied will be spread to the root element. ## Classes diff --git a/docs/src/pages/component-demos/buttons/IconButtons.js b/docs/src/pages/component-demos/buttons/IconButtons.js index 382d393cb2a29a..5dff285c494431 100644 --- a/docs/src/pages/component-demos/buttons/IconButtons.js +++ b/docs/src/pages/component-demos/buttons/IconButtons.js @@ -3,9 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles, createStyleSheet } from 'material-ui/styles'; +import Icon from 'material-ui/Icon'; import IconButton from 'material-ui/IconButton'; import DeleteIcon from 'material-ui-icons/Delete'; -import AlarmIcon from 'material-ui-icons/Alarm'; import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart'; const styleSheet = createStyleSheet('IconButtons', (theme) => ({ @@ -25,7 +25,7 @@ function IconButtons(props) { - + alarm diff --git a/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js b/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js index bc52af3d8bb2a0..b27f2f91c06578 100644 --- a/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js @@ -47,7 +47,7 @@ class ConfirmationDialog extends Component { } } - radioGroup = undefined; + radioGroup = null; handleEntering = () => { this.radioGroup.focus(); @@ -77,7 +77,7 @@ class ConfirmationDialog extends Component { Phone Ringtone { this.radioGroup = node; }} + innerRef={(node) => { this.radioGroup = node; }} aria-label="Gender" name="gender" selectedValue={this.state.selectedValue} diff --git a/docs/src/pages/component-demos/tables/EnhancedTable.js b/docs/src/pages/component-demos/tables/EnhancedTable.js index 61473f5c8a60b2..8f0159c2f204be 100644 --- a/docs/src/pages/component-demos/tables/EnhancedTable.js +++ b/docs/src/pages/component-demos/tables/EnhancedTable.js @@ -48,15 +48,14 @@ class EnhancedTableHead extends Component { } render() { - const { order, orderBy } = this.props; + const { onSelectAllClick, order, orderBy } = this.props; return ( - + - {columnData.map((column) => { return ( { - return { - root: { - paddingRight: 2, - }, - highlight: ( - theme.palette.type === 'light' ? { - color: theme.palette.accent[800], - backgroundColor: theme.palette.accent[50], - } : { - color: theme.palette.accent[50], - backgroundColor: theme.palette.accent[800], - } - ), - spacer: { - flex: '1 1 100%', - }, - actions: { - color: theme.palette.text.secondary, - }, - title: { - flex: '0 0 auto', - }, - }; -}); +const toolbarStyleSheet = createStyleSheet('EnhancedTableToolbar', (theme) => ({ + root: { + paddingRight: 2, + }, + highlight: ( + theme.palette.type === 'light' ? { + color: theme.palette.accent[800], + backgroundColor: theme.palette.accent[50], + } : { + color: theme.palette.accent[50], + backgroundColor: theme.palette.accent[800], + } + ), + spacer: { + flex: '1 1 100%', + }, + actions: { + color: theme.palette.text.secondary, + }, + title: { + flex: '0 0 auto', + }, +})); let EnhancedTableToolbar = (props) => { const { numSelected, classes } = props; @@ -187,6 +184,7 @@ class EnhancedTable extends Component { handleSelectAllClick = (event, checked) => { if (checked) { this.setState({ selected: this.state.data.map((n) => n.id) }); + return; } this.setState({ selected: [] }); }; diff --git a/docs/src/pages/customization/api.md b/docs/src/pages/customization/api.md index ced8a543447c3b..5dce7fb2a5ace5 100644 --- a/docs/src/pages/customization/api.md +++ b/docs/src/pages/customization/api.md @@ -22,13 +22,13 @@ Under this condition, providing explicit properties makes the implementation sim ## Rules -Aside from the above composition trade-off, we use the following rules: +Aside from the above composition trade-off, we enforce the following rules: - Undocumented properties supplied are spread to the root element. -- We avoid documenting native properties supported by the DOM. +- We avoid documenting native properties natively supported by the DOM like `className`. - All the components accept a `classes` property to customize the style. - Internal components have: - their own `xxxClassName` property when `classes` isn't enough. - - their own `xxxProps` property when users might need to tweak internal render method's components. For instance, we expose the `inputProps` and `InputProps` properties. + - their own `xxxProps` property when users might need to tweak internal render method's components. For instance, we expose a `inputProps` and a `InputProps` properties. - their own flattened properties when they are key to the abstraction. For instance, we expose a `value` property. - The name of the boolean properties should be chosen based on the default value. We are following the HTML specification. For instance, the `disabled` attribute on an input element. This choice allows the shorthand notation. diff --git a/package.json b/package.json index bdb5b4fb5bc315..9098c779683548 100644 --- a/package.json +++ b/package.json @@ -37,12 +37,12 @@ "start": "cd docs && npm start", "test": "npm run lint && npm run flow && npm run test:unit", "test:unit": "cross-env NODE_ENV=test mocha test/integration/{,**/}*.spec.js src/{,**/}*.spec.js", - "test:watch": "cross-env NODE_ENV=test mocha -w", + "test:watch": "yarn test:unit -- -w", "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/integration/{,**/}*.spec.js src/{,**/}*.spec.js && nyc report -r lcovonly", "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/integration/{,**/}*.spec.js src/{,**/}*.spec.js && nyc report --reporter=html", "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run", - "test:regressions": "webpack --config test/regressions/webpack.config.js && vrtest run --config test/vrtest.config.js", - "argos": "ARGOS_COMMIT=$CIRCLE_SHA1 ARGOS_BRANCH=$CIRCLE_BRANCH argos upload --ignore **/*.diff.png tmp/output/chrome --token $ARGOS_TOKEN || true", + "test:regressions": "webpack --config test/regressions/webpack.config.js && vrtest run --config test/vrtest.config.js --record", + "argos": "ARGOS_COMMIT=$CIRCLE_SHA1 ARGOS_BRANCH=$CIRCLE_BRANCH argos upload test/regressions/screenshots/chrome --token $ARGOS_TOKEN || true", "flow": "flow", "publish": "npm run build && cd build && npm publish --tag next" }, @@ -54,6 +54,7 @@ "babel-runtime": "^6.23.0", "classnames": "^2.2.5", "dom-helpers": "^3.2.1", + "hoist-non-react-statics": "^1.2.0", "jss-preset-default": "^1.3.1", "jss-theme-reactor": "^0.10.0", "keycode": "^2.1.9", diff --git a/scripts/build-api-docs.js b/scripts/build-api-docs.js index 081df4999a3bae..42c43d4eb7f354 100644 --- a/scripts/build-api-docs.js +++ b/scripts/build-api-docs.js @@ -5,7 +5,7 @@ import fs from 'fs'; import path from 'path'; import * as reactDocgen from 'react-docgen'; -import { generateMarkdown } from './generate-docs-markdown'; +import generateMarkdown from './generate-docs-markdown'; import createMuiTheme from '../src/styles/theme'; const theme = createMuiTheme(); diff --git a/scripts/generate-docs-markdown.js b/scripts/generate-docs-markdown.js index 96efff60eb1444..fc88d897079e79 100644 --- a/scripts/generate-docs-markdown.js +++ b/scripts/generate-docs-markdown.js @@ -120,6 +120,18 @@ function generatePropType(type) { } } +function getProp(props, key) { + switch (key) { + case 'classes': + return { + ...props[key], + required: false, + }; + default: + return props[key]; + } +} + function generateProps(props) { const header = '## Props'; @@ -130,7 +142,7 @@ function generateProps(props) { text = Object .keys(props) .reduce((textProps, key) => { - const prop = props[key]; + const prop = getProp(props, key); const description = generatePropDescription(prop.required, prop.description, prop.flowType || prop.type); @@ -179,7 +191,7 @@ If using the \`overrides\` key of the theme as documented you need to use the following style sheet name: \`${styles.name}\`.`; } -export function generateMarkdown(name, reactAPI) { +export default function generateMarkdown(name, reactAPI) { return `${ generateTitle(name)}\n${ generateDescription(reactAPI.description)}\n${ diff --git a/src/AppBar/AppBar.js b/src/AppBar/AppBar.js index 3f671ac50e511d..5707f61bb005e7 100644 --- a/src/AppBar/AppBar.js +++ b/src/AppBar/AppBar.js @@ -1,83 +1,80 @@ // @flow weak -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; import Paper from '../Paper'; -export const styleSheet = createStyleSheet('MuiAppBar', (theme) => { - return { - appBar: { - display: 'flex', - flexDirection: 'column', - width: '100%', - position: 'fixed', - top: 0, - left: 0, - zIndex: theme.zIndex.appBar, - }, - primary: { - backgroundColor: theme.palette.primary[500], - color: theme.palette.getContrastText(theme.palette.primary[500]), - }, - accent: { - backgroundColor: theme.palette.accent.A200, - color: theme.palette.getContrastText(theme.palette.accent.A200), - }, - }; -}); +export const styleSheet = createStyleSheet('MuiAppBar', (theme) => ({ + appBar: { + display: 'flex', + flexDirection: 'column', + width: '100%', + position: 'fixed', + top: 0, + left: 0, + zIndex: theme.zIndex.appBar, + }, + primary: { + backgroundColor: theme.palette.primary[500], + color: theme.palette.getContrastText(theme.palette.primary[500]), + }, + accent: { + backgroundColor: theme.palette.accent.A200, + color: theme.palette.getContrastText(theme.palette.accent.A200), + }, +})); -export default class AppBar extends Component { - static propTypes = { - /** - * If `true`, the AppBar will use the theme's accent color. - */ - accent: PropTypes.bool, - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * @ignore - */ - className: PropTypes.string, - }; +function AppBar(props) { + const { + accent, + children, + classes, + className: classNameProp, + ...other + } = props; - static defaultProps = { - accent: false, - }; + const className = classNames({ + [classes.appBar]: true, + [classes.primary]: !accent, + [classes.accent]: accent, + }, classNameProp); - static contextTypes = { - styleManager: customPropTypes.muiRequired, - }; - - render() { - const { - accent, - children, - className: classNameProp, - ...other - } = this.props; + return ( + + {children} + + ); +} - const classes = this.context.styleManager.render(styleSheet); +AppBar.propTypes = { + /** + * If `true`, the AppBar will use the theme's accent color. + */ + accent: PropTypes.bool, + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, +}; - const className = classNames({ - [classes.appBar]: true, - [classes.primary]: !accent, - [classes.accent]: accent, - }, classNameProp); +AppBar.defaultProps = { + accent: false, +}; - return ( - - {children} - - ); - } -} +export default withStyles(styleSheet)(AppBar); diff --git a/src/AppBar/AppBar.spec.js b/src/AppBar/AppBar.spec.js index e4cd1e5d529451..c5682fcd66dcb9 100644 --- a/src/AppBar/AppBar.spec.js +++ b/src/AppBar/AppBar.spec.js @@ -10,7 +10,7 @@ describe('', () => { let classes; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); classes = shallow.context.styleManager.render(styleSheet); }); diff --git a/src/AppBar/index.js b/src/AppBar/index.js index 7dc14affa3573a..9e81650cb423e5 100644 --- a/src/AppBar/index.js +++ b/src/AppBar/index.js @@ -1,2 +1,3 @@ // @flow + export { default } from './AppBar'; diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js index 32642aefa801d2..f8d538ded528aa 100644 --- a/src/Avatar/Avatar.js +++ b/src/Avatar/Avatar.js @@ -4,39 +4,38 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; import { emphasize } from '../styles/colorManipulator'; -export const styleSheet = createStyleSheet('MuiAvatar', (theme) => { - return { - root: { - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 40, - height: 40, - fontFamily: theme.typography.fontFamily, - fontSize: 20, - borderRadius: '50%', - overflow: 'hidden', - userSelect: 'none', - }, - defaultColor: { - color: theme.palette.background.default, - backgroundColor: emphasize(theme.palette.background.default, 0.26), - }, - img: { - maxWidth: '100%', - width: '100%', - height: 'auto', - }, - }; -}); +export const styleSheet = createStyleSheet('MuiAvatar', (theme) => ({ + root: { + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 40, + height: 40, + fontFamily: theme.typography.fontFamily, + fontSize: 20, + borderRadius: '50%', + overflow: 'hidden', + userSelect: 'none', + }, + defaultColor: { + color: theme.palette.background.default, + backgroundColor: emphasize(theme.palette.background.default, 0.26), + }, + img: { + maxWidth: '100%', + width: '100%', + height: 'auto', + }, +})); -export default function Avatar(props, context) { +function Avatar(props) { const { alt, + classes, className: classNameProp, children: childrenProp, childrenClassName: childrenClassNameProp, @@ -47,7 +46,6 @@ export default function Avatar(props, context) { ...other } = props; - const classes = context.styleManager.render(styleSheet); const className = classNames(classes.root, { [classes.defaultColor]: childrenProp && !src && !srcSet, }, classNameProp); @@ -102,6 +100,10 @@ Avatar.propTypes = { * Used by Chip and ListItemIcon to style the Avatar icon. */ childrenClassName: PropTypes.string, + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, /** * @ignore */ @@ -133,6 +135,4 @@ Avatar.defaultProps = { component: 'div', }; -Avatar.contextTypes = { - styleManager: customPropTypes.muiRequired, -}; +export default withStyles(styleSheet)(Avatar); diff --git a/src/Avatar/Avatar.spec.js b/src/Avatar/Avatar.spec.js index 2f80882ee58bf1..b51f3c9cef5556 100644 --- a/src/Avatar/Avatar.spec.js +++ b/src/Avatar/Avatar.spec.js @@ -11,7 +11,7 @@ describe('', () => { let classes; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); classes = shallow.context.styleManager.render(styleSheet); }); diff --git a/src/Avatar/index.js b/src/Avatar/index.js index f7a9c7009d1a38..333587b916bc05 100644 --- a/src/Avatar/index.js +++ b/src/Avatar/index.js @@ -1,2 +1,3 @@ // @flow + export { default } from './Avatar'; diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js index 559e2db574a9c5..f77b9ab12d105e 100644 --- a/src/Badge/Badge.js +++ b/src/Badge/Badge.js @@ -4,58 +4,49 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; -const radius = 12; +const RADIUS = 12; -export const styleSheet = createStyleSheet('MuiBadge', (theme) => { - return { - root: { - position: 'relative', - display: 'inline-block', - }, - badge: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - alignContent: 'center', - alignItems: 'center', - position: 'absolute', - top: -radius, - right: -radius, - fontFamily: theme.typography.fontFamily, - fontWeight: theme.typography.fontWeight, - fontSize: radius, - width: radius * 2, - height: radius * 2, - borderRadius: '50%', - backgroundColor: theme.palette.color, - color: theme.palette.textColor, - }, - primary: { - backgroundColor: theme.palette.primary[500], - color: theme.palette.getContrastText(theme.palette.primary[500]), - }, - accent: { - backgroundColor: theme.palette.accent.A200, - color: theme.palette.getContrastText(theme.palette.accent.A200), - }, - }; -}); +export const styleSheet = createStyleSheet('MuiBadge', (theme) => ({ + root: { + position: 'relative', + display: 'inline-block', + }, + badge: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + position: 'absolute', + top: -RADIUS, + right: -RADIUS, + fontFamily: theme.typography.fontFamily, + fontWeight: theme.typography.fontWeight, + fontSize: RADIUS, + width: RADIUS * 2, + height: RADIUS * 2, + borderRadius: '50%', + backgroundColor: theme.palette.color, + color: theme.palette.textColor, + }, + primary: { + backgroundColor: theme.palette.primary[500], + color: theme.palette.getContrastText(theme.palette.primary[500]), + }, + accent: { + backgroundColor: theme.palette.accent.A200, + color: theme.palette.getContrastText(theme.palette.accent.A200), + }, +})); -/** - * - * ```jsx - * - * folder - * - * ``` - */ -export default function Badge(props, context) { +function Badge(props) { const { badgeClassName: badgeClassNameProp, badgeContent, + classes, className: classNameProp, children, primary, @@ -63,7 +54,6 @@ export default function Badge(props, context) { ...other } = props; - const classes = context.styleManager.render(styleSheet); const className = classNames({ [classes.root]: true, }, classNameProp); @@ -100,6 +90,10 @@ Badge.propTypes = { * The badge will be added relative to this node. */ children: PropTypes.node.isRequired, + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, /** * @ignore */ @@ -115,6 +109,4 @@ Badge.defaultProps = { accent: false, }; -Badge.contextTypes = { - styleManager: customPropTypes.muiRequired, -}; +export default withStyles(styleSheet)(Badge); diff --git a/src/Badge/Badge.spec.js b/src/Badge/Badge.spec.js index 89fe0fe92eb144..4e30ebbcdc283f 100644 --- a/src/Badge/Badge.spec.js +++ b/src/Badge/Badge.spec.js @@ -10,7 +10,7 @@ describe('', () => { let classes; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); classes = shallow.context.styleManager.render(styleSheet); }); diff --git a/src/Badge/index.js b/src/Badge/index.js index 801465a812ac55..6111a6796f4267 100644 --- a/src/Badge/index.js +++ b/src/Badge/index.js @@ -1,2 +1,3 @@ // @flow + export { default } from './Badge'; diff --git a/src/BottomNavigation/BottomNavigation.js b/src/BottomNavigation/BottomNavigation.js index d3c8cc9f20b55f..1b9c2f7366f697 100644 --- a/src/BottomNavigation/BottomNavigation.js +++ b/src/BottomNavigation/BottomNavigation.js @@ -4,29 +4,28 @@ import React, { Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet('MuiBottomNavigation', (theme) => { - return { - root: { - display: 'flex', - justifyContent: 'center', - height: 56, - backgroundColor: theme.palette.background.paper, - }, - }; -}); +export const styleSheet = createStyleSheet('MuiBottomNavigation', (theme) => ({ + root: { + display: 'flex', + justifyContent: 'center', + height: 56, + backgroundColor: theme.palette.background.paper, + }, +})); -export default function BottomNavigation(props, context) { +function BottomNavigation(props) { const { children: childrenProp, + classes, className: classNameProp, index, onChange, showLabels, ...other } = props; - const classes = context.styleManager.render(styleSheet); + const className = classNames(classes.root, classNameProp); const children = Children.map(childrenProp, (child, childIndex) => { @@ -50,6 +49,10 @@ BottomNavigation.propTypes = { * The content of the component. */ children: PropTypes.node.isRequired, + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, /** * @ignore */ @@ -73,6 +76,4 @@ BottomNavigation.defaultProps = { showLabels: false, }; -BottomNavigation.contextTypes = { - styleManager: customPropTypes.muiRequired, -}; +export default withStyles(styleSheet)(BottomNavigation); diff --git a/src/BottomNavigation/BottomNavigation.spec.js b/src/BottomNavigation/BottomNavigation.spec.js index bd48b9a96e0302..aa18b9b145e50b 100644 --- a/src/BottomNavigation/BottomNavigation.spec.js +++ b/src/BottomNavigation/BottomNavigation.spec.js @@ -15,7 +15,7 @@ describe('', () => { const icon = restore; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); classes = shallow.context.styleManager.render(styleSheet); mount = createMount(); }); diff --git a/src/BottomNavigation/BottomNavigationButton.js b/src/BottomNavigation/BottomNavigationButton.js index 338868bb320a49..dea651261131e3 100644 --- a/src/BottomNavigation/BottomNavigationButton.js +++ b/src/BottomNavigation/BottomNavigationButton.js @@ -4,94 +4,53 @@ import React, { Component, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; import ButtonBase from '../internal/ButtonBase'; import Icon from '../Icon'; -export const styleSheet = createStyleSheet('MuiBottomNavigationButton', (theme) => { - return { - root: { - transition: theme.transitions.create(['color', 'padding-top'], { - duration: theme.transitions.duration.short, - }), - paddingTop: 8, - paddingBottom: 10, - paddingLeft: 12, - paddingRight: 12, - minWidth: 80, - maxWidth: 168, - background: 'none', - color: theme.palette.text.secondary, - flex: '1', - }, - selected: { - paddingTop: 6, - color: theme.palette.primary[500], - }, - selectedIconOnly: { - paddingTop: 16, - }, - label: { - fontFamily: theme.typography.fontFamily, - fontSize: theme.typography.fontSize - 2, - opacity: 1, - transition: 'font-size 0.2s, opacity 0.2s', - transitionDelay: '0.1s', - }, - selectedLabel: { - fontSize: theme.typography.fontSize, - }, - hiddenLabel: { - opacity: 0, - transitionDelay: '0s', - }, - icon: { - display: 'block', - margin: 'auto', - }, - }; -}); - -export default class BottomNavigationButton extends Component { - static propTypes = { - /** - * @ignore - */ - className: PropTypes.string, - /** - * The icon element. If a string is provided, it will be used as a font ligature. - */ - icon: PropTypes.node, - /** - * @ignore - */ - index: PropTypes.number, - /** - * The label element. - */ - label: PropTypes.node, - /** - * @ignore - */ - onChange: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, - /** - * @ignore - */ - selected: PropTypes.bool, - /** - * If `true`, the BottomNavigationButton will show its label. - */ - showLabel: PropTypes.bool, - }; - - static contextTypes = { - styleManager: customPropTypes.muiRequired, - }; +export const styleSheet = createStyleSheet('MuiBottomNavigationButton', (theme) => ({ + root: { + transition: theme.transitions.create(['color', 'padding-top'], { + duration: theme.transitions.duration.short, + }), + paddingTop: 8, + paddingBottom: 10, + paddingLeft: 12, + paddingRight: 12, + minWidth: 80, + maxWidth: 168, + background: 'none', + color: theme.palette.text.secondary, + flex: '1', + }, + selected: { + paddingTop: 6, + color: theme.palette.primary[500], + }, + selectedIconOnly: { + paddingTop: 16, + }, + label: { + fontFamily: theme.typography.fontFamily, + fontSize: theme.typography.fontSize - 2, + opacity: 1, + transition: 'font-size 0.2s, opacity 0.2s', + transitionDelay: '0.1s', + }, + selectedLabel: { + fontSize: theme.typography.fontSize, + }, + hiddenLabel: { + opacity: 0, + transitionDelay: '0s', + }, + icon: { + display: 'block', + margin: 'auto', + }, +})); +class BottomNavigationButton extends Component { handleChange = (event) => { const { onChange, index, onClick } = this.props; @@ -107,13 +66,13 @@ export default class BottomNavigationButton extends Component { label, icon: iconProp, selected, + classes, className: classNameProp, showLabel: showLabelProp, onChange, // eslint-disable-line no-unused-vars index, // eslint-disable-line no-unused-vars ...other } = this.props; - const classes = this.context.styleManager.render(styleSheet); const className = classNames(classes.root, { [classes.selected]: selected, @@ -147,3 +106,44 @@ export default class BottomNavigationButton extends Component { ); } } + +BottomNavigationButton.propTypes = { + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The icon element. If a string is provided, it will be used as a font ligature. + */ + icon: PropTypes.node, + /** + * @ignore + */ + index: PropTypes.number, + /** + * The label element. + */ + label: PropTypes.node, + /** + * @ignore + */ + onChange: PropTypes.func, + /** + * @ignore + */ + onClick: PropTypes.func, + /** + * @ignore + */ + selected: PropTypes.bool, + /** + * If `true`, the BottomNavigationButton will show its label. + */ + showLabel: PropTypes.bool, +}; + +export default withStyles(styleSheet)(BottomNavigationButton); diff --git a/src/BottomNavigation/BottomNavigationButton.spec.js b/src/BottomNavigation/BottomNavigationButton.spec.js index a87bfcf6171cd6..c97497ead2a6c5 100644 --- a/src/BottomNavigation/BottomNavigationButton.spec.js +++ b/src/BottomNavigation/BottomNavigationButton.spec.js @@ -13,7 +13,7 @@ describe('', () => { const icon = restore; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); classes = shallow.context.styleManager.render(styleSheet); }); @@ -58,7 +58,7 @@ describe('', () => { const wrapper = shallow(); const iconWrapper = wrapper.childAt(0); - assert.strictEqual(iconWrapper.is('Icon'), true, 'should be an Icon'); + assert.strictEqual(iconWrapper.is(Icon), true, 'should be an Icon'); assert.strictEqual(iconWrapper.hasClass(classes.icon), true, 'should have the icon class'); const labelWrapper = wrapper.childAt(1); @@ -83,7 +83,7 @@ describe('', () => { it('should render a font icon if a icon string is provided', () => { const wrapper = shallow(); const iconWrapper = wrapper.childAt(0); - assert.strictEqual(iconWrapper.is('Icon'), true, 'should be an Icon'); + assert.strictEqual(iconWrapper.is(Icon), true, 'should be an Icon'); }); describe('prop: onClick', () => { diff --git a/src/BottomNavigation/index.js b/src/BottomNavigation/index.js index 46d5ddb69685a0..55c814bfd89ac7 100644 --- a/src/BottomNavigation/index.js +++ b/src/BottomNavigation/index.js @@ -1,3 +1,4 @@ // @flow + export { default } from './BottomNavigation'; export { default as BottomNavigationButton } from './BottomNavigationButton'; diff --git a/src/Button/Button.js b/src/Button/Button.js index 20f6c9249c7253..09ab2b663d91be 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -1,259 +1,252 @@ // @flow weak -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { createStyleSheet } from 'jss-theme-reactor'; -import customPropTypes from '../utils/customPropTypes'; +import withStyles from '../styles/withStyles'; import { fade } from '../styles/colorManipulator'; import ButtonBase from '../internal/ButtonBase'; -export const styleSheet = createStyleSheet('MuiButton', (theme) => { - return { - root: { - fontSize: theme.typography.fontSize, - fontWeight: theme.typography.fontWeightMedium, - fontFamily: theme.typography.fontFamily, - textTransform: 'uppercase', - display: 'inline-flex', - alignItems: 'center', - justifyContent: 'center', - boxSizing: 'border-box', - minWidth: 88, - height: 36, - padding: '0px 16px', - borderRadius: 2, - color: theme.palette.text.primary, - backgroundColor: 'transparent', - transition: theme.transitions.create(['background-color', 'box-shadow'], { - duration: theme.transitions.duration.short, - }), - '&:hover': { - textDecoration: 'none', - backgroundColor: fade(theme.palette.text.primary, 0.12), - '&$disabled': { - backgroundColor: 'transparent', - }, +export const styleSheet = createStyleSheet('MuiButton', (theme) => ({ + root: { + fontSize: theme.typography.fontSize, + fontWeight: theme.typography.fontWeightMedium, + fontFamily: theme.typography.fontFamily, + textTransform: 'uppercase', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + boxSizing: 'border-box', + minWidth: 88, + height: 36, + padding: '0px 16px', + borderRadius: 2, + color: theme.palette.text.primary, + backgroundColor: 'transparent', + transition: theme.transitions.create(['background-color', 'box-shadow'], { + duration: theme.transitions.duration.short, + }), + '&:hover': { + textDecoration: 'none', + backgroundColor: fade(theme.palette.text.primary, 0.12), + '&$disabled': { + backgroundColor: 'transparent', }, }, - compact: { - padding: '0 8px', - minWidth: 64, + }, + compact: { + padding: '0 8px', + minWidth: 64, + }, + label: { + width: '100%', + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', + }, + primary: { + color: theme.palette.primary[500], + '&:hover': { + backgroundColor: fade(theme.palette.primary[500], 0.12), }, - label: { - width: '100%', - display: 'inherit', - alignItems: 'inherit', - justifyContent: 'inherit', + }, + accent: { + color: theme.palette.accent.A200, + '&:hover': { + backgroundColor: fade(theme.palette.accent.A200, 0.12), }, - primary: { - color: theme.palette.primary[500], - '&:hover': { - backgroundColor: fade(theme.palette.primary[500], 0.12), - }, + }, + contrast: { + color: theme.palette.getContrastText(theme.palette.primary[500]), + '&:hover': { + backgroundColor: fade(theme.palette.getContrastText(theme.palette.primary[500]), 0.12), }, - accent: { - color: theme.palette.accent.A200, - '&:hover': { - backgroundColor: fade(theme.palette.accent.A200, 0.12), - }, + }, + raised: { + color: theme.palette.getContrastText(theme.palette.grey[300]), + backgroundColor: theme.palette.grey[300], + boxShadow: theme.shadows[2], + '&$keyboardFocused': { + boxShadow: theme.shadows[6], }, - contrast: { - color: theme.palette.getContrastText(theme.palette.primary[500]), - '&:hover': { - backgroundColor: fade(theme.palette.getContrastText(theme.palette.primary[500]), 0.12), - }, + '&:active': { + boxShadow: theme.shadows[8], }, - raised: { - color: theme.palette.getContrastText(theme.palette.grey[300]), - backgroundColor: theme.palette.grey[300], - boxShadow: theme.shadows[2], - '&$keyboardFocused': { - boxShadow: theme.shadows[6], - }, - '&:active': { - boxShadow: theme.shadows[8], - }, + '&$disabled': { + boxShadow: theme.shadows[0], + backgroundColor: theme.palette.text.divider, + }, + '&:hover': { + backgroundColor: theme.palette.grey.A100, '&$disabled': { - boxShadow: theme.shadows[0], backgroundColor: theme.palette.text.divider, }, - '&:hover': { - backgroundColor: theme.palette.grey.A100, - '&$disabled': { - backgroundColor: theme.palette.text.divider, - }, - }, }, - keyboardFocused: {}, - raisedPrimary: { - color: theme.palette.getContrastText(theme.palette.primary[500]), - backgroundColor: theme.palette.primary[500], - '&:hover': { - backgroundColor: theme.palette.primary[700], - }, - }, - raisedAccent: { - color: theme.palette.getContrastText(theme.palette.accent.A200), - backgroundColor: theme.palette.accent.A200, - '&:hover': { - backgroundColor: theme.palette.accent.A400, - }, - }, - raisedContrast: { - color: theme.palette.getContrastText(theme.palette.primary[500]), + }, + keyboardFocused: {}, + raisedPrimary: { + color: theme.palette.getContrastText(theme.palette.primary[500]), + backgroundColor: theme.palette.primary[500], + '&:hover': { + backgroundColor: theme.palette.primary[700], }, - disabled: { - color: theme.palette.action.disabled, + }, + raisedAccent: { + color: theme.palette.getContrastText(theme.palette.accent.A200), + backgroundColor: theme.palette.accent.A200, + '&:hover': { + backgroundColor: theme.palette.accent.A400, }, - fab: { - borderRadius: '50%', - padding: 0, - minWidth: 0, - width: 56, - height: 56, - boxShadow: theme.shadows[6], - '&:active': { - boxShadow: theme.shadows[12], - }, + }, + raisedContrast: { + color: theme.palette.getContrastText(theme.palette.primary[500]), + }, + disabled: { + color: theme.palette.action.disabled, + }, + fab: { + borderRadius: '50%', + padding: 0, + minWidth: 0, + width: 56, + height: 56, + boxShadow: theme.shadows[6], + '&:active': { + boxShadow: theme.shadows[12], }, - }; -}); + }, +})); -/** - * ```jsx - * - * ``` - */ -export default class Button extends Component { - static propTypes = { - /** - * If `true`, the button will use the theme's accent color. - */ - accent: PropTypes.bool, - /** - * The content of the button. - */ - children: PropTypes.node.isRequired, - /** - * @ignore - */ - className: PropTypes.string, - /** - * Uses a smaller minWidth, ideal for things like card actions. - */ - compact: PropTypes.bool, - /** - * The component used for the root node. - * Either a string to use a DOM element or a component. - */ - component: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - ]), - /** - * If `true`, the button will use the theme's contrast color. - */ - contrast: PropTypes.bool, - /** - * If `true`, the button will be disabled. - */ - disabled: PropTypes.bool, - /** - * If `true`, the keyboard focus ripple will be disabled. - * `ripple` must also be true. - */ - disableFocusRipple: PropTypes.bool, - /** - * If `true`, the ripple effect will be disabled. - */ - disableRipple: PropTypes.bool, - /** - * If `true`, well use floating action button styling. - */ - fab: 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`, the button will use the theme's primary color. - */ - primary: PropTypes.bool, - /** - * If `true`, the button will use raised styling. - */ - raised: PropTypes.bool, - /** - * @ignore - */ - type: PropTypes.string, - }; +function Button(props) { + const { + accent, + children, + classes, + className: classNameProp, + compact, + contrast, + disabled, + disableFocusRipple, + disableRipple, + fab, + primary, + raised, + ...other + } = props; - static defaultProps = { - accent: false, - component: 'button', - compact: false, - contrast: false, - disabled: false, - fab: false, - disableFocusRipple: false, - primary: false, - raised: false, - disableRipple: false, - type: 'button', - }; + const flat = !raised && !fab; + const className = classNames({ + [classes.root]: true, + [classes.raised]: raised || fab, + [classes.fab]: fab, + [classes.primary]: flat && primary, + [classes.accent]: flat && accent, + [classes.contrast]: flat && contrast, + [classes.raisedPrimary]: !flat && primary, + [classes.raisedAccent]: !flat && accent, + [classes.raisedContrast]: !flat && contrast, + [classes.compact]: compact, + [classes.disabled]: disabled, + }, classNameProp); - static contextTypes = { - styleManager: customPropTypes.muiRequired, - }; + return ( + + + {children} + + + ); +} - render() { - const { - accent, - children, - className: classNameProp, - compact, - contrast, - disabled, - disableFocusRipple, - disableRipple, - fab, - primary, - raised, - ...other - } = this.props; +Button.propTypes = { + /** + * If `true`, the button will use the theme's accent color. + */ + accent: PropTypes.bool, + /** + * 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, + /** + * Uses a smaller minWidth, ideal for things like card actions. + */ + compact: PropTypes.bool, + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ + component: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + ]), + /** + * If `true`, the button will use the theme's contrast color. + */ + contrast: PropTypes.bool, + /** + * If `true`, the button will be disabled. + */ + disabled: PropTypes.bool, + /** + * If `true`, the keyboard focus ripple will be disabled. + * `ripple` must also be true. + */ + disableFocusRipple: PropTypes.bool, + /** + * If `true`, the ripple effect will be disabled. + */ + disableRipple: PropTypes.bool, + /** + * If `true`, well use floating action button styling. + */ + fab: 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`, the button will use the theme's primary color. + */ + primary: PropTypes.bool, + /** + * If `true`, the button will use raised styling. + */ + raised: PropTypes.bool, + /** + * @ignore + */ + type: PropTypes.string, +}; - const classes = this.context.styleManager.render(styleSheet); - const flat = !raised && !fab; - const className = classNames({ - [classes.root]: true, - [classes.raised]: raised || fab, - [classes.fab]: fab, - [classes.primary]: flat && primary, - [classes.accent]: flat && accent, - [classes.contrast]: flat && contrast, - [classes.raisedPrimary]: !flat && primary, - [classes.raisedAccent]: !flat && accent, - [classes.raisedContrast]: !flat && contrast, - [classes.compact]: compact, - [classes.disabled]: disabled, - }, classNameProp); +Button.defaultProps = { + accent: false, + component: 'button', + compact: false, + contrast: false, + disabled: false, + fab: false, + disableFocusRipple: false, + primary: false, + raised: false, + disableRipple: false, + type: 'button', +}; - return ( - - - {children} - - - ); - } -} +export default withStyles(styleSheet)(Button); diff --git a/src/Button/Button.spec.js b/src/Button/Button.spec.js index ed05862242aebe..3ab432553a81c1 100644 --- a/src/Button/Button.spec.js +++ b/src/Button/Button.spec.js @@ -12,7 +12,7 @@ describe('