feat: add toggle to show/hide LTS releases by efekrskl · Pull Request #8263 · nodejs/nodejs.org

efekrskl · 2025-10-23T14:52:36Z

Description

Adds a toggle to the EOL table that filters non LTS releases

Validation

Content being filtered:

Other:

Related Issues

Closes #8017

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

vercel · 2025-10-23T14:52:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Ready	Preview	Nov 19, 2025 7:47pm

Copilot

Pull Request Overview

This PR adds a toggle switch to filter non-LTS releases from the EOL (End of Life) table. Users can now hide non-LTS versions to focus on LTS releases only.

Key Changes:

Introduced a new Switch UI component with Radix UI integration
Refactored EOL table to support client-side filtering with state management
Fixed the isLts determination logic to use ltsStart instead of status string matching

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/ui-components/src/Common/Switch/index.tsx	New Switch component implementation using Radix UI primitives
packages/ui-components/src/Common/Switch/index.stories.tsx	Storybook stories for the Switch component
packages/ui-components/src/Common/Switch/index.module.css	Styling for the Switch component with light/dark mode support
packages/ui-components/package.json	Added @radix-ui/react-switch dependency
packages/i18n/src/locales/en.json	Added translation key for "Hide non-LTS versions" label
apps/site/next-data/generators/releaseData.mjs	Fixed isLts logic to check for ltsStart existence
apps/site/components/EOL/EOLReleaseTable/index.tsx	Refactored to use new client component
apps/site/components/EOL/EOLReleaseTable/TableClient.tsx	New client component with filtering state and Switch integration
apps/site/components/EOL/EOLReleaseTable/TableBody.tsx	Removed file - functionality merged into TableClient

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

packages/ui-components/package.json

avivkeller

Wow! Thanks for this!

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx

apps/site/next-data/generators/releaseData.mjs

packages/ui-components/src/Common/Switch/index.tsx

Copilot

Pull Request Overview

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/site/next-data/generators/releaseData.mjs

efekrskl · 2025-10-23T17:19:52Z

Wow! Thanks for this!

Thanks for the quick review!

flakey5

lgtm for web infra bits, thank you!

AugustinMauroy

LGMT !

bmuenzenmeyer

love it - my only nit, as a fast follower or even as a never - is that it'd be nice if these occupied the same vertical spacing. that greatly complicates the MDX / header / component relationship though, so no worries

codecov · 2025-10-25T03:29:32Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.26%. Comparing base (8a30f18) to head (52423d8).
⚠️ Report is 29 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8263      +/-   ##
==========================================
- Coverage   76.72%   76.26%   -0.46%     
==========================================
  Files         118      118              
  Lines        9805     9903      +98     
  Branches      335      336       +1     
==========================================
+ Hits         7523     7553      +30     
- Misses       2280     2348      +68     
  Partials        2        2

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

bjohansebas

LGTM, it looks cool to be able to do that

github-actions · 2025-10-25T20:20:17Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 97	🟠 88	🟢 100	🟢 100	🔗
/en/about	🟢 100	🟢 93	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 97	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 98	🟢 96	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 100	🔗

ovflowd · 2025-11-12T19:53:44Z

packages/ui-components/src/Common/Switch/index.tsx

@@ -0,0 +1,49 @@
+'use client';


As much as I love Radix! I feel we should make the switch purely with CSS and HTML and have the table entries be affected based on that.

Fair, I changed the implementation to use html/css only. However, the only way I could get it to work was through using has, which is newly available (https://caniuse.com/css-has). Does this work?

ovflowd

Appreciate your contribution! Thanks for working on this :)

I've left a few comments.

efekrskl · 2025-11-19T19:49:25Z

Thanks for the review @ovflowd, I've changed the implementation to use html/css only.

The changes to the data sources is also reverted (as they were wrong in the first place). Could you unblock your review @bmuenzenmeyer ?

bmuenzenmeyer · 2025-11-20T18:50:32Z

apps/site/components/EOL/EOLReleaseTable/TableBody.tsx

      {eolReleases.map(release => (
        <Fragment key={release.major}>
-          <tr>
+          <tr data-lts={!!release.codename}>


bmuenzenmeyer · 2025-11-21T01:23:54Z

I cannot get prettier to overwrite the current contents, which makes me think the failure is a false positive or caching problem

ovflowd · 2025-11-21T14:23:30Z

Thanks for the review @ovflowd, I've changed the implementation to use html/css only.

The changes to the data sources is also reverted (as they were wrong in the first place). Could you unblock your review @bmuenzenmeyer ?

Howdy! I'm on work travel, I'll be reviewing this later today or tomorrow!

apps/site/components/EOL/EOLReleaseTable/index.tsx

apps/site/components/EOL/EOLReleaseTable/TableBody.tsx

ovflowd

SGTM besides of one nit :)

* feat: add switch in eol table * feat: translation keys * refactor: client renaming * fix: dont create arrow fn onCheckedChange * chore: use tilde for version * refactor: rename prop * fixes test, but does it? * fix: add use client directive * fix: apply motion safe Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Efe <dogukankrskl@gmail.com> * refactor: use size instead of w&h Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Efe <dogukankrskl@gmail.com> * fix: use motion safe Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Efe <dogukankrskl@gmail.com> * refactor: use import type for types Co-authored-by: Caner Akdas <canerakdas@gmail.com> Signed-off-by: Efe <dogukankrskl@gmail.com> * fix: adjust focus visible ring offset * chore: update pnpm lock * revert: releaseData.mjs changes * revert: tablebody * feat: implement the switch in html/css only * revert: @radix-ui/react-switch install * revert: pnpm.lock * revert: tests * feat: new stories * ci: don't mind me triggering the ci --------- Signed-off-by: Efe <dogukankrskl@gmail.com> Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com> Co-authored-by: Caner Akdas <canerakdas@gmail.com>

efekrskl requested a review from a team as a code owner October 23, 2025 14:52

Copilot AI review requested due to automatic review settings October 23, 2025 14:52

efekrskl requested a review from a team as a code owner October 23, 2025 14:52

Copilot AI reviewed Oct 23, 2025

View reviewed changes

apps/site/components/EOL/EOLReleaseTable/TableClient.tsx Outdated Show resolved Hide resolved

packages/ui-components/package.json Outdated Show resolved Hide resolved

vercel bot deployed to Preview October 23, 2025 14:54 View deployment

avivkeller reviewed Oct 23, 2025

View reviewed changes

vercel bot deployed to Preview October 23, 2025 17:02 View deployment

vercel bot deployed to Preview October 23, 2025 17:11 View deployment

efekrskl requested review from avivkeller and Copilot October 23, 2025 17:13

Copilot AI reviewed Oct 23, 2025

View reviewed changes

apps/site/next-data/generators/releaseData.mjs Outdated Show resolved Hide resolved

flakey5 approved these changes Oct 23, 2025

View reviewed changes

AugustinMauroy approved these changes Oct 23, 2025

View reviewed changes

avivkeller approved these changes Oct 23, 2025

View reviewed changes

mikeesto approved these changes Oct 23, 2025

View reviewed changes

aymen94 approved these changes Oct 24, 2025

View reviewed changes

bmuenzenmeyer approved these changes Oct 24, 2025

View reviewed changes

This comment was marked as outdated.

Sign in to view

bjohansebas approved these changes Oct 25, 2025

View reviewed changes

bjohansebas added the github_actions:pull-request Trigger Pull Request Checks label Oct 25, 2025

bjohansebas deployed to Storybook October 25, 2025 20:19 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Oct 25, 2025

efekrskl added 4 commits October 29, 2025 04:53

feat: add switch in eol table

b37d970

feat: translation keys

680b0ca

refactor: client renaming

6f7ab98

fix: dont create arrow fn onCheckedChange

bdf5ce9

ovflowd reviewed Nov 12, 2025

View reviewed changes

revert: releaseData.mjs changes

e2ce7e4

vercel bot deployed to Preview November 19, 2025 17:19 View deployment

efekrskl added 2 commits November 19, 2025 19:24

revert: tablebody

416f069

feat: implement the switch in html/css only

070fe96

vercel bot had a problem deploying to Preview November 19, 2025 19:29 Failure

efekrskl force-pushed the feat/eol-table-lts-toggle branch from 8fe558b to 070fe96 Compare November 19, 2025 19:31

vercel bot deployed to Preview November 19, 2025 19:32 View deployment

vercel bot had a problem deploying to Preview November 19, 2025 19:34 Failure

revert: @radix-ui/react-switch install

4cd0fa0

efekrskl force-pushed the feat/eol-table-lts-toggle branch from 8c1eb71 to 4cd0fa0 Compare November 19, 2025 19:35

vercel bot deployed to Preview November 19, 2025 19:36 View deployment

efekrskl added 2 commits November 19, 2025 20:37

revert: pnpm.lock

5a74ff7

revert: tests

b272f4f

vercel bot deployed to Preview November 19, 2025 19:40 View deployment

feat: new stories

0f63691

vercel bot had a problem deploying to Preview November 19, 2025 19:42 Failure

ci: don't mind me triggering the ci

52423d8

vercel bot deployed to Preview November 19, 2025 19:47 View deployment

bmuenzenmeyer approved these changes Nov 20, 2025

View reviewed changes

bmuenzenmeyer requested a review from ovflowd November 20, 2025 18:51

ovflowd reviewed Nov 22, 2025

View reviewed changes

apps/site/components/EOL/EOLReleaseTable/index.tsx Show resolved Hide resolved

ovflowd reviewed Nov 22, 2025

View reviewed changes

apps/site/components/EOL/EOLReleaseTable/TableBody.tsx Show resolved Hide resolved

ovflowd approved these changes Nov 22, 2025

View reviewed changes

bmuenzenmeyer merged commit d12f6e4 into nodejs:main Nov 23, 2025
11 of 12 checks passed

Uh oh!

Conversation

efekrskl commented Oct 23, 2025

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

avivkeller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

efekrskl commented Oct 23, 2025

Uh oh!

flakey5 left a comment

Choose a reason for hiding this comment

Uh oh!

AugustinMauroy left a comment

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as outdated.

bjohansebas left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ovflowd Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

efekrskl Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

efekrskl commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

bmuenzenmeyer commented Nov 21, 2025

Uh oh!

ovflowd commented Nov 21, 2025

Uh oh!

Uh oh!

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

vercel bot commented Oct 23, 2025 •

edited

Loading

codecov bot commented Oct 25, 2025 •

edited

Loading

github-actions bot commented Oct 25, 2025 •

edited

Loading

efekrskl commented Nov 19, 2025 •

edited

Loading