chore: graduate primer_react_overlay_max_height_clamp_to_viewport (#7733)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: francinelucca

.changeset/graduate-overlay-max-height-clamp.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Overlay: Graduate `primer_react_overlay_max_height_clamp_to_viewport` feature flag
+
+The max-height of overlays is now clamped to the viewport height by default using `min(size, 100dvh)`. This prevents overlays from extending beyond the viewport on smaller screens.

packages/react/src/ActionMenu/ActionMenu.module.css

@@ -25,44 +25,43 @@
 
   /* Max-height size tokens (mirror Overlay sizes) */
   &:where([data-max-height-xsmall]) {
-    max-height: 192px;
-  }
+    max-height: min(192px, 100vh);
 
-  &:where([data-max-height-small]) {
-    max-height: 256px;
+    @supports (height: 100dvh) {
+      max-height: min(192px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-medium]) {
-    max-height: 320px;
-  }
+  &:where([data-max-height-small]) {
+    max-height: min(256px, 100vh);
 
-  &:where([data-max-height-large]) {
-    max-height: 432px;
+    @supports (height: 100dvh) {
+      max-height: min(256px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-xlarge]) {
-    max-height: 600px;
-  }
+  &:where([data-max-height-medium]) {
+    max-height: min(320px, 100vh);
 
-  /* Max-height size tokens clamped to viewport (enabled via feature flag) */
-  &:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]) {
-    max-height: min(192px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(320px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-small]) {
-    max-height: min(256px, 100dvh);
-  }
+  &:where([data-max-height-large]) {
+    max-height: min(432px, 100vh);
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-medium]) {
-    max-height: min(320px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(432px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-large]) {
-    max-height: min(432px, 100dvh);
-  }
+  &:where([data-max-height-xlarge]) {
+    max-height: min(600px, 100vh);
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]) {
-    max-height: min(600px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(600px, 100dvh);
+    }
   }
 
   &:where([data-max-height-fit-content]) {

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -18,7 +18,6 @@ import styles from './ActionMenu.module.css'
 import {useResponsiveValue, type ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isSlot} from '../utils/is-slot'
 import type {FCWithSlotMarker, WithSlotMarker} from '../utils/types/Slots'
-import {useFeatureFlag} from '../FeatureFlags'
 import {DialogContext} from '../Dialog/Dialog'
 
 export type MenuCloseHandler = (
@@ -330,8 +329,6 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
     }
   }, [anchorRef])
 
-  const featureFlagMaxHeightClampToViewport = useFeatureFlag('primer_react_overlay_max_height_clamp_to_viewport')
-
   const isInsideDialog = useContext(DialogContext) !== undefined
 
   return (
@@ -354,7 +351,6 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
         ref={containerRef}
         className={styles.ActionMenuContainer}
         data-variant={responsiveVariant}
-        {...(featureFlagMaxHeightClampToViewport ? {'data-max-height-clamp-to-viewport': ''} : {})}
         {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
         {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}
       >

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -7,5 +7,4 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_select_panel_order_selected_at_top: false,
   primer_react_select_panel_remove_active_descendant: false,
   primer_react_spinner_synchronize_animations: false,
-  primer_react_overlay_max_height_clamp_to_viewport: false,
 })

packages/react/src/Overlay/Overlay.module.css

@@ -102,44 +102,43 @@
   }
 
   &:where([data-max-height-xsmall]) {
-    max-height: 192px;
-  }
+    max-height: min(192px, 100vh);
 
-  &:where([data-max-height-small]) {
-    max-height: 256px;
+    @supports (height: 100dvh) {
+      max-height: min(192px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-medium]) {
-    max-height: 320px;
-  }
+  &:where([data-max-height-small]) {
+    max-height: min(256px, 100vh);
 
-  &:where([data-max-height-large]) {
-    max-height: 432px;
+    @supports (height: 100dvh) {
+      max-height: min(256px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-xlarge]) {
-    max-height: 600px;
-  }
+  &:where([data-max-height-medium]) {
+    max-height: min(320px, 100vh);
 
-  /* Max-height size tokens clamped to viewport (enabled via feature flag) */
-  &:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]) {
-    max-height: min(192px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(320px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-small]) {
-    max-height: min(256px, 100dvh);
-  }
+  &:where([data-max-height-large]) {
+    max-height: min(432px, 100vh);
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-medium]) {
-    max-height: min(320px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(432px, 100dvh);
+    }
   }
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-large]) {
-    max-height: min(432px, 100dvh);
-  }
+  &:where([data-max-height-xlarge]) {
+    max-height: min(600px, 100vh);
 
-  &:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]) {
-    max-height: min(600px, 100dvh);
+    @supports (height: 100dvh) {
+      max-height: min(600px, 100dvh);
+    }
   }
 
   &:where([data-max-height-fit-content]) {

packages/react/src/Overlay/Overlay.tsx

@@ -192,7 +192,6 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
     forwardedRef,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): ReactElement<any> => {
-    const featureFlagMaxHeightClampToViewport = useFeatureFlag('primer_react_overlay_max_height_clamp_to_viewport')
     const overlayRef = useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, overlayRef)
     const slideAnimationDistance = 8 // var(--base-size-8), hardcoded to do some math
@@ -245,7 +244,6 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
         height={height}
         visibility={visibility}
         data-responsive={responsiveVariant}
-        {...(featureFlagMaxHeightClampToViewport ? {'data-max-height-clamp-to-viewport': ''} : {})}
         {...props}
       />
     )