[Resolve Errors] [Review Warnings] Tables - full borders will only sh…

…ow when overflowing (horizontal scrolling active) (#583)

closes #547 

Note: Requires cfpb/design-system-react#358 to
be merged in first

## Changes
- enhancement-style(tables): full borders will only show for overflowing
- chore(tables): removed the need for `showTableBorders`

## How to test this PR

1. `yarn install` to get the latest DSR update with the table ref change
2. use
[all-errors-warnings-no-syntax-errors.csv](https://github.com/cfpb/sbl-frontend/files/15444623/all-errors-warnings-no-syntax-errors.csv)
or any register with multifield errors that causes
overflowing/horizontal scrolling
3. Verify that tables without overflowing don't have full borders,
tables that do have overflowing/horizontal scrolling have full borders

## Screenshot
<img width="638" alt="Screenshot 2024-05-25 at 11 47 57 AM"
src="https://github.com/cfpb/sbl-frontend/assets/13324863/635e1840-4ef4-4e86-8fc9-679f62cc3903">

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Markdown from 'react-markdown';
 import type { Detail, Field } from 'types/filingTypes';
 import { Hundred, ITEMS_PER_PAGE, One } from 'utils/constants';
+import useIsOverflowing from 'utils/useIsOverflowing';
 
 // NOTE: To be removed after table styling finalized
 const maxUidTestRows = [...Array.from({ length: Hundred }).keys()].map(
@@ -26,13 +27,9 @@ const wordBreakTestRows = [
 
 interface FieldEntryProperties {
   fieldObject: Detail;
-  showTableBorders?: boolean;
 }
 
-function FieldEntry({
-  fieldObject,
-  showTableBorders,
-}: FieldEntryProperties): JSX.Element {
+function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
   // TODO: selectively enable borders based on if the table is overflowing
   // Issue: https://github.com/cfpb/sbl-frontend/issues/547
   // const [multiTableReference, isMultiTableOverflowing] = useIsOverflowing();
@@ -104,6 +101,10 @@ function FieldEntry({
     setCurrentPage(inputNumber);
   };
 
+  // Selectively enable full table borders based on if the table's wrapper div is overflowing
+  const [tableDivReference, tableDivReferenceIsOverflowing] =
+    useIsOverflowing();
+
   return (
     <div className='mb-[2.8125rem]'>
       <div className='validation-info-section mb-[1.875rem] max-w-[41.875rem]'>
@@ -121,14 +122,14 @@ function FieldEntry({
       <div className='mb-[0.9375rem]'>
         <Table
           className={`w-full max-w-full table-auto ${
-            showTableBorders ? '' : '!border-0'
+            tableDivReferenceIsOverflowing ? '' : '!border-0'
           }`}
           columns={columns}
           // @ts-expect-error TypeScript error needs to be resolved within DSR
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           rows={itemsToShow}
           isScrollableHorizontal
-          // ref={multiTableReference}
+          ref={tableDivReference}
         />
         {/* NOTE: Table used to create space */}
         {isHiddenTableAdded ? (
@@ -155,8 +156,4 @@ function FieldEntry({
   );
 }
 
-FieldEntry.defaultProps = {
-  showTableBorders: false,
-};
-
 export default FieldEntry;

src/pages/Filing/FilingApp/FieldSummary.tsx

@@ -9,7 +9,6 @@ interface FieldProperties {
   bottomMargin?: boolean;
   children: ReactNode;
   id: string;
-  showTableBorders?: boolean;
 }
 
 function FieldSummary({
@@ -19,7 +18,6 @@ function FieldSummary({
   children,
   id,
   className = '',
-  showTableBorders,
 }: FieldProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
@@ -30,19 +28,14 @@ function FieldSummary({
         {children}
       </SectionIntro>
       {fieldArray.map(fieldObject => (
-        <FieldEntry
-          key={fieldObject.validation.id}
-          fieldObject={fieldObject}
-          showTableBorders={showTableBorders}
-        />
+        <FieldEntry key={fieldObject.validation.id} fieldObject={fieldObject} />
       ))}
     </div>
   );
 }
 
 FieldSummary.defaultProps = {
   bottomMargin: false,
-  showTableBorders: false,
 };
 
 export default FieldSummary;

src/pages/Filing/FilingApp/FilingErrors/index.tsx

@@ -182,7 +182,6 @@ function FilingErrors(): JSX.Element {
                   id='multi-field-errors'
                   heading={`Multi-field errors: ${multiFieldRowErrorsCount.toLocaleString()} found`}
                   fieldArray={logicErrorsMulti}
-                  showTableBorders
                   bottomMargin
                 >
                   Multi-field validations check that the values of certain

src/pages/Filing/FilingApp/FilingWarnings/index.tsx

@@ -187,7 +187,6 @@ function FilingWarnings(): JSX.Element {
               id='multi-field-warnings'
               heading={`Multi-field warnings: ${multiFieldRowWarningsCount.toLocaleString()} found`}
               fieldArray={logicWarningsMulti}
-              showTableBorders
               bottomMargin
             >
               Multi-field validations check that the values of certain fields

yarn.lock

@@ -5562,7 +5562,7 @@ __metadata:
 
 "design-system-react@https://github.com/cfpb/design-system-react":
   version: 0.0.0
-  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=a7eb40a6d8a2faa59ad2655a83732b97be16406b"
+  resolution: "design-system-react@https://github.com/cfpb/design-system-react.git#commit=c04021288110c5d15f06b2c33c4a8de27c23eb76"
   dependencies:
     "@cfpb/cfpb-design-system": ^0.35.0
     "@cfpb/cfpb-expandables": ^0.35.0
@@ -5574,7 +5574,7 @@ __metadata:
     react-dom: 18.2.0
     react-router-dom: 6.3.0
     react-select: ^5.7.2
-  checksum: ab171d1cc6c1887d3871780072a79c5a40b9960a62c4af68d62d0ddc70958c2b59ae35462aaf53c34c65989c61a6580301facaa640eb5ced208f587a61da4de9
+  checksum: e3f22b32ccd03b3a80396fd4769dce9cc085fd02d938fb5f6d9e1e1608f1b60d56e40cd3746e3c5b569595ec12417ee743ca431f64de97b5e31d9e794325229e
   languageName: node
   linkType: hard