Update examples (#27657) (#27660)

packages/kbn-i18n/GUIDELINE.md

@@ -393,29 +393,29 @@ For example, there is a component that is wrapped by `injectI18n`, like in the `
 
 ```js
 // ...
-class AddFilterUi extends Component {
+export const AddFilter = injectI18n(
+  class AddFilterUi extends Component {
   // ...
-  render() {
-    const { filter } = this.state;
-    return (
-      <EuiFlexGroup>
-        <EuiFlexItem grow={10}>
-          <EuiFieldText
-            fullWidth
-            value={filter}
-            onChange={e => this.setState({ filter: e.target.value.trim() })}
-            placeholder={this.props.intl.formatMessage({
-              id: 'kbn.management.indexPattern.edit.source.placeholder',
-              defaultMessage: 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')'
-            })}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+    render() {
+      const { filter } = this.state;
+      return (
+        <EuiFlexGroup>
+          <EuiFlexItem grow={10}>
+            <EuiFieldText
+              fullWidth
+              value={filter}
+              onChange={e => this.setState({ filter: e.target.value.trim() })}
+              placeholder={this.props.intl.formatMessage({
+                id: 'kbn.management.indexPattern.edit.source.placeholder',
+                defaultMessage: 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')'
+              })}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    }
   }
-}
-
-export const AddFilter = injectI18n(AddFilterUi);
+);
 ```
 
 To test the `AddFilter` component it is needed to render its `WrappedComponent` property using `shallowWithIntl` function to pass `intl` object into the `props`.

packages/kbn-i18n/README.md

@@ -298,7 +298,7 @@ React component as a pure function:
 import React from 'react';
 import { injectI18n, intlShape } from '@kbn/i18n/react';
 
-const MyComponentContent = ({ intl }) => (
+export const MyComponent = injectI18n({ intl }) => (
   <input
     type="text"
     placeholder={intl.formatMessage(
@@ -311,13 +311,11 @@ const MyComponentContent = ({ intl }) => (
       { name, unreadCount }
     )}
   />
-);
+));
 
-MyComponentContent.propTypes = {
+MyComponent.WrappedComponent.propTypes = {
   intl: intlShape.isRequired,
 };
-
-export const MyComponent = injectI18n(MyComponentContent);
 ```
 
 React component as a class:
@@ -326,27 +324,27 @@ React component as a class:
 import React from 'react';
 import { injectI18n, intlShape } from '@kbn/i18n/react';
 
-class MyComponentContent extends React.Component {
-  static propTypes = {
-    intl: intlShape.isRequired,
-  };
+export const MyComponent = injectI18n(
+  class MyComponent extends React.Component {
+    static propTypes = {
+      intl: intlShape.isRequired,
+    };
 
-  render() {
-    const { intl } = this.props;
+    render() {
+      const { intl } = this.props;
 
-    return (
-      <input
-        type="text"
-        placeholder={intl.formatMessage({
-          id: 'kbn.management.objects.searchPlaceholder',
-          defaultMessage: 'Search',
-        })}
-      />
-    );
+      return (
+        <input
+          type="text"
+          placeholder={intl.formatMessage({
+            id: 'kbn.management.objects.searchPlaceholder',
+            defaultMessage: 'Search',
+          })}
+        />
+      );
+    }
   }
-}
-
-export const MyComponent = injectI18n(MyComponentContent);
+);
 ```
 
 ## AngularJS