Skip to content

feat(Tabs): add shouldForceMount prop to TabPanel #3214

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
Merged
codecademydev merged 9 commits into from
Dec 3, 2025
Merged

feat(Tabs): add shouldForceMount prop to TabPanel #3214

codecademydev merged 9 commits into from
Dec 3, 2025

Conversation

@aresnik11
Copy link
Contributor

@aresnik11 aresnik11 commented Nov 19, 2025 •
edited
Loading

Overview

Adds shouldForceMount prop to TabPanel to render the TabPanel in the DOM and hide it visually. This is a request from the Author team to match functionality from reach/tabs that was removed when we migrated over to react-aria-components tabs.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-1477
  • 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 Tabs story
  2. See the new force mount story
  3. Confirm you see the inactive tabs in the DOM but not on the screen
  4. Confirm for the other stories that you do not see the inactive tabs in the DOM
  5. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud
Copy link

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

View your CI Pipeline Execution ↗ for commit f0ca425

☁️ Nx Cloud last updated this comment at 2025-12-03 18:11:00 UTC

@aresnik11 aresnik11 changed the title Ajr tab panels feat(Tabs): add shouldForceMount prop to TabPanel Nov 19, 2025
@aresnik11 aresnik11 marked this pull request as ready for review November 21, 2025 15:27
@aresnik11 aresnik11 requested a review from a team as a code owner November 21, 2025 15:27
dreamwasp
dreamwasp approved these changes Nov 24, 2025
View reviewed changes
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

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

tested w/ and w/o VO + looks great

packages/styleguide/src/lib/Molecules/Tabs/Tabs.mdx Outdated

By default, when a tab is not selected, the `TabPanel` is not mounted in the DOM. This is to improve performance and avoid unnecessary rendering. However, if you need to force mount the `TabPanel` even when it is not selected, you can pass the `shouldForceMount` prop to the `TabPanel` component.

The `shouldForceMount` prop is a wrapper around the `shouldForceMount` prop in react-aria-components that also visually hides the inactive tab panel.
Copy link
Contributor

@dreamwasp dreamwasp Nov 24, 2025

Choose a reason for hiding this comment

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

maybe link to the react-aria-components docs here>

@aresnik11 aresnik11 added the Ship It :shipit: Automerge this PR when possible label Dec 3, 2025
@codecademydev
Copy link
Collaborator

codecademydev commented Dec 3, 2025

📬 Published Alpha Packages:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2025

🚀 Styleguide deploy preview ready!

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

@aresnik11 aresnik11 added Ship It :shipit: Automerge this PR when possible and removed Ship It :shipit: Automerge this PR when possible labels Dec 3, 2025
@codecademydev codecademydev merged commit 4fda27c into main Dec 3, 2025
17 of 19 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Dec 3, 2025
@codecademydev codecademydev deleted the ajr-tab-panels branch December 3, 2025 18:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dreamwasp dreamwasp dreamwasp approved these changes

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

@vinnie-olsen vinnie-olsen Awaiting requested review from vinnie-olsen

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

@aresnik11 @codecademydev @dreamwasp