Use <sl-relative-time> instead of Github's <relative-time>.

Author: jyasskin

client-src/elements/chromedash-link.js

@@ -1,6 +1,5 @@
 // @ts-check
 
-import '@github/relative-time-element';
 import {css, html, LitElement} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {SHARED_STYLES} from '../css/shared-css';
@@ -128,7 +127,7 @@ function enhanceGithubIssueLink(featureLink, text) {
   if (stateVariant === undefined) {
     if (state === 'open') {
       const age = Date.now() - createdAt.getTime();
-      stateDescription = html`Opened <relative-time .date=${createdAt} format="relative" precision="day" threshold="P100Y">on ${_dateTimeFormat.format(createdAt)}</relative-time>`;
+      stateDescription = html`Opened <sl-relative-time date=${createdAt.toISOString()}>on ${_dateTimeFormat.format(createdAt)}</sl-relative-time>`;
       const week = 7 * 24 * 60 * 60 * 1000;
       stateVariant = 'success';
       if (externalReviewer) {
@@ -403,6 +402,10 @@ export class ChromedashLink extends LitElement {
       background-color: rgb(209,211,213);
     }
 
+    sl-relative-time {
+      margin: 0;
+    }
+
     .icon {
       display: block;
       width: 12px;

client-src/elements/chromedash-link_test.js

@@ -100,13 +100,9 @@ describe('Github issue links', () => {
               src="https://docs.github.com/assets/cb-600/images/site/favicon.png">
             <sl-badge size="small" variant="success">
               Opened
-              <relative-time
-                datetime="${yesterday.toISOString()}"
-                format="relative"
-                precision="day"
-                threshold="P100Y">
+              <sl-relative-time date="${yesterday.toISOString()}">
                 on ${_dateTimeFormat.format(yesterday)}
-              </relative-time>
+              </sl-relative-time>
             </sl-badge>
             #3007 Issue Title
           </sl-tag>
@@ -348,13 +344,9 @@ describe('Github issue links', () => {
                 src="https://avatars.githubusercontent.com/u/131524?s=48&amp;v=4">
               <sl-badge size="small" variant="danger">
                 Opened
-                <relative-time
-                    datetime="${lastWeek.toISOString()}"
-                    format="relative"
-                    precision="day"
-                    threshold="P100Y">
+                <sl-relative-time date="${lastWeek.toISOString()}">
                   on ${_dateTimeFormat.format(lastWeek)}
-                </relative-time>
+                </sl-relative-time>
               </sl-badge>
               #975 The textInput event
             </sl-tag>
@@ -388,13 +380,9 @@ describe('Github issue links', () => {
                 src="https://avatars.githubusercontent.com/u/131524?s=48&amp;v=4">
               <sl-badge size="small" variant="warning">
                 Opened
-                <relative-time
-                    datetime="${threeWeeks.toISOString()}"
-                    format="relative"
-                    precision="day"
-                    threshold="P100Y">
+                <sl-relative-time date="${threeWeeks.toISOString()}">
                   on ${_dateTimeFormat.format(threeWeeks)}
-                </relative-time>
+                </sl-relative-time>
               </sl-badge>
               #975 The textInput event
             </sl-tag>
@@ -428,13 +416,9 @@ describe('Github issue links', () => {
                 src="https://avatars.githubusercontent.com/u/131524?s=48&amp;v=4">
               <sl-badge size="small" variant="neutral">
                 Opened
-                <relative-time
-                    datetime="${twoMonths.toISOString()}"
-                    format="relative"
-                    precision="day"
-                    threshold="P100Y">
+                <sl-relative-time date="${twoMonths.toISOString()}">
                   on ${_dateTimeFormat.format(twoMonths)}
-                </relative-time>
+                </sl-relative-time>
               </sl-badge>
               #975 The textInput event
             </sl-tag>

package-lock.json

@@ -102,7 +102,6 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
-    "@github/relative-time-element": "^4.3.1",
     "@lit/task": "^1.0.0",
     "@polymer/iron-collapse": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",