Merge pull request #2575 from spotify/samiram/fix-dense-table

fix dense in Structured Metadata Table

packages/core/src/components/StructuredMetadataTable/MetadataTable.tsx

@@ -71,13 +71,7 @@ export const MetadataTable = ({
   dense?: boolean;
   children: React.ReactNode;
 }) => (
-  <Table>
-    {!dense && (
-      <colgroup>
-        <col style={{ width: 'auto' }} />
-        <col style={{ width: '100%' }} />
-      </colgroup>
-    )}
+  <Table size={dense ? 'small' : 'medium'}>
     <TableBody>{children}</TableBody>
   </Table>
 );

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

@@ -56,3 +56,16 @@ export const Default = () => (
     </InfoCard>
   </Wrapper>
 );
+
+export const NotDenseTable = () => (
+  <Wrapper>
+    <InfoCard
+      title="Not Dense Structured Metadata Table"
+      subheader="Wrapped in InfoCard"
+    >
+      <div style={cardContentStyle}>
+        <StructuredMetadataTable metadata={metadata} dense={false} />
+      </div>
+    </InfoCard>
+  </Wrapper>
+);

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>;
+};