Merge pull request #212 from fedspendingtransparency/mod/11034-table-…

…borders Mod/11034 table borders
fedspendingtransparency · Jun 18, 2024 · db9fd23 · db9fd23
2 parents 0ca2394 + e37d3b0
commit db9fd23
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 20 deletions.
diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -49,6 +49,7 @@ const defaultProps = {
 const Table = (props) => {
     const [isScrolledRight, setIsScrolledRight] = useState(false);
     const [isScrolledLeft, setIsScrolledLeft] = useState(true);
+    const [isScrolling, setIsScrolling] = useState(false);
 
     const stackedClass = props.isStacked ? `usa-dt-table__stacked` : '';
 
@@ -71,6 +72,7 @@ const Table = (props) => {
     const element = document.querySelector(".advanced-search__table-wrapper");
     if (element) {
         element.addEventListener("scroll", (e) => {
+            setIsScrolling(true);
             if ((e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft) < 20) {
                 setIsScrolledRight(true);
             }
@@ -84,6 +86,10 @@ const Table = (props) => {
             else {
                 setIsScrolledLeft(false);
             }
+
+            setTimeout(() => {
+                setIsScrolling(false);
+            }, 100);
         });
     }
 
@@ -120,7 +126,9 @@ const Table = (props) => {
         body = (<TableData {...props} isScrolledLeft={isScrolledLeft} />);
     }
 
-    props.checkToAddRightFade(isScrolledLeft, isScrolledRight);
+    if (isScrolling && props.checkToAddRightFade) {
+        props.checkToAddRightFade(isScrolledLeft, isScrolledRight);
+    }
 
     return (
         <>

diff --git a/dist/data-transparency-ui.css b/dist/data-transparency-ui.css
diff --git a/dist/index.js b/dist/index.js
diff --git a/docs/211.758cb3ad.iframe.bundle.js → docs/485.a3afc9db.iframe.bundle.js b/docs/211.758cb3ad.iframe.bundle.js → docs/485.a3afc9db.iframe.bundle.js
diff --git a/...211.758cb3ad.iframe.bundle.js.LICENSE.txt → ...485.a3afc9db.iframe.bundle.js.LICENSE.txt b/...211.758cb3ad.iframe.bundle.js.LICENSE.txt → ...485.a3afc9db.iframe.bundle.js.LICENSE.txt
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -338,7 +338,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="main.7c479eb17dfd7d1f3ceb.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="main.7abc15f4434bf781d421.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="211.758cb3ad.iframe.bundle.js"></script><script src="main.6acb136d.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="485.a3afc9db.iframe.bundle.js"></script><script src="main.ddbcd588.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.6acb136d.iframe.bundle.js b/docs/main.6acb136d.iframe.bundle.js
diff --git a/docs/main.7c479eb17dfd7d1f3ceb.css → docs/main.7abc15f4434bf781d421.css b/docs/main.7c479eb17dfd7d1f3ceb.css → docs/main.7abc15f4434bf781d421.css
diff --git a/docs/main.7c479eb17dfd7d1f3ceb.css.map → docs/main.7abc15f4434bf781d421.css.map b/docs/main.7c479eb17dfd7d1f3ceb.css.map → docs/main.7abc15f4434bf781d421.css.map
diff --git a/docs/main.ddbcd588.iframe.bundle.js b/docs/main.ddbcd588.iframe.bundle.js
diff --git a/docs/project.json b/docs/project.json
@@ -1 +1 @@
-{"generatedAt":1718374912046,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.1"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
+{"generatedAt":1718721540714,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.8.1"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-knobs":{"version":"6.4.0"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data-transparency-ui",
-  "version": "6.2.31",
+  "version": "6.2.32",
   "description": "Library of UI components powering Data Transparency websites",
   "main": "dist/index.js",
   "style": "dist/data-transparency-ui.css",

diff --git a/styles/components/table/_table.scss b/styles/components/table/_table.scss
@@ -17,7 +17,6 @@ table.usda-table {
         td.usda-table__cell {
             text-align: left;
             vertical-align: baseline;
-            border: rem(1) solid $gray-cool-10;
 
             &.usda-table__cell_right {
                 text-align: right;
@@ -134,11 +133,22 @@ table.usda-table {
     }
 
     &.table-for-new-search-page {
+        margin-top: 0;
+        margin-bottom: 0;
 
         .usda-table__body-special-color {
             background-color: $blue-warm-5;
         }
 
+        th {
+            border: rem(1) solid $gray-cool-10;
+        }
+
+        td {
+            border: rem(1) solid $gray-cool-10;
+            background-color: unset;
+        }
+
         thead.usda-table__head {
             th.table-header {
                 color: $theme-color-headline;
@@ -158,6 +168,17 @@ table.usda-table {
         tbody.usda-table__body {
             color: $theme-color-body;
             line-height: 1.5;
+
+            tr:last-of-type {
+                td:first-of-type {
+                    border-bottom-left-radius: rem(4);
+                }
+
+                td:last-of-type {
+                    border-bottom-right-radius: rem(4);
+                }
+            }
+
             .usda-table__row {
                 &:hover {
                     background-color: $gray-cool-2;
@@ -201,10 +222,19 @@ table.usda-table {
                 }
             }
         }
+
         &.award-results-table-dtui {
             // this is needed to make the right border and the box shadow appear on the sticky column
             border-collapse: separate;
 
+            th.table-header {
+                // because we were seeing double borders here
+                border-right: 0;
+            }
+            th.table-header:last-of-type {
+                border-right: rem(1) solid $gray-cool-10;
+            }
+
             thead.usda-table__head {
                 th {
                     position: -webkit-sticky; /* Safari */
@@ -214,11 +244,23 @@ table.usda-table {
             }
 
             tbody.usda-table__body {
+                th {
+                    border: rem(1) solid $gray-cool-10;
+                }
 
                 .usda-table__row {
-
                     td.usda-table__cell {
                         vertical-align: middle;
+                        // because of overlapping css rules, we need to delete the borders here
+                        // to avoid double borders
+                        border-top: 0;
+                        border-right: 0;
+                        // and add the bottom border
+                        border-bottom: rem(1) solid $gray-cool-10;
+
+                        &:last-of-type {
+                            border-right: rem(1) solid $gray-cool-10;
+                        }
                     }
 
                     &:hover {
@@ -230,15 +272,13 @@ table.usda-table {
                     }
 
                     &.usda-table__row_odd {
-
                         td.usda-table__cell {
                             &.stickyColumn {
                                 background-color: $color-white;
                             }
                         }
 
                         &:hover {
-
                             td.usda-table__cell.stickyColumn {
                                 background-color: $gray-cool-2;
                             }

diff --git a/styles/components/table/_tableHeader.scss b/styles/components/table/_tableHeader.scss
@@ -3,7 +3,6 @@ tr.usda-table__row {
 }
 th.table-header {
     background-color: $gray-cool-3;
-    border: rem(1) solid $gray-cool-10;
     padding: 0;
     &.nested-header {
         .table-header__content {