Skip to content

Conversation

@beaesguerra
Copy link
Member

@beaesguerra beaesguerra commented Apr 23, 2025

Summary:

  • Add mountAllPanels prop to Tabs. It defaults to false
  • When it is false, panels are only mounted the first time it is visited. It stays mounted so it doesn't need to be remounted when it is visited again.
  • When it is true, all panels are mounted when the Tabs first render. This is useful for SEO purposes if we want the unvisited tab panels to be crawlable (context: Tabs: Implement props and features #2542 (comment))

Issue: WB-1923

Test plan:

  • Confirm the PanelCaching story behaves the same way as before ([?path=/docs/packages-tabs-tabs--docs](http://localhost:6061/?path=/docs/packages-tabs-tabs--docs#panel%20caching))
  • Confirm the new MountAllPanels story includes all tab panels in the DOM (even if they aren't visited yet) (http://localhost:6061/?path=/docs/packages-tabs-tabs--docs#mount%20all%20panels)
    • Confirm that screen readers only read out the panel content for the selected tab

@changeset-bot
Copy link

changeset-bot bot commented Apr 23, 2025

🦋 Changeset detected

Latest commit: fa6a5bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@khanacademy/wonder-blocks-tabs Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Apr 23, 2025

Size Change: +19 B (+0.02%)

Total Size: 105 kB

Filename Size Change
packages/wonder-blocks-tabs/dist/es/index.js 3.92 kB +19 B (+0.49%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.56 kB
packages/wonder-blocks-announcer/dist/es/index.js 2.04 kB
packages/wonder-blocks-banner/dist/es/index.js 1.58 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.88 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 886 B
packages/wonder-blocks-button/dist/es/index.js 4.25 kB
packages/wonder-blocks-cell/dist/es/index.js 2.36 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.12 kB
packages/wonder-blocks-core/dist/es/index.js 2.88 kB
packages/wonder-blocks-data/dist/es/index.js 6.25 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19.7 kB
packages/wonder-blocks-form/dist/es/index.js 6.03 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js 2.27 kB
packages/wonder-blocks-icon/dist/es/index.js 873 B
packages/wonder-blocks-labeled-field/dist/es/index.js 1.26 kB
packages/wonder-blocks-layout/dist/es/index.js 1.82 kB
packages/wonder-blocks-link/dist/es/index.js 1.98 kB
packages/wonder-blocks-modal/dist/es/index.js 5.48 kB
packages/wonder-blocks-pill/dist/es/index.js 1.5 kB
packages/wonder-blocks-popover/dist/es/index.js 4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.34 kB
packages/wonder-blocks-styles/dist/es/index.js 468 B
packages/wonder-blocks-switch/dist/es/index.js 2.02 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.96 kB
packages/wonder-blocks-testing/dist/es/index.js 1.07 kB
packages/wonder-blocks-theming/dist/es/index.js 679 B
packages/wonder-blocks-timing/dist/es/index.js 1.79 kB
packages/wonder-blocks-tokens/dist/es/index.js 2.85 kB
packages/wonder-blocks-toolbar/dist/es/index.js 923 B
packages/wonder-blocks-tooltip/dist/es/index.js 7.02 kB
packages/wonder-blocks-typography/dist/es/index.js 1.23 kB

compressed-size-action

@github-actions
Copy link
Contributor

github-actions bot commented Apr 23, 2025

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-liwcmuzdco.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 382
Tests with visual changes 0
Total stories 611
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 382

@beaesguerra beaesguerra marked this pull request as ready for review April 23, 2025 21:47
@khan-actions-bot khan-actions-bot requested a review from a team April 23, 2025 21:47
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/fair-ants-hunt.md, __docs__/wonder-blocks-tabs/tabs.stories.tsx, packages/wonder-blocks-tabs/src/components/tabs.tsx, packages/wonder-blocks-tabs/src/components/__tests__/tabs.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@github-actions
Copy link
Contributor

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (f4b218c) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2569"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2569

Copy link
Member

@jandrade jandrade left a comment

Choose a reason for hiding this comment

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

Looks great!!, thanks for the improvement! 🚢

@beaesguerra beaesguerra merged commit 26afba7 into feature/tabs Apr 25, 2025
28 of 33 checks passed
@beaesguerra beaesguerra deleted the wb-1923-mount-prop branch April 25, 2025 17:25
@codecov
Copy link

codecov bot commented Apr 25, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (5acef63) to head (fa6a5bd).
Report is 1 commits behind head on feature/tabs.

Additional details and impacted files

Impacted file tree graph

@@         Coverage Diff          @@
##   feature/tabs   #2569   +/-   ##
====================================
====================================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5acef63...fa6a5bd. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

beaesguerra added a commit that referenced this pull request May 9, 2025
…2593)

## Summary:
This PR includes the following commits:
- Set up Tabs component (#2528)
- Tabs: Set up keyboard navigation and activationMode prop (#2536)
- Tabs: Implement props and features (#2542)
- Tabs: Styling (#2545)
- Use StateSheet for tabs package stories & address snapshot flakiness (#2568)
- Tabs: Add `mountAllPanels` prop. (#2569)
- Tabs: Fix keyboard navigation for right-to-left (#2585)
- Fix tooltip and popover bugs found when integrating with tabs (#2574)

Issue: WB-773

## Test plan:

Tests pass and Tabs component works as expected

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ 23 checks were successful, ⏭️  3 checks have been skipped

Pull Request URL: #2593
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants