eBay / ebayui-core

Collection of Marko widgets; considered to be the core building blocks for all eBay components, pages & apps
https://ebay.github.io/ebayui-core/
Other
212 stars 97 forks source link

feat: add localized formatting #2160

Closed LuLaValva closed 1 month ago

LuLaValva commented 2 months ago

Addresses: #2174

Description

Use date-fns to localize date format in date textbox instead of using ISO.

Note

date-fns maintains their own list of locales that likely doesn't exactly match the browser. This is likely something we will need to maintain ourselves, or provide/find a mapping

Screenshots

image image
changeset-bot[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: 629b7d83a77f2143da9e3e00ec71191778b915ca

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ----------------- | ----- | | @ebay/ebayui-core | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

LuLaValva commented 2 months ago

I'll update from master, but I think this should be part of at least a minor version since placeholder text will need to be updated in applications that are using the component.

agliga commented 2 months ago

I'll update from master, but I think this should be part of at least a minor version since placeholder text will need to be updated in applications that are using the component.

Can you show what teams need to do and what will break for teams? Maybe we can add a temporary opt in for this localization so that teams can opt into it and then update the placeholder so its not breaking.

LuLaValva commented 2 months ago

This is actually nontrivial for teams, since the placeholder needs to switch from being unconditionally YYYY-MM-DD to a localized format like MM/DD/YYYY for each locale. Alternatively, the placeholder can be removed or replaced with something like Date

agliga commented 2 months ago

This is actually nontrivial for teams, since the placeholder needs to switch from being unconditionally YYYY-MM-DD to a localized format like MM/DD/YYYY for each locale. Alternatively, the placeholder can be removed or replaced with something like Date

So for now: lets not make this automatic. If they want to get this new functionality, have them pass an argument like auto-localize=true. Next major version we will remove that flag and have it turn on by default.

agliga commented 1 month ago

Need to update snapshots in tests. @LuLaValva

agliga commented 1 month ago

LGTM overall codewise I see a couple of bugs.

In localized we should use localizedFormat by default. We should also update the placeholder there. That said, could we have the placeholder be automatically generated from the formatter? Also theres a bad bug if I type in a bad date using dashes for example, it removes all the content. We should not select a date in that case but never remove the value of the textfield.

LuLaValva commented 1 month ago

Thanks for the review @agliga, while making an example for the error state I realized that we do not expose the necessary attributes for the textbox, so instead of continuing indirection I opted to add an @textbox attribute tag and deprecate input-placeholder-text and floating-label for use here instead. This is not breaking because current code will still work, but I think we should remove them in the next major in favor of @textbox attributes.