From 9959558d2f41c9a470d3cbd9007530f1c3601a59 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Wed, 23 Sep 2020 14:06:23 +0200
Subject: [PATCH 1/3] fix dense in metadata table

---
 .../StructuredMetadataTable/MetadataTable.tsx       |  2 +-
 .../StructuredMetadataTable.stories.tsx             | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
index 1d863db764..ad468f623c 100644
--- a/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
@@ -71,7 +71,7 @@ export const MetadataTable = ({
   dense?: boolean;
   children: React.ReactNode;
 }) => (
-  <Table>
+  <Table size={dense ? 'small' : 'medium'}>
     {!dense && (
       <colgroup>
         <col style={{ width: 'auto' }} />
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
index bdf0f65375..9a9a4b42b6 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
@@ -56,3 +56,16 @@ export const Default = () => (
     </InfoCard>
   </Wrapper>
 );
+
+export const DenseTable = () => (
+  <Wrapper>
+    <InfoCard
+      title="Dense Structured Metadata Table"
+      subheader="Wrapped in InfoCard"
+    >
+      <div style={cardContentStyle}>
+        <StructuredMetadataTable metadata={metadata} dense />
+      </div>
+    </InfoCard>
+  </Wrapper>
+);

From 091ab63d19cb743fdbe56e6a873d4792f43534d9 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Wed, 23 Sep 2020 14:56:46 +0200
Subject: [PATCH 2/3] set dense as default value

---
 .../components/StructuredMetadataTable/MetadataTable.tsx    | 6 ------
 .../StructuredMetadataTable.stories.tsx                     | 6 +++---
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
index ad468f623c..b34e535a00 100644
--- a/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx
@@ -72,12 +72,6 @@ export const MetadataTable = ({
   children: React.ReactNode;
 }) => (
   <Table size={dense ? 'small' : 'medium'}>
-    {!dense && (
-      <colgroup>
-        <col style={{ width: 'auto' }} />
-        <col style={{ width: '100%' }} />
-      </colgroup>
-    )}
     <TableBody>{children}</TableBody>
   </Table>
 );
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
index 9a9a4b42b6..9db7385872 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
@@ -57,14 +57,14 @@ export const Default = () => (
   </Wrapper>
 );
 
-export const DenseTable = () => (
+export const NotDenseTable = () => (
   <Wrapper>
     <InfoCard
-      title="Dense Structured Metadata Table"
+      title="Not Dense Structured Metadata Table"
       subheader="Wrapped in InfoCard"
     >
       <div style={cardContentStyle}>
-        <StructuredMetadataTable metadata={metadata} dense />
+        <StructuredMetadataTable metadata={metadata} dense={false} />
       </div>
     </InfoCard>
   </Wrapper>

From 54e937ee90cd5c70fd2d8544f39bfd0b5528520b Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Wed, 23 Sep 2020 14:57:55 +0200
Subject: [PATCH 3/3] change class component to functional component

---
 .../StructuredMetadataTable.tsx               | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
index f966bd570f..52ad9a320a 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Component, Fragment, ReactElement } from 'react';
+import React, { Fragment, ReactElement } from 'react';
 import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core';
 import startCase from 'lodash/startCase';
 
@@ -142,17 +142,17 @@ const TableItem = ({
   );
 };
 
-interface ComponentProps {
+type Props = {
   metadata: { [key: string]: any };
   dense?: boolean;
   options?: any;
-}
+};
 
-export class StructuredMetadataTable extends Component<ComponentProps> {
-  render() {
-    const { metadata, dense, options } = this.props;
-    const metadataItems = mapToItems(metadata, options || {});
-
-    return <MetadataTable dense={dense}>{metadataItems}</MetadataTable>;
-  }
-}
+export const StructuredMetadataTable = ({
+  metadata,
+  dense = true,
+  options,
+}: Props) => {
+  const metadataItems = mapToItems(metadata, options || {});
+  return <MetadataTable dense={dense}>{metadataItems}</MetadataTable>;
+};