diff --git a/.changeset/fuzzy-rabbits-wave.md b/.changeset/fuzzy-rabbits-wave.md new file mode 100644 index 00000000000..1729f0ba249 --- /dev/null +++ b/.changeset/fuzzy-rabbits-wave.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-colorblind-linux.png new file mode 100644 index 00000000000..f958e59e585 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-dimmed-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-dimmed-linux.png new file mode 100644 index 00000000000..31a0f588507 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-high-contrast-linux.png new file mode 100644 index 00000000000..423a27297b5 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-linux.png new file mode 100644 index 00000000000..f958e59e585 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f958e59e585 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-colorblind-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-colorblind-linux.png new file mode 100644 index 00000000000..0ea7245d252 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-high-contrast-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-high-contrast-linux.png new file mode 100644 index 00000000000..e00c93c5cda Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-linux.png new file mode 100644 index 00000000000..0ea7245d252 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-linux.png differ diff --git a/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-tritanopia-linux.png b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-tritanopia-linux.png new file mode 100644 index 00000000000..0ea7245d252 Binary files /dev/null and b/.playwright/snapshots/components/Overlay.test.ts-snapshots/Overlay-Setting-Max-Height-light-tritanopia-linux.png differ diff --git a/e2e/components/Overlay.test.ts b/e2e/components/Overlay.test.ts index 556db3c4a10..ed053c04b98 100644 --- a/e2e/components/Overlay.test.ts +++ b/e2e/components/Overlay.test.ts @@ -39,6 +39,10 @@ const stories = [ title: 'Positioned Overlays', id: 'private-components-overlay-features--positioned-overlays', }, + { + title: 'Setting Max Height', + id: 'private-components-overlay-features--setting-max-height', + }, ] as const test.describe('Overlay ', () => { diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css index a6faaed8413..af8f43f9067 100644 --- a/packages/react/src/ActionMenu/ActionMenu.module.css +++ b/packages/react/src/ActionMenu/ActionMenu.module.css @@ -25,23 +25,23 @@ /* Max-height size tokens (mirror Overlay sizes) */ &:where([data-max-height-xsmall]) { - max-height: 192px; + max-height: min(192px, 100dvh); } &:where([data-max-height-small]) { - max-height: 256px; + max-height: min(256px, 100dvh); } &:where([data-max-height-medium]) { - max-height: 320px; + max-height: min(320px, 100dvh); } &:where([data-max-height-large]) { - max-height: 432px; + max-height: min(432px, 100dvh); } &:where([data-max-height-xlarge]) { - max-height: 600px; + max-height: min(600px, 100dvh); } &:where([data-max-height-fit-content]) { diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css index 4b2c380e4d2..a2cc00ab3a2 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.module.css +++ b/packages/react/src/Overlay/Overlay.features.stories.module.css @@ -162,3 +162,17 @@ .IssueLink:hover { background-color: var(--bgColor-muted); } + +.ScrollableContent { + position: relative; + padding: var(--base-size-16); + display: flex; + flex-direction: column; + gap: var(--base-size-8); +} + +.CloseButtonOverlay { + position: absolute; + left: var(--base-size-4); + top: var(--base-size-4); +} diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx index dba4f1d0717..b674df81904 100644 --- a/packages/react/src/Overlay/Overlay.features.stories.tsx +++ b/packages/react/src/Overlay/Overlay.features.stories.tsx @@ -605,3 +605,66 @@ export const PositionedOverlays = ({right, role, open}: Args) => { ) } + +export const SettingMaxHeight = ({open}: Args) => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const closeButtonRef = useRef(null) + const closeOverlay = () => setIsOpen(false) + const containerRef = useRef(null) + useFocusTrap({ + containerRef, + disabled: !isOpen && !open, + }) + + return ( +
+ + {isOpen || open ? ( + +
+ + Scrollable Content + + This overlay demonstrates the maxHeight property. The content below will be scrollable when it exceeds the + maximum height defined by the small size token, up to the available viewport height. + + {Array.from({length: 50}, (_, i) => ( + + Content item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + ))} +
+
+ ) : null} +
+ ) +} diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css index a411b34c6f4..4ee3e39b3a2 100644 --- a/packages/react/src/Overlay/Overlay.module.css +++ b/packages/react/src/Overlay/Overlay.module.css @@ -87,23 +87,23 @@ } &:where([data-max-height-xsmall]) { - max-height: 192px; + max-height: min(192px, 100dvh); } &:where([data-max-height-small]) { - max-height: 256px; + max-height: min(256px, 100dvh); } &:where([data-max-height-medium]) { - max-height: 320px; + max-height: min(320px, 100dvh); } &:where([data-max-height-large]) { - max-height: 432px; + max-height: min(432px, 100dvh); } &:where([data-max-height-xlarge]) { - max-height: 600px; + max-height: min(600px, 100dvh); } &:where([data-max-height-fit-content]) {