Skip to content

fix(PopoverContainer, Overlay): out of view close fix + increase default zIndex for Overlay #3202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix(PopoverContainer, Overlay): out of view close fix + increase default zIndex for Overlay #3202

wants to merge 9 commits into from

Conversation

@dreamwasp
Copy link
Contributor

@dreamwasp dreamwasp commented Nov 3, 2025 •
edited
Loading

Overview

  1. PopoverContainer visibility fix: PopoverContainer now properly closes when its targetRef scrolls out of view, even when inside scrollable parent containers (e.g., tables with sticky headers). This is tied to a optional prop to be backwards compatible.
  2. DataTable scroll shadow fix: Fixed bug where scroll shadow indicator appeared on initial load even when the entire table was visible
  3. Performance improvements: Optimized scrollability checks to only run when needed (when shadow and scrollable props are enabled)
  4. zIndex improvements: Updated Modal/Popover/Overlay default zIndex to 3 to appear above table headers etc\

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-222
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. Go to story Organisms/Lists & Tables/DataTable/WithFloatingMenu
  2. Click the kebab menu icon on any row to open the popover menu, then scroll the table so the row scrolls out of view - verify the menu closes automatically
  3. On initial page load, verify the scroll shadow does NOT appear if the entire table is visible (scroll horizontally to see it appear when needed)
  4. Click "View Details" in the menu to open the modal - verify it appears above the table header (header should be behind the modal shroud/overlay)
  5. Rinse + repeat for dark mode

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud
Copy link

nx-cloud bot commented Nov 3, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit e746b0b

☁️ Nx Cloud last updated this comment at 2025-11-04 17:16:51 UTC

@dreamwasp dreamwasp changed the title fix(PopoverContainer): out of view close fix(PopoverContainer, Overlay): out of view close fix + increase default zIndex for Overlay Nov 3, 2025
@codecademydev
Copy link
Collaborator

codecademydev commented Nov 4, 2025

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025

🚀 Styleguide deploy preview ready!

Preview URL: https://690a35a6fd1abf00d542e475--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/690a35a6fd1abf00d542e475

@dreamwasp dreamwasp marked this pull request as ready for review November 5, 2025 21:24
@dreamwasp dreamwasp requested a review from a team as a code owner November 5, 2025 21:24
aresnik11
aresnik11 approved these changes Nov 6, 2025
View reviewed changes
Copy link
Contributor

@aresnik11 aresnik11 left a comment

Choose a reason for hiding this comment

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

LGTM!

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

Reviewers

@aresnik11 aresnik11 aresnik11 approved these changes

@jakemhiller jakemhiller Awaiting requested review from jakemhiller jakemhiller is a code owner automatically assigned from Codecademy/gamut

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@dreamwasp @codecademydev @aresnik11