refactor: datagrid virtual scrollbar

carbon-design-system · Sep 27, 2024 · 32eed5b · 32eed5b
1 parent c227d15
commit 32eed5b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 53 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -3555,15 +3555,12 @@ p.c4p--about-modal__copyright-text:first-child {
   width: 1%;
   align-items: center;
 }
-.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar {
-  scrollbar-width: thin;
-}
-.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
-}
-.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  background-color: var(--cds-background, #ffffff);
+.c4p--datagrid__grid-container .c4p--datagrid__fake-scrollbar {
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: calc(100% - 48px);
+  overflow-y: auto;
 }
 .c4p--datagrid__grid-container .c4p--datagrid__cell {
   display: flex;
@@ -3922,19 +3919,6 @@ p.c4p--about-modal__copyright-text:first-child {
   margin-right: 0.5rem;
 }
 
-.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
-  width: 10px;
-  height: 7px;
-}
-
-.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
-  background: var(--cds-layer);
-}
-
-.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-}
-
 .c4p--datagrid__virtualScrollContainer {
   width: 100%;
 }
@@ -3978,8 +3962,8 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--datagrid .c4p--datagrid__head-wrap {
   overflow: hidden;
   background-color: var(--cds-layer-accent);
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .c4p--datagrid .c4p--datagrid__head-wrap::-webkit-scrollbar {

diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
@@ -281,18 +281,12 @@
     align-items: center;
   }
 
-  .#{$block-class}__virtual-scrollbar {
-    //makes thin scrollbar in chrome and firefox
-    scrollbar-width: thin;
-  }
-
-  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
-    background-color: $text-placeholder;
-  }
-
-  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    background-color: $background;
+  .#{$block-class}__fake-scrollbar {
+    right: 0;
+    bottom: 0;
+    width: 16px;
+    height: calc(100% - 48px);
+    overflow-y: auto;
   }
 
   .#{$block-class}__cell {
@@ -719,20 +713,6 @@
   flex: 0 0 auto;
   margin-right: $spacing-03;
 }
-
-.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
-  width: 10px;
-  height: 7px;
-}
-
-.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
-  background: $layer;
-}
-
-.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-}
-
 .#{$block-class}__virtualScrollContainer {
   width: 100%;
 }

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -1210,7 +1210,7 @@ describe(componentName, () => {
         .getByRole('table')
         .getElementsByTagName('tbody')[0]
         .getElementsByTagName('div')[0].classList[0]
-    ).toBe('c4p--datagrid__virtual-scrollbar');
+    ).toBe('c4p--datagrid__virtual-container');
   });
 
   it('renders Ten Thousand table entries', async () => {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridVirtualBody.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridVirtualBody.tsx
@@ -124,7 +124,7 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
           innerRef={innerListRef}
           outerRef={testRef}
           ref={listRef}
-          className={`${blockClass}__virtual-scrollbar`}
+          className={`${blockClass}__virtual-container`}
         >
           {({ index, style }) => {
             const row = visibleRows[index];

diff --git a/packages/ibm-products/src/components/Datagrid/_storybook-styles.scss b/packages/ibm-products/src/components/Datagrid/_storybook-styles.scss
@@ -35,7 +35,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 .carbon-nested-table {
   border-bottom: 1px solid $border-subtle-01;
 
-  .#{$block-class}__virtual-scrollbar > div > div:last-child td {
+  .#{$block-class}__virtual-container > div > div:last-child td {
     border-bottom: none;
   }
 }