[EuiInlineEdit] Test Cases for EuiInlineEdit

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -20,6 +20,9 @@ const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
 import InlineEditModeProps from './inline_edit_mode_props';
 const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props');
 
+import InlineEditSave from './inline_edit_save';
+const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save');
+
 import InlineEditConfirm from './inline_edit_confirm';
 const inlineEditConfirmSource = require('!!raw-loader!././inline_edit_confirm');
 
@@ -38,6 +41,7 @@ export const InlineEditExample = {
       </EuiText>
     </>
   ),
+  isNew: true,
   sections: [
     {
       title: 'Display and edit basic text',
@@ -80,6 +84,26 @@ export const InlineEditExample = {
       demo: <InlineEditTitle />,
       props: { EuiInlineEditTitle },
     },
+    {
+      title: 'Saving edited text',
+      text: (
+        <>
+          <p>
+            Use the <EuiCode>onSave</EuiCode> property to retrieve the value of
+            the edited text when the save button is pressed, and the{' '}
+            <EuiCode>onConfirm</EuiCode> callback (if passed) returns{' '}
+            <EuiCode>true</EuiCode> .{' '}
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: inlineEditSaveSource,
+        },
+      ],
+      demo: <InlineEditSave />,
+    },
     {
       title: 'Loading and invalid states',
       text: (

src-docs/src/views/inline_edit/inline_edit_save.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { EuiButton, EuiInlineEditText, EuiSpacer } from '../../../../src';
+
+export default () => {
+  const saveToLocalStorage = (newInlineEditValue: string) => {
+    localStorage.setItem('inlineEditValue', newInlineEditValue);
+  };
+
+  const removeFromLocalStorage = () => {
+    localStorage.removeItem('inlineEditValue');
+  };
+
+  const defaultInlineEditValue =
+    localStorage.getItem('inlineEditValue') ||
+    'This value will persist when you refresh the page!';
+
+  return (
+    <>
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue={defaultInlineEditValue}
+        size="m"
+        onSave={(onSaveVal) => saveToLocalStorage(onSaveVal)}
+      />
+
+      <EuiSpacer />
+
+      <EuiButton onClick={removeFromLocalStorage}>
+        Remove saved value from local storage
+      </EuiButton>
+    </>
+  );
+};