diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx index b30924f4956..12eb1776669 100644 --- a/packages/react/src/RelativeTime/RelativeTime.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.tsx @@ -6,11 +6,11 @@ import {createComponent} from '../utils/custom-element' const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time') const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'} -function RelativeTime({date, datetime, ...props}: RelativeTimeProps) { +function RelativeTime({date, datetime, children, ...props}: RelativeTimeProps) { if (datetime) date = new Date(datetime) return ( - {date?.toLocaleDateString('en', localeOptions) || ''} + {children || date?.toLocaleDateString('en', localeOptions) || ''} ) } diff --git a/packages/react/src/__tests__/RelativeTime.test.tsx b/packages/react/src/__tests__/RelativeTime.test.tsx index a8903aee588..9511663773a 100644 --- a/packages/react/src/__tests__/RelativeTime.test.tsx +++ b/packages/react/src/__tests__/RelativeTime.test.tsx @@ -30,4 +30,11 @@ describe('RelativeTime', () => { const date = new Date('2024-03-07T12:22:48.123Z') expect(render().children).toEqual(['Mar 7, 2024']) }) + + it('renders children if passed', () => { + const date = new Date('2024-03-07T12:22:48.123Z') + expect(render(server rendered date).children).toEqual([ + 'server rendered date', + ]) + }) })