Skip to content

Commit

Permalink
Update the IndexTable component to prevent a scrollbar flash when t…
Browse files Browse the repository at this point in the history
…he table is rendered
  • Loading branch information
sam-b-rose committed Apr 2, 2024
1 parent e8fda67 commit bce10a1
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/tricky-beans-fold.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

[IndexTable] Initially hide the scrollbar and update scrollbar padding
5 changes: 2 additions & 3 deletions polaris-react/src/components/IndexTable/IndexTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export interface TableHeadingRect {
offsetLeft: number;
}

const SCROLL_BAR_PADDING = 4;
const SCROLL_BAR_PADDING = 16;
const SCROLL_BAR_DEBOUNCE_PERIOD = 300;

function IndexTableBase({
Expand Down Expand Up @@ -188,8 +188,7 @@ function IndexTableBase({

const [tableInitialized, setTableInitialized] = useState(false);
const [stickyWrapper, setStickyWrapper] = useState<HTMLElement | null>(null);
const [hideScrollContainer, setHideScrollContainer] =
useState<boolean>(false);
const [hideScrollContainer, setHideScrollContainer] = useState<boolean>(true);

const tableHeadings = useRef<HTMLElement[]>([]);
const stickyTableHeadings = useRef<HTMLElement[]>([]);
Expand Down

0 comments on commit bce10a1

Please sign in to comment.