From d8e2f66ab18bc1a643dd16d9592939ef19b00c72 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Mon, 2 Feb 2026 23:14:01 -0500 Subject: [PATCH 1/7] pin behaviors to canary version and add sample story --- package-lock.json | 22 ++-- packages/react/package.json | 2 +- .../ActionMenu.examples.stories.tsx | 104 +++++++++++++++++- packages/react/src/ActionMenu/ActionMenu.tsx | 4 +- .../src/AnchoredOverlay/AnchoredOverlay.tsx | 4 +- 5 files changed, 121 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index a079a41e5c6..eb329011901 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,7 +81,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.8.0", + "@primer/react": "38.9.0", "@primer/styled-react": "1.0.2", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", @@ -95,7 +95,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.8.0", + "@primer/react": "38.9.0", "@primer/styled-react": "1.0.2", "next": "^16.1.5", "react": "^19.2.0", @@ -138,7 +138,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.21.0", - "@primer/react": "38.8.0", + "@primer/react": "38.9.0", "@primer/styled-react": "1.0.2", "clsx": "^2.1.1", "next": "^16.1.5", @@ -6397,12 +6397,6 @@ "prettier": "*" } }, - "node_modules/@primer/behaviors": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.10.0.tgz", - "integrity": "sha512-+GaAqCJuoYVf0Sy67mJfhw7k17nrCnfanI4H6NFEyToDC1ghrOC9Yl7627WTWpqGg+1lPhjF7OHF7VClLz52oA==", - "license": "MIT" - }, "node_modules/@primer/css": { "version": "21.5.1", "dev": true, @@ -26883,7 +26877,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.8.0", + "version": "38.9.0", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26891,7 +26885,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "^1.10.0", + "@primer/behaviors": "0.0.0-20260202035628", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", @@ -27024,6 +27018,12 @@ "version": "0.5.2", "license": "BSD-3-Clause" }, + "packages/react/node_modules/@primer/behaviors": { + "version": "0.0.0-20260202035628", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-0.0.0-20260202035628.tgz", + "integrity": "sha512-iOgJaZ/PhoUl5QEh10A8ojUIPjzRIoZrbhVXikbT3J82LyUElJ49HsrV18PSQYcZxWll+DfxnrRIoVwJQeCfvQ==", + "license": "MIT" + }, "packages/react/node_modules/dotenv": { "version": "16.6.1", "dev": true, diff --git a/packages/react/package.json b/packages/react/package.json index e107ee0b317..ad8e8b688a1 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -79,7 +79,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "^1.10.0", + "@primer/behaviors": "0.0.0-20260202035628", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx index 36f6481dd40..709481556c3 100644 --- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -1,5 +1,6 @@ +import {useState, useCallback} from 'react' import React from 'react' -import {ActionMenu, ActionList, Button, IconButton, FormControl, TextInput} from '../' +import {ActionMenu, ActionList, Button, IconButton, FormControl, TextInput, Dialog, Text} from '../' import { GearIcon, MilestoneIcon, @@ -654,3 +655,104 @@ export const DynamicAnchorSides = () => { ) } + +export const InsideDialog = () => { + const [isDialogOpen, setIsDialogOpen] = useState(false) + + const onDialogClose = useCallback(() => setIsDialogOpen(false), []) + const openDialog = useCallback(() => setIsDialogOpen(true), []) + + // Create scrollable content with multiple paragraphs + const scrollableContent = Array.from({length: 50}, (_, index) => ( + + This is paragraph {index + 1}. 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. + + )) + + return ( +
+ {/* Main scrollable content */} +
+ + Main Page Content + + + + + {/* Show more content after the button to make it scrollable */} + {scrollableContent} +
+ + {/* Dialog containing ActionMenu */} + {isDialogOpen && ( + + + This dialog contains an ActionMenu. The main page content behind is long enough to be scrollable. + + + + Document Settings + + + + Configure the document properties and sharing settings. These options allow you to control how the document + is displayed and who has access to it. + + + + Actions + + + alert('Save clicked')}> + Save + ⌘S + + alert('Save as clicked')}> + Save as... + ⌘⇧S + + alert('Export clicked')}> + Export + ⌘E + + alert('Print clicked')}> + Print + ⌘P + + + alert('Copy clicked')}> + Copy + ⌘C + + alert('Paste clicked')}> + Paste + ⌘V + + alert('Duplicate clicked')}> + Duplicate + ⌘D + + + alert('Share clicked')}> + Share + ⌘⇧U + + alert('Share via email clicked')}>Share via email + alert('Share via link clicked')}>Share via link + + + + + + You can interact with the ActionMenu above while the main page content remains scrollable in the background. + + + )} +
+ ) +} diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index 7e97ae4d673..f213ee997e3 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -256,7 +256,7 @@ const defaultVariant: ResponsiveValue<'anchored', 'anchored' | 'fullscreen'> = { } type MenuOverlayProps = Partial & - Pick & { + Pick & { /** * Recommended: `ActionList` */ @@ -268,6 +268,7 @@ const Overlay: FCWithSlotMarker> = ({ align = 'start', side, onPositionChange, + displayInVisibleViewport, 'aria-labelledby': ariaLabelledby, variant = defaultVariant, ...overlayProps @@ -331,6 +332,7 @@ const Overlay: FCWithSlotMarker> = ({ focusZoneSettings={isNarrowFullscreen ? {disabled: true} : {focusOutBehavior: 'wrap'}} onPositionChange={onPositionChange} variant={variant} + displayInVisibleViewport={displayInVisibleViewport} >
> + Partial> const defaultVariant = { regular: 'anchored', @@ -151,6 +151,7 @@ export const AnchoredOverlay: React.FC Date: Mon, 2 Feb 2026 23:25:42 -0500 Subject: [PATCH 2/7] lint fix --- packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx index 709481556c3..3d59a0c6c74 100644 --- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -1,5 +1,4 @@ -import {useState, useCallback} from 'react' -import React from 'react' +import React, {useState, useCallback} from 'react' import {ActionMenu, ActionList, Button, IconButton, FormControl, TextInput, Dialog, Text} from '../' import { GearIcon, From 3cfe5d473b9ff32ed9c5c02ab16c9bbde4418e2f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 3 Feb 2026 22:03:26 -0500 Subject: [PATCH 3/7] update @primer/behaviors version --- package-lock.json | 14 +++++++------- packages/react/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index eb329011901..8124eede793 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6397,6 +6397,12 @@ "prettier": "*" } }, + "node_modules/@primer/behaviors": { + "version": "0.0.0-20260204024055", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-0.0.0-20260204024055.tgz", + "integrity": "sha512-6OXX2+seVTZjlBUMYp/gmOCgoqMgSatHQVI405rKBo7FAD8RU2SXNm25ae5qsbkmUtj/noJW81/R4XMaMa3R/A==", + "license": "MIT" + }, "node_modules/@primer/css": { "version": "21.5.1", "dev": true, @@ -26885,7 +26891,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "0.0.0-20260202035628", + "@primer/behaviors": "0.0.0-20260204024055", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", @@ -27018,12 +27024,6 @@ "version": "0.5.2", "license": "BSD-3-Clause" }, - "packages/react/node_modules/@primer/behaviors": { - "version": "0.0.0-20260202035628", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-0.0.0-20260202035628.tgz", - "integrity": "sha512-iOgJaZ/PhoUl5QEh10A8ojUIPjzRIoZrbhVXikbT3J82LyUElJ49HsrV18PSQYcZxWll+DfxnrRIoVwJQeCfvQ==", - "license": "MIT" - }, "packages/react/node_modules/dotenv": { "version": "16.6.1", "dev": true, diff --git a/packages/react/package.json b/packages/react/package.json index ad8e8b688a1..6f0915d36f8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -79,7 +79,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "0.0.0-20260202035628", + "@primer/behaviors": "0.0.0-20260204024055", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", From 410ac9f136f9db2d99f19ff5fe61206c1be012e5 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 4 Feb 2026 19:12:44 -0500 Subject: [PATCH 4/7] add default maxHeight to ActionMenu --- packages/react/src/ActionMenu/ActionMenu.module.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css index 4c9b063d239..7e76e77e1ac 100644 --- a/packages/react/src/ActionMenu/ActionMenu.module.css +++ b/packages/react/src/ActionMenu/ActionMenu.module.css @@ -1,4 +1,7 @@ .ActionMenuContainer { + /* add default max height */ + max-height: 100vh; + &:where([data-variant='fullscreen']) { padding-top: var(--base-size-36); } From eae01a27b613d36b9503727c0428e117aba60a29 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 4 Feb 2026 19:38:46 -0500 Subject: [PATCH 5/7] format --- packages/react/src/ActionMenu/ActionMenu.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css index 7e76e77e1ac..a6faaed8413 100644 --- a/packages/react/src/ActionMenu/ActionMenu.module.css +++ b/packages/react/src/ActionMenu/ActionMenu.module.css @@ -1,7 +1,7 @@ .ActionMenuContainer { /* add default max height */ max-height: 100vh; - + &:where([data-variant='fullscreen']) { padding-top: var(--base-size-36); } From acca566ddb23e0774eb737bead2c42a9ae2e2ee2 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 5 Feb 2026 13:20:55 -0500 Subject: [PATCH 6/7] install stable @primer/behaviors version --- package-lock.json | 26 +++++++++++++------------- packages/react/package.json | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8124eede793..71516671d82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,8 +81,8 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.9.0", - "@primer/styled-react": "1.0.2", + "@primer/react": "38.10.0", + "@primer/styled-react": "1.0.3", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -95,8 +95,8 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.9.0", - "@primer/styled-react": "1.0.2", + "@primer/react": "38.10.0", + "@primer/styled-react": "1.0.3", "next": "^16.1.5", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -138,8 +138,8 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.21.0", - "@primer/react": "38.9.0", - "@primer/styled-react": "1.0.2", + "@primer/react": "38.10.0", + "@primer/styled-react": "1.0.3", "clsx": "^2.1.1", "next": "^16.1.5", "react": "^19.2.0", @@ -6398,9 +6398,9 @@ } }, "node_modules/@primer/behaviors": { - "version": "0.0.0-20260204024055", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-0.0.0-20260204024055.tgz", - "integrity": "sha512-6OXX2+seVTZjlBUMYp/gmOCgoqMgSatHQVI405rKBo7FAD8RU2SXNm25ae5qsbkmUtj/noJW81/R4XMaMa3R/A==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.10.2.tgz", + "integrity": "sha512-93juWZbWg2DRhC11+7RT7hMpY1VD3lBosLmccqEZ65yrCHqkBCjI8Uj8wxs3y0U+wWE07LAoLHAPylyWbifg5A==", "license": "MIT" }, "node_modules/@primer/css": { @@ -26883,7 +26883,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.9.0", + "version": "38.10.0", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26891,7 +26891,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "0.0.0-20260204024055", + "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", @@ -27253,7 +27253,7 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.2", + "version": "1.0.3", "dependencies": { "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", @@ -27267,7 +27267,7 @@ "@babel/preset-react": "^7.28.5", "@babel/preset-typescript": "^7.28.5", "@primer/primitives": "10.x || 11.x", - "@primer/react": "^38.4.0", + "@primer/react": "^38.10.0", "@rollup/plugin-babel": "^6.1.0", "@storybook/react-vite": "^10.1.11", "@types/react": "18.3.11", diff --git a/packages/react/package.json b/packages/react/package.json index 61605d04d06..c2d9b1bd332 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -79,7 +79,7 @@ "@github/tab-container-element": "^4.8.2", "@lit-labs/react": "1.2.1", "@oddbird/popover-polyfill": "^0.5.2", - "@primer/behaviors": "0.0.0-20260204024055", + "@primer/behaviors": "^1.10.2", "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.21.0", "@primer/primitives": "10.x || 11.x", From f9922f08cf06af3e037d63401957cc9991363005 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 5 Feb 2026 13:21:42 -0500 Subject: [PATCH 7/7] rename displayInVisibleViewport to displayInViewport --- .../react/src/ActionMenu/ActionMenu.examples.stories.tsx | 2 +- packages/react/src/ActionMenu/ActionMenu.tsx | 6 +++--- packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx index 3d59a0c6c74..7391258896d 100644 --- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -705,7 +705,7 @@ export const InsideDialog = () => { Actions - + alert('Save clicked')}> Save diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index f213ee997e3..3e1233ff55b 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.tsx @@ -256,7 +256,7 @@ const defaultVariant: ResponsiveValue<'anchored', 'anchored' | 'fullscreen'> = { } type MenuOverlayProps = Partial & - Pick & { + Pick & { /** * Recommended: `ActionList` */ @@ -268,7 +268,7 @@ const Overlay: FCWithSlotMarker> = ({ align = 'start', side, onPositionChange, - displayInVisibleViewport, + displayInViewport, 'aria-labelledby': ariaLabelledby, variant = defaultVariant, ...overlayProps @@ -332,7 +332,7 @@ const Overlay: FCWithSlotMarker> = ({ focusZoneSettings={isNarrowFullscreen ? {disabled: true} : {focusOutBehavior: 'wrap'}} onPositionChange={onPositionChange} variant={variant} - displayInVisibleViewport={displayInVisibleViewport} + displayInViewport={displayInViewport} >
> + Partial> const defaultVariant = { regular: 'anchored', @@ -151,7 +151,7 @@ export const AnchoredOverlay: React.FC