Fix RiverStoryScroll disabled bug on narrow viewports (#918)

* fix riverstoryscroll disabled bug * remove debugging * restore linebreak
primer · Feb 7, 2025 · 65f7a92 · 65f7a92
1 parent 5966728
commit 65f7a92
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 7 deletions.
diff --git a/.changeset/strong-emus-leave.md b/.changeset/strong-emus-leave.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fix `RiverStoryScroll` scrolling bug when `disabled={true}`
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.features.stories.tsx b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.features.stories.tsx
@@ -134,6 +134,16 @@ Disabled.args = {
   disabled: true,
 }
 
+export const DisabledNarrow = args => <Disabled withTrailingComponent {...args} />
+DisabledNarrow.args = {
+  disabled: true,
+}
+DisabledNarrow.parameters = {
+  viewport: {
+    defaultViewport: 'iphonexr',
+  },
+}
+
 export const EnterpriseExample = () => (
   <RiverStoryScroll>
     <River>

diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.tsx b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.tsx
@@ -39,7 +39,10 @@ export function RiverStoryScroll({children, disabled}: RiverStoryScrollProps) {
   const Children = React.Children.map(children, child => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child as React.ReactElement<RiverProps>, {
-        className: clsx(styles['RiverStoryScroll__internal-river'], styles['RiverStoryScroll__content-stack']),
+        className: clsx(
+          styles['RiverStoryScroll__internal-river'],
+          !disabled && styles['RiverStoryScroll__content-stack'],
+        ),
       })
     }
   })

diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.visual.spec.ts b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.visual.spec.ts
@@ -44,6 +44,18 @@ test.describe('Visual Comparison: RiverStoryScroll', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
+  // eslint-disable-next-line i18n-text/no-en
+  test.describe('Mobile viewport test for Disabled Narrow', () => {
+    test.use({viewport: {width: 360, height: 800}})
+    test('RiverStoryScroll / Disabled Narrow', async ({page}) => {
+      await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=components-riverstoryscroll-features--disabled-narrow&viewMode=story',
+      )
+
+      await page.waitForTimeout(500)
+      expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+    })
+  })
   test('RiverStoryScroll / Enterprise Example', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-riverstoryscroll-features--enterprise-example&viewMode=story',

diff --git a/...Scroll-Mobile-vie-be16f-led-Narrow-RiverStoryScroll-Disabled-Narrow-1-linux.png b/...Scroll-Mobile-vie-be16f-led-Narrow-RiverStoryScroll-Disabled-Narrow-1-linux.png