diff --git a/.changeset/clever-pots-leave.md b/.changeset/clever-pots-leave.md new file mode 100644 index 00000000000..62b8d4a9fc1 --- /dev/null +++ b/.changeset/clever-pots-leave.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +RelativeTime: Adds `noTitle` prop if you want to not render the `title` attribute with full date time. diff --git a/packages/react/src/RelativeTime/RelativeTime.docs.json b/packages/react/src/RelativeTime/RelativeTime.docs.json index c8c3d160767..8b1dfce9fd3 100644 --- a/packages/react/src/RelativeTime/RelativeTime.docs.json +++ b/packages/react/src/RelativeTime/RelativeTime.docs.json @@ -101,6 +101,12 @@ "name": "ref", "type": "React.RefObject" }, + { + "name": "noTitle", + "type": "boolean", + "defaultValue": "", + "description": "Removes the `title` attribute provided on the element by default" + }, { "name": "as", "type": "React.ElementType", diff --git a/packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx new file mode 100644 index 00000000000..00c9228be72 --- /dev/null +++ b/packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import RelativeTime from './RelativeTime' +import Link from '../Link' +import {Tooltip} from '../TooltipV2' + +export default { + title: 'Components/RelativeTime/Examples', + component: RelativeTime, +} + +export const NoTitleAttribute = () => + +export const LinkWithTooltip = () => ( + + + + + +) diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx index e6bf26e64be..958db23cfa9 100644 --- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { }, } -export const Default: Story = () => +export const Default: Story = () => export const Playground: Story = args => { const {date, ...rest} = args diff --git a/packages/react/src/RelativeTime/RelativeTime.tsx b/packages/react/src/RelativeTime/RelativeTime.tsx index b33e8d79a45..10508e0930d 100644 --- a/packages/react/src/RelativeTime/RelativeTime.tsx +++ b/packages/react/src/RelativeTime/RelativeTime.tsx @@ -6,10 +6,10 @@ import {createComponent} from '../utils/create-component' const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time') const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'} -function RelativeTime({date, datetime, children, ...props}: RelativeTimeProps) { +function RelativeTime({date, datetime, children, noTitle, ...props}: RelativeTimeProps) { if (datetime) date = new Date(datetime) return ( - + {children || date?.toLocaleDateString('en', localeOptions) || ''} ) diff --git a/packages/react/src/__tests__/RelativeTime.test.tsx b/packages/react/src/__tests__/RelativeTime.test.tsx index bf279a73b47..8fc5cef1885 100644 --- a/packages/react/src/__tests__/RelativeTime.test.tsx +++ b/packages/react/src/__tests__/RelativeTime.test.tsx @@ -37,4 +37,16 @@ describe('RelativeTime', () => { 'server rendered date', ]) }) + + it('does not render no-title attribute by default', () => { + const date = new Date('2024-03-07T12:22:48.123Z') + const {container} = HTMLRender() + expect(container.firstChild).not.toHaveAttribute('no-title') + }) + + it('adds no-title attribute if noTitle={true}', () => { + const date = new Date('2024-03-07T12:22:48.123Z') + const {container} = HTMLRender() + expect(container.firstChild).toHaveAttribute('no-title') + }) })