fix(TableToolbar): Results and selected shouldn't have a default

With a default of 0 the component will show "0 Results" etc. unnecessarily
Hyperkid123 · Mar 4, 2022 · c040395 · c040395
1 parent b994b78
commit c040395
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 98 deletions.
diff --git a/packages/components/src/TableToolbar/TableToolbar.tsx b/packages/components/src/TableToolbar/TableToolbar.tsx
@@ -24,9 +24,9 @@ function generateCount(results: number) {
 
 const TableToolbar: React.FunctionComponent<TableToolbarProps> = ({
   isFooter = false,
-  results = 0,
+  results,
   className,
-  selected = 0,
+  selected,
   children,
   ouiaId,
   ouiaSafe = true,
@@ -47,10 +47,10 @@ const TableToolbar: React.FunctionComponent<TableToolbarProps> = ({
       >
         {children}
       </Toolbar>
-      {(results >= 0 || selected >= 0) && (
+      {((results && results >= 0) || (selected && selected >= 0)) && (
         <div className="ins-c-table__toolbar-results">
-          {results >= 0 && <span className="ins-c-table__toolbar-results-count"> {generateCount(results)} </span>}
-          {selected >= 0 && <span className="ins-c-table__toolbar-results-selected"> {selected} Selected </span>}
+          {results && results >= 0 && <span className="ins-c-table__toolbar-results-count"> {generateCount(results)} </span>}
+          {selected && selected >= 0 && <span className="ins-c-table__toolbar-results-selected"> {selected} Selected </span>}
         </div>
       )}
     </Fragment>

diff --git a/packages/components/src/TableToolbar/__snapshots__/TableToolbar.test.js.snap b/packages/components/src/TableToolbar/__snapshots__/TableToolbar.test.js.snap
@@ -10,24 +10,6 @@ exports[`TableToolbar component should render 1`] = `
   >
     Some
   </Toolbar>
-  <div
-    className="ins-c-table__toolbar-results"
-  >
-    <span
-      className="ins-c-table__toolbar-results-count"
-    >
-       
-      0 Results
-       
-    </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
-  </div>
 </Fragment>
 `;
 
@@ -41,24 +23,6 @@ exports[`TableToolbar component should render a footer 1`] = `
   >
     Footer
   </Toolbar>
-  <div
-    className="ins-c-table__toolbar-results"
-  >
-    <span
-      className="ins-c-table__toolbar-results-count"
-    >
-       
-      0 Results
-       
-    </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
-  </div>
 </Fragment>
 `;
 
@@ -113,13 +77,6 @@ exports[`TableToolbar component should render with results greater than 1 1`] =
       2 Results
        
     </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
   </div>
 </Fragment>
 `;
@@ -134,24 +91,6 @@ exports[`TableToolbar component should render with results of 0 1`] = `
   >
     Some
   </Toolbar>
-  <div
-    className="ins-c-table__toolbar-results"
-  >
-    <span
-      className="ins-c-table__toolbar-results-count"
-    >
-       
-      0 Results
-       
-    </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
-  </div>
 </Fragment>
 `;
 
@@ -175,13 +114,6 @@ exports[`TableToolbar component should render with results of 1 1`] = `
       1 Result
        
     </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
   </div>
 </Fragment>
 `;
@@ -196,24 +128,7 @@ exports[`TableToolbar component should render with selection of 0 1`] = `
   >
     Some
   </Toolbar>
-  <div
-    className="ins-c-table__toolbar-results"
-  >
-    <span
-      className="ins-c-table__toolbar-results-count"
-    >
-       
-      0 Results
-       
-    </span>
-    <span
-      className="ins-c-table__toolbar-results-selected"
-    >
-       
-      0
-       Selected 
-    </span>
-  </div>
+  0
 </Fragment>
 `;
 
@@ -230,13 +145,6 @@ exports[`TableToolbar component should render with selection of 1 1`] = `
   <div
     className="ins-c-table__toolbar-results"
   >
-    <span
-      className="ins-c-table__toolbar-results-count"
-    >
-       
-      0 Results
-       
-    </span>
     <span
       className="ins-c-table__toolbar-results-selected"
     >