diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index f0d38c350c762b..0cc515d2ad3c8c 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -22,9 +22,9 @@ class Table extends React.Component { } render() { - const { classes, className: classNameProp, component: Component, ...other } = this.props; + const { classes, className, component: Component, ...other } = this.props; - return ; + return ; } } diff --git a/packages/material-ui/src/Table/TableBody.js b/packages/material-ui/src/Table/TableBody.js index 07c0c14f339274..a1bed0f9db4a3c 100644 --- a/packages/material-ui/src/Table/TableBody.js +++ b/packages/material-ui/src/Table/TableBody.js @@ -20,9 +20,9 @@ class TableBody extends React.Component { } render() { - const { classes, className: classNameProp, component: Component, ...other } = this.props; + const { classes, className, component: Component, ...other } = this.props; - return ; + return ; } } diff --git a/packages/material-ui/src/Table/TableFooter.d.ts b/packages/material-ui/src/Table/TableFooter.d.ts index 34c71d8f172f47..853fe875ad9424 100644 --- a/packages/material-ui/src/Table/TableFooter.d.ts +++ b/packages/material-ui/src/Table/TableFooter.d.ts @@ -1,9 +1,12 @@ import * as React from 'react'; +import { StandardProps } from '..'; -export interface TableFooterProps extends TableFooterBaseProps { +export interface TableFooterProps extends StandardProps { component?: React.ReactType; } +export type TableFooterClassKey = 'root'; + export type TableFooterBaseProps = React.HTMLAttributes; declare const TableFooter: React.ComponentType; diff --git a/packages/material-ui/src/Table/TableFooter.js b/packages/material-ui/src/Table/TableFooter.js index 910e9a04a6ce02..28095be7d68d75 100644 --- a/packages/material-ui/src/Table/TableFooter.js +++ b/packages/material-ui/src/Table/TableFooter.js @@ -1,5 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import withStyles from '../styles/withStyles'; + +const styles = { + root: { + display: 'table-footer-group', + }, +}; class TableFooter extends React.Component { getChildContext() { @@ -12,9 +20,9 @@ class TableFooter extends React.Component { } render() { - const { component: Component, ...other } = this.props; + const { classes, className, component: Component, ...other } = this.props; - return ; + return ; } } @@ -23,6 +31,14 @@ TableFooter.propTypes = { * The content of the component, normally `TableRow`. */ children: PropTypes.node, + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -38,4 +54,4 @@ TableFooter.childContextTypes = { table: PropTypes.object, }; -export default TableFooter; +export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter); diff --git a/packages/material-ui/src/Table/TableFooter.test.js b/packages/material-ui/src/Table/TableFooter.test.js index 643ba1740a6426..5622f91c1b362f 100644 --- a/packages/material-ui/src/Table/TableFooter.test.js +++ b/packages/material-ui/src/Table/TableFooter.test.js @@ -1,13 +1,15 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow } from '../test-utils'; +import { createShallow, getClasses } from '../test-utils'; import TableFooter from './TableFooter'; describe('', () => { let shallow; + let classes; before(() => { - shallow = createShallow(); + shallow = createShallow({ dive: true }); + classes = getClasses(); }); it('should render a tfoot', () => { @@ -20,9 +22,10 @@ describe('', () => { assert.strictEqual(wrapper.name(), 'div'); }); - it('should render with the user class', () => { + it('should render with the user and root class', () => { const wrapper = shallow(); assert.strictEqual(wrapper.hasClass('woofTableHead'), true); + assert.strictEqual(wrapper.hasClass(classes.root), true); }); it('should render children', () => { diff --git a/packages/material-ui/src/Table/TableHead.js b/packages/material-ui/src/Table/TableHead.js index d98a174118da65..7a52ddae71ecc0 100644 --- a/packages/material-ui/src/Table/TableHead.js +++ b/packages/material-ui/src/Table/TableHead.js @@ -20,9 +20,9 @@ class TableHead extends React.Component { } render() { - const { classes, className: classNameProp, component: Component, ...other } = this.props; + const { classes, className, component: Component, ...other } = this.props; - return ; + return ; } } diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index 9da73e80a80370..98c231dc565be8 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/packages/material-ui/src/styles/overrides.d.ts @@ -2,12 +2,12 @@ import { AppBarClassKey } from '../AppBar/AppBar'; import { AvatarClassKey } from '../Avatar/Avatar'; import { BackdropClassKey } from '../Modal/Backdrop'; import { BadgeClassKey } from '../Badge/Badge'; -import { BottomNavigationClassKey } from '../BottomNavigation/BottomNavigation'; import { BottomNavigationActionClassKey } from '../BottomNavigation/BottomNavigationAction'; -import { ButtonClassKey } from '../Button/Button'; +import { BottomNavigationClassKey } from '../BottomNavigation/BottomNavigation'; import { ButtonBaseClassKey } from '../ButtonBase/ButtonBase'; -import { CardClassKey } from '../Card/Card'; +import { ButtonClassKey } from '../Button/Button'; import { CardActionsClassKey } from '../Card/CardActions'; +import { CardClassKey } from '../Card/Card'; import { CardContentClassKey } from '../Card/CardContent'; import { CardHeaderClassKey } from '../Card/CardHeader'; import { CardMediaClassKey } from '../Card/CardMedia'; @@ -62,8 +62,8 @@ import { SelectClassKey } from '../Select/Select'; import { SelectInputClassKey } from '../Select/SelectInput'; import { SnackbarClassKey } from '../Snackbar/Snackbar'; import { SnackbarContentClassKey } from '../Snackbar/SnackbarContent'; -import { StepClasskey } from '../Stepper/Step'; import { StepButtonClasskey } from '../Stepper/StepButton'; +import { StepClasskey } from '../Stepper/Step'; import { StepContentClasskey } from '../Stepper/StepContent'; import { StepIconClasskey } from '../Stepper/StepIcon'; import { StepLabelClasskey } from '../Stepper/StepLabel'; @@ -73,8 +73,11 @@ import { SvgIconClassKey } from '../SvgIcon/SvgIcon'; import { SwitchBaseClassKey } from '../internal/SwitchBase'; import { SwitchClassKey } from '../Switch/Switch'; import { TabClassKey } from '../Tabs/Tab'; -import { TableClassKey } from '../Table/Table'; +import { TableBodyClassKey } from '../Table/TableBody'; import { TableCellClassKey } from '../Table/TableCell'; +import { TableClassKey } from '../Table/Table'; +import { TableFooterClassKey } from '../Table/TableFooter'; +import { TableHeadClassKey } from '../Table/TableHead'; import { TablePaginationClassKey } from '../Table/TablePagination'; import { TableRowClassKey } from '../Table/TableRow'; import { TableSortLabelClassKey } from '../Table/TableSortLabel'; diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md index e700104a55e9ed..99bb2661b38030 100644 --- a/pages/api/table-footer.md +++ b/pages/api/table-footer.md @@ -13,6 +13,7 @@ filename: /packages/material-ui/src/Table/TableFooter.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component, normally `TableRow`. | +| classes | object | | Useful to extend the style applied to components. | | component | union: string |
 func
| 'tfoot' | The component used for the root node. Either a string to use a DOM element or a component. | Any other properties supplied will be [spread to the root element](/guides/api#spread).