From 563a8a5f4e9ac8301b98512c1fb9fbc121915187 Mon Sep 17 00:00:00 2001
From: ellinors <ellinors@spotify.com>
Date: Mon, 29 Jun 2020 13:37:50 +0200
Subject: [PATCH 1/2] Enabled 'dense' mode for Table cells.

Hardcoded cell styling for Table was removed to enable 'dense' as a cell padding choice.
Padding customisation for inherited smallSize was added.
Dense mode was chosen for sentry issues table rows.
---
 packages/core/src/components/Table/Table.tsx        | 13 -------------
 packages/theme/src/baseTheme.ts                     |  5 ++++-
 .../SentryIssuesTable/SentryIssuesTable.tsx         |  2 +-
 3 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 047a6b1990..89aa2dce1f 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/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} />
         ),
diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts
index 955b182ae9..dc68db11d6 100644
--- a/packages/theme/src/baseTheme.ts
+++ b/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',
diff --git a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx b/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
index e861c6bbe5..cebd5563f4 100644
--- a/plugins/sentry/src/components/SentryIssuesTable/SentryIssuesTable.tsx
+++ b/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}
     />

From 8c503d57f1d60509087ab3044aead22f7f4846a3 Mon Sep 17 00:00:00 2001
From: ellinors <ellinors@spotify.com>
Date: Tue, 30 Jun 2020 07:49:15 +0200
Subject: [PATCH 2/2] Added DenseTable to Storybook.

---
 .../src/components/Table/Table.stories.tsx    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx
index 3709c301fd..11fa0c44dc 100644
--- a/packages/core/src/components/Table/Table.stories.tsx
+++ b/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>
+  );
+};