Skip to content

chore: graduate primer_react_overlay_max_height_clamp_to_viewport#7733

Open
francinelucca wants to merge 4 commits intomainfrom
chore/graduate-overlay-max-height-ff
Open

chore: graduate primer_react_overlay_max_height_clamp_to_viewport#7733
francinelucca wants to merge 4 commits intomainfrom
chore/graduate-overlay-max-height-ff

Conversation

@francinelucca
Copy link
Copy Markdown
Member

@francinelucca francinelucca commented Apr 7, 2026

This pull request removes the feature flag controlling the "max-height clamp to viewport" behavior for overlays and action menus, making the viewport-clamped max-height the default. Now, all overlays and action menus will have their max-height restricted to the viewport without needing a feature flag.

Max-height size token rules use min(Xpx, 100vh) as the default fallback for browsers that don't support dynamic viewport units, and progressively enhance to min(Xpx, 100dvh) via @supports (height: 100dvh) in supporting browsers.

Changelog

New

Changed

  • Max-height size token rules in Overlay.module.css and ActionMenu.module.css now use min(Xpx, 100vh) as a fallback, with @supports (height: 100dvh) overriding to min(Xpx, 100dvh) for browsers that support dynamic viewport units

Removed

  • primer_react_overlay_max_height_clamp_to_viewport FF and associated code

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@francinelucca francinelucca requested a review from a team as a code owner April 7, 2026 17:12
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 7, 2026

🦋 Changeset detected

Latest commit: b90c0ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Apr 7, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Removes the primer_react_overlay_max_height_clamp_to_viewport feature flag and makes viewport-clamped max-height behavior the default for Overlay and ActionMenu.

Changes:

  • Removes the feature-flag gating and related data-max-height-clamp-to-viewport attribute usage in Overlay and ActionMenu.
  • Updates CSS so max-height size tokens use min(<token>, 100dvh) by default.
  • Deletes the flag from DefaultFeatureFlags.
Show a summary per file
File Description
packages/react/src/Overlay/Overlay.tsx Removes feature-flag logic and stops conditionally adding the clamp data attribute
packages/react/src/Overlay/Overlay.module.css Makes viewport clamping the default for max-height size tokens
packages/react/src/FeatureFlags/DefaultFeatureFlags.ts Removes the graduated feature flag from defaults
packages/react/src/ActionMenu/ActionMenu.tsx Removes feature-flag logic and stops conditionally adding the clamp data attribute
packages/react/src/ActionMenu/ActionMenu.module.css Makes viewport clamping the default for max-height size tokens

Copilot's findings

  • Files reviewed: 6/6 changed files
  • Comments generated: 3

@github-actions github-actions bot requested a deployment to storybook-preview-7733 April 7, 2026 17:18 Abandoned
@primer
Copy link
Copy Markdown
Contributor

primer bot commented Apr 7, 2026

🤖 Lint issues have been automatically fixed and committed to this PR.

Agent-Logs-Url: https://github.com/primer/react/sessions/63c4dcf7-79fd-4d70-83db-9b7507eeb6f5

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
@primer-integration
Copy link
Copy Markdown

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/18054

@primer-integration
Copy link
Copy Markdown

Integration test results from github/github-ui:

Failed  CI   Failed
Failed  VRT   Failed
Passed  Projects   Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Canary Release Apply this label when you want CI to create a canary release of the current PR integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants