[EuiInlineEdit] Create isReadOnly Prop for Read Mode

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

@@ -67,6 +67,14 @@ const inlineEditModeSaveSnippet = `<EuiInlineEditText
 import InlineEditValidation from './inline_edit_validation';
 const inlineEditValidationSource = require('!!raw-loader!././inline_edit_validation');
 
+import InlineEditReadOnly from './inline_edit_read_only';
+const InlineEditReadOnlySource = require('!!raw-loader!././inline_edit_read_only');
+const inlineEditReadOnlySnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue="This is read only text!"
+  isReadOnly={isReadOnly}
+/>`;
+
 export const InlineEditExample = {
   title: 'Inline edit',
   intro: (
@@ -176,6 +184,26 @@ export const InlineEditExample = {
       ],
       demo: <InlineEditValidation />,
     },
+    {
+      title: 'Read only',
+      text: (
+        <>
+          <p>
+            Use the <EuiCode>isReadOnly</EuiCode> prop to lock{' '}
+            <EuiCode>EuiInlineEdit</EuiCode> in read mode and display the text
+            value. This does not affect the input form control in edit mode.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: InlineEditReadOnlySource,
+        },
+      ],
+      demo: <InlineEditReadOnly />,
+      snippet: inlineEditReadOnlySnippet,
+    },
     {
       title: 'Customizing read and edit modes',
       text: (
@@ -203,7 +231,7 @@ export const InlineEditExample = {
               properties
             </li>
             <li>
-              <EuiCode>editMode.inputRowProps</EuiCode> accepts any{' '}
+              <EuiCode>editMode.inputProps</EuiCode> accepts any{' '}
               <Link to="/forms/form-controls#text-field">
                 <strong>EuiFieldText</strong>
               </Link>{' '}

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInlineEditText,
+  EuiInlineEditTitle,
+  EuiSpacer,
+  EuiSwitch,
+} from '../../../../src';
+
+export default () => {
+  const [isReadOnly, setIsReadOnly] = useState(true);
+
+  return (
+    <>
+      <EuiSwitch
+        label="Toggle read only"
+        checked={isReadOnly}
+        onChange={(e) => setIsReadOnly(e.target.checked)}
+      />
+
+      <EuiSpacer />
+
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue="This is read only text!"
+        isReadOnly={isReadOnly}
+      />
+
+      <EuiSpacer />
+
+      <EuiInlineEditTitle
+        inputAriaLabel="Edit title inline"
+        defaultValue="This is a read only title!"
+        heading="h3"
+        isReadOnly={isReadOnly}
+      />
+    </>
+  );
+};

src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap

@@ -643,13 +643,43 @@ exports[`EuiInlineEditForm Edit Mode renders 1`] = `
 </div>
 `;
 
+exports[`EuiInlineEditForm Read Mode isReadOnly 1`] = `
+<div
+  class="euiInlineEdit testClass1 testClass2"
+>
+  <button
+    aria-describedby="inlineEdit_generated-id"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-19hs4ci-empty-disabled-euiInlineEditButton-isReadOnly"
+    data-test-subj="euiInlineReadModeButton"
+    disabled=""
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        Hello World!
+      </span>
+    </span>
+  </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
+</div>
+`;
+
 exports[`EuiInlineEditForm Read Mode readModeProps 1`] = `
 <div
   class="euiInlineEdit testClass1 testClass2"
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-9t7nyf-empty-primary"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-ioyorl-empty-primary-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -683,7 +713,7 @@ exports[`EuiInlineEditForm Read Mode renders 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -717,7 +747,7 @@ exports[`EuiInlineEditForm Read Mode sizes 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >

src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap

@@ -1,12 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInlineEditText isReadOnly 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
+>
+  <button
+    aria-describedby="inlineEdit_generated-id"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-19hs4ci-empty-disabled-euiInlineEditButton-isReadOnly"
+    data-test-subj="euiInlineReadModeButton"
+    disabled=""
+    role="paragraph"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <div
+          class="euiText eui-textTruncate emotion-euiText-m"
+        >
+          Hello World!
+        </div>
+      </span>
+    </span>
+  </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
+</div>
+`;
+
 exports[`EuiInlineEditText renders 1`] = `
 <div
   class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m"
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -44,7 +79,7 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -82,7 +117,7 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -120,7 +155,7 @@ exports[`EuiInlineEditText text sizes renders xs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >

src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap

@@ -1,12 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiInlineEditTitle isReadOnly 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
+>
+  <button
+    aria-describedby="inlineEdit_generated-id"
+    aria-level="1"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-19hs4ci-empty-disabled-euiInlineEditButton-isReadOnly"
+    data-test-subj="euiInlineReadModeButton"
+    disabled=""
+    role="heading"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <h1
+          class="euiTitle eui-textTruncate emotion-euiTitle-m"
+        >
+          Hello World!
+        </h1>
+      </span>
+    </span>
+  </button>
+  <span
+    hidden=""
+    id="inlineEdit_generated-id"
+  >
+    Click this button to edit this text inline.
+  </span>
+</div>
+`;
+
 exports[`EuiInlineEditTitle renders 1`] = `
 <div
   class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m"
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -44,7 +80,7 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -82,7 +118,7 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -120,7 +156,7 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -158,7 +194,7 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -196,7 +232,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >
@@ -234,7 +270,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
 >
   <button
     aria-describedby="inlineEdit_generated-id"
-    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    class="euiButtonEmpty euiButtonEmpty--small euiButtonEmpty--flushBoth css-gj4z04-empty-text-euiInlineEditButton"
     data-test-subj="euiInlineReadModeButton"
     type="button"
   >

src/components/inline_edit/inline_edit_form.styles.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiInlineEditFormStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiInlineEditButton: css``,
+
+    // Override the cursor and allow users to highlight text when read mode is in the read only state
+    // Once EuiEmptyButton has been converted to Emotion, remove this extra selector
+    isReadOnly: css`
+      &.euiButtonEmpty:disabled {
+        cursor: text;
+        color: ${euiTheme.colors.text};
+        user-select: text;
+      }
+    `,
+  };
+};

src/components/inline_edit/inline_edit_form.test.tsx

@@ -36,6 +36,20 @@ describe('EuiInlineEditForm', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
+    test('isReadOnly', () => {
+      const { container, getByTestSubject } = render(
+        <EuiInlineEditForm
+          isReadOnly={true}
+          startWithEditOpen={true}
+          {...commonInlineEditFormProps}
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+
+      expect(getByTestSubject('euiInlineReadModeButton')).toBeDisabled();
+    });
+
     test('readModeProps', () => {
       const { container, getByTestSubject } = render(
         <EuiInlineEditForm