Remove both-edges

mui · Oct 31, 2024 · 1635971 · 1635971
1 parent 3355f9f
commit 1635971
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 51 deletions.
diff --git a/docs/data/api/scroll-area-root.json b/docs/data/api/scroll-area-root.json
@@ -2,10 +2,7 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "gutter": {
-      "type": {
-        "name": "enum",
-        "description": "'both-edges'<br>&#124;&nbsp;'none'<br>&#124;&nbsp;'stable'"
-      },
+      "type": { "name": "enum", "description": "'none'<br>&#124;&nbsp;'stable'" },
       "default": "'stable'"
     },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },

diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
@@ -67,7 +67,6 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
-  width: 10px;
   padding: 2px;
   visibility: hidden;
   background: transparent;
@@ -82,8 +81,11 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     background: rgb(0 0 0 / 0.1);
   }
 
+  &[data-orientation='vertical'] {
+    width: 10px;
+  }
+
   &[data-orientation='horizontal'] {
-    width: 100%;
     height: 10px;
   }
 

diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
@@ -67,7 +67,6 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
-  width: 10px;
   padding: 2px;
   visibility: hidden;
   background: transparent;
@@ -82,8 +81,11 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     background: rgb(0 0 0 / 0.1);
   }
 
+  &[data-orientation='vertical'] {
+    width: 10px;
+  }
+
   &[data-orientation='horizontal'] {
-    width: 100%;
     height: 10px;
   }
 

diff --git a/docs/data/components/scroll-area/scroll-area.mdx b/docs/data/components/scroll-area/scroll-area.mdx
@@ -49,14 +49,11 @@ The scrollbars can be either `overlay` (default) or `inset`. The `overlay` type
 
 When using `inset` scrollbars, the `gutter` prop can be used to keep a gutter present when the scrollbar is hidden. This is useful to prevent layout shift when the scrollbar is shown or hidden based on the content.
 
-Possible values match the CSS `scrollbar-gutter` property:
-
 - `stable` (default; padding added to account for vertical scrollbar)
-- `both-edges` (symmetrical padding added for vertical scrollbar)
 - `none` (layout shift allowed)
 
 ```jsx
-<ScrollArea.Root gutter="both-edges">
+<ScrollArea.Root gutter="none">
 ```
 
 ## Styling

diff --git a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx
@@ -130,32 +130,6 @@ describe('<ScrollArea.Root />', () => {
     });
 
     describe('prop: gutter', () => {
-      it('should adjust inset padding for gutter: both-edges', async () => {
-        await render(
-          <ScrollArea.Root
-            type="inset"
-            gutter="both-edges"
-            style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}
-          >
-            <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }} />
-            <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).to.equal(`${SCROLLBAR_WIDTH}px`);
-      });
-
       it('should not add inset padding for gutter: none', async () => {
         await render(
           <ScrollArea.Root

diff --git a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.tsx
@@ -78,7 +78,7 @@ namespace ScrollAreaRoot {
      * shifts when the scrollbar is hidden/shown.
      * @default 'stable'
      */
-    gutter?: 'none' | 'stable' | 'both-edges';
+    gutter?: 'none' | 'stable';
   }
 
   export interface OwnerState {}
@@ -106,7 +106,7 @@ ScrollAreaRoot.propTypes /* remove-proptypes */ = {
    * shifts when the scrollbar is hidden/shown.
    * @default 'stable'
    */
-  gutter: PropTypes.oneOf(['both-edges', 'none', 'stable']),
+  gutter: PropTypes.oneOf(['none', 'stable']),
   /**
    * A function to customize rendering of the component.
    */

diff --git a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRootContext.ts b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRootContext.ts
@@ -3,11 +3,12 @@ import * as React from 'react';
 export interface ScrollAreaRootContext {
   dir: string | undefined;
   type: 'overlay' | 'inset';
-  gutter?: 'stable' | 'both-edges' | 'none';
+  gutter?: 'stable' | 'none';
   cornerSize: { width: number; height: number };
   setCornerSize: React.Dispatch<React.SetStateAction<{ width: number; height: number }>>;
   thumbSize: { width: number; height: number };
   setThumbSize: React.Dispatch<React.SetStateAction<{ width: number; height: number }>>;
+  touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
   scrolling: boolean;

diff --git a/packages/mui-base/src/ScrollArea/Root/useScrollAreaRoot.ts b/packages/mui-base/src/ScrollArea/Root/useScrollAreaRoot.ts
@@ -17,6 +17,7 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
   const [scrolling, setScrolling] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState<Size>({ width: 0, height: 0 });
   const [thumbSize, setThumbSize] = React.useState<Size>({ width: 0, height: 0 });
+  const [touchModality, setTouchModality] = React.useState(false);
 
   const rootId = useId();
 
@@ -130,10 +131,17 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
       mergeReactProps<'div'>(externalProps, {
         dir,
         onPointerEnter({ pointerType }) {
-          if (pointerType !== 'touch') {
+          const isTouch = pointerType === 'touch';
+
+          setTouchModality(isTouch);
+
+          if (!isTouch) {
             setHovering(true);
           }
         },
+        onPointerDown({ pointerType }) {
+          setTouchModality(pointerType === 'touch');
+        },
         onPointerLeave() {
           setHovering(false);
         },
@@ -156,6 +164,7 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
       setCornerSize,
       thumbSize,
       setThumbSize,
+      touchModality,
       cornerRef,
       scrolling,
       setScrolling,
@@ -177,6 +186,7 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
       handlePointerUp,
       cornerSize,
       thumbSize,
+      touchModality,
       cornerRef,
       scrolling,
       hovering,

diff --git a/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts b/packages/mui-base/src/ScrollArea/Scrollbar/useScrollAreaScrollbar.ts
@@ -17,6 +17,7 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
     rootId,
     type,
     thumbSize,
+    touchModality,
   } = useScrollAreaRootContext();
 
   React.useEffect(() => {
@@ -128,7 +129,9 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
         onPointerUp: handlePointerUp,
         style: {
           position: 'absolute',
-          ...(type === 'inset' && { touchAction: 'none' }),
+          ...(type === 'inset'
+            ? { touchAction: 'none' }
+            : { pointerEvents: touchModality ? 'none' : 'auto' }),
           ...(orientation === 'vertical' && {
             top: 0,
             bottom: 'var(--scroll-area-corner-height)',
@@ -147,9 +150,11 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
       rootId,
       handlePointerUp,
       type,
+      touchModality,
       orientation,
       dir,
-      thumbSize,
+      thumbSize.height,
+      thumbSize.width,
       viewportRef,
       thumbYRef,
       scrollbarYRef,

diff --git a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
@@ -205,17 +205,13 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
       if (!hiddenState.scrollbarYHidden) {
         styles[dir === 'rtl' ? 'paddingLeft' : 'paddingRight'] = paddingX;
       }
+
       if (!hiddenState.scrollbarXHidden) {
         styles.paddingBottom = paddingY;
       }
 
-      if (hiddenState.scrollbarYHidden) {
-        if (gutter === 'stable') {
-          styles[dir === 'rtl' ? 'paddingLeft' : 'paddingRight'] = paddingX;
-        } else if (gutter === 'both-edges') {
-          styles.paddingLeft = paddingX;
-          styles.paddingRight = paddingX;
-        }
+      if (hiddenState.scrollbarYHidden && gutter === 'stable') {
+        styles[dir === 'rtl' ? 'paddingLeft' : 'paddingRight'] = paddingX;
       }
     }