use size?: 'small' | 'medium'

mui · Feb 28, 2019 · fecd625 · fecd625
1 parent e4a139e
commit fecd625
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 166 deletions.
diff --git 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 (
-    <Paper className={classes.root}>
-      <EnhancedTableToolbar numSelected={selected.length} />
-      <div className={classes.tableWrapper}>
-        <Table className={classes.table} aria-labelledby="tableTitle">
-          <EnhancedTableHead
-            numSelected={selected.length}
-            order={order}
-            orderBy={orderBy}
-            onSelectAllClick={handleSelectAllClick}
-            onRequestSort={handleRequestSort}
-            rowCount={data.length}
-          />
-          <TableBody>
-            {stableSort(data, getSorting(order, orderBy))
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map(n => {
-                const isItemSelected = isSelected(n.id);
-                return (
-                  <TableRow
-                    hover
-                    onClick={event => handleClick(event, n.id)}
-                    role="checkbox"
-                    aria-checked={isItemSelected}
-                    tabIndex={-1}
-                    key={n.id}
-                    selected={isItemSelected}
-                  >
-                    <TableCell padding="checkbox">
-                      <Checkbox checked={isItemSelected} />
-                    </TableCell>
-                    <TableCell component="th" scope="row" padding="none">
-                      {n.name}
-                    </TableCell>
-                    <TableCell align="right">{n.calories}</TableCell>
-                    <TableCell align="right">{n.fat}</TableCell>
-                    <TableCell align="right">{n.carbs}</TableCell>
-                    <TableCell align="right">{n.protein}</TableCell>
-                  </TableRow>
-                );
-              })}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 49 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <TablePagination
-        rowsPerPageOptions={[5, 10, 25]}
-        component="div"
-        count={data.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        backIconButtonProps={{
-          'aria-label': 'Previous Page',
-        }}
-        nextIconButtonProps={{
-          'aria-label': 'Next Page',
-        }}
-        onChangePage={handleChangePage}
-        onChangeRowsPerPage={handleChangeRowsPerPage}
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <EnhancedTableToolbar numSelected={selected.length} />
+        <div className={classes.tableWrapper}>
+          <Table
+            className={classes.table}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+          >
+            <EnhancedTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={data.length}
+            />
+            <TableBody>
+              {stableSort(data, getSorting(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map(n => {
+                  const isItemSelected = isSelected(n.id);
+                  return (
+                    <TableRow
+                      hover
+                      onClick={event => handleClick(event, n.id)}
+                      role="checkbox"
+                      aria-checked={isItemSelected}
+                      tabIndex={-1}
+                      key={n.id}
+                      selected={isItemSelected}
+                    >
+                      <TableCell padding="checkbox">
+                        <Checkbox checked={isItemSelected} />
+                      </TableCell>
+                      <TableCell component="th" scope="row" padding="none">
+                        {n.name}
+                      </TableCell>
+                      <TableCell align="right">{n.calories}</TableCell>
+                      <TableCell align="right">{n.fat}</TableCell>
+                      <TableCell align="right">{n.carbs}</TableCell>
+                      <TableCell align="right">{n.protein}</TableCell>
+                    </TableRow>
+                  );
+                })}
+              {emptyRows > 0 && (
+                <TableRow style={{ height: 49 * emptyRows }}>
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={data.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          backIconButtonProps={{
+            'aria-label': 'Previous Page',
+          }}
+          nextIconButtonProps={{
+            'aria-label': 'Next Page',
+          }}
+          onChangePage={handleChangePage}
+          onChangeRowsPerPage={handleChangeRowsPerPage}
+        />
+      </Paper>
+      <FormControlLabel
+        control={<Switch checked={dense} onChange={handleChangeDense} />}
+        label="Dense padding"
       />
-    </Paper>
+    </div>
   );
 }
 

diff --git 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 {
             <Table
               className={classes.table}
               aria-labelledby="tableTitle"
-              size={dense ? 'small' : 'normal'}
+              size={dense ? 'small' : 'medium'}
             >
               <EnhancedTableHead
                 numSelected={selected.length}

diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts
@@ -11,7 +11,7 @@ export type TableBaseProps = React.TableHTMLAttributes<HTMLTableElement>;
 
 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
@@ -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
@@ -71,7 +71,7 @@ describe('<Table />', () => {
     );
 
     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
@@ -25,7 +25,7 @@ export type TableCellBaseProps = React.ThHTMLAttributes<HTMLTableHeaderCellEleme
 
 export type Padding = 'normal' | 'checkbox' | 'none';
 
-export type Size = 'normal' | 'small';
+export type Size = 'small' | 'medium';
 
 export type SortDirection = 'asc' | 'desc' | false;
 

diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
@@ -37,7 +37,6 @@ export const styles = theme => ({
   /* 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
@@ -21,24 +21,10 @@ import TableCell from '@material-ui/core/TableCell';
 | <span class="prop-name">align</span> | <span class="prop-type">enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br></span> | <span class="prop-default">'inherit'</span> | Set the text-align on the table cell content.<br>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. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |   | The table cell contents. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-<<<<<<< HEAD
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |   | The component used for the root node. Either a string to use a DOM element or a component. |
-| ~~<span class="prop-name">numeric</span>~~ | <span class="prop-type">bool</span> |   | *Deprecated*. Instead, use the `align` property.<br><br>If `true`, content will align to the right. |
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br></span> |   | Sets the padding applied to the cell. By default, the Table parent component set the value. |
-=======
-| <span class="prop-name">component</span> | <span class="prop-type">element type</span> |   | The component used for the root node. Either a string to use a DOM element or a component. |
-<<<<<<< HEAD
-<<<<<<< HEAD
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'normal', 'checkbox', 'dense', 'denseCheckbox', 'none'<br></span> |   | Sets the padding applied to the cell. By default, the Table parent component set the value. |
->>>>>>> Update docs
-=======
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'normal'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'none'<br></span> |   | 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
-=======
 | <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'none'<br></span> |   | Sets the padding applied to the cell. By default, the Table parent component set the value. |
->>>>>>> reduce amount of breaking change
 | <span class="prop-name">scope</span> | <span class="prop-type">string</span> |   | Set scope attribute. |
-| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'normal'&nbsp;&#124;<br>&nbsp;'small'<br></span> |   | Specify the size of the cell. By default, the Table parent component set the value (`normal`). |
+| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'<br></span> |   | Specify the size of the cell. By default, the Table parent component set the value (`normal`). |
 | <span class="prop-name">sortDirection</span> | <span class="prop-type">enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br></span> |   | Set aria-sort direction. |
 | <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br></span> |   | 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
@@ -20,22 +20,9 @@ import Table from '@material-ui/core/Table';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | The content of the table, normally `TableHead` and `TableBody`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-<<<<<<< HEAD
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br></span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
-=======
-| <span class="prop-name">component</span> | <span class="prop-type">element type</span> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-<<<<<<< HEAD
-<<<<<<< HEAD
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'normal', 'checkbox', 'dense', 'none', 'denseCheckbox'<br></span> | <span class="prop-default">'normal'</span> | Allows TableCells to inherit padding of the Table. |
->>>>>>> Update docs
-=======
-| <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'normal'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'none'<br></span> | <span class="prop-default">'normal'</span> | Allows TableCells to inherit padding of the Table. |
-=======
 | <span class="prop-name">padding</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'none'<br></span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
->>>>>>> reduce amount of breaking change
-| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'normal'&nbsp;&#124;<br>&nbsp;'small'<br></span> | <span class="prop-default">'normal'</span> | Allows TableCells to inherit size of the Table. |
->>>>>>> Add a size prop the Table and drop denseCheckbox padding
+| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'<br></span> | <span class="prop-default">'medium'</span> | Allows TableCells to inherit size of the Table. |
 
 Any other properties supplied will be spread to the root element (native element).