[ScrollArea] Remove gutter prop (#1023)

mui · Dec 11, 2024 · fa9515b · fa9515b
1 parent e8460f3
commit fa9515b
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 338 deletions.
diff --git a/docs/data/components/scroll-area/ScrollAreaInset.js b/docs/data/components/scroll-area/ScrollAreaInset.js
diff --git a/docs/data/components/scroll-area/ScrollAreaInset.tsx b/docs/data/components/scroll-area/ScrollAreaInset.tsx
diff --git a/docs/data/components/scroll-area/scroll-area.mdx b/docs/data/components/scroll-area/scroll-area.mdx
@@ -46,16 +46,6 @@ The scrollbar elements can be shown conditionally based on the user's interactio
 }
 ```
 
-## Inset scrollbars
-
-By specifying a `gutter` prop, you can create inset scrollbars that make space for the scrollbar, preventing them from overlapping content. The value should match the size of the scrollbar width/height.
-
-```jsx
-<ScrollArea.Root gutter={10}>
-```
-
-<Demo demo="ScrollAreaInset" defaultCodeOpen="false" />
-
 ## Corner
 
 The vertical and horizontal scrollbar elements can prevent overlapping each other by rendering a `Corner`:

diff --git a/docs/reference/generated/scroll-area-root.json b/docs/reference/generated/scroll-area-root.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "gutter": {
-      "type": "number | string",
-      "default": "0",
-      "description": "Determines the space to account for inset scrollbars."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/src/app/(private)/experiments/scroll-area-inset.module.css b/docs/src/app/(private)/experiments/scroll-area-inset.module.css
@@ -0,0 +1,41 @@
+.Root {
+  width: 300px;
+  height: 300px;
+  --scrollbar-size: 20px;
+}
+
+.Viewport {
+  width: 100%;
+  height: 100%;
+}
+
+.Content {
+  width: 600px;
+  height: 600px;
+  padding-inline-end: var(--scrollbar-size);
+  padding-bottom: var(--scrollbar-size);
+}
+
+.Scrollbar {
+  background: lightgray;
+
+  &[data-orientation='vertical'] {
+    width: var(--scrollbar-size);
+  }
+
+  &[data-orientation='horizontal'] {
+    height: var(--scrollbar-size);
+  }
+}
+
+.Thumb {
+  background: black;
+
+  &[data-orientation='vertical'] {
+    width: var(--scrollbar-size);
+  }
+
+  &[data-orientation='horizontal'] {
+    height: var(--scrollbar-size);
+  }
+}
diff --git a/docs/src/app/(private)/experiments/scroll-area-inset.tsx b/docs/src/app/(private)/experiments/scroll-area-inset.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ScrollArea } from '@base-ui-components/react/scroll-area';
+import styles from './scroll-area-inset.module.css';
+
+export default function ScrollAreaInset() {
+  return (
+    <div>
+      <p>
+        Scroll content is not clipped by inset scrollbars (user-defined paddings)
+      </p>
+      <ScrollArea.Root className={styles.Root}>
+        <ScrollArea.Viewport className={styles.Viewport}>
+          <div className={styles.Content}>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+              commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+              velit esse cillum dolore eu fugiat nulla pariatur.
+            </p>
+          </div>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar className={styles.Scrollbar} orientation="vertical">
+          <ScrollArea.Thumb className={styles.Thumb} />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Scrollbar className={styles.Scrollbar} orientation="horizontal">
+          <ScrollArea.Thumb className={styles.Thumb} />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Corner />
+      </ScrollArea.Root>
+    </div>
+  );
+}
diff --git a/packages/react/src/scroll-area/root/ScrollAreaRoot.test.tsx b/packages/react/src/scroll-area/root/ScrollAreaRoot.test.tsx
@@ -72,64 +72,6 @@ describe('<ScrollArea.Root />', () => {
         expect(style.paddingRight).to.equal('0px');
         expect(style.paddingBottom).to.equal('0px');
       });
-
-      it('should add padding for inset scrollbars', async () => {
-        await render(
-          <ScrollArea.Root
-            gutter={SCROLLBAR_WIDTH}
-            style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}
-          >
-            <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }}>
-              <div style={{ width: SCROLLABLE_CONTENT_SIZE, height: SCROLLABLE_CONTENT_SIZE }} />
-            </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar
-              orientation="vertical"
-              style={{ width: SCROLLBAR_WIDTH, height: '100%' }}
-            />
-            <ScrollArea.Scrollbar
-              orientation="horizontal"
-              style={{ height: SCROLLBAR_HEIGHT, width: '100%' }}
-            />
-          </ScrollArea.Root>,
-        );
-
-        const contentWrapper = screen.getByTestId('viewport').firstElementChild!;
-        const style = getComputedStyle(contentWrapper);
-
-        expect(style.paddingRight).to.equal(`${SCROLLBAR_WIDTH}px`);
-        expect(style.paddingBottom).to.equal(`${SCROLLBAR_HEIGHT}px`);
-      });
-    });
-
-    describe('prop: dir', () => {
-      it('should adjust inset padding for rtl', async () => {
-        await render(
-          <ScrollArea.Root
-            dir="rtl"
-            gutter={SCROLLBAR_WIDTH}
-            style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}
-          >
-            <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }}>
-              <div style={{ width: SCROLLABLE_CONTENT_SIZE, height: SCROLLABLE_CONTENT_SIZE }} />
-            </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar
-              orientation="vertical"
-              style={{ width: SCROLLBAR_WIDTH, height: '100%' }}
-            />
-            <ScrollArea.Scrollbar
-              orientation="horizontal"
-              style={{ height: SCROLLBAR_HEIGHT, width: '100%' }}
-            />
-          </ScrollArea.Root>,
-        );
-
-        const contentWrapper = screen.getByTestId('viewport').firstElementChild!;
-        const style = getComputedStyle(contentWrapper);
-
-        expect(style.paddingLeft).to.equal(`${SCROLLBAR_WIDTH}px`);
-        expect(style.paddingRight).not.to.equal(`${SCROLLBAR_WIDTH}px`);
-        expect(style.paddingBottom).to.equal(`${SCROLLBAR_HEIGHT}px`);
-      });
     });
 
     it('accounts for scrollbar padding', async () => {