chore: add more updates to SimpleTable and subcomponents (#785)

influxdata · Aug 2, 2022 · d0eea27 · d0eea27
1 parent c5e9dcb
commit d0eea27
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.33.1",
+  "version": "2.33.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -95,7 +95,7 @@
     "react-leaflet-markercluster": "^2.0.0",
     "react-scrollbars-custom": "^4.0.20",
     "react-virtualized": "^9.21.2",
-    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
     "s2-geometry": "^1.2.10",
     "sass-loader": "^10.0.3",
     "style-loader": "^2.0.0",

diff --git a/giraffe/src/components/SimpleTable/InnerTable.tsx b/giraffe/src/components/SimpleTable/InnerTable.tsx
@@ -57,6 +57,7 @@ const InnerTable: FC<InnerProps> = ({
 
         return (
           <Table.Cell
+            className={`${styles['cf-table--cell']}`}
             key={`h${c.name}:r${idx}`}
             testID={`table-cell ${c.data[idx]}`}
           >

diff --git a/giraffe/src/components/SimpleTable/PagedTable.tsx b/giraffe/src/components/SimpleTable/PagedTable.tsx
@@ -40,6 +40,8 @@ const measurePage = (
   let lastSignature
   let signature
 
+  const lastVisibleRowMinimumHeight = 0.2 * rowHeight
+
   while (rowIdx < result.table.length) {
     if (result.table.columns?.table?.data?.[rowIdx] !== currentTable) {
       signature = Object.values(result.table.columns)
@@ -72,7 +74,7 @@ const measurePage = (
 
     runningHeight += rowHeight
 
-    if (runningHeight + 0.25 * rowHeight >= height) {
+    if (runningHeight + lastVisibleRowMinimumHeight >= height) {
       break
     }
 
@@ -252,7 +254,7 @@ const PagedTable: FC<Props> = ({result, properties}) => {
   useEffect(() => {
     if (rowHeight === 0 && pagedTableBodyRef?.current) {
       const calculatedRowHeight =
-        pagedTableBodyRef.current?.children?.[0].clientHeight ?? 0
+        pagedTableBodyRef.current.children?.[0]?.clientHeight ?? 0
 
       if (calculatedRowHeight !== rowHeight) {
         setRowHeight(calculatedRowHeight)
@@ -339,7 +341,12 @@ const PagedTable: FC<Props> = ({result, properties}) => {
       className={`${styles['visualization--simple-table--results']}`}
       ref={ref}
     >
-      <DapperScrollbars noScrollY>{inner}</DapperScrollbars>
+      <DapperScrollbars
+        className={`${styles['cf-dapper-scrollbars']}`}
+        noScrollY
+      >
+        {inner}
+      </DapperScrollbars>
     </div>
   )
 }

diff --git a/giraffe/src/style/variables.scss b/giraffe/src/style/variables.scss
@@ -1,6 +1,3 @@
-$cf-form-md-height: 44px;
-$cf-form-md-padding: 14px;
-$cf-form-md-font: 14px;
 $cf-font-weight--regular: 400;
 $cf-font-weight--medium: 600;
 $cf-font-weight--bold: 700;
@@ -24,9 +21,11 @@ $cf-space-s: 16px;
 $cf-space-m: 24px;
 $cf-form-xs-padding: $cf-space-xs;
 $cf-form-sm-padding: $cf-space-xs;
+$cf-form-md-padding: $cf-space-s;
 $cf-form-lg-padding: $cf-space-m;
 $cf-form-xs-height: 33px;
 $cf-form-sm-height: 40px;
+$cf-form-md-height: 44px;
 $cf-form-lg-height: 52px;
 
 $cf-grey-5: #07070e;
@@ -123,7 +122,7 @@ $cf-disabled-opacity: 0.5;
 
   --girafe-f-1-min: 15.75;
   --giraffe-f-1-max: 16.8;
-  --step-1: calc(
+  --giraffe-step-1: calc(
     ((var(--girafe-f-1-min) / 16) * 1rem) +
       (var(--giraffe-f-1-max) - var(--girafe-f-1-min)) * var(--giraffe-fluid-bp)
   );
@@ -139,6 +138,7 @@ $cf-disabled-opacity: 0.5;
 $cf-text-tiny: #{var(--giraffe-step--1)};
 $cf-form-xs-font: #{var(--giraffe-step-0)};
 $cf-form-sm-font: #{var(--giraffe-step-0)};
+$cf-form-md-font: #{var(--giraffe-step-1)};
 $cf-form-lg-font: #{var(--giraffe-step-1)};
 $cf-text-base: #{var(--giraffe-step-0)};
 

diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.33.1",
+  "version": "2.33.2",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/yarn.lock b/yarn.lock
@@ -10975,7 +10975,7 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtualized-auto-sizer@^1.0.2:
+react-virtualized-auto-sizer@^1.0.2, react-virtualized-auto-sizer@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
   integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==