Skip to content

chore: remove Active/Maintenance LTS distinction #8817

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

Merged
MattIPv4 merged 5 commits into from
Apr 16, 2026
Merged

chore: remove Active/Maintenance LTS distinction #8817

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dad4167
Remove Active/Maintenance LTS distinction
MattIPv4 Apr 14, 2026
ef55924
Use Badges for release status in version dropdown
MattIPv4 Apr 14, 2026
d90307a
Improve test coverage for generateReleaseData logic
MattIPv4 Apr 14, 2026
5bc3d5d
Consistently use EOL identifier
MattIPv4 Apr 14, 2026
7882a0c
Clarify release date values naming
MattIPv4 Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use Badges for release status in version dropdown
  • Loading branch information
@MattIPv4
MattIPv4 committed Apr 14, 2026
commit ef5592462c34ba550ef770baf20e8b372f348833
22 changes: 15 additions & 7 deletions apps/site/components/Downloads/Release/VersionDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,27 @@ import {
import type { NodeReleaseStatus } from '#site/types/releases.js';
import type { FC } from 'react';

const getDropDownStatus = (version: string, status: NodeReleaseStatus) => {
const getDropDownStatus = (status: NodeReleaseStatus) => {
if (status === 'LTS') {
return `${version} (LTS)`;
return {
label: 'LTS',
kind: 'info' as const,
};
}

if (status === 'Current') {
return `${version} (Current)`;
return {
label: 'Current',
kind: 'default' as const,
};
}

if (status === 'End-of-life') {
Comment thread
ovflowd marked this conversation as resolved.
Outdated
return `${version} (EoL)`;
return {
label: 'EoL',
kind: 'warning' as const,
};
}

return version;
};

const VersionDropdown: FC = () => {
Expand Down Expand Up @@ -61,7 +68,8 @@ const VersionDropdown: FC = () => {
ariaLabel={t('layouts.download.dropdown.version')}
values={releases.map(({ status, versionWithPrefix }) => ({
value: versionWithPrefix,
label: getDropDownStatus(versionWithPrefix, status),
label: versionWithPrefix,
badge: getDropDownStatus(status),
}))}
defaultValue={release.versionWithPrefix}
onChange={setVersionOrNavigate}
Expand Down
28 changes: 27 additions & 1 deletion packages/ui-components/src/Common/Select/StatelessSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { ChevronDownIcon } from '@heroicons/react/24/solid';
import classNames from 'classnames';
import { useId, useMemo } from 'react';

import Badge from '#ui/Common/Badge';

import type { SelectGroup, SelectProps } from '#ui/Common/Select';
import type { LinkLike } from '#ui/types';

Expand Down Expand Up @@ -66,6 +68,15 @@ const StatelessSelect = <T extends string>({
<span className={styles.selectedValue}>
{currentItem.iconImage}
<span>{currentItem.label}</span>
{currentItem.badge && (
Comment thread
MattIPv4 marked this conversation as resolved.
<Badge
size="small"
kind={currentItem.badge.kind}
className={styles.badge}
>
{currentItem.badge.label}
</Badge>
)}
</span>
)}
{!currentItem && (
Expand All @@ -89,7 +100,13 @@ const StatelessSelect = <T extends string>({
)}

{items.map(
({ value, label, iconImage, disabled: itemDisabled }) => (
({
value,
label,
iconImage,
badge,
disabled: itemDisabled,
}) => (
<Component
key={value}
href={value}
Expand All @@ -101,6 +118,15 @@ const StatelessSelect = <T extends string>({
>
{iconImage}
<span>{label}</span>
{badge && (
<Badge
size="small"
kind={badge.kind}
className={styles.badge}
>
{badge.label}
</Badge>
)}
</Component>
)
)}
Expand Down
4 changes: 4 additions & 0 deletions packages/ui-components/src/Common/Select/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,10 @@
dark:text-neutral-200;
}

.badge {
@apply ml-auto;
}

.noscript {
@apply relative
cursor-pointer;
Expand Down
21 changes: 20 additions & 1 deletion packages/ui-components/src/Common/Select/index.tsx
View file
Open in desktop
Comment thread
MattIPv4 marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
import classNames from 'classnames';
import { useEffect, useId, useMemo, useState } from 'react';

import Badge, { type BadgeKind } from '#ui/Common/Badge';
import Skeleton from '#ui/Common/Skeleton';

import type { FormattedMessage, LinkLike } from '#ui/types';
Expand All @@ -18,6 +19,10 @@ export type SelectValue<T extends string> = {
label: FormattedMessage | string;
value: T;
iconImage?: ReactElement<SVGSVGElement>;
badge?: {
label: FormattedMessage | string;
kind?: BadgeKind;
};
disabled?: boolean;
};

Expand Down Expand Up @@ -91,7 +96,7 @@ const Select = <T extends string>({
</SelectPrimitive.Label>
)}

{items.map(({ value, label, iconImage, disabled }) => (
{items.map(({ value, label, iconImage, badge, disabled }) => (
<SelectPrimitive.Item
key={value}
value={value}
Expand All @@ -101,6 +106,11 @@ const Select = <T extends string>({
<SelectPrimitive.ItemText>
{iconImage}
<span>{label}</span>
{badge && (
<Badge size="small" kind={badge.kind} className={styles.badge}>
{badge.label}
</Badge>
)}
</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))}
Expand Down Expand Up @@ -151,6 +161,15 @@ const Select = <T extends string>({
<>
{currentItem.iconImage}
<span>{currentItem.label}</span>
{currentItem.badge && (
<Badge
size="small"
kind={currentItem.badge.kind}
className={styles.badge}
>
{currentItem.badge.label}
</Badge>
)}
</>
)}
</SelectPrimitive.Value>
Expand Down