feat: add built-in translations #5471

anveshmekala · 2022-10-13T17:49:45Z

Related Issue: #4961

Summary

This PR will add built-in translations to the components across calcite .

Notable features :

Users no longer need to parse translated strings, translations are now built-in. List of the supported locale's can be found here.
One can overwrite default translations for a given locale using messageOverrides property.

Specifying lang at document level , component level and ancestor level is supported.

component level always takes precedence and then ancestor's followed by doc level.

 <!--Though arabic is specified as lang at doc level , button component will follow Spanish for string localization . -->
 <html lang="ar"> 
 <body>
 <calcite-button lang="es"> </calcite-button>
 </body>
 </html>

Migration

To migrate calcite components that use intl props & properties for accessible labels for overriding default values, refer to the following example to start using messageOverrides object property.

Before:

<!-- overriding via intl props -->
<calcite-color-picker intl-saturation="{custom value}"  intl-save="{custom value}"> </calcite-color-picker>

Current :

<!-- leveraging building translations. 
 display translations for Spanish lang -->
<calcite-color-picker lang="es"> </calcite-color-picker>

<!-- if the user wants to customize the default translations provided, one can override as below -->
<calcite-color-picker lang="es"> </calcite-color-picker>
<script>
const colorpickEl = document.querySelector('calcite-color-picker')
colorpickerEl.messageOverrides = { blue = "custom value" , red = "custom value" }
</script>

* feat(color-picker): add built-in translations * drop defaults since these are now translated * remove leftover default prop assertion Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

* feat(scrim): add built-in translations * set asset dir and drop optional prop as all props are made optional * wire up lifecycle utils * fix copy pasta 🍝🤦 * add effectiveLocale watcher

* feat(popover): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * simplify pattern by not needing to watch default messages

…slations

* feat(panel): add built-in translations * add deprecation note * add t9n bundle for flow-item and wire it up for translations * add test * add initial message load * remove duplicate identifiers Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

* feat(value-list): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * drop unused string from bundles * fix token replacement Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

…slations

* feat(notice): add built-in translations * refactor * remove TEXT from resource

* feat(inline-editable): add built-in translations * fix typo in bundles * clean up

* feat(filter): add built-in translations * remove lang parsing in shadowDom * fix test errors & rename messages * clean up

* feat(combobox): add built-in translations * add assetsDir * remove default value for intl props * cleanup * clean up

* feat(card): add built-in translations * missing lifecycle event * refactor * fix test errors * clean up * fix axe errors * clean up

* feat(block,block-section): add built-in translations * feedback changes * fix test errors * remove default test assertions for intl props * clean up

* feat(alert): add support for built-in translations * refactor * fix build errors * refactor * clean up

* feat(chip): add built-in translations * add util method to test non intl props

…slations

#5416) * feat: add built-in translations * add bundles * remove obsolete folder * add type generator * rename type's file * delete non-t9n file * commit lock file * rename type generating script and tidy up * regenerate interface files * update color-picker file * add missing value-list entries * inline common strings until we have common bundle wired up * revert unnecessary tsconfig changes * update interface files * add util to fetchbundles and supported locale * feedback changes * more cleanup * remove intl default value validation in e2e * sync en.json with en-US.json bundle * rename script * refactor script file * remove console.log * refactor & add back types to intl props in colorpicker * add util method for string over rides * tidy up * simplify t9n pattern * fix issue caused by type + interface TS shape confusion * support nb&no for norwegian locale * add cache for stringBundle fetch * tidy up * drop intl from string bundle keys * update scripts to use messages as string bundle name * rename bundles * rename interface props * add t9ntest util methods * restore intlProp watching to pattern * use extended mutation observer to simplify unobserving * add intl prop watcher doc * add support for cascading lang * tidy up * update conventions doc with pattern info * update doc * drop and ignore generated d.ts files and tweak messages type names * wire up interface generation before build * merge w other * refactor localized components pattern * refactor t9n pattern to work w/ localized component * tidy up * fix utils depending on defined locale and not placeholder one * consolidate t9n tests and make intl prop merging happen at run time * Updated Pseudo i18n - @jian9413 * feat(time-picker,input-time-picker): add built-in translations support * ensure connectLocale happens before code that depends on locale * convert effectiveLocale to internla prop * cherry pick lang inheritance changes * update doc * tidy up * make lang lookup more robust * update doc * tidy up * fix test errors * add comments * remove intl resources * fix typo * clean up * forward intlProps Co-authored-by: JC Franco <jfranco@esri.com> Co-authored-by: Ben Elan <benelan@users.noreply.github.com> Co-authored-by: jona7150 <jturpin@esri.com>

…slations

…tion (#5404) * feat: add built-in translations * add bundles * remove obsolete folder * add type generator * rename type's file * delete non-t9n file * commit lock file * rename type generating script and tidy up * regenerate interface files * update color-picker file * add missing value-list entries * inline common strings until we have common bundle wired up * revert unnecessary tsconfig changes * update interface files * add util to fetchbundles and supported locale * feedback changes * more cleanup * remove intl default value validation in e2e * sync en.json with en-US.json bundle * rename script * refactor script file * remove console.log * refactor & add back types to intl props in colorpicker * add util method for string over rides * tidy up * simplify t9n pattern * fix issue caused by type + interface TS shape confusion * support nb&no for norwegian locale * add cache for stringBundle fetch * tidy up * drop intl from string bundle keys * update scripts to use messages as string bundle name * rename bundles * rename interface props * add t9ntest util methods * restore intlProp watching to pattern * use extended mutation observer to simplify unobserving * add intl prop watcher doc * add support for cascading lang * tidy up * update conventions doc with pattern info * update doc * drop and ignore generated d.ts files and tweak messages type names * wire up interface generation before build * merge w other * refactor localized components pattern * refactor t9n pattern to work w/ localized component * tidy up * fix utils depending on defined locale and not placeholder one * consolidate t9n tests and make intl prop merging happen at run time * Updated Pseudo i18n - @jian9413 * feat(date-picker): add support for built-in translations * fix test errors * cleanup * moved localization setup before setting values that depend on locale in inputs * update other components that depend on locale being defined early when connected * update usage of effectiveLocale within composite components * localize input-date-picker * support translation updates when lang attr is deleted * update package lock * revert duplicate changes * update package-lock * remove input-time-picker changes * revert color-picker changes * revert change log and package lock changes * cleanup * more cleanup * feedback changes * add markdown for compound components * revert markdown changes * change nb to no in locales array * fix test errors * support cldr lang's * doc update * revert no to nb * cleanup * more cleanup * update comments * remove intl resources * clean up * add comments * revert order of locales Co-authored-by: JC Franco <jfranco@esri.com> Co-authored-by: Ben Elan <benelan@users.noreply.github.com> Co-authored-by: jona7150 <jturpin@esri.com>

* feat(input-number, input, input-text): add built-in translations * fix test errors * restore TEXT in resources * prettify * remove duplicate code * refactor

* feat(rating): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * fix outdated reference * update lang switch helper to account for strings used in rendering * feat(time-picker, input-time-picker): add numberingSystem property (#5301) * feat(time-picker, input-time-picker): add numberingSystem property for localization * wip: need to correctly apply numberingSystem on InputInput * use NumberStringFormat to delocalize time * cleanup * delocalize time on blur * test(input-time-picker): fix e2e failures and add numberingSystem story * use formatter's format method instead of localize for performance * cleanup * fix(input-time-picker): don't pass through lang and numberingSystem to calcite-input * fix test * use NumberStringFormat's setter instead of setOptions Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * refactor(block): move hardcoded classes to CSS object (#5474) * fix(input, input-number, input-text): fix input icons not displaying properly in Firefox (#5475) #5417 * ci(next): clean docs build before deployment (#5476) * ci(prepReleaseCommit): skip git sanity checks for next releases * ci(next): clean docs build before deployment * Revert "ci(prepReleaseCommit): skip git sanity checks for next releases" This reverts commit 7cc2d8b. Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * refactor(input-number, input-text): drop resize-icon selectors (#5477) * fix(block): improve content layout (#5473) #5422 * docs: update component READMEs (#5479) Co-authored-by: jcfranco <jcfranco@users.noreply.github.com> * docs: add backticks to props and values for consistency (#5485) * docs: add backticks to props and values for consistency * update prop ref * review edits * fix(date-picker): no longer hides year for zh-CN locale (#5344) * fix(date-picker): no longer hides year for zn-CH locale * add screener story * fix locale typo * fix suffix placement * docs(changelog): add missing breaking changes (#5469) * feat(stepper, stepper-item): add numberingSystem property (#5467) * feat(stepper, stepper-item): add numberingSystem property * use setter for NumberStringFormat's options instead of setOptions * change formatter options in effectiveLocale watcher * cleanup Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * fix(flow-item): fix scrollContentTo (#5487) #5414 * ci(next): fix next releases take 3 (#5497) * ci(next): fix next releases take 3 * cleanup Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * fix(flow-item, panel): fix layout issue that would cause double scrollbars (#5486) #5428 * 1.0.0-next.598 * docs: update component READMEs (#5501) Co-authored-by: jcfranco <jcfranco@users.noreply.github.com> * build(deps): bump eslint-plugin-jest from 27.1.1 to 27.1.2 (#5507) Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 27.1.1 to 27.1.2. - [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases) - [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md) - [Commits](jest-community/eslint-plugin-jest@v27.1.1...v27.1.2) --- updated-dependencies: - dependency-name: eslint-plugin-jest dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump shell-quote from 1.7.3 to 1.7.4 (#5503) Bumps [shell-quote](https://github.com/ljharb/shell-quote) from 1.7.3 to 1.7.4. - [Release notes](https://github.com/ljharb/shell-quote/releases) - [Changelog](https://github.com/ljharb/shell-quote/blob/main/CHANGELOG.md) - [Commits](ljharb/shell-quote@1.7.3...v1.7.4) --- updated-dependencies: - dependency-name: shell-quote dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @typescript-eslint/eslint-plugin from 5.38.1 to 5.40.1 (#5506) Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.38.1 to 5.40.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.40.1/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @typescript-eslint/parser from 5.38.1 to 5.40.1 (#5504) Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.38.1 to 5.40.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.40.1/packages/parser) --- updated-dependencies: - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint-plugin-jsdoc from 39.3.6 to 39.3.13 (#5505) Bumps [eslint-plugin-jsdoc](https://github.com/gajus/eslint-plugin-jsdoc) from 39.3.6 to 39.3.13. - [Release notes](https://github.com/gajus/eslint-plugin-jsdoc/releases) - [Commits](gajus/eslint-plugin-jsdoc@v39.3.6...v39.3.13) --- updated-dependencies: - dependency-name: eslint-plugin-jsdoc dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(tree, tree-item): works when tree is the topmost element in a shadow root where it has no parent (#5472) #5333 * ci: fix next releases take 4 (#5500) * ci: fix next releases take 4 * separate error messages Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * 1.0.0-next.599 * fix(flow-item): Render back button first. (#5511) * 1.0.0-next.600 * fix(tab): applies section styles onto the enclosing parent (#5516) * WIP: temorary demo swap with the issue case * fix(tab): applies section styles onto the enclosing parent * revert to original demo * cleanup * TabChilrenWithPercentageHeights story * cleanup * swap parent selector for [role=tabpanel] * Introduce a new class selector * 1.0.0-next.601 Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Ben Elan <belan@esri.com> Co-authored-by: Ben Elan <benelan@users.noreply.github.com> Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: jcfranco <jcfranco@users.noreply.github.com> Co-authored-by: Kitty Hurley <khurley@esri.com> Co-authored-by: Anveshreddy mekala <anv11827@esri.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Eliza Khachatryan <eli97736@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Driscoll <mdriscoll@esri.com>

* feat(pick-list-item): add built-in translations * add deprecation note and wire up messages in rendering * add initial message load * add missing type Co-authored-by: anveshmekala <anv11827@esri.com>

* feat(pagination): add built-in translations * simplify string keys to match others * add deprecation note * introduce context for locale lookup as translation locales do not necessarily map to supported ones * standardize Norwegian language code Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

* feat(modal): add built-in translations * add assets directory * remove intl from resource * clean up * fix test failure * refactor

…slations

geospatialem

A few comments regarding doc conventions, a lot of nitpicks if time allows. Looking forward to having this in, nice work @anveshmekala! 💪🏻

conventions/Internationalization.md

src/components/action-group/action-group.tsx

…slations

benelan · 2022-12-14T20:40:38Z

As discussed on Teams, we can see in the Chromatic canvas that the stories are working correctly, even though the snapshots are blank. I have accepted the snapshots for now so they aren't blocking this PR. Anvesh messaged Chromatic support and we will fix the blank snapshots when they provide additional info.

**Related Issue:** #6523 ## Summary This fixes initial filtering on consumers of `calcite-filter`. ### Notable changes #### `list` * `updateListItems` (private) is no longer debounced to allow updated values to be passed to the internal filter. This was also called whenever the items are modified (`MutationObserver`), so this could be revisited later if we see noticeable impact on performance * Corrected assertion where filteredItems and filteredData were not matching (one reflects the other) * Added new test #### `filter` * Removed a duplicate `filter` call that would interfere with the initial one – (introduced [here](#5471), possibly an oversight) * Restored skipped test * Updated test to cover filtering with default filter text

feat: add built-in translations

ac26754

github-actions bot assigned anveshmekala Oct 13, 2022

github-actions bot added the enhancement Issues tied to a new feature or request. label Oct 13, 2022

jcfranco and others added 27 commits October 17, 2022 10:35

feat(color-picker): add built-in translations (#5431)

52a9d65

* feat(color-picker): add built-in translations * drop defaults since these are now translated * remove leftover default prop assertion Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

feat(scrim): add built-in translations (#5435)

71726ce

* feat(scrim): add built-in translations * set asset dir and drop optional prop as all props are made optional * wire up lifecycle utils * fix copy pasta 🍝🤦 * add effectiveLocale watcher

feat(popover): add built-in translations (#5436)

2b2b9cc

* feat(popover): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * simplify pattern by not needing to watch default messages

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

47d0c19

…slations

feat(value-list): add built-in translations (#5438)

26f3ffd

* feat(value-list): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * drop unused string from bundles * fix token replacement Co-authored-by: Anveshreddy mekala <anv11827@esri.com>

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

e368bf8

…slations

add missing type

e2b4e82

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

eb9a474

…slations

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

a2ed4d4

…slations

feat(notice): add built-in translations (#5463)

c4e619b

* feat(notice): add built-in translations * refactor * remove TEXT from resource

feat(inline-editable): add built-in translations (#5457)

1a6afcd

* feat(inline-editable): add built-in translations * fix typo in bundles * clean up

feat(filter): add built-in translations (#5456)

f8e0449

* feat(filter): add built-in translations * remove lang parsing in shadowDom * fix test errors & rename messages * clean up

feat(combobox): add built-in translations (#5455)

f538b4e

* feat(combobox): add built-in translations * add assetsDir * remove default value for intl props * cleanup * clean up

feat(card): add built-in translations (#5450)

e259a55

* feat(card): add built-in translations * missing lifecycle event * refactor * fix test errors * clean up * fix axe errors * clean up

feat(block,block-section): add built-in translations (#5446)

85070de

* feat(block,block-section): add built-in translations * feedback changes * fix test errors * remove default test assertions for intl props * clean up

feat(alert): add support for built-in translations (#5444)

4baa273

* feat(alert): add support for built-in translations * refactor * fix build errors * refactor * clean up

feat(chip): add built-in translations (#5465)

21bdc0d

* feat(chip): add built-in translations * add util method to test non intl props

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

b5b2471

…slations

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

8c47836

…slations

feat(input-number, input, input-text): add built-in translations (#5458)

0a9779a

* feat(input-number, input, input-text): add built-in translations * fix test errors * restore TEXT in resources * prettify * remove duplicate code * refactor

feat(pick-list-item): add built-in translations (#5434)

ffe5f83

* feat(pick-list-item): add built-in translations * add deprecation note and wire up messages in rendering * add initial message load * add missing type Co-authored-by: anveshmekala <anv11827@esri.com>

feat(modal): add built-in translations (#5462)

935c607

* feat(modal): add built-in translations * add assets directory * remove intl from resource * clean up * fix test failure * refactor

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 13, 2022

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

9ce6d37

…slations

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 13, 2022

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

76c1fc3

…slations

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 13, 2022

anveshmekala added 3 commits December 13, 2022 16:34

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

9b3bc05

…slations

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

ad1dfeb

…slations

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

83fca1f

…slations

geospatialem reviewed Dec 14, 2022

View reviewed changes

anveshmekala added 7 commits December 14, 2022 12:04

add page.wait in shared list tests

f52ca25

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

5566f06

…slations

doc update

f24478a

add more waitForChanges( ) in shared list tests

1d678d3

refactor

3e809d6

cleanup

2890a27

Merge branch 'master' into anveshmekala/4961-add-built-in-pseudo-tran…

a7d968e

…slations

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 14, 2022

increase delay

f36acf2

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 14, 2022

anveshmekala merged commit d754b29 into master Dec 14, 2022

anveshmekala deleted the anveshmekala/4961-add-built-in-pseudo-translations branch December 14, 2022 21:20

github-actions bot added this to the 2023 January Priorities milestone Dec 14, 2022

jcfranco mentioned this pull request Mar 1, 2023

fix(filter, list): filter properly on initialization #6551

Merged

geospatialem mentioned this pull request Apr 24, 2024

Action: When using "indicator" provide a string to allow users to override default string to convey meaning #5005

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add built-in translations #5471

feat: add built-in translations #5471

anveshmekala commented Oct 13, 2022 •

edited

Loading

geospatialem left a comment

benelan commented Dec 14, 2022

feat: add built-in translations #5471

feat: add built-in translations #5471

Conversation

anveshmekala commented Oct 13, 2022 • edited Loading

Summary

Migration

geospatialem left a comment

Choose a reason for hiding this comment

benelan commented Dec 14, 2022

anveshmekala commented Oct 13, 2022 •

edited

Loading