App Localization: New eslint rules for App UI Kit 🌏

Announcements
,
1

Hey everyone!

If you are using the Canva app localization process, this a call to action for you.

:sparkles: What’s New

We’ve made some improvements to our i18n eslint config. This new config will help you localize better by linting against unlocalized App UI Kit props. For example:

// ❌ Not recommended, messages will not be localized.
<Button ariaLabel="Click me">..</Button>
//                ~~~~~~~~~~~~~~~~~~~~
// error: Cannot have untranslated text in JSX eslintformatjs/no-literal-string-in-jsx

// ✅ Recommended, messages will be localized.
const intl = useIntl();
<Button .. ariaLabel={intl.formatMessage({..})} >..</Button>

:rocket: Getting started

To get the new config, just copy these new i18n rules from the recently updated starter kit.

:plus: Additional tips

If you encounter any false positives where the lint rule shows errors incorrectly,
suppress the error:

<MyComponent
  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
  name="notUserFacingText"        
/>

Or alternatively:

"formatjs/no-literal-string-in-jsx": [
  2,
  {
    props: {
      exclude: [
        // ...
+                [”MyComponent”, “name”]
      ],

If you want to ensure localized props for your other components, add them to your eslint config. For example, to ensure the helperText prop of MyComponent is passed a localized message, we would add the following:

"formatjs/no-literal-string-in-jsx": [
  2,
  {
    props: {
      include: [
        // ...
        ["FormField", "error"],
+                  [”MyComponent”, “helperText”]
      ],

If you have any feedback on these rules, please let us know.

Happy localizing!

3 Likes
2

Hi Harrisonl,

I’ve started updating some of my products to localization. It’s a really interesting feature, but I’m facing a few challenges while working with it:

  • There’s a lot of text that needs descriptions. For example, the titles in text input. I hope there’s a workflow that minimizes this explanation as much as possible. For example, after the process is done and everything is ready for release, if you don’t understand a word, then this description might be necessary.

  • The dev tool settings get reset to the initial state when switching between language simulation modes, which sometimes makes it difficult to check the text at that moment.

3

Hey @ruacon,

Thanks for taking the time to give localization a go, and for giving us some clear feedback.

Accurate and complete descriptions are critical to making sure we get translations that will make sense to Canva users. As you might imagine, words don’t directly translate and so it can end up nonsensical if the translator doesn’t have an understanding of how the word is being used.

Thanks for the feedback on the state resetting with each language change, we’ll look into making this better - no promises right now!

Thanks for putting in the effort to make great translations happen! :slight_smile:

Happy localizing!
Harrison

1 Like