fix(inventoryList): issues/476 hide field on zero results (#555)

RedHatInsights · Feb 16, 2021 · a0f7047 · a0f7047
1 parent 6a47860
commit a0f7047
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -226,7 +226,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
     updateOnResize={true}
   >
     <CardHeader
-      className=""
+      className="transparent"
     >
       <CardHeaderMain>
         <ToolbarFieldDisplayName
@@ -340,7 +340,7 @@ exports[`InventoryList Component should handle variations in data: variable data
     updateOnResize={true}
   >
     <CardHeader
-      className=""
+      className="transparent"
     >
       <CardHeaderMain>
         <ToolbarFieldDisplayName
@@ -450,7 +450,7 @@ exports[`InventoryList Component should render a non-connected component: non-co
     updateOnResize={true}
   >
     <CardHeader
-      className=""
+      className="transparent"
     >
       <CardHeaderMain>
         <ToolbarFieldDisplayName

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -222,7 +222,7 @@ class InventoryList extends React.Component {
     return (
       <Card className="curiosity-inventory-card">
         <MinHeight key="headerMinHeight" updateOnContent>
-          <CardHeader className={(error && 'hidden') || ''}>
+          <CardHeader className={(error && 'hidden') || (!itemCount && 'transparent') || ''}>
             <CardHeaderMain>
               <ToolbarFieldDisplayName viewId={viewId} />
             </CardHeaderMain>

diff --git a/src/styles/_fade.scss b/src/styles/_fade.scss
@@ -31,4 +31,8 @@
     height:1px;
     overflow:hidden;
   }
+
+  .transparent {
+    opacity: 0;
+  }
 }