[Table] Add table-footer-group CSS (#11264)

* [TableFooter] add classes to component prop

* test: [TableFooter] update test to include root classes test

* doc: [TableFooter] update doc

* ready to be merged :)

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 <Component className={classNames(classes.root, classNameProp)} {...other} />;
+    return <Component className={classNames(classes.root, className)} {...other} />;
   }
 }
 

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 <Component className={classNames(classes.root, classNameProp)} {...other} />;
+    return <Component className={classNames(classes.root, className)} {...other} />;
   }
 }
 

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<TableFooterBaseProps, TableFooterClassKey> {
   component?: React.ReactType<TableFooterBaseProps>;
 }
 
+export type TableFooterClassKey = 'root';
+
 export type TableFooterBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 declare const TableFooter: React.ComponentType<TableFooterProps>;

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 <Component {...other} />;
+    return <Component className={classNames(classes.root, className)} {...other} />;
   }
 }
 
@@ -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);

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('<TableFooter />', () => {
   let shallow;
+  let classes;
 
   before(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<TableFooter />);
   });
 
   it('should render a tfoot', () => {
@@ -20,9 +22,10 @@ describe('<TableFooter />', () => {
     assert.strictEqual(wrapper.name(), 'div');
   });
 
-  it('should render with the user class', () => {
+  it('should render with the user and root class', () => {
     const wrapper = shallow(<TableFooter className="woofTableHead" />);
     assert.strictEqual(wrapper.hasClass('woofTableHead'), true);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 
   it('should render children', () => {

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 <Component className={classNames(classes.root, classNameProp)} {...other} />;
+    return <Component className={classNames(classes.root, className)} {...other} />;
   }
 }
 

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';

pages/api/table-footer.md

@@ -13,6 +13,7 @@ filename: /packages/material-ui/src/Table/TableFooter.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component, normally `TableRow`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 | <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'tfoot'</span> | 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).