From fa32dfdab3e64ff082a1c0138d3c360c8df3418a Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Tue, 18 Apr 2023 15:25:40 -0400
Subject: [PATCH 01/16] Added Cypress tests for EuiInlineEdit functionality

---
 .../inline_edit/inline_edit.spec.tsx          | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 src/components/inline_edit/inline_edit.spec.tsx

diff --git a/src/components/inline_edit/inline_edit.spec.tsx b/src/components/inline_edit/inline_edit.spec.tsx
new file mode 100644
index 00000000000..c24dad137f5
--- /dev/null
+++ b/src/components/inline_edit/inline_edit.spec.tsx
@@ -0,0 +1,148 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React from 'react';
+import { EuiInlineEditText } from './inline_edit_text';
+
+describe('EuiInlineEditText', () => {
+  describe('Editing text', () => {
+    it('saves text edits', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+        />
+      );
+
+      cy.get('button').contains('Hello World!').realClick();
+      cy.get('input[aria-label="textEditInput"]').clear().type('New message');
+      cy.get('button[aria-label="saveEditButton"]')
+        .realClick()
+        .then(() => {
+          expect(cy.get('button').contains('New message'));
+        });
+    });
+
+    it('cancels text edits', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          cancelButtonAriaLabel="cancelEditButton"
+        />
+      );
+
+      cy.get('button').contains('Hello World!').realClick();
+      cy.get('input[aria-label="textEditInput"]').clear().type('New message');
+      cy.get('button[aria-label="cancelEditButton"]')
+        .realClick()
+        .then(() => {
+          expect(cy.get('button').contains('Hello World!'));
+        });
+    });
+  });
+
+  describe('Validation and Loading', () => {
+    it('should not save empty text', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+        />
+      );
+
+      cy.get('button').contains('Hello World!').realClick();
+      cy.get('input[aria-label="textEditInput"]').clear();
+      cy.get('button[aria-label="saveEditButton"]')
+        .realClick()
+        .then(() => {
+          expect(cy.get('button').contains('Hello World!'));
+        });
+    });
+
+    it('should obey user generated validation rules', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+          startWithEditOpen={true}
+          isInvalid={true}
+        />
+      );
+
+      cy.get('input[aria-label="textEditInput"]').should(
+        'have.attr',
+        'aria-invalid'
+      );
+      cy.get('button[aria-label="saveEditButton"]').should('be.disabled');
+    });
+
+    it('should not be able to save when component is loading', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+          cancelButtonAriaLabel="cancelEditButton"
+          startWithEditOpen={true}
+          isLoading={true}
+        />
+      );
+
+      cy.get('input[aria-label="textEditInput"]').should(
+        'have.class',
+        'euiFieldText-isLoading'
+      );
+      cy.get('button[aria-label="saveEditButton"]').should('not.exist');
+      cy.get('button[aria-label="cancelEditButton"]').should('not.exist');
+    });
+  });
+
+  describe('onConfirm Property', () => {
+    it('should return to edit mode when the onConfirm flag is false', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+          startWithEditOpen={true}
+          onConfirm={() => {
+            return false;
+          }}
+        />
+      );
+
+      cy.get('button[aria-label="saveEditButton"]').realClick();
+      cy.get('input[aria-label="textEditInput"]').should('exist');
+      cy.get('button').contains('Hello World!').should('not.exist');
+    });
+
+    it('should return to read mode when the onConfirm flag is true', () => {
+      cy.realMount(
+        <EuiInlineEditText
+          defaultValue="Hello World!"
+          inputAriaLabel="textEditInput"
+          saveButtonAriaLabel="saveEditButton"
+          startWithEditOpen={true}
+          onConfirm={() => {
+            return true;
+          }}
+        />
+      );
+
+      cy.get('button[aria-label="saveEditButton"]').realClick();
+      cy.get('input[aria-label="textEditInput"]').should('not.exist');
+      cy.get('button').contains('Hello World!').should('exist');
+    });
+  });
+});

From 283f8a056455e16807f7f62489276faf6129962b Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Tue, 18 Apr 2023 16:08:58 -0400
Subject: [PATCH 02/16] Added snapshots for read mode and edit mode for the
 Text and Title variations for EuiInlineEdit

---
 .../inline_edit_text.test.tsx.snap            | 1526 ++++++++-
 .../inline_edit_title.test.tsx.snap           | 2916 ++++++++++++++++-
 .../inline_edit/inline_edit_text.test.tsx     |   74 +-
 .../inline_edit/inline_edit_title.test.tsx    |   72 +-
 4 files changed, 4561 insertions(+), 27 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index 345679c9b9a..d79e18eeba8 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -1,6 +1,1530 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditText props renders as text 1`] = `
+exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <div
+                class="euiText eui-textTruncate emotion-euiText-m"
+              >
+                Hello World!
+              </div>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <div
+              class="euiText eui-textTruncate emotion-euiText-m"
+            >
+              Hello World!
+            </div>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <div
+                class="euiText eui-textTruncate emotion-euiText-s"
+              >
+                Hello World!
+              </div>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <div
+              class="euiText eui-textTruncate emotion-euiText-s"
+            >
+              Hello World!
+            </div>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <div
+                class="euiText eui-textTruncate emotion-euiText-xs"
+              >
+                Hello World!
+              </div>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <div
+              class="euiText eui-textTruncate emotion-euiText-xs"
+            >
+              Hello World!
+            </div>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="textInputEditModeTest"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  id="generated-id"
+                  type="text"
+                  value="hello world"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 87e2784f989..9abecb81cba 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -1,6 +1,2916 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditTitle props renders as title 1`] = `
+exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes l is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-l"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-l"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-m"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-m"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-s"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-s"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-xs"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-xs"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xxs is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+      >
+        <div
+          class="euiForm"
+        >
+          <div
+            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          >
+            <div
+              class="euiFlexItem emotion-euiFlexItem-grow-1"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="inlineEditLabel"
+                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                        id="generated-id"
+                        type="text"
+                        value="Hello World!"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="saveEditButton"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="check"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem emotion-euiFlexItem-growZero"
+            >
+              <div
+                class="euiFormRow euiFormRow--fullWidth"
+                id="generated-id-row"
+              >
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    aria-busy="false"
+                    data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  >
+                    <div
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        role="status"
+                      >
+                        Loaded 
+                      </div>
+                      <div
+                        aria-atomic="true"
+                        aria-hidden="true"
+                        aria-live="off"
+                        role="status"
+                      />
+                    </div>
+                    <button
+                      aria-label="Cancel edit"
+                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="cross"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+    >
+      <div
+        class="euiForm"
+      >
+        <div
+          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+        >
+          <div
+            class="euiFlexItem emotion-euiFlexItem-grow-1"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="inlineEditLabel"
+                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                      id="generated-id"
+                      type="text"
+                      value="Hello World!"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="saveEditButton"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="check"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlexItem emotion-euiFlexItem-growZero"
+          >
+            <div
+              class="euiFormRow euiFormRow--fullWidth"
+              id="generated-id-row"
+            >
+              <div
+                class="euiFormRow__fieldWrapper"
+              >
+                <div
+                  aria-busy="false"
+                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                >
+                  <div
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    <div
+                      aria-atomic="true"
+                      aria-live="polite"
+                      role="status"
+                    >
+                      Loaded 
+                    </div>
+                    <div
+                      aria-atomic="true"
+                      aria-hidden="true"
+                      aria-live="off"
+                      role="status"
+                    />
+                  </div>
+                  <button
+                    aria-label="Cancel edit"
+                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class="euiButtonIcon__icon"
+                      color="inherit"
+                      data-euiicon-type="cross"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle props sizes xxxs is rendered in readMode 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="pencil"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <h1
+                class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
+              >
+                Hello World!
+              </h1>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="pencil"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <h1
+              class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
+            >
+              Hello World!
+            </h1>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByTestSubject": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByTestSubject": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByTestSubject": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByTestSubject": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByTestSubject": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByTestSubject": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-label="textInputEditModeTest"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  id="generated-id"
+                  type="text"
+                  value="hello world"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
@@ -19,11 +2929,11 @@ exports[`EuiInlineEditTitle props renders as title 1`] = `
       <span
         class="euiButtonEmpty__text"
       >
-        <h2
+        <h1
           class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
           hello world
-        </h2>
+        </h1>
       </span>
     </span>
   </button>
diff --git a/src/components/inline_edit/inline_edit_text.test.tsx b/src/components/inline_edit/inline_edit_text.test.tsx
index eb47d25e5b8..5c470b98f52 100644
--- a/src/components/inline_edit/inline_edit_text.test.tsx
+++ b/src/components/inline_edit/inline_edit_text.test.tsx
@@ -10,20 +10,70 @@ import React from 'react';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiInlineEditText } from './inline_edit_text';
+import { EuiInlineEditText, EuiInlineEditTextProps } from './inline_edit_text';
+import { TEXT_SIZES } from '../text/text';
+
+describe('EuiInlineEditTitle', () => {
+  test('renders as title in readMode', () => {
+    const { container } = render(
+      <EuiInlineEditText
+        inputAriaLabel={'textInputReadModeTest'}
+        defaultValue="hello world"
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('renders as title in editMode', () => {
+    const { container } = render(
+      <EuiInlineEditText
+        inputAriaLabel={'textInputEditModeTest'}
+        defaultValue="hello world"
+        startWithEditOpen={true}
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-describe('EuiInlineEditText', () => {
   describe('props', () => {
-    test('renders as text', () => {
-      const { container } = render(
-        <EuiInlineEditText
-          inputAriaLabel={'textInput'}
-          defaultValue="hello world"
-          {...requiredProps}
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
+    describe('sizes', () => {
+      // Remove 'relative' from text sizes available for EuiInlineEditText
+      const usedTextSizes = TEXT_SIZES.filter((size) => size !== 'relative');
+
+      usedTextSizes.forEach((size: string) => {
+        test(`${size} is rendered in readMode`, () => {
+          const component = render(
+            <EuiInlineEditText
+              size={size as EuiInlineEditTextProps['size']}
+              defaultValue="Hello World!"
+              inputAriaLabel="inlineEditLabel"
+              saveButtonAriaLabel="saveEditButton"
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      usedTextSizes.forEach((size: string) => {
+        test(`${size} is rendered in editMode`, () => {
+          const component = render(
+            <EuiInlineEditText
+              size={size as EuiInlineEditTextProps['size']}
+              defaultValue="Hello World!"
+              inputAriaLabel="inlineEditLabel"
+              saveButtonAriaLabel="saveEditButton"
+              startWithEditOpen={true}
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
     });
   });
 });
diff --git a/src/components/inline_edit/inline_edit_title.test.tsx b/src/components/inline_edit/inline_edit_title.test.tsx
index 9104347af45..0d085e3bcc5 100644
--- a/src/components/inline_edit/inline_edit_title.test.tsx
+++ b/src/components/inline_edit/inline_edit_title.test.tsx
@@ -11,20 +11,70 @@ import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiInlineEditTitle } from './inline_edit_title';
+import { TITLE_SIZES } from '../title/title';
 
 describe('EuiInlineEditTitle', () => {
+  test('renders as title in readMode', () => {
+    const { container } = render(
+      <EuiInlineEditTitle
+        inputAriaLabel={'textInputReadModeTest'}
+        defaultValue="hello world"
+        heading="h1"
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('renders as title in editMode', () => {
+    const { container } = render(
+      <EuiInlineEditTitle
+        inputAriaLabel={'textInputEditModeTest'}
+        defaultValue="hello world"
+        heading="h1"
+        startWithEditOpen={true}
+        {...requiredProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   describe('props', () => {
-    test('renders as title', () => {
-      const { container } = render(
-        <EuiInlineEditTitle
-          inputAriaLabel={'textInput'}
-          defaultValue="hello world"
-          heading="h2"
-          {...requiredProps}
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
+    describe('sizes', () => {
+      TITLE_SIZES.forEach((size) => {
+        test(`${size} is rendered in readMode`, () => {
+          const component = render(
+            <EuiInlineEditTitle
+              size={size}
+              defaultValue="Hello World!"
+              inputAriaLabel="inlineEditLabel"
+              saveButtonAriaLabel="saveEditButton"
+              heading="h1"
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      TITLE_SIZES.forEach((size) => {
+        test(`${size} is rendered in editMode`, () => {
+          const component = render(
+            <EuiInlineEditTitle
+              size={size}
+              defaultValue="Hello World!"
+              inputAriaLabel="inlineEditLabel"
+              saveButtonAriaLabel="saveEditButton"
+              startWithEditOpen={true}
+              heading="h1"
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
     });
   });
 });

From 1ab44957b512496a50f475352c46219eb61abbb6 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 11:26:05 -0400
Subject: [PATCH 03/16] Use RTL render method for snapshots

---
 .../inline_edit_text.test.tsx.snap            | 1554 ++------
 .../inline_edit_title.test.tsx.snap           | 3120 ++++-------------
 .../inline_edit/inline_edit_text.test.tsx     |    8 +-
 .../inline_edit/inline_edit_title.test.tsx    |    8 +-
 4 files changed, 1022 insertions(+), 3668 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index d79e18eeba8..fd2d719e01e 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -1,1389 +1,507 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <div
-                class="euiText eui-textTruncate emotion-euiText-m"
-              >
-                Hello World!
-              </div>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <div
+          class="euiText eui-textTruncate emotion-euiText-m"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <div
-              class="euiText eui-textTruncate emotion-euiText-m"
-            >
-              Hello World!
-            </div>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </div>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <div
-                class="euiText eui-textTruncate emotion-euiText-s"
-              >
-                Hello World!
-              </div>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <div
+          class="euiText eui-textTruncate emotion-euiText-s"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <div
-              class="euiText eui-textTruncate emotion-euiText-s"
-            >
-              Hello World!
-            </div>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </div>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <div
-                class="euiText eui-textTruncate emotion-euiText-xs"
-              >
-                Hello World!
-              </div>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+<div
+  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <div
+          class="euiText eui-textTruncate emotion-euiText-xs"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <div
-              class="euiText eui-textTruncate emotion-euiText-xs"
-            >
-              Hello World!
-            </div>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </div>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 9abecb81cba..70638bba9bb 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -1,2775 +1,1011 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes l is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-l"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-l"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-l"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
-            </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-m"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-m"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-s"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-s"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-s"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
               >
-                <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
-                </div>
-              </div>
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-xs"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
-    >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-        >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-xs"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormRow__fieldWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
                 <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </body>,
-  "container": <div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-xs"
+        >
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+>
+  <div
+    class="euiForm"
+  >
     <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
     >
       <div
-        class="euiForm"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xxs is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
       <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFlexItem emotion-euiFlexItem-grow-1"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-                  >
-                    <div
-                      class="euiFormControlLayout__childrenWrapper"
-                    >
-                      <input
-                        aria-invalid="false"
-                        aria-label="inlineEditLabel"
-                        class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                        id="generated-id"
-                        type="text"
-                        value="Hello World!"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
-            >
-              <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
-              >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="saveEditButton"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="check"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem emotion-euiFlexItem-growZero"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormRow euiFormRow--fullWidth"
-                id="generated-id-row"
+                class="euiFormControlLayout__childrenWrapper"
               >
-                <div
-                  class="euiFormRow__fieldWrapper"
-                >
-                  <div
-                    aria-busy="false"
-                    data-test-subj="euiSkeletonLoadingAriaWrapper"
-                  >
-                    <div
-                      class="emotion-euiScreenReaderOnly"
-                    >
-                      <div
-                        aria-atomic="true"
-                        aria-live="polite"
-                        role="status"
-                      >
-                        Loaded 
-                      </div>
-                      <div
-                        aria-atomic="true"
-                        aria-hidden="true"
-                        aria-live="off"
-                        role="status"
-                      />
-                    </div>
-                    <button
-                      aria-label="Cancel edit"
-                      class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="euiButtonIcon__icon"
-                        color="inherit"
-                        data-euiicon-type="cross"
-                      />
-                    </button>
-                  </div>
-                </div>
+                <input
+                  aria-invalid="false"
+                  aria-label="inlineEditLabel"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
-    >
       <div
-        class="euiForm"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
         >
           <div
-            class="euiFlexItem emotion-euiFlexItem-grow-1"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="inlineEditLabel"
-                      class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                      id="generated-id"
-                      type="text"
-                      value="Hello World!"
-                    />
-                  </div>
+                  Loaded 
                 </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
-          >
-            <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
-            >
-              <div
-                class="euiFormRow__fieldWrapper"
-              >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
-                >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="saveEditButton"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="check"
-                    />
-                  </button>
-                </div>
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="saveEditButton"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
           <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow euiFormRow--fullWidth"
-              id="generated-id-row"
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="emotion-euiScreenReaderOnly"
               >
                 <div
-                  aria-busy="false"
-                  data-test-subj="euiSkeletonLoadingAriaWrapper"
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
                 >
-                  <div
-                    class="emotion-euiScreenReaderOnly"
-                  >
-                    <div
-                      aria-atomic="true"
-                      aria-live="polite"
-                      role="status"
-                    >
-                      Loaded 
-                    </div>
-                    <div
-                      aria-atomic="true"
-                      aria-hidden="true"
-                      aria-live="off"
-                      role="status"
-                    />
-                  </div>
-                  <button
-                    aria-label="Cancel edit"
-                    class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      class="euiButtonIcon__icon"
-                      color="inherit"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                  Loaded 
                 </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
               </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
 
 exports[`EuiInlineEditTitle props sizes xxxs is rendered in readMode 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
-      >
-        <button
-          class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="pencil"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              <h1
-                class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
-              >
-                Hello World!
-              </h1>
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+<div
+  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
     >
-      <button
-        class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-        type="button"
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
       >
-        <span
-          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
         >
-          <span
-            class="euiButtonContent__icon"
-            color="inherit"
-            data-euiicon-type="pencil"
-          />
-          <span
-            class="euiButtonEmpty__text"
-          >
-            <h1
-              class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
-            >
-              Hello World!
-            </h1>
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByTestSubject": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByTestSubject": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByTestSubject": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByTestSubject": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByTestSubject": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByTestSubject": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
 `;
 
 exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
diff --git a/src/components/inline_edit/inline_edit_text.test.tsx b/src/components/inline_edit/inline_edit_text.test.tsx
index 5c470b98f52..1e7c322c5bd 100644
--- a/src/components/inline_edit/inline_edit_text.test.tsx
+++ b/src/components/inline_edit/inline_edit_text.test.tsx
@@ -46,7 +46,7 @@ describe('EuiInlineEditTitle', () => {
 
       usedTextSizes.forEach((size: string) => {
         test(`${size} is rendered in readMode`, () => {
-          const component = render(
+          const { container } = render(
             <EuiInlineEditText
               size={size as EuiInlineEditTextProps['size']}
               defaultValue="Hello World!"
@@ -55,13 +55,13 @@ describe('EuiInlineEditTitle', () => {
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
 
       usedTextSizes.forEach((size: string) => {
         test(`${size} is rendered in editMode`, () => {
-          const component = render(
+          const { container } = render(
             <EuiInlineEditText
               size={size as EuiInlineEditTextProps['size']}
               defaultValue="Hello World!"
@@ -71,7 +71,7 @@ describe('EuiInlineEditTitle', () => {
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
diff --git a/src/components/inline_edit/inline_edit_title.test.tsx b/src/components/inline_edit/inline_edit_title.test.tsx
index 0d085e3bcc5..c430fd86576 100644
--- a/src/components/inline_edit/inline_edit_title.test.tsx
+++ b/src/components/inline_edit/inline_edit_title.test.tsx
@@ -45,7 +45,7 @@ describe('EuiInlineEditTitle', () => {
     describe('sizes', () => {
       TITLE_SIZES.forEach((size) => {
         test(`${size} is rendered in readMode`, () => {
-          const component = render(
+          const { container } = render(
             <EuiInlineEditTitle
               size={size}
               defaultValue="Hello World!"
@@ -55,13 +55,13 @@ describe('EuiInlineEditTitle', () => {
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
 
       TITLE_SIZES.forEach((size) => {
         test(`${size} is rendered in editMode`, () => {
-          const component = render(
+          const { container } = render(
             <EuiInlineEditTitle
               size={size}
               defaultValue="Hello World!"
@@ -72,7 +72,7 @@ describe('EuiInlineEditTitle', () => {
             />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });

From c405805e3a13fef7a162ba719fb5980ae2cc722e Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 16:07:54 -0400
Subject: [PATCH 04/16] [InlineEditForm] - Add data-test-subj to
 EuiInlineEditForm buttons and inputs - Removed opinionated save logic that
 prevented users from being able to save empty strings in editMode

---
 .../inline_edit/inline_edit_form.tsx          | 115 ++++++++++--------
 1 file changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index f256b1dfa7e..e9600bcd291 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactNode, FunctionComponent, useState } from 'react';
+import React, {
+  ReactNode,
+  FunctionComponent,
+  useState,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
@@ -27,53 +32,54 @@ import { useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 
 // Props shared between the internal form component as well as consumer-facing components
-export type EuiInlineEditCommonProps = CommonProps & {
-  defaultValue: string;
-  /**
-   * Allow users to pass in a function that is called when the confirm button is clicked
-   * The function should return a boolean flag that will determine if the value will be saved.
-   * When the flag is true, the value will be saved. When the flag is false, the user will be
-   * returned to editMode.
-   */
-  onConfirm?: () => boolean;
-  /**
-   * Form label that appears above the form control
-   * This is required for accessibility because there is no visual label on the input
-   */
-  inputAriaLabel: string;
-  /**
-   * Aria-label for save button in editMode
-   */
-  saveButtonAriaLabel?: string;
-  /**
-   * Aria-label for cancel button in editMode
-   */
-  cancelButtonAriaLabel?: string;
-  /**
-   * Start in editMode
-   */
-  startWithEditOpen?: boolean;
-  /**
-   * Props that will be applied directly to the EuiEmptyButton displayed in readMode
-   */
-  readModeProps?: Omit<EuiButtonEmptyPropsForButton, 'onClick'>;
-  /**
-   * Props that will be applied directly to the `EuiFormRow` and `EuiFieldText` input displayed in editMode
-   */
-  editModeProps?: {
-    formRowProps?: Partial<EuiFormRowProps>;
-    inputProps?: Partial<EuiFieldTextProps>;
-  };
-  /**
-   * Loading state when changes are saved in editMode
-   */
-  isLoading?: boolean;
+export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    defaultValue: string;
+    /**
+     * Allow users to pass in a function that is called when the confirm button is clicked
+     * The function should return a boolean flag that will determine if the value will be saved.
+     * When the flag is true, the value will be saved. When the flag is false, the user will be
+     * returned to editMode.
+     */
+    onConfirm?: (editModeValue: string) => boolean;
+    /**
+     * Form label that appears above the form control
+     * This is required for accessibility because there is no visual label on the input
+     */
+    inputAriaLabel: string;
+    /**
+     * Aria-label for save button in editMode
+     */
+    saveButtonAriaLabel?: string;
+    /**
+     * Aria-label for cancel button in editMode
+     */
+    cancelButtonAriaLabel?: string;
+    /**
+     * Start in editMode
+     */
+    startWithEditOpen?: boolean;
+    /**
+     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+     */
+    readModeProps?: Omit<EuiButtonEmptyPropsForButton, 'onClick'>;
+    /**
+     * Props that will be applied directly to the `EuiFormRow` and `EuiFieldText` input displayed in editMode
+     */
+    editModeProps?: {
+      formRowProps?: Partial<EuiFormRowProps>;
+      inputProps?: Partial<EuiFieldTextProps>;
+    };
+    /**
+     * Loading state when changes are saved in editMode
+     */
+    isLoading?: boolean;
 
-  /**
-   * Validation for the form control used to edit text in editMode
-   */
-  isInvalid?: boolean;
-};
+    /**
+     * Validation for the form control used to edit text in editMode
+     */
+    isInvalid?: boolean;
+  };
 
 // Internal-only props, passed by the consumer-facing components
 export type EuiInlineEditFormProps = EuiInlineEditCommonProps & {
@@ -147,15 +153,12 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   };
 
   const saveInlineEditValue = () => {
-    if (editModeValue && onConfirm && !onConfirm()) {
-      // If there is text, an onConfirm method is present, and it has returned false, cancel the action
+    if (onConfirm && !onConfirm(editModeValue)) {
+      // If an onConfirm method is present, and it has returned false, cancel the action
       return;
-    } else if (editModeValue) {
+    } else {
       setReadModeValue(editModeValue);
       setIsEditing(!isEditing);
-    } else {
-      // If there's no text, cancel the action, reset the input text, and return to readMode
-      cancelInlineEdit();
     }
   };
 
@@ -179,6 +182,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               compressed={sizes.compressed}
               isInvalid={isInvalid}
               isLoading={isLoading}
+              data-test-subj="euiInlineEditModeInput"
               {...editModeProps?.inputProps}
             />
           </EuiFormRow>
@@ -191,6 +195,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               height={loadingSkeletonSize}
               width={loadingSkeletonSize}
               borderRadius="m"
+              data-test-subj="euiInlineEditModeSaveLoading"
             >
               <EuiButtonIcon
                 iconType="check"
@@ -201,6 +206,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
                 size={sizes.buttonSize}
                 iconSize={sizes.iconSize}
                 disabled={isInvalid}
+                data-test-subj="euiInlineEditModeSaveButton"
               />
             </EuiSkeletonRectangle>
           </EuiFormRow>
@@ -213,6 +219,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               height={loadingSkeletonSize}
               width={loadingSkeletonSize}
               borderRadius="m"
+              data-test-subj="euiInlineEditModeCancelLoading"
             >
               <EuiButtonIcon
                 iconType="cross"
@@ -224,6 +231,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
                 display="base"
                 size={sizes.buttonSize}
                 iconSize={sizes.iconSize}
+                data-test-subj="euiInlineEditModeCancelButton"
               />
             </EuiSkeletonRectangle>
           </EuiFormRow>
@@ -244,6 +252,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       onClick={() => {
         setIsEditing(!isEditing);
       }}
+      data-test-subj="euiInlineReadModeButton"
       {...readModeProps}
     >
       {children(readModeValue)}

From 9208180640be60e5dec9882c6b70e240a8958263 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 16:11:27 -0400
Subject: [PATCH 05/16] Created test cases for EuiInlineEditForm. These test
 cases handle the functional and prop testing for both the Text and Title
 variations of the component

---
 .../inline_edit_form.test.tsx.snap            | 904 ++++++++++++++++++
 .../inline_edit/inline_edit_form.test.tsx     | 284 ++++++
 2 files changed, 1188 insertions(+)
 create mode 100644 src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
 create mode 100644 src/components/inline_edit/inline_edit_form.test.tsx

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
new file mode 100644
index 00000000000..6edc4f713cc
--- /dev/null
+++ b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -0,0 +1,904 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiInlineEditForm Edit Mode disables the save button when input is invalid  1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-invalid="true"
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    color="danger"
+                    data-euiicon-type="alert"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-disabled"
+                data-test-subj="euiInlineEditModeSaveButton"
+                disabled=""
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Edit Mode renders 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Edit Mode renders EuiSkeletonRectangles in place of editMode buttons when loading 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFormControlLayout--1icons euiFieldText--fullWidth euiFieldText-isLoading"
+                  data-test-subj="euiInlineEditModeInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    aria-label="Loading"
+                    class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
+                    role="progressbar"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="true"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                aria-label="Loading "
+                class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+                data-test-subj="euiInlineEditModeSaveLoading"
+                id="generated-id"
+                role="progressbar"
+                style="inline-size: 40px; block-size: 40px;"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="true"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                aria-label="Loading "
+                class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+                data-test-subj="euiInlineEditModeCancelLoading"
+                id="generated-id"
+                role="progressbar"
+                style="inline-size: 40px; block-size: 40px;"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Edit Mode renders editModeProps.formRowProps 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          data-test-subj="customErrorText"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Edit Mode renders editModeProps.inputProps 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+            >
+              <label
+                class="euiFormLabel euiFormControlLayout__prepend"
+                for="generated-id"
+              >
+                Prepend Example
+              </label>
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                  data-test-subj="customInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Save edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Cancel edit"
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Edit Mode renders save button and cancel button aria-labels 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <div
+    class="euiForm"
+  >
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  aria-label="Edit inline"
+                  class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
+                  id="generated-id"
+                  type="text"
+                  value="Hello World!"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiInlineEdit testClass1 testClass2 emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Yes! Let's save."
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="check"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <div
+          class="euiFormRow euiFormRow--fullWidth"
+          id="generated-id-row"
+        >
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              aria-busy="false"
+              data-test-subj="euiSkeletonLoadingAriaWrapper"
+            >
+              <div
+                class="emotion-euiScreenReaderOnly"
+              >
+                <div
+                  aria-atomic="true"
+                  aria-live="polite"
+                  role="status"
+                >
+                  Loaded 
+                </div>
+                <div
+                  aria-atomic="true"
+                  aria-hidden="true"
+                  aria-live="off"
+                  role="status"
+                />
+              </div>
+              <button
+                aria-label="Uh no. Do not save."
+                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiInlineEditForm Read Mode renders 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        Hello World!
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`EuiInlineEditForm Read Mode renders readModeProps onto the button 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-9t7nyf-empty-primary"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        Hello World!
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`EuiInlineEditForm Read Mode renders small size 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        Hello World!
+      </span>
+    </span>
+  </button>
+</div>
+`;
diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
new file mode 100644
index 00000000000..ec2f9ac4a4e
--- /dev/null
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -0,0 +1,284 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '../../test/rtl';
+import { requiredProps } from '../../test/required_props';
+import { fireEvent } from '@testing-library/dom';
+
+import {
+  EuiInlineEditForm,
+  EuiInlineEditFormProps,
+  SMALL_SIZE_FORM,
+  MEDIUM_SIZE_FORM,
+} from './inline_edit_form';
+
+describe('EuiInlineEditForm', () => {
+  const commonInlineEditFormProps: EuiInlineEditFormProps = {
+    ...requiredProps,
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit inline',
+    sizes: MEDIUM_SIZE_FORM,
+    isLoading: false, // TODO: Remove once EUI loading components are fixed
+    children: (readModeValue) => readModeValue,
+  };
+
+  describe('Read Mode', () => {
+    it('renders', () => {
+      const { container } = render(
+        <EuiInlineEditForm {...commonInlineEditFormProps} />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('renders readModeProps onto the button', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          readModeProps={{
+            color: 'primary',
+            iconSide: 'left',
+          }}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+    });
+
+    it('renders small size', () => {
+      const { container } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          sizes={SMALL_SIZE_FORM}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
+  describe('Edit Mode', () => {
+    it('renders', () => {
+      const { container } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('renders editModeProps.inputProps', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          editModeProps={{
+            inputProps: {
+              prepend: 'Prepend Example',
+              'data-test-subj': 'customInput',
+            },
+          }}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(getByTestSubject('customInput')).toBeTruthy();
+    });
+
+    it('renders editModeProps.formRowProps', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          editModeProps={{
+            formRowProps: {
+              error: ['This is an error'],
+              'data-test-subj': 'customErrorText',
+            },
+          }}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(getByTestSubject('customErrorText')).toBeTruthy();
+    });
+
+    it('renders save button and cancel button aria-labels', () => {
+      const { container, getByLabelText } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          saveButtonAriaLabel="Yes! Let's save."
+          cancelButtonAriaLabel="Uh no. Do not save."
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+      expect(getByLabelText("Yes! Let's save.")).toBeTruthy();
+      expect(getByLabelText('Uh no. Do not save.')).toBeTruthy();
+    });
+
+    it('renders EuiSkeletonRectangles in place of editMode buttons when loading', () => {
+      const { container, getByTestSubject, queryByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          isLoading={true}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+
+      expect(getByTestSubject('euiInlineEditModeSaveLoading')).toBeTruthy();
+      expect(getByTestSubject('euiInlineEditModeCancelLoading')).toBeTruthy();
+
+      expect(queryByTestSubject('euiInlineEditModeSaveButton')).toBeFalsy();
+      expect(queryByTestSubject('euiInlineEditModeCancelButton')).toBeFalsy();
+    });
+
+    it('disables the save button when input is invalid ', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          isInvalid={true}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+
+      expect(
+        getByTestSubject('euiInlineEditModeInput').hasAttribute('aria-invalid')
+      ).toBeTruthy();
+
+      expect(getByTestSubject('euiInlineEditModeSaveButton')).toBeDisabled();
+      expect(getByTestSubject('euiInlineEditModeCancelButton')).toBeTruthy();
+    });
+  });
+
+  describe('Toggling between readMode and editMode', () => {
+    it('clicking on the readModeButton takes us to editMode', () => {
+      const { getByTestSubject, queryByTestSubject } = render(
+        <EuiInlineEditForm {...commonInlineEditFormProps} />
+      );
+
+      fireEvent.click(getByTestSubject('euiInlineReadModeButton'));
+      expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+      expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
+    });
+
+    it('saves text and returns to readMode', () => {
+      const { getByTestSubject, getByText } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+        />
+      );
+
+      fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+        target: { value: 'New message!' },
+      });
+      expect(
+        getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+      ).toEqual('New message!');
+      fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+      expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+      expect(getByText('New message!')).toBeTruthy();
+    });
+
+    it('cancels text and returns to readMode', () => {
+      const { getByTestSubject, getByText } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+        />
+      );
+
+      fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+        target: { value: 'New message!' },
+      });
+      expect(
+        getByTestSubject('euiInlineEditModeInput').getAttribute('value')
+      ).toEqual('New message!');
+      fireEvent.click(getByTestSubject('euiInlineEditModeCancelButton'));
+
+      expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+      expect(getByText('Hello World!')).toBeTruthy();
+    });
+
+    describe('onConfirm behavior on save', () => {
+      it('returns to readMode with updated text when onConfirm returns true', () => {
+        const { getByTestSubject, getByText } = render(
+          <EuiInlineEditForm
+            {...commonInlineEditFormProps}
+            startWithEditOpen={true}
+            onConfirm={() => true}
+          />
+        );
+
+        fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+          target: { value: 'New message!' },
+        });
+        fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+        expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+        expect(getByText('New message!')).toBeTruthy();
+      });
+
+      it('stays in editMode when onConfirm returns false', () => {
+        const { getByTestSubject, queryByTestSubject } = render(
+          <EuiInlineEditForm
+            {...commonInlineEditFormProps}
+            startWithEditOpen={true}
+            onConfirm={() => false}
+          />
+        );
+
+        fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+          target: { value: 'New message!' },
+        });
+        fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+        expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
+        expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+      });
+
+      it('sends the editMode text to the onConfirm callback', () => {
+        const { getByText, getByTestSubject } = render(
+          <EuiInlineEditForm
+            {...commonInlineEditFormProps}
+            startWithEditOpen={true}
+            onConfirm={(editModeValue) => {
+              return editModeValue === '' ? false : true;
+            }}
+          />
+        );
+
+        fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+          target: { value: '' },
+        });
+        fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+        expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+
+        fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+          target: { value: 'hey there' },
+        });
+        fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+        expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+        expect(getByText('hey there')).toBeTruthy();
+      });
+    });
+  });
+});

From 34a11efe224787dfbd2b8b830bd82a96d8124996 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 16:12:12 -0400
Subject: [PATCH 06/16] Updated InlineEdit Text and Title test suites to only
 include basic render tests and snapshots of their sizing in both readMode and
 editMode

---
 .../inline_edit_text.test.tsx.snap            |  68 ++++---
 .../inline_edit_title.test.tsx.snap           | 190 ++++++++++--------
 .../inline_edit/inline_edit_text.test.tsx     |  87 ++++----
 .../inline_edit/inline_edit_title.test.tsx    |  88 ++++----
 4 files changed, 234 insertions(+), 199 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index fd2d719e01e..cb2f72a223f 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in m in editMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <div
     class="euiForm"
@@ -28,8 +28,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit text inline"
                   class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -40,7 +41,7 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
+        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -71,8 +72,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -120,6 +122,7 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -138,12 +141,13 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in m in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-m-m"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -168,9 +172,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in s in editMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
 >
   <div
     class="euiForm"
@@ -196,8 +200,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit text inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -208,7 +213,7 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
+        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -239,8 +244,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -288,6 +294,7 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -306,12 +313,13 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in s in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-s-s"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -336,9 +344,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in xs in editMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
 >
   <div
     class="euiForm"
@@ -364,8 +372,9 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit text inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -376,7 +385,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
+        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -407,8 +416,9 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -456,6 +466,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -474,12 +485,13 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
+exports[`EuiInlineEditText Text Sizes renders in xs in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText emotion-euiInlineEditText-xs-xs"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -504,7 +516,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
+exports[`EuiInlineEditText renders in editMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
@@ -532,11 +544,12 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="textInputEditModeTest"
+                  aria-label="Edit text inline"
                   class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
-                  value="hello world"
+                  value="Hello World!"
                 />
               </div>
             </div>
@@ -577,6 +590,7 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               <button
                 aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -624,6 +638,7 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -642,12 +657,13 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
+exports[`EuiInlineEditText renders in readMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -664,7 +680,7 @@ exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
         <div
           class="euiText eui-textTruncate emotion-euiText-m"
         >
-          hello world
+          Hello World!
         </div>
       </span>
     </span>
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index 70638bba9bb..e59e816407e 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -1,8 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-l"
+        >
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 2`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l"
 >
   <div
     class="euiForm"
@@ -28,8 +59,9 @@ exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -40,7 +72,7 @@ exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -71,8 +103,9 @@ exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -120,6 +153,7 @@ exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -138,12 +172,13 @@ exports[`EuiInlineEditTitle props sizes l is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes l is rendered in readMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-l-l"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -158,7 +193,7 @@ exports[`EuiInlineEditTitle props sizes l is rendered in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-l"
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
           Hello World!
         </h1>
@@ -168,9 +203,9 @@ exports[`EuiInlineEditTitle props sizes l is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 2`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <div
     class="euiForm"
@@ -196,8 +231,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -208,7 +244,7 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -239,8 +275,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -288,6 +325,7 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -306,12 +344,13 @@ exports[`EuiInlineEditTitle props sizes m is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-m-m"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -326,7 +365,7 @@ exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-m"
+          class="euiTitle eui-textTruncate emotion-euiTitle-s"
         >
           Hello World!
         </h1>
@@ -336,9 +375,9 @@ exports[`EuiInlineEditTitle props sizes m is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 2`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s"
 >
   <div
     class="euiForm"
@@ -364,8 +403,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -376,7 +416,7 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -407,8 +447,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -456,6 +497,7 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -474,12 +516,13 @@ exports[`EuiInlineEditTitle props sizes s is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-s-s"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -494,7 +537,7 @@ exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-s"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xs"
         >
           Hello World!
         </h1>
@@ -504,9 +547,9 @@ exports[`EuiInlineEditTitle props sizes s is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 2`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs"
 >
   <div
     class="euiForm"
@@ -532,8 +575,9 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -544,7 +588,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -575,8 +619,9 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -624,6 +669,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -642,12 +688,13 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xs-xs"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -662,7 +709,7 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xs"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
         >
           Hello World!
         </h1>
@@ -672,9 +719,9 @@ exports[`EuiInlineEditTitle props sizes xs is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 2`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs"
 >
   <div
     class="euiForm"
@@ -700,8 +747,9 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -712,7 +760,7 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -743,8 +791,9 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -792,6 +841,7 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -810,12 +860,13 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xxs is rendered in readMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxs-xxs"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -830,7 +881,7 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
         >
           Hello World!
         </h1>
@@ -840,9 +891,9 @@ exports[`EuiInlineEditTitle props sizes xxs is rendered in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
+exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 2`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs"
 >
   <div
     class="euiForm"
@@ -868,8 +919,9 @@ exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="inlineEditLabel"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
                   value="Hello World!"
@@ -880,7 +932,7 @@ exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
         </div>
       </div>
       <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
+        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
       >
         <div
           class="euiFormRow euiFormRow--fullWidth"
@@ -911,8 +963,9 @@ exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
                 />
               </div>
               <button
-                aria-label="saveEditButton"
+                aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -960,6 +1013,7 @@ exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -978,37 +1032,7 @@ exports[`EuiInlineEditTitle props sizes xxxs is rendered in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle props sizes xxxs is rendered in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle emotion-euiInlineEditTitle-xxxs-xxxs"
->
-  <button
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
-    type="button"
-  >
-    <span
-      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-    >
-      <span
-        class="euiButtonContent__icon"
-        color="inherit"
-        data-euiicon-type="pencil"
-      />
-      <span
-        class="euiButtonEmpty__text"
-      >
-        <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
-        >
-          Hello World!
-        </h1>
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
+exports[`EuiInlineEditTitle renders in editMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
@@ -1036,11 +1060,12 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               >
                 <input
                   aria-invalid="false"
-                  aria-label="textInputEditModeTest"
+                  aria-label="Edit title inline"
                   class="euiFieldText euiFieldText--fullWidth"
+                  data-test-subj="euiInlineEditModeInput"
                   id="generated-id"
                   type="text"
-                  value="hello world"
+                  value="Hello World!"
                 />
               </div>
             </div>
@@ -1081,6 +1106,7 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               <button
                 aria-label="Save edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
+                data-test-subj="euiInlineEditModeSaveButton"
                 type="button"
               >
                 <span
@@ -1128,6 +1154,7 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
               <button
                 aria-label="Cancel edit"
                 class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
+                data-test-subj="euiInlineEditModeCancelButton"
                 type="button"
               >
                 <span
@@ -1146,12 +1173,13 @@ exports[`EuiInlineEditTitle renders as title in editMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
+exports[`EuiInlineEditTitle renders in readMode 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    data-test-subj="euiInlineReadModeButton"
     type="button"
   >
     <span
@@ -1168,7 +1196,7 @@ exports[`EuiInlineEditTitle renders as title in readMode 1`] = `
         <h1
           class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
-          hello world
+          Hello World!
         </h1>
       </span>
     </span>
diff --git a/src/components/inline_edit/inline_edit_text.test.tsx b/src/components/inline_edit/inline_edit_text.test.tsx
index 1e7c322c5bd..0f395854a3a 100644
--- a/src/components/inline_edit/inline_edit_text.test.tsx
+++ b/src/components/inline_edit/inline_edit_text.test.tsx
@@ -13,66 +13,63 @@ import { requiredProps } from '../../test/required_props';
 import { EuiInlineEditText, EuiInlineEditTextProps } from './inline_edit_text';
 import { TEXT_SIZES } from '../text/text';
 
-describe('EuiInlineEditTitle', () => {
-  test('renders as title in readMode', () => {
-    const { container } = render(
-      <EuiInlineEditText
-        inputAriaLabel={'textInputReadModeTest'}
-        defaultValue="hello world"
-        {...requiredProps}
-      />
+describe('EuiInlineEditText', () => {
+  const inlineEditTextProps: EuiInlineEditTextProps = {
+    ...requiredProps,
+    inputAriaLabel: 'Edit text inline',
+    defaultValue: 'Hello World!',
+  };
+
+  it('renders in readMode', () => {
+    const { container, getByTestSubject, getByText } = render(
+      <EuiInlineEditText {...inlineEditTextProps} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
+
+    expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+    expect(getByText('Hello World!')).toBeTruthy();
   });
 
-  test('renders as title in editMode', () => {
-    const { container } = render(
-      <EuiInlineEditText
-        inputAriaLabel={'textInputEditModeTest'}
-        defaultValue="hello world"
-        startWithEditOpen={true}
-        {...requiredProps}
-      />
+  it('renders in editMode', () => {
+    const { container, getByTestSubject, queryByTestSubject } = render(
+      <EuiInlineEditText {...inlineEditTextProps} startWithEditOpen={true} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
+
+    expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+    expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
   });
 
-  describe('props', () => {
-    describe('sizes', () => {
-      // Remove 'relative' from text sizes available for EuiInlineEditText
-      const usedTextSizes = TEXT_SIZES.filter((size) => size !== 'relative');
+  describe('Text Sizes', () => {
+    // Remove 'relative' from text sizes available for EuiInlineEditText
+    const availableTextSizes = TEXT_SIZES.filter((size) => size !== 'relative');
 
-      usedTextSizes.forEach((size: string) => {
-        test(`${size} is rendered in readMode`, () => {
-          const { container } = render(
-            <EuiInlineEditText
-              size={size as EuiInlineEditTextProps['size']}
-              defaultValue="Hello World!"
-              inputAriaLabel="inlineEditLabel"
-              saveButtonAriaLabel="saveEditButton"
-            />
-          );
+    availableTextSizes.forEach((size: string) => {
+      test(`renders in ${size} in readMode`, () => {
+        const { container } = render(
+          <EuiInlineEditText
+            {...inlineEditTextProps}
+            size={size as EuiInlineEditTextProps['size']}
+          />
+        );
 
-          expect(container.firstChild).toMatchSnapshot();
-        });
+        expect(container.firstChild).toMatchSnapshot();
       });
+    });
 
-      usedTextSizes.forEach((size: string) => {
-        test(`${size} is rendered in editMode`, () => {
-          const { container } = render(
-            <EuiInlineEditText
-              size={size as EuiInlineEditTextProps['size']}
-              defaultValue="Hello World!"
-              inputAriaLabel="inlineEditLabel"
-              saveButtonAriaLabel="saveEditButton"
-              startWithEditOpen={true}
-            />
-          );
+    availableTextSizes.forEach((size: string) => {
+      test(`renders in ${size} in editMode`, () => {
+        const { container } = render(
+          <EuiInlineEditText
+            {...inlineEditTextProps}
+            size={size as EuiInlineEditTextProps['size']}
+            startWithEditOpen={true}
+          />
+        );
 
-          expect(container.firstChild).toMatchSnapshot();
-        });
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });
diff --git a/src/components/inline_edit/inline_edit_title.test.tsx b/src/components/inline_edit/inline_edit_title.test.tsx
index c430fd86576..0b971d5b518 100644
--- a/src/components/inline_edit/inline_edit_title.test.tsx
+++ b/src/components/inline_edit/inline_edit_title.test.tsx
@@ -10,70 +10,64 @@ import React from 'react';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiInlineEditTitle } from './inline_edit_title';
+import {
+  EuiInlineEditTitle,
+  EuiInlineEditTitleProps,
+} from './inline_edit_title';
 import { TITLE_SIZES } from '../title/title';
 
 describe('EuiInlineEditTitle', () => {
-  test('renders as title in readMode', () => {
-    const { container } = render(
-      <EuiInlineEditTitle
-        inputAriaLabel={'textInputReadModeTest'}
-        defaultValue="hello world"
-        heading="h1"
-        {...requiredProps}
-      />
+  const inlineEditTitleProps: EuiInlineEditTitleProps = {
+    ...requiredProps,
+    inputAriaLabel: 'Edit title inline',
+    defaultValue: 'Hello World!',
+    heading: 'h1',
+  };
+
+  it('renders in readMode', () => {
+    const { container, getByTestSubject, getByText } = render(
+      <EuiInlineEditTitle {...inlineEditTitleProps} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
+
+    expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
+    expect(getByText('Hello World!')).toBeTruthy();
   });
 
-  test('renders as title in editMode', () => {
-    const { container } = render(
-      <EuiInlineEditTitle
-        inputAriaLabel={'textInputEditModeTest'}
-        defaultValue="hello world"
-        heading="h1"
-        startWithEditOpen={true}
-        {...requiredProps}
-      />
+  it('renders in editMode', () => {
+    const { container, getByTestSubject, queryByTestSubject } = render(
+      <EuiInlineEditTitle {...inlineEditTitleProps} startWithEditOpen={true} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
+
+    expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+    expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
   });
 
-  describe('props', () => {
-    describe('sizes', () => {
-      TITLE_SIZES.forEach((size) => {
-        test(`${size} is rendered in readMode`, () => {
-          const { container } = render(
-            <EuiInlineEditTitle
-              size={size}
-              defaultValue="Hello World!"
-              inputAriaLabel="inlineEditLabel"
-              saveButtonAriaLabel="saveEditButton"
-              heading="h1"
-            />
-          );
+  describe('Title Sizes', () => {
+    TITLE_SIZES.forEach((size) => {
+      it(`renders in size ${size} in readMode`, () => {
+        const { container } = render(
+          <EuiInlineEditTitle {...inlineEditTitleProps} size={size} />
+        );
 
-          expect(container.firstChild).toMatchSnapshot();
-        });
+        expect(container.firstChild).toMatchSnapshot();
       });
+    });
 
-      TITLE_SIZES.forEach((size) => {
-        test(`${size} is rendered in editMode`, () => {
-          const { container } = render(
-            <EuiInlineEditTitle
-              size={size}
-              defaultValue="Hello World!"
-              inputAriaLabel="inlineEditLabel"
-              saveButtonAriaLabel="saveEditButton"
-              startWithEditOpen={true}
-              heading="h1"
-            />
-          );
+    TITLE_SIZES.forEach((size) => {
+      it(`renders in size ${size} in readMode`, () => {
+        const { container } = render(
+          <EuiInlineEditTitle
+            {...inlineEditTitleProps}
+            startWithEditOpen={true}
+            size={size}
+          />
+        );
 
-          expect(container.firstChild).toMatchSnapshot();
-        });
+        expect(container.firstChild).toMatchSnapshot();
       });
     });
   });

From f08cd5bbf08626347d0dba64395e4238536cc9ab Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 16:19:04 -0400
Subject: [PATCH 07/16] Removed Cypress test in favor of testing EuiInlineEdit
 with Jest

---
 .../inline_edit/inline_edit.spec.tsx          | 148 ------------------
 1 file changed, 148 deletions(-)
 delete mode 100644 src/components/inline_edit/inline_edit.spec.tsx

diff --git a/src/components/inline_edit/inline_edit.spec.tsx b/src/components/inline_edit/inline_edit.spec.tsx
deleted file mode 100644
index c24dad137f5..00000000000
--- a/src/components/inline_edit/inline_edit.spec.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/// <reference types="../../../cypress/support"/>
-
-import React from 'react';
-import { EuiInlineEditText } from './inline_edit_text';
-
-describe('EuiInlineEditText', () => {
-  describe('Editing text', () => {
-    it('saves text edits', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-        />
-      );
-
-      cy.get('button').contains('Hello World!').realClick();
-      cy.get('input[aria-label="textEditInput"]').clear().type('New message');
-      cy.get('button[aria-label="saveEditButton"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('button').contains('New message'));
-        });
-    });
-
-    it('cancels text edits', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          cancelButtonAriaLabel="cancelEditButton"
-        />
-      );
-
-      cy.get('button').contains('Hello World!').realClick();
-      cy.get('input[aria-label="textEditInput"]').clear().type('New message');
-      cy.get('button[aria-label="cancelEditButton"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('button').contains('Hello World!'));
-        });
-    });
-  });
-
-  describe('Validation and Loading', () => {
-    it('should not save empty text', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-        />
-      );
-
-      cy.get('button').contains('Hello World!').realClick();
-      cy.get('input[aria-label="textEditInput"]').clear();
-      cy.get('button[aria-label="saveEditButton"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('button').contains('Hello World!'));
-        });
-    });
-
-    it('should obey user generated validation rules', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-          startWithEditOpen={true}
-          isInvalid={true}
-        />
-      );
-
-      cy.get('input[aria-label="textEditInput"]').should(
-        'have.attr',
-        'aria-invalid'
-      );
-      cy.get('button[aria-label="saveEditButton"]').should('be.disabled');
-    });
-
-    it('should not be able to save when component is loading', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-          cancelButtonAriaLabel="cancelEditButton"
-          startWithEditOpen={true}
-          isLoading={true}
-        />
-      );
-
-      cy.get('input[aria-label="textEditInput"]').should(
-        'have.class',
-        'euiFieldText-isLoading'
-      );
-      cy.get('button[aria-label="saveEditButton"]').should('not.exist');
-      cy.get('button[aria-label="cancelEditButton"]').should('not.exist');
-    });
-  });
-
-  describe('onConfirm Property', () => {
-    it('should return to edit mode when the onConfirm flag is false', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-          startWithEditOpen={true}
-          onConfirm={() => {
-            return false;
-          }}
-        />
-      );
-
-      cy.get('button[aria-label="saveEditButton"]').realClick();
-      cy.get('input[aria-label="textEditInput"]').should('exist');
-      cy.get('button').contains('Hello World!').should('not.exist');
-    });
-
-    it('should return to read mode when the onConfirm flag is true', () => {
-      cy.realMount(
-        <EuiInlineEditText
-          defaultValue="Hello World!"
-          inputAriaLabel="textEditInput"
-          saveButtonAriaLabel="saveEditButton"
-          startWithEditOpen={true}
-          onConfirm={() => {
-            return true;
-          }}
-        />
-      );
-
-      cy.get('button[aria-label="saveEditButton"]').realClick();
-      cy.get('input[aria-label="textEditInput"]').should('not.exist');
-      cy.get('button').contains('Hello World!').should('exist');
-    });
-  });
-});

From 598cd0938a30f6bc81cafdb0ee7576007b111f49 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 17:13:36 -0400
Subject: [PATCH 08/16] Created the onSave prop that returns that latest value
 within EuiFieldText (in editMode) at the time the save button is clicked.

---
 .../inline_edit/inline_edit_form.test.tsx     | 23 +++++++++++++++++++
 .../inline_edit/inline_edit_form.tsx          |  6 +++++
 2 files changed, 29 insertions(+)

diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index ec2f9ac4a4e..d15e22c2b1f 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -163,6 +163,29 @@ describe('EuiInlineEditForm', () => {
       expect(getByTestSubject('euiInlineEditModeSaveButton')).toBeDisabled();
       expect(getByTestSubject('euiInlineEditModeCancelButton')).toBeTruthy();
     });
+
+    it('returns the latest value within EuiFieldText upon saving', () => {
+      let newSaveValue = '';
+
+      const { getByTestSubject } = render(
+        <EuiInlineEditForm
+          {...commonInlineEditFormProps}
+          startWithEditOpen={true}
+          onSave={(onSaveValue) => {
+            newSaveValue = onSaveValue;
+          }}
+        />
+      );
+
+      expect(newSaveValue).toEqual('');
+
+      fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
+        target: { value: 'New message!' },
+      });
+      fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
+
+      expect(newSaveValue).toEqual('New message!');
+    });
   });
 
   describe('Toggling between readMode and editMode', () => {
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index e9600bcd291..923e736c993 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -79,6 +79,10 @@ export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
      * Validation for the form control used to edit text in editMode
      */
     isInvalid?: boolean;
+    /**
+     * Returns the value of the EuiFieldText when the editMode save button is clicked
+     */
+    onSave?: (onSaveValue: string) => void;
   };
 
 // Internal-only props, passed by the consumer-facing components
@@ -123,6 +127,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   editModeProps,
   isLoading,
   isInvalid,
+  onSave,
 }) => {
   const classes = classNames('euiInlineEdit', className);
 
@@ -159,6 +164,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     } else {
       setReadModeValue(editModeValue);
       setIsEditing(!isEditing);
+      onSave && onSave(editModeValue);
     }
   };
 

From 6005e537f70b87b3c33999d8bb9c75add51b612e Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 17:19:15 -0400
Subject: [PATCH 09/16] [REVERT ME] Added text to the InlineEditText example to
 display the use of the onSave prop

---
 src-docs/src/views/inline_edit/inline_edit_text.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src-docs/src/views/inline_edit/inline_edit_text.tsx b/src-docs/src/views/inline_edit/inline_edit_text.tsx
index 80330c2dd81..71b5363528e 100644
--- a/src-docs/src/views/inline_edit/inline_edit_text.tsx
+++ b/src-docs/src/views/inline_edit/inline_edit_text.tsx
@@ -31,6 +31,8 @@ export default () => {
     setToggleTextButtonSize(optionId);
   };
 
+  const [testForOnSaveProp, setTestForOnSaveProp] = useState('');
+
   return (
     <>
       <EuiButtonGroup
@@ -48,7 +50,15 @@ export default () => {
         inputAriaLabel="Edit text inline"
         defaultValue="Hello World!"
         size={toggleTextButtonSize}
+        onSave={(onSaveVal) => {
+          setTestForOnSaveProp(onSaveVal);
+        }}
       />
+
+      <EuiSpacer />
+
+      <p>Test for onSave Prop below:</p>
+      <p>{testForOnSaveProp}</p>
     </>
   );
 };

From c591a33122f1511f0fca8de1944086c803a65813 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Wed, 19 Apr 2023 17:44:00 -0400
Subject: [PATCH 10/16] Updated onSave prop test to use the Jest mock function
 call instead of relying on variable value changes

---
 src/components/inline_edit/inline_edit_form.test.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index d15e22c2b1f..1914a9b9273 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -165,26 +165,22 @@ describe('EuiInlineEditForm', () => {
     });
 
     it('returns the latest value within EuiFieldText upon saving', () => {
-      let newSaveValue = '';
+      const onSaveFunction = jest.fn();
 
       const { getByTestSubject } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
           startWithEditOpen={true}
-          onSave={(onSaveValue) => {
-            newSaveValue = onSaveValue;
-          }}
+          onSave={onSaveFunction}
         />
       );
 
-      expect(newSaveValue).toEqual('');
-
       fireEvent.change(getByTestSubject('euiInlineEditModeInput'), {
         target: { value: 'New message!' },
       });
       fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
 
-      expect(newSaveValue).toEqual('New message!');
+      expect(onSaveFunction).toHaveBeenCalledTimes(1);
     });
   });
 

From 55878e4305edff9e165a02cdcc11bf2f68b316f1 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 21 Apr 2023 10:06:22 -0400
Subject: [PATCH 11/16] [PR Feedback] Remove tests that toggled between
 read/edit mode in EuiInlineEdit Text and Title test suites.

---
 .../inline_edit_text.test.tsx.snap            |  588 +---------
 .../inline_edit_title.test.tsx.snap           | 1021 +----------------
 .../inline_edit/inline_edit_text.test.tsx     |   36 +-
 .../inline_edit/inline_edit_title.test.tsx    |   37 +-
 4 files changed, 41 insertions(+), 1641 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
index cb2f72a223f..42d20b7f64e 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
@@ -1,147 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditText Text Sizes renders in m in editMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit text inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditText Text Sizes renders in m in readMode 1`] = `
+exports[`EuiInlineEditText renders 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
@@ -172,153 +31,12 @@ exports[`EuiInlineEditText Text Sizes renders in m in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditText Text Sizes renders in s in editMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit text inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-s-s"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditText Text Sizes renders in s in readMode 1`] = `
+exports[`EuiInlineEditText text sizes renders m 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -334,7 +52,7 @@ exports[`EuiInlineEditText Text Sizes renders in s in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <div
-          class="euiText eui-textTruncate emotion-euiText-s"
+          class="euiText eui-textTruncate emotion-euiText-m"
         >
           Hello World!
         </div>
@@ -344,150 +62,9 @@ exports[`EuiInlineEditText Text Sizes renders in s in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditText Text Sizes renders in xs in editMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit text inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-xs-xs"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditText Text Sizes renders in xs in readMode 1`] = `
+exports[`EuiInlineEditText text sizes renders s 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -506,7 +83,7 @@ exports[`EuiInlineEditText Text Sizes renders in xs in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <div
-          class="euiText eui-textTruncate emotion-euiText-xs"
+          class="euiText eui-textTruncate emotion-euiText-s"
         >
           Hello World!
         </div>
@@ -516,153 +93,12 @@ exports[`EuiInlineEditText Text Sizes renders in xs in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditText renders in editMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit text inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditText-m-m"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditText renders in readMode 1`] = `
+exports[`EuiInlineEditText text sizes renders xs 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -678,7 +114,7 @@ exports[`EuiInlineEditText renders in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <div
-          class="euiText eui-textTruncate emotion-euiText-m"
+          class="euiText eui-textTruncate emotion-euiText-xs"
         >
           Hello World!
         </div>
diff --git a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
index e59e816407e..19a670a600d 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 1`] = `
+exports[`EuiInlineEditTitle renders 1`] = `
 <div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l"
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -21,7 +21,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-l"
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
           Hello World!
         </h1>
@@ -31,150 +31,9 @@ exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size l in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-l-l"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -193,7 +52,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-m"
+          class="euiTitle eui-textTruncate emotion-euiTitle-l"
         >
           Hello World!
         </h1>
@@ -203,153 +62,12 @@ exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size m in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -365,7 +83,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-s"
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
         >
           Hello World!
         </h1>
@@ -375,150 +93,9 @@ exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size s in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-s-s"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -537,7 +114,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xs"
+          class="euiTitle eui-textTruncate emotion-euiTitle-s"
         >
           Hello World!
         </h1>
@@ -547,150 +124,9 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size xs in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xs-xs"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -709,7 +145,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xs"
         >
           Hello World!
         </h1>
@@ -719,150 +155,9 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size xxs in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xxs-xxs"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs"
 >
   <button
     class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
@@ -881,7 +176,7 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxs"
         >
           Hello World!
         </h1>
@@ -891,294 +186,12 @@ exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 1`] = `
 </div>
 `;
 
-exports[`EuiInlineEditTitle Title Sizes renders in size xxxs in readMode 2`] = `
+exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-xxxs-xxxs"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--small emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle renders in editMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
->
-  <div
-    class="euiForm"
-  >
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-stretch-row"
-    >
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-invalid="false"
-                  aria-label="Edit title inline"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="euiInlineEditModeInput"
-                  id="generated-id"
-                  type="text"
-                  value="Hello World!"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiFlexItem-growZero-euiInlineEditTitle-m-m"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Save edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-success"
-                data-test-subj="euiInlineEditModeSaveButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="check"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <div
-          class="euiFormRow euiFormRow--fullWidth"
-          id="generated-id-row"
-        >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <div
-              aria-busy="false"
-              data-test-subj="euiSkeletonLoadingAriaWrapper"
-            >
-              <div
-                class="emotion-euiScreenReaderOnly"
-              >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  role="status"
-                >
-                  Loaded 
-                </div>
-                <div
-                  aria-atomic="true"
-                  aria-hidden="true"
-                  aria-live="off"
-                  role="status"
-                />
-              </div>
-              <button
-                aria-label="Cancel edit"
-                class="euiButtonIcon euiButtonIcon--medium emotion-euiButtonIcon-base-danger"
-                data-test-subj="euiInlineEditModeCancelButton"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="cross"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiInlineEditTitle renders in readMode 1`] = `
-<div
-  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -1194,7 +207,7 @@ exports[`EuiInlineEditTitle renders in readMode 1`] = `
         class="euiButtonEmpty__text"
       >
         <h1
-          class="euiTitle eui-textTruncate emotion-euiTitle-m"
+          class="euiTitle eui-textTruncate emotion-euiTitle-xxxs"
         >
           Hello World!
         </h1>
diff --git a/src/components/inline_edit/inline_edit_text.test.tsx b/src/components/inline_edit/inline_edit_text.test.tsx
index 0f395854a3a..736f2b99e8c 100644
--- a/src/components/inline_edit/inline_edit_text.test.tsx
+++ b/src/components/inline_edit/inline_edit_text.test.tsx
@@ -20,52 +20,24 @@ describe('EuiInlineEditText', () => {
     defaultValue: 'Hello World!',
   };
 
-  it('renders in readMode', () => {
-    const { container, getByTestSubject, getByText } = render(
+  it('renders', () => {
+    const { container } = render(
       <EuiInlineEditText {...inlineEditTextProps} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
-
-    expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
-    expect(getByText('Hello World!')).toBeTruthy();
-  });
-
-  it('renders in editMode', () => {
-    const { container, getByTestSubject, queryByTestSubject } = render(
-      <EuiInlineEditText {...inlineEditTextProps} startWithEditOpen={true} />
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-
-    expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
-    expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
   });
 
-  describe('Text Sizes', () => {
+  describe('text sizes', () => {
     // Remove 'relative' from text sizes available for EuiInlineEditText
     const availableTextSizes = TEXT_SIZES.filter((size) => size !== 'relative');
 
     availableTextSizes.forEach((size: string) => {
-      test(`renders in ${size} in readMode`, () => {
-        const { container } = render(
-          <EuiInlineEditText
-            {...inlineEditTextProps}
-            size={size as EuiInlineEditTextProps['size']}
-          />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
-    });
-
-    availableTextSizes.forEach((size: string) => {
-      test(`renders in ${size} in editMode`, () => {
+      test(`renders ${size}`, () => {
         const { container } = render(
           <EuiInlineEditText
             {...inlineEditTextProps}
             size={size as EuiInlineEditTextProps['size']}
-            startWithEditOpen={true}
           />
         );
 
diff --git a/src/components/inline_edit/inline_edit_title.test.tsx b/src/components/inline_edit/inline_edit_title.test.tsx
index 0b971d5b518..84363d4fd11 100644
--- a/src/components/inline_edit/inline_edit_title.test.tsx
+++ b/src/components/inline_edit/inline_edit_title.test.tsx
@@ -24,31 +24,24 @@ describe('EuiInlineEditTitle', () => {
     heading: 'h1',
   };
 
-  it('renders in readMode', () => {
-    const { container, getByTestSubject, getByText } = render(
+  it('renders', () => {
+    const { container } = render(
       <EuiInlineEditTitle {...inlineEditTitleProps} />
     );
 
     expect(container.firstChild).toMatchSnapshot();
-
-    expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
-    expect(getByText('Hello World!')).toBeTruthy();
   });
 
-  it('renders in editMode', () => {
-    const { container, getByTestSubject, queryByTestSubject } = render(
-      <EuiInlineEditTitle {...inlineEditTitleProps} startWithEditOpen={true} />
+  it('renders the heading prop', () => {
+    const { container } = render(
+      <EuiInlineEditTitle {...inlineEditTitleProps} heading="h3" />
     );
-
-    expect(container.firstChild).toMatchSnapshot();
-
-    expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
-    expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
+    expect(container.querySelector('h3')).toBeTruthy();
   });
 
-  describe('Title Sizes', () => {
+  describe('title sizes', () => {
     TITLE_SIZES.forEach((size) => {
-      it(`renders in size ${size} in readMode`, () => {
+      it(`renders size ${size}`, () => {
         const { container } = render(
           <EuiInlineEditTitle {...inlineEditTitleProps} size={size} />
         );
@@ -56,19 +49,5 @@ describe('EuiInlineEditTitle', () => {
         expect(container.firstChild).toMatchSnapshot();
       });
     });
-
-    TITLE_SIZES.forEach((size) => {
-      it(`renders in size ${size} in readMode`, () => {
-        const { container } = render(
-          <EuiInlineEditTitle
-            {...inlineEditTitleProps}
-            startWithEditOpen={true}
-            size={size}
-          />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
-    });
   });
 });

From b113e677e0c8e59d0b1de1a66f3b5f82442a40f1 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 21 Apr 2023 10:26:59 -0400
Subject: [PATCH 12/16] [PR Feedback] - Updated the descriptions for the onSave
 and onConfirm props - Removed data-test-subj IDs from the loading skeleton
 rectangles - Updated the isLoading prop to default to false and removed
 explicit declarations in Text and Title

---
 .../inline_edit/inline_edit_form.tsx          | 22 ++++++++-----------
 .../inline_edit/inline_edit_text.tsx          |  2 +-
 .../inline_edit/inline_edit_title.tsx         |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 923e736c993..3889ee59916 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -36,10 +36,13 @@ export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     defaultValue: string;
     /**
-     * Allow users to pass in a function that is called when the confirm button is clicked
-     * The function should return a boolean flag that will determine if the value will be saved.
-     * When the flag is true, the value will be saved. When the flag is false, the user will be
-     * returned to editMode.
+     * Callback that passes the updated value of the edited text when the save button is pressed,
+     * and the `onConfirm` callback (if passed) returns true
+     */
+    onSave?: (onSaveValue: string) => void;
+    /**
+     * Callback that fires when users click the save button, but before the text actually saves. Passes the current edited
+     * text value as an argument.
      */
     onConfirm?: (editModeValue: string) => boolean;
     /**
@@ -74,15 +77,10 @@ export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
      * Loading state when changes are saved in editMode
      */
     isLoading?: boolean;
-
     /**
      * Validation for the form control used to edit text in editMode
      */
     isInvalid?: boolean;
-    /**
-     * Returns the value of the EuiFieldText when the editMode save button is clicked
-     */
-    onSave?: (onSaveValue: string) => void;
   };
 
 // Internal-only props, passed by the consumer-facing components
@@ -125,7 +123,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   startWithEditOpen,
   readModeProps,
   editModeProps,
-  isLoading,
+  isLoading = false,
   isInvalid,
   onSave,
 }) => {
@@ -164,7 +162,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     } else {
       setReadModeValue(editModeValue);
       setIsEditing(!isEditing);
-      onSave && onSave(editModeValue);
+      onSave?.(editModeValue);
     }
   };
 
@@ -201,7 +199,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               height={loadingSkeletonSize}
               width={loadingSkeletonSize}
               borderRadius="m"
-              data-test-subj="euiInlineEditModeSaveLoading"
             >
               <EuiButtonIcon
                 iconType="check"
@@ -212,7 +209,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
                 size={sizes.buttonSize}
                 iconSize={sizes.iconSize}
                 disabled={isInvalid}
-                data-test-subj="euiInlineEditModeSaveButton"
               />
             </EuiSkeletonRectangle>
           </EuiFormRow>
diff --git a/src/components/inline_edit/inline_edit_text.tsx b/src/components/inline_edit/inline_edit_text.tsx
index 1719e369fdd..5a9451dba73 100644
--- a/src/components/inline_edit/inline_edit_text.tsx
+++ b/src/components/inline_edit/inline_edit_text.tsx
@@ -39,7 +39,7 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
   startWithEditOpen,
   readModeProps,
   editModeProps,
-  isLoading = false,
+  isLoading,
   isInvalid = false,
   ...rest
 }) => {
diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx
index a35ee2f8ef2..be663fa1c61 100644
--- a/src/components/inline_edit/inline_edit_title.tsx
+++ b/src/components/inline_edit/inline_edit_title.tsx
@@ -45,7 +45,7 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
   startWithEditOpen = false,
   readModeProps,
   editModeProps,
-  isLoading = false,
+  isLoading,
   isInvalid = false,
   ...rest
 }) => {

From b9624a8f90a4b85b937625d73a5051fb2b7fa0e0 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 21 Apr 2023 10:41:03 -0400
Subject: [PATCH 13/16] [PR Feedback] Updated EuiInlineEditForm test cases with
 more specific cases for onSave. Removed the isLoading default set in the
 props for the form as it's no longer needed

---
 .../inline_edit_form.test.tsx.snap            |  2 --
 .../inline_edit/inline_edit_form.test.tsx     | 22 ++++++++++++++-----
 .../inline_edit/inline_edit_form.tsx          |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 6edc4f713cc..9ae73106ac9 100644
--- a/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -355,7 +355,6 @@ exports[`EuiInlineEditForm Edit Mode renders EuiSkeletonRectangles in place of e
               <div
                 aria-label="Loading "
                 class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
-                data-test-subj="euiInlineEditModeSaveLoading"
                 id="generated-id"
                 role="progressbar"
                 style="inline-size: 40px; block-size: 40px;"
@@ -381,7 +380,6 @@ exports[`EuiInlineEditForm Edit Mode renders EuiSkeletonRectangles in place of e
               <div
                 aria-label="Loading "
                 class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
-                data-test-subj="euiInlineEditModeCancelLoading"
                 id="generated-id"
                 role="progressbar"
                 style="inline-size: 40px; block-size: 40px;"
diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index 1914a9b9273..1710f805942 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -24,7 +24,6 @@ describe('EuiInlineEditForm', () => {
     defaultValue: 'Hello World!',
     inputAriaLabel: 'Edit inline',
     sizes: MEDIUM_SIZE_FORM,
-    isLoading: false, // TODO: Remove once EUI loading components are fixed
     children: (readModeValue) => readModeValue,
   };
 
@@ -128,7 +127,7 @@ describe('EuiInlineEditForm', () => {
     });
 
     it('renders EuiSkeletonRectangles in place of editMode buttons when loading', () => {
-      const { container, getByTestSubject, queryByTestSubject } = render(
+      const { container, queryByTestSubject } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
           startWithEditOpen={true}
@@ -138,8 +137,9 @@ describe('EuiInlineEditForm', () => {
 
       expect(container.firstChild).toMatchSnapshot();
 
-      expect(getByTestSubject('euiInlineEditModeSaveLoading')).toBeTruthy();
-      expect(getByTestSubject('euiInlineEditModeCancelLoading')).toBeTruthy();
+      expect(container.querySelectorAll('.euiSkeletonRectangle')).toHaveLength(
+        2
+      );
 
       expect(queryByTestSubject('euiInlineEditModeSaveButton')).toBeFalsy();
       expect(queryByTestSubject('euiInlineEditModeCancelButton')).toBeFalsy();
@@ -161,7 +161,9 @@ describe('EuiInlineEditForm', () => {
       ).toBeTruthy();
 
       expect(getByTestSubject('euiInlineEditModeSaveButton')).toBeDisabled();
-      expect(getByTestSubject('euiInlineEditModeCancelButton')).toBeTruthy();
+      expect(
+        getByTestSubject('euiInlineEditModeCancelButton')
+      ).not.toBeDisabled();
     });
 
     it('returns the latest value within EuiFieldText upon saving', () => {
@@ -180,7 +182,7 @@ describe('EuiInlineEditForm', () => {
       });
       fireEvent.click(getByTestSubject('euiInlineEditModeSaveButton'));
 
-      expect(onSaveFunction).toHaveBeenCalledTimes(1);
+      expect(onSaveFunction).toHaveBeenCalledWith('New message!');
     });
   });
 
@@ -216,10 +218,13 @@ describe('EuiInlineEditForm', () => {
     });
 
     it('cancels text and returns to readMode', () => {
+      const onSave = jest.fn();
+
       const { getByTestSubject, getByText } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
           startWithEditOpen={true}
+          onSave={onSave}
         />
       );
 
@@ -233,6 +238,7 @@ describe('EuiInlineEditForm', () => {
 
       expect(getByTestSubject('euiInlineReadModeButton')).toBeTruthy();
       expect(getByText('Hello World!')).toBeTruthy();
+      expect(onSave).not.toHaveBeenCalled();
     });
 
     describe('onConfirm behavior on save', () => {
@@ -255,10 +261,13 @@ describe('EuiInlineEditForm', () => {
       });
 
       it('stays in editMode when onConfirm returns false', () => {
+        const onSave = jest.fn();
+
         const { getByTestSubject, queryByTestSubject } = render(
           <EuiInlineEditForm
             {...commonInlineEditFormProps}
             startWithEditOpen={true}
+            onSave={onSave}
             onConfirm={() => false}
           />
         );
@@ -270,6 +279,7 @@ describe('EuiInlineEditForm', () => {
 
         expect(queryByTestSubject('euiInlineReadModeButton')).toBeFalsy();
         expect(getByTestSubject('euiInlineEditModeInput')).toBeTruthy();
+        expect(onSave).not.toHaveBeenCalled();
       });
 
       it('sends the editMode text to the onConfirm callback', () => {
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 3889ee59916..23b68582707 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -209,6 +209,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
                 size={sizes.buttonSize}
                 iconSize={sizes.iconSize}
                 disabled={isInvalid}
+                data-test-subj="euiInlineEditModeSaveButton"
               />
             </EuiSkeletonRectangle>
           </EuiFormRow>
@@ -221,7 +222,6 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               height={loadingSkeletonSize}
               width={loadingSkeletonSize}
               borderRadius="m"
-              data-test-subj="euiInlineEditModeCancelLoading"
             >
               <EuiButtonIcon
                 iconType="cross"

From 3465510f6e38a3347ed637a8ac4156ab84c20830 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 21 Apr 2023 10:48:05 -0400
Subject: [PATCH 14/16] Revert "[REVERT ME] Added text to the InlineEditText
 example to display the use of the onSave prop"

This reverts commit 6005e537f70b87b3c33999d8bb9c75add51b612e.

Removing modifications to docs file as they were only needed for testing
---
 src-docs/src/views/inline_edit/inline_edit_text.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src-docs/src/views/inline_edit/inline_edit_text.tsx b/src-docs/src/views/inline_edit/inline_edit_text.tsx
index 71b5363528e..80330c2dd81 100644
--- a/src-docs/src/views/inline_edit/inline_edit_text.tsx
+++ b/src-docs/src/views/inline_edit/inline_edit_text.tsx
@@ -31,8 +31,6 @@ export default () => {
     setToggleTextButtonSize(optionId);
   };
 
-  const [testForOnSaveProp, setTestForOnSaveProp] = useState('');
-
   return (
     <>
       <EuiButtonGroup
@@ -50,15 +48,7 @@ export default () => {
         inputAriaLabel="Edit text inline"
         defaultValue="Hello World!"
         size={toggleTextButtonSize}
-        onSave={(onSaveVal) => {
-          setTestForOnSaveProp(onSaveVal);
-        }}
       />
-
-      <EuiSpacer />
-
-      <p>Test for onSave Prop below:</p>
-      <p>{testForOnSaveProp}</p>
     </>
   );
 };

From 41f0daa6f072c5958a882c1cbdad56e327151697 Mon Sep 17 00:00:00 2001
From: Bree Hall <briannajdhall@gmail.com>
Date: Fri, 21 Apr 2023 11:31:07 -0400
Subject: [PATCH 15/16] Created a new documentation example to showcase the
 onSave prop

---
 .../views/inline_edit/inline_edit_example.js  | 24 +++++++++++++
 .../views/inline_edit/inline_edit_save.tsx    | 34 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src-docs/src/views/inline_edit/inline_edit_save.tsx

diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
index a8e311eecb5..df4a83a8fa1 100644
--- a/src-docs/src/views/inline_edit/inline_edit_example.js
+++ b/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: 'Retrieving 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: (
diff --git a/src-docs/src/views/inline_edit/inline_edit_save.tsx b/src-docs/src/views/inline_edit/inline_edit_save.tsx
new file mode 100644
index 00000000000..1dc8017d567
--- /dev/null
+++ b/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>
+    </>
+  );
+};

From 7f4f6046fc224e64d579e73a937dda266777f47c Mon Sep 17 00:00:00 2001
From: Bree Hall <40739624+breehall@users.noreply.github.com>
Date: Tue, 25 Apr 2023 09:41:00 -0400
Subject: [PATCH 16/16] Update
 src-docs/src/views/inline_edit/inline_edit_example.js

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 src-docs/src/views/inline_edit/inline_edit_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
index df4a83a8fa1..7d0e95b0a0d 100644
--- a/src-docs/src/views/inline_edit/inline_edit_example.js
+++ b/src-docs/src/views/inline_edit/inline_edit_example.js
@@ -85,7 +85,7 @@ export const InlineEditExample = {
       props: { EuiInlineEditTitle },
     },
     {
-      title: 'Retrieving edited text',
+      title: 'Saving edited text',
       text: (
         <>
           <p>