feat: add localized formatting using date-fns

[LuLaValva]

trafficstars

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

[changeset-bot[bot]]

🦋 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]

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]

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]

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]

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]

Need to update snapshots in tests. @LuLaValva

[agliga]

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]

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.