From fecd62516642fa3b990e0257e34e959299b3bad4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 28 Feb 2019 17:22:33 +0100 Subject: [PATCH] use size?: 'small' | 'medium' --- .../pages/demos/tables/EnhancedTable.hooks.js | 150 ++++++++++-------- docs/src/pages/demos/tables/EnhancedTable.js | 8 +- packages/material-ui/src/Table/Table.d.ts | 2 +- packages/material-ui/src/Table/Table.js | 4 +- packages/material-ui/src/Table/Table.test.js | 2 +- .../material-ui/src/TableCell/TableCell.d.ts | 2 +- .../material-ui/src/TableCell/TableCell.js | 7 +- pages/api/table-cell.md | 16 +- pages/api/table.md | 15 +- .../tests/Table/DenseCheckboxTable.js | 86 ++++++++++ test/regressions/tests/Table/PaddingTable.js | 59 ------- 11 files changed, 185 insertions(+), 166 deletions(-) create mode 100644 test/regressions/tests/Table/DenseCheckboxTable.js delete mode 100644 test/regressions/tests/Table/PaddingTable.js diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js index 84f847f02cb1fa..04d946311748c6 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js +++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js @@ -15,6 +15,8 @@ import Paper from '@material-ui/core/Paper'; import Checkbox from '@material-ui/core/Checkbox'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Switch from '@material-ui/core/Switch'; import DeleteIcon from '@material-ui/icons/Delete'; import FilterListIcon from '@material-ui/icons/FilterList'; import { lighten } from '@material-ui/core/styles/colorManipulator'; @@ -108,6 +110,7 @@ EnhancedTableHead.propTypes = { const useToolbarStyles = makeStyles(theme => ({ root: { + paddingLeft: theme.spacing(2), paddingRight: theme.spacing(1), }, highlight: @@ -181,8 +184,12 @@ const useStyles = makeStyles(theme => ({ width: '100%', marginTop: theme.spacing(3), }, + paper: { + width: '100%', + marginBottom: theme.spacing(2), + }, table: { - minWidth: 1020, + minWidth: 750, }, tableWrapper: { overflowX: 'auto', @@ -210,6 +217,7 @@ function EnhancedTable() { createData('Oreo', 437, 18.0, 63, 4.0), ]); const [page, setPage] = React.useState(0); + const [dense, setDense] = React.useState(false); const [rowsPerPage, setRowsPerPage] = React.useState(5); function handleRequestSort(event, property) { @@ -255,75 +263,89 @@ function EnhancedTable() { setRowsPerPage(event.target.value); } + function handleChangeDense(event) { + setDense(event.target.checked); + } + const isSelected = id => selected.indexOf(id) !== -1; const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage); return ( - - -
- - - - {stableSort(data, getSorting(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map(n => { - const isItemSelected = isSelected(n.id); - return ( - handleClick(event, n.id)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={n.id} - selected={isItemSelected} - > - - - - - {n.name} - - {n.calories} - {n.fat} - {n.carbs} - {n.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
-
- + + +
+ + + + {stableSort(data, getSorting(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map(n => { + const isItemSelected = isSelected(n.id); + return ( + handleClick(event, n.id)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={n.id} + selected={isItemSelected} + > + + + + + {n.name} + + {n.calories} + {n.fat} + {n.carbs} + {n.protein} + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+
+ + + } + label="Dense padding" /> - + ); } diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 8106c1d501733a..2cccc9526907d9 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -59,7 +59,7 @@ const rows = [ { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' }, ]; -class RawEnhancedTableHead extends React.Component { +class EnhancedTableHead extends React.Component { createSortHandler = property => event => { this.props.onRequestSort(event, property); }; @@ -102,7 +102,7 @@ class RawEnhancedTableHead extends React.Component { } } -RawEnhancedTableHead.propTypes = { +EnhancedTableHead.propTypes = { numSelected: PropTypes.number.isRequired, onRequestSort: PropTypes.func.isRequired, onSelectAllClick: PropTypes.func.isRequired, @@ -111,8 +111,6 @@ RawEnhancedTableHead.propTypes = { rowCount: PropTypes.number.isRequired, }; -const EnhancedTableHead = RawEnhancedTableHead; - const toolbarStyles = theme => ({ root: { paddingLeft: theme.spacing(2), @@ -295,7 +293,7 @@ class EnhancedTable extends React.Component { ; export type Padding = 'default' | 'checkbox' | 'none'; -export type Size = 'normal' | 'small'; +export type Size = 'small' | 'medium'; export type TableClassKey = 'root'; diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 006970bde03e0e..fcbbcb9a8e542a 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -51,13 +51,13 @@ Table.propTypes = { /** * Allows TableCells to inherit size of the Table. */ - size: PropTypes.oneOf(['normal', 'small']), + size: PropTypes.oneOf(['small', 'medium']), }; Table.defaultProps = { component: 'table', padding: 'default', - size: 'normal', + size: 'medium', }; export default withStyles(styles, { name: 'MuiTable' })(Table); diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index ea6941976dacfe..802ecf1c01a090 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -71,7 +71,7 @@ describe('
', () => { ); assert.deepStrictEqual(context, { - size: 'normal', + size: 'medium', padding: 'default', }); }); diff --git a/packages/material-ui/src/TableCell/TableCell.d.ts b/packages/material-ui/src/TableCell/TableCell.d.ts index ae49df5b04ac86..e74b19b449c952 100644 --- a/packages/material-ui/src/TableCell/TableCell.d.ts +++ b/packages/material-ui/src/TableCell/TableCell.d.ts @@ -25,7 +25,7 @@ export type TableCellBaseProps = React.ThHTMLAttributes ({ /* Styles applied to the root element if `variant="body"` or `context.table.body`. */ body: { color: theme.palette.text.primary, - // fontSize: theme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightRegular, }, /* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */ @@ -129,7 +128,7 @@ function TableCell(props) { scope = 'col'; } const padding = paddingProp || (table && table.padding ? table.padding : 'default'); - const size = sizeProp || (table && table.size ? table.size : 'normal'); + const size = sizeProp || (table && table.size ? table.size : 'medium'); let ariaSort = null; if (sortDirection) { @@ -148,7 +147,7 @@ function TableCell(props) { : tablelvl2 && tablelvl2.variant === 'footer', [classes[`align${capitalize(align)}`]]: align !== 'inherit', [classes[`padding${capitalize(padding)}`]]: padding !== 'default', - [classes[`size${capitalize(size)}`]]: size !== 'normal', + [classes[`size${capitalize(size)}`]]: size !== 'medium', }, className, )} @@ -200,7 +199,7 @@ TableCell.propTypes = { * Specify the size of the cell. * By default, the Table parent component set the value (`normal`). */ - size: PropTypes.oneOf(['normal', 'small']), + size: PropTypes.oneOf(['small', 'medium']), /** * Set aria-sort direction. */ diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md index d8eedd1da3b039..e52178027e40d4 100644 --- a/pages/api/table-cell.md +++ b/pages/api/table-cell.md @@ -21,24 +21,10 @@ import TableCell from '@material-ui/core/TableCell'; | align | enum: 'inherit', 'left', 'center', 'right', 'justify'
 | 'inherit' | Set the text-align on the table cell content.
Monetary or generally number fields **should be right aligned** as that allows you to add them up quickly in your head without having to worry about decimals. | | children | node |   | The table cell contents. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -<<<<<<< HEAD | component | elementType |   | The component used for the root node. Either a string to use a DOM element or a component. | -| ~~numeric~~ | bool |   | *Deprecated*. Instead, use the `align` property.

If `true`, content will align to the right. | -| padding | enum: 'default' |
 'checkbox' |
 'dense' |
 'none'
 |   | Sets the padding applied to the cell. By default, the Table parent component set the value. | -======= -| component | element type |   | The component used for the root node. Either a string to use a DOM element or a component. | -<<<<<<< HEAD -<<<<<<< HEAD -| padding | enum: 'normal', 'checkbox', 'dense', 'denseCheckbox', 'none'
 |   | Sets the padding applied to the cell. By default, the Table parent component set the value. | ->>>>>>> Update docs -======= -| padding | enum: 'normal' |
 'checkbox' |
 'none'
 |   | Sets the padding applied to the cell. By default, the Table parent component set the value. | ->>>>>>> Add a size prop the Table and drop denseCheckbox padding -======= | padding | enum: 'default' |
 'checkbox' |
 'none'
 |   | Sets the padding applied to the cell. By default, the Table parent component set the value. | ->>>>>>> reduce amount of breaking change | scope | string |   | Set scope attribute. | -| size | enum: 'normal' |
 'small'
 |   | Specify the size of the cell. By default, the Table parent component set the value (`normal`). | +| size | enum: 'small' |
 'medium'
 |   | Specify the size of the cell. By default, the Table parent component set the value (`normal`). | | 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.md b/pages/api/table.md index 415d54827f126b..925786e6d80b0f 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -20,22 +20,9 @@ import Table from '@material-ui/core/Table'; |:-----|:-----|:--------|:------------| | children * | node |   | The content of the table, normally `TableHead` and `TableBody`. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -<<<<<<< HEAD | component | elementType | '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. | -======= -| component | element type | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | -<<<<<<< HEAD -<<<<<<< HEAD -| padding | enum: 'normal', 'checkbox', 'dense', 'none', 'denseCheckbox'
 | 'normal' | Allows TableCells to inherit padding of the Table. | ->>>>>>> Update docs -======= -| padding | enum: 'normal' |
 'checkbox' |
 'none'
 | 'normal' | Allows TableCells to inherit padding of the Table. | -======= | padding | enum: 'default' |
 'checkbox' |
 'none'
 | 'default' | Allows TableCells to inherit padding of the Table. | ->>>>>>> reduce amount of breaking change -| size | enum: 'normal' |
 'small'
 | 'normal' | Allows TableCells to inherit size of the Table. | ->>>>>>> Add a size prop the Table and drop denseCheckbox padding +| size | enum: 'small' |
 'medium'
 | 'medium' | Allows TableCells to inherit size of the Table. | Any other properties supplied will be spread to the root element (native element). diff --git a/test/regressions/tests/Table/DenseCheckboxTable.js b/test/regressions/tests/Table/DenseCheckboxTable.js new file mode 100644 index 00000000000000..a6e0f8baa82b5d --- /dev/null +++ b/test/regressions/tests/Table/DenseCheckboxTable.js @@ -0,0 +1,86 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Checkbox from '@material-ui/core/Checkbox'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; + +const styles = theme => ({ + root: { + width: '100%', + }, + paper: { + marginTop: theme.spacing(3), + width: '100%', + overflowX: 'auto', + marginBottom: theme.spacing(2), + }, + table: { + minWidth: 650, + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { id, name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + +function DenseCheckboxTable(props) { + const { classes } = props; + + return ( +
+ +
+ + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map(row => ( + + + + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ + + ); +} + +DenseCheckboxTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(DenseCheckboxTable); diff --git a/test/regressions/tests/Table/PaddingTable.js b/test/regressions/tests/Table/PaddingTable.js deleted file mode 100644 index 4e473611ea3256..00000000000000 --- a/test/regressions/tests/Table/PaddingTable.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Grid from '@material-ui/core/Grid'; -import Paper from '@material-ui/core/Paper'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; - -function MyTable(props) { - const { padding } = props; - return ( - - - - - Padding: {padding} - - - - - - Dummy Data - Dummy Data - - - Dummy Data - Dummy Data - - -
- - ); -} - -MyTable.propTypes = { - padding: PropTypes.any, -}; - -function PaddingTable() { - return ( -
- - - - - - - - - - - -
- ); -} - -export default PaddingTable;