Merge branch 'main' into joshblack-patch-1

primer · Jun 5, 2024 · 44dd91b · 44dd91b
2 parents 2f23000 + cacc21a
commit 44dd91b
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 43 deletions.
diff --git a/.changeset/clever-pots-leave.md 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/.changeset/young-monkeys-sniff.md b/.changeset/young-monkeys-sniff.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Bumps @github/relative-time-element to v4.4.1
diff --git a/docs/package.json b/docs/package.json
@@ -17,7 +17,7 @@
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@primer/gatsby-theme-doctocat": "0.0.0-2023930155223",
-    "@primer/octicons-react": "^17.7.0",
+    "@primer/octicons-react": "^19.9.0",
     "@primer/primitives": "4.1.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -88,7 +88,7 @@
     "@github/combobox-nav": "^2.1.5",
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
-    "@github/relative-time-element": "^4.1.2",
+    "@github/relative-time-element": "^4.4.1",
     "@github/tab-container-element": "^4.8.0",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.3.1",

diff --git 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<RelativeTimeElement>"
     },
+    {
+      "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
@@ -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 = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+
+export const LinkWithTooltip = () => (
+  <Tooltip text={new Date('2020-01-01T00:00:00Z').toString()}>
+    <Link href="https://github.com">
+      <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+    </Link>
+  </Tooltip>
+)
diff --git 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 = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+export const Default: Story = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
 
 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
@@ -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 (
-    <RelativeTimeComponent {...props} date={date}>
+    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined}>
       {children || date?.toLocaleDateString('en', localeOptions) || ''}
     </RelativeTimeComponent>
   )

diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx
@@ -966,26 +966,26 @@ export const WithoutIndentation: Story = () => (
           <FileIcon />
         </TreeView.LeadingVisual>
         Avatar.tsx
-        <TreeView.TrailingVisual>
-          <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+        <TreeView.TrailingVisual label="Added">
+          <Octicon icon={DiffAddedIcon} color="success.fg" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
       <TreeView.Item id="src/Button.tsx" current>
         <TreeView.LeadingVisual>
           <FileIcon />
         </TreeView.LeadingVisual>
         Button.tsx
-        <TreeView.TrailingVisual>
-          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />
+        <TreeView.TrailingVisual label="Modified">
+          <Octicon icon={DiffModifiedIcon} color="attention.fg" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
       <TreeView.Item id="package.json">
         <TreeView.LeadingVisual>
           <FileIcon />
         </TreeView.LeadingVisual>
         package.json
-        <TreeView.TrailingVisual>
-          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />
+        <TreeView.TrailingVisual label="Modified">
+          <Octicon icon={DiffModifiedIcon} color="attention.fg" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>
@@ -1057,8 +1057,8 @@ export const MultilineItems: Story = () => (
               <FileIcon />
             </TreeView.LeadingVisual>
             Avatar.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+            <TreeView.TrailingVisual label="Added">
+              <Octicon icon={DiffAddedIcon} color="success.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1070,17 +1070,17 @@ export const MultilineItems: Story = () => (
         <div style={{whiteSpace: 'wrap'}}>
           this is a medium directory name that we wrap over 2 lines to demonstrate alignment
         </div>
-        <TreeView.TrailingVisual>
-          <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+        <TreeView.TrailingVisual label="Added">
+          <Octicon icon={DiffAddedIcon} color="success.fg" />
         </TreeView.TrailingVisual>
         <TreeView.SubTree>
           <TreeView.Item id="src/Avatar.tsx">
             <TreeView.LeadingVisual>
               <FileIcon />
             </TreeView.LeadingVisual>
             Avatar.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+            <TreeView.TrailingVisual label="Added">
+              <Octicon icon={DiffAddedIcon} color="success.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1097,8 +1097,8 @@ export const MultilineItems: Story = () => (
               <FileIcon />
             </TreeView.LeadingVisual>
             Avatar.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+            <TreeView.TrailingVisual label="Added">
+              <Octicon icon={DiffAddedIcon} color="success.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1114,8 +1114,8 @@ export const MultilineItems: Story = () => (
               <FileIcon />
             </TreeView.LeadingVisual>
             Avatar.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+            <TreeView.TrailingVisual label="Added">
+              <Octicon icon={DiffAddedIcon} color="success.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>

diff --git a/packages/react/src/TreeView/TreeView.stories.tsx b/packages/react/src/TreeView/TreeView.stories.tsx
@@ -33,17 +33,17 @@ export const Default: Story = () => (
               <FileIcon />
             </TreeView.LeadingVisual>
             Avatar.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="Added" />
+            <TreeView.TrailingVisual label="Added">
+              <Octicon icon={DiffAddedIcon} color="success.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
             <TreeView.LeadingVisual>
               <FileIcon />
             </TreeView.LeadingVisual>
             Button.tsx
-            <TreeView.TrailingVisual>
-              <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />
+            <TreeView.TrailingVisual label="Modified">
+              <Octicon icon={DiffModifiedIcon} color="attention.fg" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -53,8 +53,8 @@ export const Default: Story = () => (
           <FileIcon />
         </TreeView.LeadingVisual>
         package.json
-        <TreeView.TrailingVisual>
-          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="Modified" />
+        <TreeView.TrailingVisual label="Modified">
+          <Octicon icon={DiffModifiedIcon} color="attention.fg" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>

diff --git 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(<RelativeTime date={date} />)
+    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(<RelativeTime date={date} noTitle={true} />)
+    expect(container.firstChild).toHaveAttribute('no-title')
+  })
 })