Initial go at localizing some components (#1450)

* Initial go at localizing some components, introduced message formatter on EuiI18n * Support strings with placeholders as I18n defaults * Better developer experience * Refactor EuiI18n place holder parsing, add tests for I18n * Cleaned up some localizations * Refactor a couple i18n tokens * PR feedback * changelog
elastic · Jan 30, 2019 · b047de8 · b047de8
1 parent e21f7b3
commit b047de8
Show file tree

Hide file tree

Showing 23 changed files with 1,091 additions and 198 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.7.4`.
+- Converted a number of components to support text localization ([#1485](https://github.com/elastic/eui/pull/1485))
 
 ## [`6.7.4`](https://github.com/elastic/eui/tree/v6.7.4)
 

diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "react-ace": "^5.5.0",
     "react-color": "^2.13.8",
     "react-input-autosize": "^2.2.1",
+    "react-is": "~16.3.0",
     "react-virtualized": "^9.18.5",
     "react-vis": "1.10.2",
     "resize-observer-polyfill": "^1.5.0",
@@ -76,6 +77,7 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.9",
     "@types/react": "^16.3.0",
+    "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
     "autoprefixer": "^7.1.5",

diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { EuiPortal } from '../portal';
 import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiI18n } from '../i18n';
 
 const paddingSizeToClassNameMap = {
   none: null,
@@ -53,7 +54,10 @@ export class EuiBottomBar extends Component {
       <EuiPortal>
         <EuiScreenReaderOnly>
           <p aria-live="assertive">
-            There is a new menu opening with page level controls at the bottom of the document.
+            <EuiI18n
+              token="euiBottomBar.screenReaderAnnouncement"
+              default="There is a new menu opening with page level controls at the bottom of the document."
+            />
           </p>
         </EuiScreenReaderOnly>
         <div

diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
@@ -15,6 +15,7 @@ import {
 } from '../overlay_mask';
 
 import { keyCodes } from '../../services';
+import { EuiI18n } from '../i18n';
 
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
@@ -143,14 +144,21 @@ export class EuiCodeBlockImpl extends Component {
 
     if (!inline && overflowHeight) {
       fullScreenButton = (
-        <EuiButtonIcon
-          className="euiCodeBlock__fullScreenButton"
-          size="s"
-          onClick={this.toggleFullScreen}
-          iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
-          color="text"
-          aria-label={this.state.isFullScreen ? 'Collapse' : 'Expand'}
-        />
+        <EuiI18n
+          tokens={['euiCodeBlock.fullscreenCollapse', 'euiCodeBlock.fullscreenExpand']}
+          defaults={['Collapse', 'Expand']}
+        >
+          {([fullscreenCollapse, fullscreenExpand]) => (
+            <EuiButtonIcon
+              className="euiCodeBlock__fullScreenButton"
+              size="s"
+              onClick={this.toggleFullScreen}
+              iconType={this.state.isFullScreen ? 'cross' : 'fullScreen'}
+              color="text"
+              aria-label={this.state.isFullScreen ? fullscreenCollapse : fullscreenExpand}
+            />
+          )}
+        </EuiI18n>
       );
     }
 

diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -11,16 +11,12 @@ exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -36,16 +32,12 @@ exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace b
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -61,16 +53,12 @@ exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
   <p
     class="euiText"
   >
-    Press Enter to start 
-    editing
-    .
+    Press Enter to start editing.
   </p>
   <p
     class="euiText"
   >
-    When you’re done, press Escape to stop 
-    editing
-    .
+    When you're done, press Escape to stop editing.
   </p>
 </div>
 `;
@@ -95,7 +83,7 @@ exports[`EuiCodeEditor is rendered 1`] = `
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -211,7 +199,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -327,7 +315,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop editing.
+      When you're done, press Escape to stop editing.
     </p>
   </div>
   <div
@@ -443,7 +431,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
     <p
       class="euiText"
     >
-      When you’re done, press Escape to stop interacting with the code.
+      When you're done, press Escape to stop interacting with the code.
     </p>
   </div>
   <div

diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import AceEditor from 'react-ace';
 
 import { htmlIdGenerator, keyCodes } from '../../services';
+import { EuiI18n } from '../i18n';
 
 function setOrRemoveAttribute(element, attributeName, value) {
   if (value === null || value === undefined) {
@@ -141,11 +142,6 @@ export class EuiCodeEditor extends Component {
       filteredCursorStart = cursorStart;
     }
 
-    const activity = isReadOnly
-      ? 'interacting with the code'
-      : 'editing';
-
-
     // Don't use EuiKeyboardAccessible here because it doesn't play nicely with onKeyDown.
     const prompt = (
       <div
@@ -159,11 +155,39 @@ export class EuiCodeEditor extends Component {
         data-test-subj="codeEditorHint"
       >
         <p className="euiText">
-          Press Enter to start {activity}.
+          {
+            isReadOnly
+              ? (
+                <EuiI18n
+                  token="euiCodeEditor.startInteracting"
+                  default="Press Enter to start interacting with the code."
+                />
+              )
+              : (
+                <EuiI18n
+                  token="euiCodeEditor.startEditing"
+                  default="Press Enter to start editing."
+                />
+              )
+          }
         </p>
 
         <p className="euiText">
-          When you&rsquo;re done, press Escape to stop {activity}.
+          {
+            isReadOnly
+              ? (
+                <EuiI18n
+                  token="euiCodeEditor.stopInteracting"
+                  default="When you're done, press Escape to stop interacting with the code."
+                />
+              )
+              : (
+                <EuiI18n
+                  token="euiCodeEditor.stopEditing"
+                  default="When you're done, press Escape to stop editing."
+                />
+              )
+          }
         </p>
       </div>
     );

diff --git a/src/components/color_picker/color_picker.js b/src/components/color_picker/color_picker.js
@@ -8,6 +8,7 @@ import { ChromePicker } from 'react-color';
 import { EuiOutsideClickDetector } from '../outside_click_detector';
 
 import { EuiColorPickerSwatch } from './color_picker_swatch';
+import { EuiI18n } from '../i18n';
 
 export class EuiColorPicker extends Component {
   constructor(props) {
@@ -30,15 +31,32 @@ export class EuiColorPicker extends Component {
   };
 
   getColorLabel() {
-    const { color } = this.props;
-    const colorValue = color === null ? '(transparent)' : color;
     return (
-      <div
-        className="euiColorPicker__label"
-        aria-label={`Color selection is ${ colorValue }`}
+      <EuiI18n
+        token="euiColorPicker.transparentColor"
+        default="transparent"
       >
-        { colorValue }
-      </div>
+        {transparentColor => {
+          const { color } = this.props;
+          const colorValue = color === null ? `(${transparentColor})` : color;
+          return (
+            <EuiI18n
+              token="euiColorPicker.colorSelectionLabel"
+              default="Color selection is {colorValue}"
+              values={{ colorValue }}
+            >
+              {colorSelectionLabel => (
+                <div
+                  className="euiColorPicker__label"
+                  aria-label={colorSelectionLabel}
+                >
+                  { colorValue }
+                </div>
+              )}
+            </EuiI18n>
+          );
+        }}
+      </EuiI18n>
     );
   }
 

diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.js b/src/components/combo_box/combo_box_input/combo_box_pill.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiBadge } from '../../badge';
+import { EuiI18n } from '../../i18n';
 
 export class EuiComboBoxPill extends Component {
   static propTypes = {
@@ -47,23 +48,31 @@ export class EuiComboBoxPill extends Component {
 
     if (onClose) {
       return (
-        <EuiBadge
-          className={classes}
-          title={children}
-          iconOnClick={this.onCloseButtonClick}
-          iconOnClickAriaLabel={`Remove ${children} from selection in this group`}
-          iconType="cross"
-          iconSide="right"
-          color={color}
-          closeButtonProps={{
-            tabIndex: '-1',
-          }}
-          onClick={onClick}
-          onClickAriaLabel={onClickAriaLabel}
-          {...rest}
+        <EuiI18n
+          token="euiComboBoxPill.removeSelection"
+          default="Remove {children} from selection in this group"
+          values={{ children }}
         >
-          {children}
-        </EuiBadge>
+          {removeSelection => (
+            <EuiBadge
+              className={classes}
+              title={children}
+              iconOnClick={this.onCloseButtonClick}
+              iconOnClickAriaLabel={removeSelection}
+              iconType="cross"
+              iconSide="right"
+              color={color}
+              closeButtonProps={{
+                tabIndex: '-1',
+              }}
+              onClick={onClick}
+              onClickAriaLabel={onClickAriaLabel}
+              {...rest}
+            >
+              {children}
+            </EuiBadge>
+          )}
+        </EuiI18n>
       );
     }