Skip to content

fix(Flyout): update z-indexes to temp values - #3403

Draft
LinKCoding wants to merge 2 commits into
mainfrom
kl-gmt-1720-gamut-tooltip-zindex
Draft

fix(Flyout): update z-indexes to temp values#3403
LinKCoding wants to merge 2 commits into
mainfrom
kl-gmt-1720-gamut-tooltip-zindex

Conversation

@LinKCoding

@LinKCoding LinKCoding commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Overview

Raises temporary z-index values so Popover-related surfaces and toasts sit above Overlay (default z-index 3) until a shared scale lands in GM-624.

  • Set BodyPortal zIndex={5} on Popover portal paths in Popover/elements.tsx (animated and non-animated)
  • Set BodyPortal zIndex={5} on PopoverContainer when content is portaled
  • Set BodyPortal zIndex={4} on Toaster
  • Added a gamut patch version plan for the temporary z-index changes

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-1720
  • Version plan added/updated (or not needed)
  • 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

Don't make me tap the sign.

  1. Go to Flyout, hover over the close button and see the tooltip appear
  2. Go to the Toaster story; trigger a toast while an Overlay is visible and confirm the toast appears above the overlay.
  3. Just in case, go to Popover and PopoverContainer; see that the rendering has the layers correct
  4. Repeat the Popover / PopoverContainer / Toaster checks in dark mode and confirm stacking still looks correct.
  5. Spot-check with VoiceOver that popover and toast content remains reachable/announced as before (no regression from the portal z-index change).
  6. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud

nx-cloud Bot commented Jul 31, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 2b3d185


☁️ Nx Cloud last updated this comment at 2026-08-06 15:03:03 UTC

@codecov

codecov Bot commented Jul 31, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.44%. Comparing base (8a6a54c) to head (2b3d185).
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3403      +/-   ##
==========================================
- Coverage   90.86%   90.44%   -0.43%     
==========================================
  Files         403      275     -128     
  Lines        6681     5765     -916     
  Branches     2169     1947     -222     
==========================================
- Hits         6071     5214     -857     
+ Misses        601      542      -59     
  Partials        9        9              
Flag Coverage Δ
main ?
pull-request 90.44% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@LinKCoding
LinKCoding force-pushed the kl-gmt-1720-gamut-tooltip-zindex branch 2 times, most recently from b91ecdf to 368a85b Compare August 4, 2026 20:16
@LinKCoding LinKCoding changed the title update z-indexes to temp values fix(Flyout): update z-indexes to temp values Aug 4, 2026
@LinKCoding
LinKCoding force-pushed the kl-gmt-1720-gamut-tooltip-zindex branch from 1511526 to 2b3d185 Compare August 6, 2026 15:00
@codecademydev

Copy link
Copy Markdown
Collaborator

📬 Published Alpha Packages:

Package Version npm Diff
@codecademy/gamut 72.5.2-alpha.d72c03.0 npm diff
@codecademy/gamut-icons 9.57.12-alpha.d72c03.0 npm diff
@codecademy/gamut-illustrations 0.58.17-alpha.d72c03.0 npm diff
@codecademy/gamut-kit 3.0.15-alpha.d72c03.0 npm diff
@codecademy/gamut-patterns 0.10.36-alpha.d72c03.0 npm diff
@codecademy/gamut-styles 20.1.1-alpha.d72c03.0 npm diff
@codecademy/gamut-tests 6.0.7-alpha.d72c03.0 npm diff
@codecademy/variance 0.26.2-alpha.d72c03.0 npm diff
eslint-plugin-gamut 2.4.4-alpha.d72c03.0 npm diff

@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants