Fix Virtualized Table demo

mui · Feb 28, 2019 · 96599b8 · 96599b8
1 parent 3ef133b
commit 96599b8
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 16 deletions.
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -108,7 +108,6 @@ RawEnhancedTableHead.propTypes = {
   onSelectAllClick: PropTypes.func.isRequired,
   order: PropTypes.string.isRequired,
   orderBy: PropTypes.string.isRequired,
-  padding: PropTypes.oneOf(['normal', 'none', 'checkbox']),
   rowCount: PropTypes.number.isRequired,
 };
 

diff --git a/docs/src/pages/demos/tables/ReactVirtualizedTable.js b/docs/src/pages/demos/tables/ReactVirtualizedTable.js
@@ -10,9 +10,6 @@ import Paper from '@material-ui/core/Paper';
 import { AutoSizer, Column, SortDirection, Table } from 'react-virtualized';
 
 const styles = theme => ({
-  table: {
-    fontFamily: theme.typography.fontFamily,
-  },
   flexContainer: {
     display: 'flex',
     alignItems: 'center',
@@ -95,7 +92,6 @@ class MuiVirtualizedTable extends React.PureComponent {
       <AutoSizer>
         {({ height, width }) => (
           <Table
-            className={classes.table}
             height={height}
             width={width}
             {...tableProps}
@@ -153,11 +149,13 @@ MuiVirtualizedTable.propTypes = {
 };
 
 MuiVirtualizedTable.defaultProps = {
-  headerHeight: 56,
-  rowHeight: 56,
+  headerHeight: 48,
+  rowHeight: 48,
 };
 
-const WrappedVirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
+const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
+
+// ---
 
 const data = [
   ['Frozen yoghurt', 159, 6.0, 24, 4.0],
@@ -183,7 +181,7 @@ for (let i = 0; i < 200; i += 1) {
 function ReactVirtualizedTable() {
   return (
     <Paper style={{ height: 400, width: '100%' }}>
-      <WrappedVirtualizedTable
+      <VirtualizedTable
         rowCount={rows.length}
         rowGetter={({ index }) => rows[index]}
         onRowClick={event => console.log(event)}

diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
@@ -4,15 +4,15 @@ import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
 import TableContext from './TableContext';
 
-export const styles = theme => ({
+export const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'table',
     width: '100%',
     borderCollapse: 'collapse',
     borderSpacing: 0,
   },
-});
+};
 
 function Table(props) {
   const { classes, className, component: Component, padding, size, ...other } = props;

diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js
@@ -64,14 +64,14 @@ describe('<Table />', () => {
         <TableContext.Consumer>
           {value => {
             context = value;
-
             return <tbody />;
           }}
         </TableContext.Consumer>
       </Table>,
     );
 
     assert.deepStrictEqual(context, {
+      size: 'normal',
       padding: 'normal',
     });
   });

diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
@@ -52,7 +52,6 @@ export const styles = theme => ({
     '&:last-child': {
       paddingRight: 16,
     },
-
     '&$paddingCheckbox': {
       width: 24, // prevent the checkbox column from growing
       padding: '0px 12px 0 16px',

diff --git a/packages/material-ui/src/TableCell/TableCell.test.js b/packages/material-ui/src/TableCell/TableCell.test.js
@@ -64,11 +64,11 @@ describe('<TableCell />', () => {
     assert.strictEqual(wrapper.find('td').hasClass(classes.paddingCheckbox), true);
   });
 
-  it('should render with the user, root, padding, and dense classes', () => {
-    const wrapper = mountInTable(<TableCell className="woofTableCell" padding="dense" />);
+  it('should render with the user, root, padding, and small classes', () => {
+    const wrapper = mountInTable(<TableCell className="woofTableCell" size="small" />);
     assert.strictEqual(wrapper.find('td').hasClass('woofTableCell'), true);
     assert.strictEqual(wrapper.find('td').hasClass(classes.root), true);
-    assert.strictEqual(wrapper.find('td').hasClass(classes.paddingDense), true);
+    assert.strictEqual(wrapper.find('td').hasClass(classes.sizeSmall), true);
   });
 
   it('should render children', () => {