From 382bd6eb2c5d38fe60c189a32684d6eeec559f9c Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Mon, 5 May 2025 16:16:45 -0400
Subject: [PATCH] docs(misc): update version picker to include v21 (#31053)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR updates docs to show v21 in the version picker.

Currently, it shoulds v17, v18, v19, and v20.

<img width="611" alt="Screenshot 2025-05-05 at 3 34 26 PM"
src="https://github.com/user-attachments/assets/baee6f00-8db2-4300-ac80-944b8a6b760a"
/>

It should show v21, v20, and v19 according to our LTS policy.
---
 nx-dev/ui-common/src/lib/version-picker.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/nx-dev/ui-common/src/lib/version-picker.tsx b/nx-dev/ui-common/src/lib/version-picker.tsx
index ed43088edb..cc6cbc7d3f 100644
--- a/nx-dev/ui-common/src/lib/version-picker.tsx
+++ b/nx-dev/ui-common/src/lib/version-picker.tsx
@@ -12,21 +12,17 @@ import { Fragment, JSX, useState } from 'react';
 
 const versionOptions = [
   {
-    label: 'v20',
+    label: 'v21',
     value: '',
   },
+  {
+    label: 'v20',
+    value: '20',
+  },
   {
     label: 'v19',
     value: '19',
   },
-  {
-    label: 'v18',
-    value: '18',
-  },
-  {
-    label: 'v17',
-    value: '17',
-  },
 ];
 
 export function VersionPicker(): JSX.Element {
@@ -43,7 +39,7 @@ export function VersionPicker(): JSX.Element {
                     'relative w-full cursor-pointer rounded-lg border-slate-200 py-2 pr-6 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700'
                   }
                 >
-                  <span className="block truncate">{selected.label}</span>
+                  <span className="block">{selected.label}</span>
                   <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center">
                     <ChevronUpDownIcon
                       className="h-5 w-5 text-slate-500"
@@ -80,7 +76,7 @@ export function VersionPicker(): JSX.Element {
                                 ? `https://${item.value}.nx.dev/docs`
                                 : '#'
                             }
-                            className={'block truncate px-3 py-2 font-medium'}
+                            className={'block px-3 py-2 font-medium'}
                           >
                             {item.label}
                           </Link>