[TableCell] Add type property (#9852)

pages/api/table-body.md

@@ -13,25 +13,10 @@ filename: /src/Table/TableBody.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | node |  | The content of the component, normally `TableRow`. |
-| classes | object |  | Useful to extend the style applied to components. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'tbody' | 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).
 
-## CSS API
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-- `root`
-
-Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Table/TableBody.js)
-for more detail.
-
-If using the `overrides` key of the theme as documented
-[here](/customization/themes#customizing-all-instances-of-a-component-type),
-you need to use the following style sheet name: `MuiTableBody`.
-
 ## Demos
 
 - [Tables](/demos/tables)

pages/api/table-cell.md

@@ -18,6 +18,7 @@ filename: /src/Table/TableCell.js
 | numeric | bool | false | If `true`, content will align to the right. |
 | padding | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | 'default' | Sets the padding applied to the cell. |
 | sortDirection | enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br> |  | Set aria-sort direction. |
+| type | enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br> |  | Specify the cell type. By default, the parent TableHead, TableBody or TableFooter parent component set the value. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
@@ -27,11 +28,12 @@ You can override all the class names injected by Material-UI thanks to the `clas
 This property accepts the following keys:
 - `root`
 - `numeric`
-- `head`
+- `typeHead`
+- `typeBody`
+- `typeFooter`
 - `paddingDefault`
 - `paddingDense`
 - `paddingCheckbox`
-- `footer`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Table/TableCell.js)

pages/api/table-footer.md

@@ -13,25 +13,10 @@ filename: /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:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | '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).
 
-## CSS API
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-- `root`
-
-Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Table/TableFooter.js)
-for more detail.
-
-If using the `overrides` key of the theme as documented
-[here](/customization/themes#customizing-all-instances-of-a-component-type),
-you need to use the following style sheet name: `MuiTableFooter`.
-
 ## Demos
 
 - [Tables](/demos/tables)

pages/api/table-head.md

@@ -13,25 +13,10 @@ filename: /src/Table/TableHead.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | node |  | The content of the component, normally `TableRow`. |
-| classes | object |  | Useful to extend the style applied to components. |
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'thead' | 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).
 
-## CSS API
-
-You can override all the class names injected by Material-UI thanks to the `classes` property.
-This property accepts the following keys:
-- `root`
-
-Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
-and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Table/TableHead.js)
-for more detail.
-
-If using the `overrides` key of the theme as documented
-[here](/customization/themes#customizing-all-instances-of-a-component-type),
-you need to use the following style sheet name: `MuiTableHead`.
-
 ## Demos
 
 - [Tables](/demos/tables)

src/ExpansionPanel/ExpansionPanel.d.ts

@@ -3,7 +3,8 @@ import { StandardProps } from '..';
 import { CollapseProps } from '../transitions/Collapse';
 import { PaperProps, PaperClassKey } from '../Paper';
 
-export interface ExpansionPanelProps extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
+export interface ExpansionPanelProps
+  extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
   CollapseProps?: React.ComponentType<CollapseProps>;
   defaultExpanded?: boolean;
   disabled?: boolean;

src/Table/TableBody.d.ts

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { StandardProps } from '..';
 
-export interface TableBodyProps extends StandardProps<TableBodyBaseProps, TableBodyClassKey> {
+export interface TableBodyProps extends TableBodyBaseProps {
   component?: React.ReactType<TableBodyBaseProps>;
 }
 
 export type TableBodyBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-export type TableBodyClassKey = 'root';
-
 declare const TableBody: React.ComponentType<TableBodyProps>;
 
 export default TableBody;

src/Table/TableBody.js

@@ -1,14 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
-
-export const styles = theme => ({
-  root: {
-    fontSize: theme.typography.pxToRem(13),
-    color: theme.palette.text.primary,
-  },
-});
 
 class TableBody extends React.Component {
   getChildContext() {
@@ -21,20 +12,9 @@ class TableBody extends React.Component {
   }
 
   render() {
-    const {
-      children,
-      classes,
-      className: classNameProp,
-      component: ComponentProp,
-      ...other
-    } = this.props;
-    const className = classNames(classes.root, classNameProp);
+    const { children, component: ComponentProp, ...other } = this.props;
 
-    return (
-      <ComponentProp className={className} {...other}>
-        {children}
-      </ComponentProp>
-    );
+    return <ComponentProp {...other}>{children}</ComponentProp>;
   }
 }
 
@@ -43,14 +23,6 @@ TableBody.propTypes = {
    * The content of the component, normally `TableRow`.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * 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.
@@ -66,4 +38,4 @@ TableBody.childContextTypes = {
   table: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
+export default TableBody;

src/Table/TableBody.spec.js

@@ -2,16 +2,14 @@
 
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createShallow } from '../test-utils';
 import TableBody from './TableBody';
 
 describe('<TableBody />', () => {
   let shallow;
-  let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
-    classes = getClasses(<TableBody>foo</TableBody>);
+    shallow = createShallow();
   });
 
   it('should render a tbody', () => {
@@ -24,10 +22,9 @@ describe('<TableBody />', () => {
     assert.strictEqual(wrapper.name(), 'div');
   });
 
-  it('should render with the user and root classes', () => {
+  it('should render with the user and class', () => {
     const wrapper = shallow(<TableBody className="woofTableBody">foo</TableBody>);
     assert.strictEqual(wrapper.hasClass('woofTableBody'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 
   it('should render children', () => {

src/Table/TableCell.d.ts

@@ -13,13 +13,16 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, TableC
   component?: React.ReactType<TableCellBaseProps>;
   padding?: Padding;
   numeric?: boolean;
+  type?: Type;
 }
 
 export type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableHeaderCellElement> &
   React.TdHTMLAttributes<HTMLTableDataCellElement>;
 
 export type Padding = 'default' | 'checkbox' | 'dense' | 'none';
 
+export type Type = 'head' | 'body' | 'footer';
+
 export type TableCellClassKey =
   | 'root'
   | 'numeric'

src/Table/TableCell.js

@@ -21,10 +21,21 @@ export const styles = theme => ({
     textAlign: 'right',
     flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
   },
-  head: {
+  typeHead: {
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(12),
     fontWeight: theme.typography.fontWeightMedium,
     position: 'relative', // Workaround for Tooltip positioning issue.
   },
+  typeBody: {
+    fontSize: theme.typography.pxToRem(13),
+    color: theme.palette.text.primary,
+  },
+  typeFooter: {
+    borderBottom: 0,
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.pxToRem(12),
+  },
   paddingDefault: {
     padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
       2}px ${theme.spacing.unit * 3}px`,
@@ -38,9 +49,6 @@ export const styles = theme => ({
   paddingCheckbox: {
     padding: '0 12px',
   },
-  footer: {
-    borderBottom: 0,
-  },
 });
 
 function TableCell(props, context) {
@@ -52,6 +60,7 @@ function TableCell(props, context) {
     sortDirection,
     numeric,
     padding,
+    type,
     ...other
   } = props;
   const { table } = context;
@@ -69,8 +78,9 @@ function TableCell(props, context) {
       [classes[`padding${capitalizeFirstLetter(padding)}`]]:
         padding !== 'none' && padding !== 'default',
       [classes.paddingDefault]: padding !== 'none',
-      [classes.head]: table && table.head,
-      [classes.footer]: table && table.footer,
+      [classes.typeHead]: type ? type === 'head' : table && table.head,
+      [classes.typeBody]: type ? type === 'body' : table && table.body,
+      [classes.typeFooter]: type ? type === 'footer' : table && table.footer,
     },
     classNameProp,
   );
@@ -117,6 +127,11 @@ TableCell.propTypes = {
    * Set aria-sort direction.
    */
   sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
+  /**
+   * Specify the cell type.
+   * By default, the parent TableHead, TableBody or TableFooter parent component set the value.
+   */
+  type: PropTypes.oneOf(['head', 'body', 'footer']),
 };
 
 TableCell.defaultProps = {

src/Table/TableCell.spec.js

@@ -75,15 +75,15 @@ describe('<TableCell />', () => {
     wrapper.setContext({ table: { head: true } });
     assert.strictEqual(wrapper.name(), 'th');
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class');
+    assert.strictEqual(wrapper.hasClass(classes.typeHead), true, 'should have the head class');
   });
 
   it('should render a th with the footer class when in the context of a table footer', () => {
     const wrapper = shallow(<TableCell />);
     wrapper.setContext({ table: { footer: true } });
     assert.strictEqual(wrapper.name(), 'td');
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
+    assert.strictEqual(wrapper.hasClass(classes.typeFooter), true, 'should have the footer class');
   });
 
   it('should render a div when custom component prop is used', () => {
@@ -96,7 +96,35 @@ describe('<TableCell />', () => {
     const wrapper = shallow(<TableCell />);
     wrapper.setContext({ table: { footer: true } });
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class');
+    assert.strictEqual(wrapper.hasClass(classes.typeFooter), true, 'should have the footer class');
+  });
+
+  it('should render with the head class when type is head, overriding context', () => {
+    const wrapper = shallow(<TableCell />);
+    wrapper.setContext({ table: { footer: true } });
+    wrapper.setProps({ type: 'head' });
+    assert.strictEqual(wrapper.hasClass(classes.typeHead), true);
+  });
+
+  it('should render without head class when type is body, overriding context', () => {
+    const wrapper = shallow(<TableCell />);
+    wrapper.setContext({ table: { head: true } });
+    wrapper.setProps({ type: 'body' });
+    assert.strictEqual(wrapper.hasClass(classes.typeHead), false);
+  });
+
+  it('should render without footer class when type is body, overriding context', () => {
+    const wrapper = shallow(<TableCell />);
+    wrapper.setContext({ table: { footer: true } });
+    wrapper.setProps({ type: 'body' });
+    assert.strictEqual(wrapper.hasClass(classes.typeFooter), false);
+  });
+
+  it('should render with the footer class when type is footer, overriding context', () => {
+    const wrapper = shallow(<TableCell />);
+    wrapper.setContext({ table: { head: true } });
+    wrapper.setProps({ type: 'footer' });
+    assert.strictEqual(wrapper.hasClass(classes.typeFooter), true);
   });
 
   it('should render with the numeric class', () => {

src/Table/TableFooter.d.ts

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { StandardProps } from '..';
 
-export interface TableFooterProps extends StandardProps<TableFooterBaseProps, TableFooterClassKey> {
+export interface TableFooterProps extends TableFooterBaseProps {
   component?: React.ReactType<TableFooterBaseProps>;
 }
 
 export type TableFooterBaseProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-export type TableFooterClassKey = 'root';
-
 declare const TableFooter: React.ComponentType<TableFooterProps>;
 
 export default TableFooter;