Merge pull request #1487 from spotify/ellinorseastream/table-dense

Enabled 'dense' mode for Table cells.

packages/core/src/components/Table/Table.stories.tsx

@@ -185,3 +185,38 @@ export const SubvalueTable = () => {
     </div>
   );
 };
+
+export const DenseTable = () => {
+  const columns: TableColumn[] = [
+    {
+      title: 'Column 1',
+      field: 'col1',
+      highlight: true,
+    },
+    {
+      title: 'Column 2',
+      field: 'col2',
+    },
+    {
+      title: 'Numeric value',
+      field: 'number',
+      type: 'numeric',
+    },
+    {
+      title: 'A Date',
+      field: 'date',
+      type: 'date',
+    },
+  ];
+
+  return (
+    <div style={containerStyle}>
+      <Table
+        options={{ paging: false, padding: 'dense' }}
+        data={testData10}
+        columns={columns}
+        title="Backstage Table"
+      />
+    </div>
+  );
+};

packages/core/src/components/Table/Table.tsx

@@ -35,7 +35,6 @@ import ViewColumn from '@material-ui/icons/ViewColumn';
 import MTable, {
   Column,
   MaterialTableProps,
-  MTableCell,
   MTableHeader,
   MTableToolbar,
   Options,
@@ -96,14 +95,6 @@ const tableIcons = {
   )),
 };
 
-const useCellStyles = makeStyles<BackstageTheme>(theme => ({
-  root: {
-    color: theme.palette.grey[500],
-    padding: theme.spacing(0, 2, 0, 2.5),
-    height: '56px',
-  },
-}));
-
 const useHeaderStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
     padding: theme.spacing(1, 2, 1, 2.5),
@@ -169,7 +160,6 @@ export function Table<T extends object = {}>({
   subtitle,
   ...props
 }: TableProps<T>) {
-  const cellClasses = useCellStyles();
   const headerClasses = useHeaderStyles();
   const toolbarClasses = useToolbarStyles();
   const theme = useTheme<BackstageTheme>();
@@ -185,9 +175,6 @@ export function Table<T extends object = {}>({
   return (
     <MTable<T>
       components={{
-        Cell: cellProps => (
-          <MTableCell className={cellClasses.root} {...cellProps} />
-        ),
         Header: headerProps => (
           <MTableHeader classes={headerClasses} {...headerProps} />
         ),

packages/theme/src/baseTheme.ts

@@ -118,9 +118,12 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides {
         verticalAlign: 'middle',
         lineHeight: '1',
         margin: 0,
-        padding: '8px',
+        padding: theme.spacing(3, 2, 3, 2.5),
         borderBottom: 0,
       },
+      sizeSmall: {
+        padding: theme.spacing(1, 2, 1, 2.5),
+      },
       head: {
         wordBreak: 'break-word',
         overflow: 'hidden',

plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx

@@ -64,7 +64,7 @@ const SentryIssuesTable: FC<SentryIssuesTableProps> = ({ sentryIssues }) => {
   return (
     <Table
       columns={columns}
-      options={{ paging: true, search: false, pageSize: 5 }}
+      options={{ padding: 'dense', paging: true, search: false, pageSize: 5 }}
       title="Sentry issues"
       data={sentryIssues}
     />