[TableCell] Better handle long text (#8685)

* removed whitespace from TabelCell root styles * [Table] Better handle space
mui · Oct 13, 2017 · e42339c · e42339c
1 parent ce05ad1
commit e42339c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 29 deletions.
diff --git a/docs/src/pages/demos/tables/BasicTable.js b/docs/src/pages/demos/tables/BasicTable.js
@@ -7,11 +7,14 @@ import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Ta
 import Paper from 'material-ui/Paper';
 
 const styles = theme => ({
-  paper: {
+  root: {
     width: '100%',
     marginTop: theme.spacing.unit * 3,
     overflowX: 'auto',
   },
+  table: {
+    width: 700,
+  },
 });
 
 let id = 0;
@@ -32,8 +35,8 @@ function BasicTable(props) {
   const { classes } = props;
 
   return (
-    <Paper className={classes.paper}>
-      <Table>
+    <Paper className={classes.root}>
+      <Table className={classes.table}>
         <TableHead>
           <TableRow>
             <TableCell>Dessert (100g serving)</TableCell>

diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -72,7 +72,11 @@ class EnhancedTableHead extends React.Component {
                 numeric={column.numeric}
                 padding={column.disablePadding ? 'none' : 'default'}
               >
-                <Tooltip title="Sort" placement="bottom-end" enterDelay={300}>
+                <Tooltip
+                  title="Sort"
+                  placement={column.numeric ? 'bottom-end' : 'bottom-start'}
+                  enterDelay={300}
+                >
                   <TableSortLabel
                     active={orderBy === column.id}
                     direction={order}
@@ -163,6 +167,9 @@ const styles = theme => ({
     width: '100%',
     marginTop: theme.spacing.unit * 3,
   },
+  table: {
+    width: 800,
+  },
   tableWrapper: {
     overflowX: 'auto',
   },
@@ -264,7 +271,7 @@ class EnhancedTable extends React.Component {
       <Paper className={classes.root}>
         <EnhancedTableToolbar numSelected={selected.length} />
         <div className={classes.tableWrapper}>
-          <Table>
+          <Table className={classes.table}>
             <EnhancedTableHead
               numSelected={selected.length}
               order={order}

diff --git a/src/Table/TableCell.js b/src/Table/TableCell.js
@@ -50,21 +50,19 @@ export type Props = {
 export const styles = (theme: Object) => ({
   root: {
     borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
     textAlign: 'left',
   },
   numeric: {
     textAlign: 'right',
     flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
   },
   head: {
-    whiteSpace: 'pre',
     fontWeight: theme.typography.fontWeightMedium,
     position: 'relative', // Workaround for Tooltip positioning issue.
   },
   paddingDefault: {
-    padding: `0 ${theme.spacing.unit * 7}px 0 ${theme.spacing.unit * 3}px`,
+    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
+      2}px ${theme.spacing.unit * 3}px`,
     '&:last-child': {
       paddingRight: theme.spacing.unit * 3,
     },
@@ -73,8 +71,7 @@ export const styles = (theme: Object) => ({
     paddingRight: theme.spacing.unit * 3,
   },
   paddingCheckbox: {
-    paddingLeft: 12,
-    paddingRight: 12,
+    padding: '0 12px',
   },
   footer: {
     borderBottom: 0,

diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js
@@ -32,6 +32,9 @@ export const styles = (theme: Object) => ({
   caption: {
     flexShrink: 0,
   },
+  selectRoot: {
+    marginRight: theme.spacing.unit * 4,
+  },
   select: {
     marginLeft: theme.spacing.unit,
     width: 34,
@@ -41,9 +44,6 @@ export const styles = (theme: Object) => ({
     height: 32,
     lineHeight: '32px',
   },
-  selectRoot: {
-    marginRight: theme.spacing.unit * 4,
-  },
   actions: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
@@ -178,20 +178,18 @@ class TablePagination extends React.Component<ProvidedProps & Props> {
           <Typography type="caption" className={classes.caption}>
             {labelRowsPerPage}
           </Typography>
-          <Typography component="div" type="caption">
-            <Select
-              classes={{ root: classes.selectRoot, select: classes.select }}
-              input={<Input disableUnderline />}
-              value={rowsPerPage}
-              onChange={onChangeRowsPerPage}
-            >
-              {rowsPerPageOptions.map(rowsPerPageOption => (
-                <MenuItem key={rowsPerPageOption} value={rowsPerPageOption}>
-                  {rowsPerPageOption}
-                </MenuItem>
-              ))}
-            </Select>
-          </Typography>
+          <Select
+            classes={{ root: classes.selectRoot, select: classes.select }}
+            input={<Input disableUnderline />}
+            value={rowsPerPage}
+            onChange={onChangeRowsPerPage}
+          >
+            {rowsPerPageOptions.map(rowsPerPageOption => (
+              <MenuItem key={rowsPerPageOption} value={rowsPerPageOption}>
+                {rowsPerPageOption}
+              </MenuItem>
+            ))}
+          </Select>
           <Typography type="caption" className={classes.caption}>
             {labelDisplayedRows({
               from: count === 0 ? 0 : page * rowsPerPage + 1,

diff --git a/src/Table/TablePagination.spec.js b/src/Table/TablePagination.spec.js
@@ -279,7 +279,7 @@ describe('<TablePagination />', () => {
       assert.strictEqual(
         wrapper
           .find('withStyles(Typography)')
-          .at(2)
+          .at(1)
           .text(),
         '0-0 of 0',
       );