Feature: uui-time-ago

[nielslyngsoe]

This component shall make it easy to display when something occurred. For shorter periods it will be precise and as time passes the precision will decrease.

A tooltip appearing on hover (For A11Y it might appears on focus or the tooltip can be opened by interaction/keyboard), The tooltip should display the exact time of the occurrence, as full DateTime string, like 1. January 2022 16:04:34

Examples of different appearances depending on the time since the given date-time:

now
28 seconds ago
16 minutes ago
3 hours ago
yesterday
4 days ago
last month
2 months ago
1 year ago
24 years ago

This should preferably update runtime, meaning example the second's display will update every second, to match the exact time difference.

I´m not sure how to determine when it makes sense to write yesterday etc. It would seem weird to write yesterday for 23:59 viewed at 00:01 (2minuts after). There should be a certain threshold before writing such. This has to be clarified how a system like that can work, if it does not make sense to use the words "yesterday"/"last month" then that should be kept out.

[bjarnef]

@nielslyngsoe I just saw this on Twitter: https://twitter.com/Steve8708/status/1504131981444980739

Maybe a similar utility function?
Not sure what it return right after midnight though.

[bjarnef]

@nielslyngsoe you may also want to look at this example to render relative time, which also use Intl.RelativeTimeFormat API: https://shoelace.style/components/relative-time

[leekelleher]

FYI, GitHub (the org) has a bundle of elements that extend the native <time> element:
<local-time>, <relative-time> and <time-ago>
https://github.com/github/time-elements

I found these on the Awesome Standalones repo, (for framework-agnostic standalone web components).

[bjarnef]

@leekelleher that's probably a good idea to extend the native <time> element.

It also use Intl.RelativeTimeFormat API as well via some utility methods:
https://github.com/github/time-elements/blob/main/src/utils.ts#L166-L179

Update: I think these functions were moved to here: https://github.com/github/relative-time-element/blob/main/src/relative-time-element.ts#L116-L200

[warrenbuckley]

@bjarnef you planning on working this, if not I may try and give this a go :)

[bjarnef]

@warrenbuckley not yet, so feel free start working on this :)

[iOvergaard]

@warrenbuckley great that you'd like to take a stab at it! FYI, the component should handle the lang attribute directly as well as observe the lang attribute set on the browser element through the global variable known as document.documentElement.lang. I'm not sure if the Intl API picks up on this automatically. In the backoffice at least, we have to listen for changes to that attribute.

[bjarnef]

@iOvergaard the component could probably observe document lang attribute, but not sure if there's a need to specify a different language than backoffice language (or if used in other contexts). I this this Shoelace component may use default language in
https://shoelace.style/components/relative-time#localization

I think they handled English as the default/fallback language as part of the localization utility.
https://github.com/shoelace-style/shoelace/blob/7500cabc587abead71f2440ad8f87aa4c1f468f9/src/utilities/localize.ts#L2

Not sure if the localization in UI library or backoffice is aware of the locale/culture, but also other stuff like direction (LTR / RTL).
https://www.w3.org/International/questions/qa-html-dir

It seems the direction in that library was defined in each language:
https://github.com/shoelace-style/shoelace/blob/7500cabc587abead71f2440ad8f87aa4c1f468f9/src/utilities/localize.ts#L14

[iOvergaard]

@bjarnef

not sure if there's a need to specify a different language than backoffice language

No, probably not, but how does it get the backoffice language. Does the Intl Api get it from the lang attribute automatically?

[bjarnef]

@iOvergaard this project https://github.com/github/relative-time-element seems to get language from closest lang attribute: https://github.com/github/relative-time-element/blob/main/src/relative-time-element.ts#L84-L90

Regarding Intl.RelativeTimeFormat() I think it use en if locale is not provided.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat

[bjarnef]

Lang is a built-in global attribute. Relative Time will use this to provide an applicable language to the Intl APIs. If the individual element does not have a lang attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to en.

https://github.com/github/relative-time-element#lang

[warrenbuckley]

@bjarnef you seem to be more active on this and realistically with my workload and little free time I doubt I will get to this, so if you have been working on this please feel free to as I won't be right now.