Use dense table style and outlined chips in the API Explorer (#3276)

This matches the styling of the catalog.
backstage · Nov 11, 2020 · 84b654d · 84b654d
1 parent 4a9d666
commit 84b654d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/perfect-boats-attack.md b/.changeset/perfect-boats-attack.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Use dense table style and outlined chips in the API Explorer.
diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
@@ -90,7 +90,13 @@ const columns: TableColumn<Entity>[] = [
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
-            <Chip key={t} label={t} style={{ marginBottom: '0px' }} />
+            <Chip
+              key={t}
+              label={t}
+              size="small"
+              variant="outlined"
+              style={{ marginBottom: '0px' }}
+            />
           ))}
       </>
     ),
@@ -149,6 +155,7 @@ export const ApiExplorerTable = ({
         paging: false,
         actionsColumnIndex: -1,
         loadingType: 'linear',
+        padding: 'dense',
         showEmptyDataSourceMessage: !loading,
       }}
       data={entities}