From e5ec412ed2c07f4543fdc4c838fca9b212c0e2e4 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Fri, 21 Aug 2026 17:08:27 +0000
Subject: [PATCH] chore(ui): allow ChangeHistory to accept ReactNode (#9115)

* chore(ui): allow ChangeHistory to accept ReactNode

* fixup! types

Signed-off-by: Aviv Keller <me@aviv.sh>

---------

Signed-off-by: Aviv Keller <me@aviv.sh>
---
 .changeset/soft-friends-camp.md                           | 5 +++++
 packages/ui-components/src/Common/ChangeHistory/index.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/soft-friends-camp.md

diff --git a/.changeset/soft-friends-camp.md b/.changeset/soft-friends-camp.md
new file mode 100644
index 0000000000000..d696f7d57533c
--- /dev/null
+++ b/.changeset/soft-friends-camp.md
@@ -0,0 +1,5 @@
+---
+'@node-core/ui-components': patch
+---
+
+Allow the ChangeHistory component to accept a ReactNode as it's content
diff --git a/packages/ui-components/src/Common/ChangeHistory/index.tsx b/packages/ui-components/src/Common/ChangeHistory/index.tsx
index 401e67bd62d71..c3fc91498ce0c 100644
--- a/packages/ui-components/src/Common/ChangeHistory/index.tsx
+++ b/packages/ui-components/src/Common/ChangeHistory/index.tsx
@@ -2,13 +2,14 @@ import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
 import type { LinkLike } from '#ui/types';
-import type { FC, ComponentProps } from 'react';
+import type { FC, ComponentProps, ReactNode } from 'react';
 
 import styles from './index.module.css';
 
 export type HistoryChange = {
   versions: Array<string>;
   label: string;
+  content?: ReactNode;
   url?: string;
 };
 
@@ -51,7 +52,9 @@ const ChangeHistory: FC<ChangeHistoryProps> = ({
                 aria-label={`${change.label}: ${change.versions.join(', ')}`}
                 href={change.url}
               >
-                <div className={styles.dropdownLabel}>{change.label}</div>
+                <div className={styles.dropdownLabel}>
+                  {change.content ?? change.label}
+                </div>
                 <div className={styles.dropdownVersions}>
                   {change.versions.join(', ')}
                 </div>