Added useEuiI18n hook #3749

chandlerprall · 2020-07-15T19:39:29Z

Summary

Closes #2474 , introduces a hook allowing access to the i18n token mapping & processing without using the existing EuiI18n render prop component.

created useEuiI18n matching EuiI18n's support for:
- single token + default
- single token + default + value interpolation
- single token + default as component
- multiple tokens + defaults
added support to scripts/babel/fetch-i18n-strings.js matching support for extracting tokens from EuiI18n
updated EuiImage to use the new hook
confirmed scripts/babel/fetch-i18n-strings.js correctly extracts EuiImage's tokens
updated custom eslint i18n rule to run same detections against useEuiI18n
- duplicated majority of EuiI18n's tests for the hook
- tested ruleset with the hooks added to EuiImage

Todo:

docs
extract useEuiI18n tokens into src-docs/src/i18ntokens.json
expand scripts/eslint-plugin/i18n.js eslint rule to similarly process this hook

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~

Checked in mobile
Checked in Safari and Firefox
- [ ] Props have proper autodocs
Added documentation
~~- [ ] Checked Code Sandbox works for the any docs examples~~
Added or updated jest tests
Checked for breaking changes and labeled appropriately
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

kibanamachine · 2020-07-15T20:03:12Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

kibanamachine · 2020-07-16T17:22:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

kibanamachine · 2020-07-16T18:05:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

kibanamachine · 2020-07-16T18:55:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

…action

chandlerprall · 2020-07-16T19:37:57Z

scripts/eslint-plugin/i18n.test.js

@@ -2,12 +2,13 @@ const rule = require('./i18n');
 const RuleTester = require('eslint').RuleTester;

 const ruleTester = new RuleTester({
-  parser: 'babel-eslint'
+  parser: require.resolve('babel-eslint')


This has been broken since the eslint upgrade. Easy fix tho 🎉

chandlerprall · 2020-07-16T19:38:22Z

scripts/eslint-plugin/i18n.test.js

  // nothing to validate against
-  '<EuiI18n token="euiFooBar.tokenName" default="Some default value"/>',
+  '<I18n token="euiFooBar.tokenName" default="Some default value"/>',


This never did what it said it did. 🤦

cchaos

Docs look great, thanks for the quick turnaround!!

cchaos · 2020-07-16T19:45:34Z

src-docs/src/views/i18n/i18n_multi.js

+  const [title, description] = useEuiI18n(
+    ['euiI18nMulti.title', 'euiI18nMulti.description'],
+    ['Card Title', 'Card Description'],
+    {}
+  );


That's where the {} went! I put it somewhere for testing and couldn't find it to remove. Thanks :)

kibanamachine · 2020-07-16T19:56:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

thompsongl

This is great!

Confirmed locally all the various configurations and that i18ntokens.json is correctly updated during builds.

kibanamachine · 2020-07-16T21:42:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3749/

* Break up release.js (elastic#3723) * Switch release.js to use arguments instead of env vars * Switch MFA code back to env var so it doesn't leak in CI logs * Update job definition to use --type arg * Support breaking up release steps with args * Break release up to fetch time-sensitive MFA token right before publish * Strip whitespace from each step Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Allow prop-setting on the FlexItems within DescribedFormGroup (elastic#3717) * Allow prop-setting on the FlexItems within DescribedFormGroup * Add changelog entry * Honor classes on fieldFlexItem * Update src/components/form/described_form_group/described_form_group.test.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update snap name Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Re-focus EuiSuperSelect input after making a value change (elastic#3734) * Re-focus EuiSuperSelect input after making a value change * changelog * [EuiStat] Allow customizing the render of the title and description HTML tags (elastic#3693) * Add titleElement and descriptionElement to EuiStat * Updated snapshots * Updated changelog * Fixed issue with screenreader * Updated snapshots * Use screen reader only if title and description is a string * updated snapshots * Merge remote-tracking branch 'upstream/master' into fix/stat * Fixed typo in changelod * removed titleChildren * titlechildren as variable * Update CHANGELOG.md Remove an extra line left over from a merge resolution Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * [EuiTable] Expand item action name to allow a function (elastic#3739) * allow for item -> ReactNode in name * docs * CL * Add ssh keys so new tags can be pushed to Github from Jenkins (elastic#3740) * Add ssh keys so new tags can be pushed to Github * Need a vault token before we can pull secrets * update i18ntokens * 27.1.0 * Updated documentation. * Chore/decouple button content (elastic#3730) * [New] EuiButtonContent For rendering the contents of buttons, icon (loading spinner) and text wrapper for children * Use EuiButtonContent in EuiButtonEmpty * Fixing classNames and disabled states * Create EuiButtonDisplay for internal usage * Fix snaps * ts gymnastics * Added tests for EuiButtonContent * More optimization - Extend EuiButtonContentProps - Content styles are in button_content.scss * Restricted list of `element`s * [Docs] Adding more acccessibility-focused notes and examples (elastic#3714) * making more a11y callouts in docs * Apply suggestions from code review Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * prettier update Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> * [EuiFocusTrap] Use `react-focus-on` (elastic#3631) * WIP: react-focus-on * WIP: fix GuideFullScreen * noIsolation; onClickOutside * euiflyout snapshot updates * euiflyout snapshot updates * euimodal snapshot updates * euidatagrid snapshot updates * euicolorpalettepicker snapshot updates * euisuperselect snapshot updates * euicollapsible snapshot updates * euifocustrap snapshot updates * allow for array snapshots with takeMountedSnapshot * docs improvements * default to noIsolation=true and scrollLock=false * CL * Fixed bug in EuiComboBox always showing a scrollbar (elastic#3744) * Fixed EuiComboBox always showing a scrollbar * Adding the right PR number to CL * Added useEuiI18n hook (elastic#3749) * Added useEuiI18n hook * Updated docs with useEuiI18n hook, added snippets * Add support to fetch-1i8n-strings or useEuiI18n to match EuiI18n extraction * Fix up return types for useEuiI18n * Updated custom eslint i18n rule/package to lint useEuiI18n usages * changelog * Remove something I was testing with and lost where I had placeed it. * [EuiSuperDatePicker] Bypass formatting `null` dates (elastic#3750) * prevent formatting on null value * remove unnecessary cast * account for keyboard nav with null selection * CL * Updated EuiComboBox to allow the options list to open for single selection custom options (elastic#3706) * Fixing includes to return true when object exists in array * changelog * Allowing list to open for single selection custom options * Updated changelog * PR review * Improving example * Improving example * Addind isClearable * Improving examples * Improving explanation text * Adding note * Addressing PR issues * Update src-docs/src/views/combo_box/combo_box_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src-docs/src/views/combo_box/combo_box_example.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Snippet Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Add analyze event glyph to EuiIcon (elastic#3729) * adding analyze event security icon * updating analyze_event icon * updating again * Update CHANGELOG.md * Update consuming.md (elastic#3769) * Path has changed and the wiki has not been updated. * Fix zIndex for two popup ups (elastic#3768) Clicking both buttons on https://eui.elastic.co/#/tabular-content/data-grid-styling-and-toolbar demo brings up partially hidden popups because their z-index is too low. Increasing by one seems to do the trick. * [Playground] EuiBadge, EuiNotificationBadge, EuiBetaBadge (elastic#3722) * created playground for badges * removed commented code * used validator for iconType and colour * updated variable name * removed colour validation * removed unnecessary imports * removed default values, fullscreen mode * suggesstions * removed placeholder, added required, some badge props set to string * used actual value of child in text field * added sanitize function * fixed unique-key warning * added validation * updated to identify the change whenthe state changes * suggestions * added onCLick function snippet * removed error popup by react-view * removed lint err * removed commented code Co-authored-by: Josh Mock <joshua.mock@elastic.co> Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Scott Gould <sbg@elastic.co> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Ashik Meerankutty <ashik9591@gmail.com> Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co> Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@gmail.com> Co-authored-by: Marra Sherrier <45169477+marrasherrier@users.noreply.github.com> Co-authored-by: Alberto Andújar <josealbertoandujar@gmail.com> Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>

* Added useEuiI18n hook * Updated docs with useEuiI18n hook, added snippets * Add support to fetch-1i8n-strings or useEuiI18n to match EuiI18n extraction * Fix up return types for useEuiI18n * Updated custom eslint i18n rule/package to lint useEuiI18n usages * changelog * Remove something I was testing with and lost where I had placeed it.

This reverts commit 6008dc6.

chandlerprall marked this pull request as draft July 15, 2020 19:42

cchaos mentioned this pull request Jul 16, 2020

[EuiFieldPassword] Support toggling of obfuscation #3751

Merged

10 tasks

chandlerprall added 6 commits July 16, 2020 13:32

Added useEuiI18n hook

a2338d9

Updated docs with useEuiI18n hook, added snippets

6757a72

Add support to fetch-1i8n-strings or useEuiI18n to match EuiI18n extr…

59f4315

…action

Fix up return types for useEuiI18n

d8230bc

Updated custom eslint i18n rule/package to lint useEuiI18n usages

de377fc

changelog

3850fe2

chandlerprall force-pushed the feature/2474-i18n-hook branch from 0eeefba to 3850fe2 Compare July 16, 2020 19:33

chandlerprall marked this pull request as ready for review July 16, 2020 19:33

chandlerprall requested review from cchaos and thompsongl July 16, 2020 19:33

chandlerprall commented Jul 16, 2020

View reviewed changes

cchaos approved these changes Jul 16, 2020

View reviewed changes

thompsongl approved these changes Jul 16, 2020

View reviewed changes

Remove something I was testing with and lost where I had placeed it.

05de2fd

chandlerprall merged commit 762dc55 into elastic:master Jul 16, 2020

chandlerprall deleted the feature/2474-i18n-hook branch July 16, 2020 22:42

anishagg17 added a commit to anishagg17/eui that referenced this pull request Jul 20, 2020

Revert "Added useEuiI18n hook (elastic#3749)"

65bbad9

This reverts commit 6008dc6.

anishagg17 added a commit to anishagg17/eui that referenced this pull request Jul 20, 2020

Revert "Added useEuiI18n hook (elastic#3749)"

5dd7eed

This reverts commit 6008dc6.

thompsongl mentioned this pull request Jul 23, 2020

Upgrade EUI to v27.2.0 elastic/kibana#72993

Closed

thompsongl mentioned this pull request Jul 31, 2020

Upgrade EUI to v27.4.0 elastic/kibana#74004

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added useEuiI18n hook #3749

Added useEuiI18n hook #3749

chandlerprall commented Jul 15, 2020 •

edited

Loading

kibanamachine commented Jul 15, 2020

kibanamachine commented Jul 16, 2020

kibanamachine commented Jul 16, 2020

kibanamachine commented Jul 16, 2020

chandlerprall Jul 16, 2020

chandlerprall Jul 16, 2020

cchaos left a comment

cchaos Jul 16, 2020

chandlerprall Jul 16, 2020

kibanamachine commented Jul 16, 2020

thompsongl left a comment

kibanamachine commented Jul 16, 2020

Added useEuiI18n hook #3749

Added useEuiI18n hook #3749

Conversation

chandlerprall commented Jul 15, 2020 • edited Loading

Summary

Checklist

kibanamachine commented Jul 15, 2020

kibanamachine commented Jul 16, 2020

kibanamachine commented Jul 16, 2020

kibanamachine commented Jul 16, 2020

chandlerprall Jul 16, 2020

Choose a reason for hiding this comment

chandlerprall Jul 16, 2020

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

cchaos Jul 16, 2020

Choose a reason for hiding this comment

chandlerprall Jul 16, 2020

Choose a reason for hiding this comment

kibanamachine commented Jul 16, 2020

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 16, 2020

chandlerprall commented Jul 15, 2020 •

edited

Loading