Polaris translations should be initialized based on the locale of the request

[movermeyer]

Issue summary

Right now, PolarisProvider.jsx imports the en translations, regardless of the locale of the request.

Expected behavior

Which translations are used in the Polaris components should depend on the locale of the request, and should fallback to en only when no appropriate translations could be found.

Actual behavior

en.json is used regardless. See hard-coded import statement.

Steps to reproduce the problem

Add a Polaris DatePicker to your app:

const [{month, year}, setDate] = useState({month: 1, year: 2018});
const [selectedDates, setSelectedDates] = useState({
  start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
  end: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
});

return (
  <>
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      // onMonthChange={handleMonthChange}
      selected={selectedDates}
    />

Then set your Shopify Admin/Identity account prefered language to something other than English (e.g., nb-NO)

Expected:

Actual:

Potential solution

Shopify provides the merchant's chosen locale in the locale query parameter. As a first step, PolarisProvider could be changed to allow the locale to be passed in.

Then it could load the corresponding translations based on an exact match of the locale. This would work for locales like fr, but not those like nb-NO, since there is no nb-NO.json in Polaris, just a nb.json.

As a next better step, it would follow the parentLocales data from CLDR to determine a fallback chain for the locale (e.g., nb-NO -> nb -> no), checking each locale in the fallback chain until finally defaulting to en.

[trishrempel]

This issue will be solved by this PR.

[mete89]

@trishrempel I don't see any locale query param in shopify admin urls. do you see any? https://github.com/Shopify/shopify-frontend-template-react/blob/9c232a1f062c7d2bb31a58d9ffc53b452b7b8ed9/utils/i18nUtils.js#L48

[trishrempel]

Hi @mete89, the locale is available on the query param accessible to the embedded app; you can find it in Developer Tools by filtering on &locale=: