feat(table): toolbar only renders with children (#902)

* feat(table): toolbar only renders with children * feat(table): added secondarytitle and tooltip conditionals * feat(tabletoolbar): add conditionals to render
carbon-design-system · Feb 13, 2020 · 3584c3d · 3584c3d
1 parent cc956c3
commit 3584c3d
Show file tree

Hide file tree

Showing 4 changed files with 712 additions and 4,919 deletions.
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
@@ -362,57 +362,67 @@ const Table = props => {
 
   return (
     <StyledTableContainer style={style} className={className}>
-      <TableToolbar
-        tableId={id}
-        secondaryTitle={secondaryTitle}
-        tooltip={tooltip}
-        i18n={{
-          clearAllFilters: i18n.clearAllFilters,
-          columnSelectionButtonAria: i18n.columnSelectionButtonAria,
-          filterButtonAria: i18n.filterButtonAria,
-          searchLabel: i18n.searchLabel,
-          searchPlaceholder: i18n.searchPlaceholder,
-          batchCancel: i18n.batchCancel,
-          itemsSelected: i18n.itemsSelected,
-          itemSelected: i18n.itemSelected,
-          filterNone: i18n.filterNone,
-          filterAscending: i18n.filterAscending,
-          filterDescending: i18n.filterDescending,
-          downloadIconDescription: i18n.downloadIconDescription,
-          rowCountInHeader: i18n.rowCountInHeader,
-        }}
-        actions={pick(
-          actions.toolbar,
-          'onCancelBatchAction',
-          'onApplyBatchAction',
-          'onClearAllFilters',
-          'onToggleColumnSelection',
-          'onToggleFilter',
-          'onApplySearch',
-          'onDownloadCSV'
-        )}
-        options={pick(
-          options,
-          'hasColumnSelection',
-          'hasFilter',
-          'hasSearch',
-          'hasRowSelection',
-          'hasRowCountInHeader'
-        )}
-        tableState={{
-          totalSelected: view.table.selectedIds.length,
-          totalFilters: view.filters ? view.filters.length : 0,
-          totalItemsCount: view.pagination.totalItems,
-          ...pick(
-            view.toolbar,
-            'batchActions',
-            'search',
-            'activeBar',
-            'customToolbarContent',
-            'isDisabled'
-          ),
-        }}
-      />
+      {/* If there is no items being rendered in the toolbar, don't render the toolbar */
+      options.hasFilter ||
+      options.hasSearch ||
+      options.hasRowActions ||
+      options.hasRowCountInHeader ||
+      options.hasColumnSelection ||
+      actions.toolbar.onDownloadCSV ||
+      secondaryTitle ||
+      tooltip ? (
+        <TableToolbar
+          tableId={id}
+          secondaryTitle={secondaryTitle}
+          tooltip={tooltip}
+          i18n={{
+            clearAllFilters: i18n.clearAllFilters,
+            columnSelectionButtonAria: i18n.columnSelectionButtonAria,
+            filterButtonAria: i18n.filterButtonAria,
+            searchLabel: i18n.searchLabel,
+            searchPlaceholder: i18n.searchPlaceholder,
+            batchCancel: i18n.batchCancel,
+            itemsSelected: i18n.itemsSelected,
+            itemSelected: i18n.itemSelected,
+            filterNone: i18n.filterNone,
+            filterAscending: i18n.filterAscending,
+            filterDescending: i18n.filterDescending,
+            downloadIconDescription: i18n.downloadIconDescription,
+            rowCountInHeader: i18n.rowCountInHeader,
+          }}
+          actions={pick(
+            actions.toolbar,
+            'onCancelBatchAction',
+            'onApplyBatchAction',
+            'onClearAllFilters',
+            'onToggleColumnSelection',
+            'onToggleFilter',
+            'onApplySearch',
+            'onDownloadCSV'
+          )}
+          options={pick(
+            options,
+            'hasColumnSelection',
+            'hasFilter',
+            'hasSearch',
+            'hasRowSelection',
+            'hasRowCountInHeader'
+          )}
+          tableState={{
+            totalSelected: view.table.selectedIds.length,
+            totalFilters: view.filters ? view.filters.length : 0,
+            totalItemsCount: view.pagination.totalItems,
+            ...pick(
+              view.toolbar,
+              'batchActions',
+              'search',
+              'activeBar',
+              'customToolbarContent',
+              'isDisabled'
+            ),
+          }}
+        />
+      ) : null}
       <div className="addons-iot-table-container">
         <CarbonTable
           className={classNames({

diff --git a/src/components/Table/Table.story.jsx b/src/components/Table/Table.story.jsx
@@ -320,12 +320,7 @@ const actions = {
     onColumnResize: action('onColumnResize'),
   },
 };
-// const exampletext = (
-//   <div>
-//     <p>This is text</p>
-//     <Add />
-//   </div>
-// );
+
 /** This would be loaded from your fetch */
 export const initialState = {
   columns: tableColumns.map((i, idx) => ({
@@ -447,6 +442,7 @@ storiesOf('Watson IoT|Table', module)
       <FullWidthWrapper>
         <StatefulTable
           {...initialState}
+          secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
           columns={tableColumnsWithAlignment}
           actions={actions}
           lightweight={boolean('lightweight', false)}
@@ -467,32 +463,12 @@ storiesOf('Watson IoT|Table', module)
       },
     }
   )
-  .add('Stateful Example with Secondary Title', () => (
-    <FullWidthWrapper>
-      <StatefulTable
-        {...initialState}
-        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
-        options={{
-          hasSearch: boolean('Show Search', true),
-          hasPagination: boolean('Show Pagination', true),
-          hasRowSelection: 'multi',
-          hasFilter: boolean('Show Filter', true),
-          hasRowActions: boolean('Show Row Action', true),
-        }}
-        view={{
-          toolbar: { activeBar: null },
-        }}
-      />
-    </FullWidthWrapper>
-  ),
-  {
-    centered: { disable: true },
-  })
   .add(
     'Stateful Example with every third row unselectable',
     () => (
       <StatefulTable
         {...initialState}
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         data={initialState.data.map((eachRow, index) => ({
           ...eachRow,
           isSelectable: index % 3 !== 0,
@@ -521,6 +497,7 @@ storiesOf('Watson IoT|Table', module)
       <FullWidthWrapper>
         <StatefulTable
           {...initialState}
+          secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
           actions={{
             ...actions,
             toolbar: { ...actions.toolbar, onDownloadCSV: csvDownloadHandler },
@@ -598,6 +575,7 @@ storiesOf('Watson IoT|Table', module)
         <div>
           <StatefulTable
             {...initialState}
+            secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
             columns={tableColumnsFixedWidth}
             data={tableData}
             options={{
@@ -719,6 +697,7 @@ storiesOf('Watson IoT|Table', module)
     'minitable',
     () => (
       <StatefulTable
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         style={{ maxWidth: '300px' }}
         columns={tableColumns.slice(0, 2)}
         data={tableData}
@@ -734,6 +713,7 @@ storiesOf('Watson IoT|Table', module)
   )
   .add('with multi select and batch actions', () => (
     <StatefulTable
+      secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
       columns={tableColumns}
       data={tableData}
       actions={actions}
@@ -1543,6 +1523,7 @@ storiesOf('Watson IoT|Table', module)
     () => (
       <StatefulTable
         {...initialState}
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         actions={actions}
         options={{
           hasRowActions: true,
@@ -1659,7 +1640,6 @@ storiesOf('Watson IoT|Table', module)
             learnMoreText,
             dismissText,
           }
-        ~~~
 
         <br />