chore: Offset sticky scrollbar when sticky columns are enabled for al…

…l table variants (#1438)
cloudscape-design · Aug 16, 2023 · 3e4fceb · 3e4fceb
1 parent 84af267
commit 3e4fceb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/pages/table/sticky-columns.page.tsx b/pages/table/sticky-columns.page.tsx
@@ -230,7 +230,10 @@ export default () => {
         <Table
           {...collectionProps}
           data-test-id="small-table"
-          stickyColumns={{ first: parseInt(urlParams.stickyColumnsFirst), last: parseInt(urlParams.stickyColumnsLast) }}
+          stickyColumns={{
+            first: parseInt(urlParams.stickyColumnsFirst || '0'),
+            last: parseInt(urlParams.stickyColumnsLast || '0'),
+          }}
           {...urlParams}
           columnDefinitions={columnsConfig}
           selectedItems={selectedItems}
@@ -242,7 +245,10 @@ export default () => {
         <Table
           {...collectionProps}
           data-test-id="large-table"
-          stickyColumns={{ first: parseInt(urlParams.stickyColumnsFirst), last: parseInt(urlParams.stickyColumnsLast) }}
+          stickyColumns={{
+            first: parseInt(urlParams.stickyColumnsFirst || '0'),
+            last: parseInt(urlParams.stickyColumnsLast || '0'),
+          }}
           {...urlParams}
           ariaLabels={{ ...ariaLabels, tableLabel: 'Large table' }}
           columnDefinitions={COLUMN_DEFINITIONS}
@@ -254,7 +260,10 @@ export default () => {
         <Table
           {...collectionProps}
           data-test-id="inline-editing-table"
-          stickyColumns={{ first: parseInt(urlParams.stickyColumnsFirst), last: parseInt(urlParams.stickyColumnsLast) }}
+          stickyColumns={{
+            first: parseInt(urlParams.stickyColumnsFirst || '0'),
+            last: parseInt(urlParams.stickyColumnsLast || '0'),
+          }}
           {...urlParams}
           columnDefinitions={[
             {

diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -185,10 +185,6 @@ const InternalTable = React.forwardRef(
     });
 
     const hasStickyColumns = !!((stickyColumns?.first ?? 0) + (stickyColumns?.last ?? 0) > 0);
-    const isFullPageInVisualRefresh = isVisualRefresh && variant === 'full-page';
-    // All Classic variants and the "full-page" VR variant of the table with sticky columns should offset the scrollbar
-    // for it not to overlap interactive elements (such as checkboxes, radio buttons or links in cells)
-    const shouldOffsetStickyScrollbar = hasStickyColumns && (isVisualRefresh ? isFullPageInVisualRefresh : true);
 
     const hasEditableCells = !!columnDefinitions.find(col => col.editConfig);
     const tableRole = hasEditableCells ? 'grid' : 'table';
@@ -477,7 +473,7 @@ const InternalTable = React.forwardRef(
               wrapperRef={wrapperRefObject}
               tableRef={tableRefObject}
               onScroll={handleScroll}
-              offsetScrollbar={shouldOffsetStickyScrollbar}
+              offsetScrollbar={hasStickyColumns}
             />
           </InternalContainer>
         </ColumnWidthsProvider>

diff --git a/src/table/sticky-scrollbar/styles.scss b/src/table/sticky-scrollbar/styles.scss
@@ -28,7 +28,8 @@
 
   &-offset {
     // "offset" styles are needed for when sticky columns are enabled.
-    // We move the scrollbar lower for it not to overlap interactive elements (such as checkboxes or links)
+    // We move the scrollbar lower, so it doesn't overlap interactive elements (such as checkboxes or links)
+
     z-index: 800; // Higher than sticky columns
     &:not(.is-visual-refresh) {
       background-color: awsui.$color-background-container-content;
@@ -44,5 +45,5 @@
 }
 
 .is-visual-refresh {
-  // Used for decting visual refresh
+  // Used for detecting Visual Refresh
 }