💄 Donor Table Styling Fixes for Dropdown Panel (#1983)

* Apply `min-height` to table so the panel can be used without scrolling when there isn't enough data * Prevent table header opacity change when all data is filtered out
icgc-argo · Jul 29, 2021 · b176ce4 · b176ce4
1 parent daf1546
commit b176ce4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git a/.storybook/PropTypesTable/ReactTableContainer.tsx b/.storybook/PropTypesTable/ReactTableContainer.tsx
@@ -52,6 +52,17 @@ export default styled('div')`
     border-collapse: collapse;
     overflow: auto;
   }
+  .ReactTable.has-filters .rt-table {
+    opacity: 1 !important;
+    min-height: 220px;
+    .rt-tbody .rt-tr-group {
+      max-height: 28px;
+    }
+  }
+  .ReactTable.has-filters.no-data .rt-table {
+    margin-bottom: -165px;
+    border-bottom: none;
+  }
   .ReactTable .rt-thead {
     -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;

diff --git a/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx b/components/pages/submission-system/program-dashboard/DonorDataSummary/DonorSummaryTable.tsx
@@ -517,6 +517,8 @@ export default ({
             onPageSizeChange={onPageSizeChange}
             onSortedChange={onSortedChange}
             defaultSorted={getDefaultSort(initialSorts)}
+            // filter panel style workarounds
+            className={`has-filters${!programDonorSummaryEntries.length ? ' no-data' : ''}`}
           />
         </>
       )}

diff --git a/uikit/Table/reactTableDefaultStyle.tsx b/uikit/Table/reactTableDefaultStyle.tsx
@@ -48,6 +48,17 @@ export default css`
     border-collapse: collapse;
     overflow: auto;
   }
+  &.ReactTable.has-filters .rt-table {
+    opacity: 1 !important;
+    min-height: 220px;
+    .rt-tbody .rt-tr-group {
+      max-height: 28px;
+    }
+  }
+  &.ReactTable.has-filters.no-data .rt-table {
+    margin-bottom: -165px;
+    border-bottom: none;
+  }
   &.ReactTable .rt-thead {
     flex: 1 0 auto;
     display: flex;

diff --git a/uikit/Table/styledComponent.tsx b/uikit/Table/styledComponent.tsx
@@ -43,6 +43,21 @@ export const StyledTable = styled<typeof ReactTable, StyledTableProps>(ReactTabl
 
   &.ReactTable {
     border: none;
+    &.has-filters {
+      .rt-table {
+        opacity: 1 !important;
+        min-height: 220px;
+        .rt-tbody .rt-tr-group {
+          max-height: 28px;
+        }
+      }
+      &.no-data {
+        .rt-table {
+          margin-bottom: -165px;
+          border-bottom: none;
+        }
+      }
+    }
     & .rt-table {
       ${({ theme, withOutsideBorder }) =>
         withOutsideBorder