RelativeTime

[josepmartins]

Tracking issue: https://github.com/github/primer/issues/1252
Figma: https://www.figma.com/file/ScxQQeqilNPokwTCaG6okn/RelativeTime-(FY23-Q1)?node-id=218%3A2711

👁️ Preview: https://primer-a7c04617fa-26441320.drafts.github.io/components/relative-time

[maximedegreve]

This is great!

I'm wondering if we could make it even better by adding a table with all the formats and examples.
When I'm designing this would save me time having to google for my use case what formats I can use.

When	Format	Example
1 day >=	D MMM, YYYY	14 May, 2020

[lukasoppermann]

Hey, in the figma file (I am assuming you meant to link to phase 2 instead if phase 1) you have the following code:

<RelativeTime micro={{narrow: true}}  datetime={Date} />

Why do you have to set the micro property to narrow: true? Wouldn't it be better to do micro=true or even better narrow=true?

[josepmartins]

Hey, in the figma file (I am assuming you meant to link to phase 2 instead if phase 1) you have the following code:

<RelativeTime micro={{narrow: true}}  datetime={Date} />

Why do you have to set the micro property to narrow: true? Wouldn't it be better to do micro=true or even better narrow=true?

Right! I changed the link 👍 .

Following the same approach as the hidden option in the SplitLayout or the variant in the SegmentControl component, the idea is to provide a range of responsive widths (narrow, regular, wide) for the micro format, so an example of the API using micro in narrow spaces looks like:

<RelativeTime micro={{narrow: true, regular: false, wide: false}} datetime={new Date("2022-12-26")}>

[josepmartins]

This is great!

I'm wondering if we could make it even better by adding a table with all the formats and examples. When I'm designing this would save me time having to google for my use case what formats I can use.

When Format Example
1 day >= D MMM, YYYY 14 May, 2020

Good idea 👍 I'll add it as part of the content section.

[simurai]

Added two suggestions, otherwise I think this is ✨