From 5cdc68481ffee98eeeeeb68726df62e0adc33cd6 Mon Sep 17 00:00:00 2001 From: Aseem Sane Date: Tue, 7 Aug 2018 14:16:57 -0700 Subject: [PATCH] [Table] Padding feature (#12415) * Added table padding feature. Fixed omission of padding as a valid prop of Table. Fixed read-only problems with padding. Defined Padding. * Fixed style errors * Fixed undefined context padding. * fix(www): let's merge --- packages/material-ui/src/Table/Table.js | 9 +++++++- packages/material-ui/src/Table/Table.test.js | 6 +++-- .../material-ui/src/TableBody/TableBody.js | 6 ++--- .../src/TableBody/TableBody.test.js | 2 +- .../material-ui/src/TableCell/TableCell.js | 23 +++++++++++-------- .../src/TableCell/TableCell.test.js | 16 ++++++------- .../src/TableFooter/TableFooter.js | 6 ++--- .../material-ui/src/TableHead/TableHead.js | 6 ++--- .../src/TableHead/TableHead.test.js | 2 +- packages/material-ui/src/TableRow/TableRow.js | 20 ++++++++-------- .../material-ui/src/TableRow/TableRow.test.js | 4 ++-- pages/api/table-cell.md | 2 +- pages/api/table-row.md | 8 +++---- pages/api/table.md | 1 + 14 files changed, 63 insertions(+), 48 deletions(-) diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index f3e59ee03643a2..51ce0bdd19353f 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -18,7 +18,9 @@ class Table extends React.Component { getChildContext() { // eslint-disable-line class-methods-use-this return { - table: {}, + table: { + padding: this.props.padding, + }, }; } @@ -48,10 +50,15 @@ Table.propTypes = { * Either a string to use a DOM element or a component. */ component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]), + /** + * Allows TableCells to inherit padding of the Table. + */ + padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']), }; Table.defaultProps = { component: 'table', + padding: 'default', }; Table.childContextTypes = { diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index 7cc7c40738c9a1..911af85f4a7930 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -25,7 +25,7 @@ describe('', () => { it('should spread custom props on the root node', () => { const wrapper = shallow(
foo
); assert.strictEqual( - wrapper.prop('data-my-prop'), + wrapper.props()['data-my-prop'], 'woofTable', 'custom prop should be woofTable', ); @@ -45,6 +45,8 @@ describe('', () => { it('should define table in the child context', () => { const wrapper = shallow(
foo
); - assert.deepStrictEqual(wrapper.instance().getChildContext().table, {}); + assert.deepStrictEqual(wrapper.instance().getChildContext().table, { + padding: 'default', + }); }); }); diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js index 3609ed5b408fd9..1a7c08d885d374 100644 --- a/packages/material-ui/src/TableBody/TableBody.js +++ b/packages/material-ui/src/TableBody/TableBody.js @@ -14,8 +14,8 @@ class TableBody extends React.Component { getChildContext() { // eslint-disable-line class-methods-use-this return { - table: { - body: true, + tablelvl2: { + variant: 'body', }, }; } @@ -53,7 +53,7 @@ TableBody.defaultProps = { }; TableBody.childContextTypes = { - table: PropTypes.object, + tablelvl2: PropTypes.object, }; export default withStyles(styles, { name: 'MuiTableBody' })(TableBody); diff --git a/packages/material-ui/src/TableBody/TableBody.test.js b/packages/material-ui/src/TableBody/TableBody.test.js index 36e1a0f81eae60..d0f3e8dff8219b 100644 --- a/packages/material-ui/src/TableBody/TableBody.test.js +++ b/packages/material-ui/src/TableBody/TableBody.test.js @@ -38,6 +38,6 @@ describe('', () => { it('should define table.body in the child context', () => { const wrapper = shallow(foo); - assert.strictEqual(wrapper.instance().getChildContext().table.body, true); + assert.strictEqual(wrapper.instance().getChildContext().tablelvl2.variant, 'body'); }); }); diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index 80507ea035b0c6..f71c9f341a4d63 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -75,30 +75,34 @@ function TableCell(props, context) { component, sortDirection, numeric, - padding, + padding: paddingProp, scope: scopeProp, variant, ...other } = props; - const { table } = context; + + const { table, tablelvl2 } = context; let Component; if (component) { Component = component; } else { - Component = table && table.head ? 'th' : 'td'; + Component = tablelvl2 && tablelvl2.variant === 'head' ? 'th' : 'td'; } let scope = scopeProp; - if (!scope && table && table.head) { + if (!scope && tablelvl2 && tablelvl2.variant === 'head') { scope = 'col'; } + const padding = paddingProp || (table && table.padding ? table.padding : 'default'); const className = classNames( classes.root, { - [classes.head]: variant ? variant === 'head' : table && table.head, - [classes.body]: variant ? variant === 'body' : table && table.body, - [classes.footer]: variant ? variant === 'footer' : table && table.footer, + [classes.head]: variant ? variant === 'head' : tablelvl2 && tablelvl2.variant === 'head', + [classes.body]: variant ? variant === 'body' : tablelvl2 && tablelvl2.variant === 'body', + [classes.footer]: variant + ? variant === 'footer' + : tablelvl2 && tablelvl2.variant === 'footer', [classes.numeric]: numeric, [classes[`padding${capitalize(padding)}`]]: padding !== 'default', }, @@ -142,6 +146,7 @@ TableCell.propTypes = { numeric: PropTypes.bool, /** * Sets the padding applied to the cell. + * By default, the Table parent component set the value. */ padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']), /** @@ -161,11 +166,11 @@ TableCell.propTypes = { TableCell.defaultProps = { numeric: false, - padding: 'default', }; TableCell.contextTypes = { - table: PropTypes.object.isRequired, + table: PropTypes.object, + tablelvl2: PropTypes.object, }; export default withStyles(styles, { name: 'MuiTableCell' })(TableCell); diff --git a/packages/material-ui/src/TableCell/TableCell.test.js b/packages/material-ui/src/TableCell/TableCell.test.js index 01731c343f5f0e..5651ef517174ab 100644 --- a/packages/material-ui/src/TableCell/TableCell.test.js +++ b/packages/material-ui/src/TableCell/TableCell.test.js @@ -66,7 +66,7 @@ describe('', () => { it('should render a th with the head class when in the context of a table head', () => { const wrapper = shallow(); - wrapper.setContext({ table: { head: true } }); + wrapper.setContext({ tablelvl2: { variant: 'head' } }); assert.strictEqual(wrapper.name(), 'th'); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class'); @@ -75,13 +75,13 @@ describe('', () => { it('should render specified scope attribute even when in the context of a table head', () => { const wrapper = shallow(); - wrapper.setContext({ table: { head: true } }); + wrapper.setContext({ tablelvl2: { variant: 'head' } }); assert.strictEqual(wrapper.props().scope, 'row', 'should have the specified scope attribute'); }); it('should render a th with the footer class when in the context of a table footer', () => { const wrapper = shallow(); - wrapper.setContext({ table: { footer: true } }); + wrapper.setContext({ tablelvl2: { variant: 'footer' } }); assert.strictEqual(wrapper.name(), 'td'); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class'); @@ -95,33 +95,33 @@ describe('', () => { it('should render with the footer class when in the context of a table footer', () => { const wrapper = shallow(); - wrapper.setContext({ table: { footer: true } }); + wrapper.setContext({ tablelvl2: { variant: 'footer' } }); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class'); }); it('should render with the head class when variant is head, overriding context', () => { const wrapper = shallow(); - wrapper.setContext({ table: { footer: true } }); + wrapper.setContext({ tablelvl2: { variant: 'footer' } }); assert.strictEqual(wrapper.hasClass(classes.head), true); assert.strictEqual(wrapper.props().scope, undefined, 'should have the correct scope attribute'); }); it('should render without head class when variant is body, overriding context', () => { const wrapper = shallow(); - wrapper.setContext({ table: { head: true } }); + wrapper.setContext({ tablelvl2: { variant: 'head' } }); assert.strictEqual(wrapper.hasClass(classes.head), false); }); it('should render without footer class when variant is body, overriding context', () => { const wrapper = shallow(); - wrapper.setContext({ table: { footer: true } }); + wrapper.setContext({ tablelvl2: { variant: 'footer' } }); assert.strictEqual(wrapper.hasClass(classes.footer), false); }); it('should render with the footer class when variant is footer, overriding context', () => { const wrapper = shallow(); - wrapper.setContext({ table: { head: true } }); + wrapper.setContext({ tablelvl2: { variant: 'head' } }); assert.strictEqual(wrapper.hasClass(classes.footer), true); }); diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js index fc7e7e80322ed0..739157cbdbbe84 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.js +++ b/packages/material-ui/src/TableFooter/TableFooter.js @@ -14,8 +14,8 @@ class TableFooter extends React.Component { getChildContext() { // eslint-disable-line class-methods-use-this return { - table: { - footer: true, + tablelvl2: { + variant: 'footer', }, }; } @@ -53,7 +53,7 @@ TableFooter.defaultProps = { }; TableFooter.childContextTypes = { - table: PropTypes.object, + tablelvl2: PropTypes.object, }; export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter); diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js index 84e51425e6617a..772faf8f58c33f 100644 --- a/packages/material-ui/src/TableHead/TableHead.js +++ b/packages/material-ui/src/TableHead/TableHead.js @@ -14,8 +14,8 @@ class TableHead extends React.Component { getChildContext() { // eslint-disable-line class-methods-use-this return { - table: { - head: true, + tablelvl2: { + variant: 'head', }, }; } @@ -53,7 +53,7 @@ TableHead.defaultProps = { }; TableHead.childContextTypes = { - table: PropTypes.object, + tablelvl2: PropTypes.object, }; export default withStyles(styles, { name: 'MuiTableHead' })(TableHead); diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js index 10ed3eeb91548f..a96ba5a09627d2 100644 --- a/packages/material-ui/src/TableHead/TableHead.test.js +++ b/packages/material-ui/src/TableHead/TableHead.test.js @@ -36,6 +36,6 @@ describe('', () => { it('should define table.head in the child context', () => { const wrapper = shallow(foo); - assert.strictEqual(wrapper.instance().getChildContext().table.head, true); + assert.strictEqual(wrapper.instance().getChildContext().tablelvl2.variant, 'head'); }); }); diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index f9490c47bfd241..d147daf5f719e7 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -25,15 +25,15 @@ export const styles = theme => ({ : 'rgba(255, 255, 255, 0.14)', }, }, - /* Styles applied to the root element if `context.table` & `selected={true}`. */ + /* Styles applied to the root element if `selected={true}`. */ selected: {}, - /* Styles applied to the root element if `context.table` & `hover={true}`. */ + /* Styles applied to the root element if `hover={true}`. */ hover: {}, - /* Styles applied to the root element if `context.table.head`. */ + /* Styles applied to the root element if table variant = 'head'. */ head: { height: 56, }, - /* Styles applied to the root element if `context.table.footer`. */ + /* Styles applied to the root element if table variant = 'footer'. */ footer: { height: 56, }, @@ -52,15 +52,15 @@ function TableRow(props, context) { selected, ...other } = props; - const { table } = context; + const { tablelvl2 } = context; const className = classNames( classes.root, { - [classes.head]: table && table.head, - [classes.footer]: table && table.footer, - [classes.hover]: table && hover, - [classes.selected]: table && selected, + [classes.head]: tablelvl2 && tablelvl2.variant === 'head', + [classes.footer]: tablelvl2 && tablelvl2.variant === 'footer', + [classes.hover]: hover, + [classes.selected]: selected, }, classNameProp, ); @@ -104,7 +104,7 @@ TableRow.defaultProps = { }; TableRow.contextTypes = { - table: PropTypes.object, + tablelvl2: PropTypes.object, }; export default withStyles(styles, { name: 'MuiTableRow' })(TableRow); diff --git a/packages/material-ui/src/TableRow/TableRow.test.js b/packages/material-ui/src/TableRow/TableRow.test.js index cff526ba757930..c802fa67324d4e 100644 --- a/packages/material-ui/src/TableRow/TableRow.test.js +++ b/packages/material-ui/src/TableRow/TableRow.test.js @@ -47,14 +47,14 @@ describe('', () => { it('should render with the head class when in the context of a table head', () => { const wrapper = shallow(); - wrapper.setContext({ table: { head: true } }); + wrapper.setContext({ tablelvl2: { variant: 'head' } }); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.head), true, 'should have the head class'); }); it('should render with the footer class when in the context of a table footer', () => { const wrapper = shallow(); - wrapper.setContext({ table: { footer: true } }); + wrapper.setContext({ tablelvl2: { variant: 'footer' } }); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.footer), true, 'should have the footer class'); }); diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md index 36e7a6a811d36f..e09f3409f036dc 100644 --- a/pages/api/table-cell.md +++ b/pages/api/table-cell.md @@ -19,7 +19,7 @@ title: TableCell API | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func |
 object
|   | The component used for the root node. Either a string to use a DOM element or a component. | | numeric | bool | false | If `true`, content will align to the right. | -| padding | enum: 'default' |
 'checkbox' |
 'dense' |
 'none'
| 'default' | Sets the padding applied to the cell. | +| padding | enum: 'default' |
 'checkbox' |
 'dense' |
 'none'
|   | Sets the padding applied to the cell. By default, the Table parent component set the value. | | scope | string |   | Set scope attribute. | | sortDirection | enum: 'asc' |
 'desc' |
 false
|   | Set aria-sort direction. | | variant | enum: 'head' |
 'body' |
 'footer'
|   | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. | diff --git a/pages/api/table-row.md b/pages/api/table-row.md index 5d885eddc88ab7..a93c2a3ab006d5 100644 --- a/pages/api/table-row.md +++ b/pages/api/table-row.md @@ -33,10 +33,10 @@ This property accepts the following keys: | Name | Description | |:-----|:------------| | root | Styles applied to the root element. -| selected | Styles applied to the root element if `context.table` & `selected={true}`. -| hover | Styles applied to the root element if `context.table` & `hover={true}`. -| head | Styles applied to the root element if `context.table.head`. -| footer | Styles applied to the root element if `context.table.footer`. +| selected | Styles applied to the root element if `selected={true}`. +| hover | Styles applied to the root element if `hover={true}`. +| head | Styles applied to the root element if table variant = 'head'. +| footer | Styles applied to the root element if table variant = '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/master/packages/material-ui/src/TableRow/TableRow.js) diff --git a/pages/api/table.md b/pages/api/table.md index 46952565011e5a..d5e0fda0685418 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -18,6 +18,7 @@ title: Table API | children * | node |   | The content of the table, normally `TableHeader` and `TableBody`. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func |
 object
| 'table' | The component used for the root node. Either a string to use a DOM element or a component. | +| padding | enum: 'default' |
 'checkbox' |
 'dense' |
 'none'
| 'default' | Allows TableCells to inherit padding of the Table. | Any other properties supplied will be spread to the root element (native element).