Convert date cell to single line

[charliepark]

We're working to tighten up the data tables (vertically), so are moving the date cell from two lines to one line.

Currently, it looks like this:

With this PR, it now looks like this:

On smaller screens, the date wraps:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 17, 2024 6:26am

[david-crespo]

I'm realizing date-fns is very literal and doesn't seem to do any locale-based formatting. I think we should use toLocaleString() and get decent results, i.e., the same as we're currently getting in English but better for other languages. Something like this:

const dateStr = date.toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
const timeStr = date.toLocaleString(undefined, { hour: 'numeric', minute: 'numeric' }))

In the math function we use navigator.language where I've put undefined here, but it seems like undefined is really the right way. The only problem is that the way I've tested this is to mock navigator.language, so if we use undefined instead that approach won't work in the tests. Maybe we should be using playwright instead to test the locale rendering. They make it really easy:

import { test, expect } from '@playwright/test';

test.describe('french language block', () => {

  test.use({ locale: 'fr-FR' });

  test('example', async ({ page }) => {
    // ...
  });
});

https://playwright.dev/docs/test-use-options#configuration-scopes

To summarize, I think you should:

1. Replace these date-fns format calls with toLocaleString(undefined, ...)
2. Check a displayed date in exactly one table in de-DE or whatever using the Playwright local setting feature
3. Don't worry about the number formatting functions, I'll make an issue to switch those to use undefined instead of navigator.language and change the way we test it

[david-crespo]

This should include the time too. You might need another helper , or maybe toLocaleString() by itself would do it? (nah).

main

This branch

[charliepark]

(after updating) … The native formatting adds a comma after the year (for en-US), but I think it's fine

[david-crespo]

stylish

[charliepark]

I have a few Playwright tests to update as well; coming soonish

[charliepark]

Changing my system language to French worked correctly:

And back to English:

[david-crespo]

Looks great! Tests should be simple, I think just looking at one page where there is a date should be fine.

[david-crespo]

Heh, check this out: I was just reading the MDN page and noticed the style shortcuts section: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#datestyle

I think we can reduce these to timeStyle: 'short' and dateStyle: 'medium'! That is clean.

const dateOptions = { dateStyle: 'medium' } satisfies Intl.DateTimeFormatOptions
const timeOptions = { timeStyle: 'short' } satisfies Intl.DateTimeFormatOptions

Oddly it does change both the German and Japanese results. Seems fine to me?

[charliepark]

Oh, interesting. Funny that it changes the German syntax. I don't have strong feelings on it, but agree the shorter configuration syntax is nice. Will get that in.

[charliepark]

Eh, I maybe prefer the output of the earlier version, but am fine either way, and recognize this will likely be an edge case for some time. We can always change it back if we decide that's better.

[david-crespo]

Even though it looks worse (maybe) I like the idea of taking the details out of our hands — in theory they should know better than we do what’s idiomatic in each locale.

[charliepark]

Makes sense; I agree with that.