chore: set thin as the default with for scrollbar on scrollable

Shopify · Mar 27, 2024 · dffc762 · dffc762
1 parent df52763
commit dffc762
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/slimy-onions-join.md b/.changeset/slimy-onions-join.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Set default scrollbar width to thin on scrollable
diff --git a/polaris-react/src/components/Scrollable/Scrollable.module.css b/polaris-react/src/components/Scrollable/Scrollable.module.css
@@ -102,6 +102,10 @@
   scrollbar-width: none;
 }
 
+.scrollbarWidthAuto {
+  scrollbar-width: auto;
+}
+
 .scrollbarGutterStable {
   scrollbar-gutter: stable;
 }

diff --git a/polaris-react/src/components/Scrollable/Scrollable.tsx b/polaris-react/src/components/Scrollable/Scrollable.tsx
@@ -41,8 +41,10 @@ export interface ScrollableProps extends React.HTMLProps<HTMLDivElement> {
   hint?: boolean;
   /** Adds a tabIndex to scrollable when children are not focusable */
   focusable?: boolean;
-  /** Browser determined scrollbar width */
-  scrollbarWidth?: 'thin' | 'none';
+  /** Browser determined scrollbar width
+   * @default 'thin'
+   */
+  scrollbarWidth?: 'thin' | 'none' | 'auto';
   /** Adds space to one or both sides to prevent content shift when scrolling is necessary */
   scrollbarGutter?: 'stable' | 'stable both-edges';
   /** Called when scrolled to the bottom of the scroll area */
@@ -67,7 +69,7 @@ const ScrollableComponent = forwardRef<ScrollableRef, ScrollableProps>(
       shadow,
       hint,
       focusable,
-      scrollbarWidth,
+      scrollbarWidth = 'thin',
       scrollbarGutter,
       onScrolledToBottom,
       ...rest