From ec2602dbeede58b48f9305d086bae26ccc3b9da0 Mon Sep 17 00:00:00 2001
From: Bree Hall <40739624+breehall@users.noreply.github.com>
Date: Thu, 20 Jul 2023 09:30:55 -0400
Subject: [PATCH] [EuiInlineEdit] Add `title` to Read Mode Button (#6966)

* [EuiInlineEdit] Add title prop to EuiEmptyButton in read mode to assist with reading truncated text.

* [EuiInlineEdit] Update test cases & snapshots

* CHANGELOG

* Update upcoming_changelogs/6966.md

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

* Update src/components/inline_edit/inline_edit_form.test.tsx

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

* Update src/components/inline_edit/inline_edit_form.test.tsx

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

* [PR Feedback] Allow title on read mode button to be overridden; Adjust read mdoe - placeholder test to include checks for the title tooltip.

---------

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 .../__snapshots__/inline_edit_form.test.tsx.snap      |  5 +++++
 .../__snapshots__/inline_edit_text.test.tsx.snap      |  5 +++++
 .../__snapshots__/inline_edit_title.test.tsx.snap     |  8 ++++++++
 src/components/inline_edit/inline_edit_form.test.tsx  | 11 ++++++++++-
 src/components/inline_edit/inline_edit_form.tsx       |  1 +
 upcoming_changelogs/6966.md                           |  1 +
 6 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 upcoming_changelogs/6966.md

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 52e6919d341..69d7960e002 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
@@ -739,6 +739,7 @@ exports[`EuiInlineEditForm read mode isReadOnly 1`] = `
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-flush-both-isDisabled-euiInlineEditReadMode-isReadOnly"
     data-test-subj="euiInlineReadModeButton"
     disabled=""
+    title="Hello World!"
     type="button"
   >
     <span
@@ -766,6 +767,7 @@ exports[`EuiInlineEditForm read mode placeholder 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode-hasPlaceholder"
     data-test-subj="euiInlineReadModeButton"
+    title="This is a placeholder."
     type="button"
   >
     <span
@@ -799,6 +801,7 @@ exports[`EuiInlineEditForm read mode readModeProps 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -832,6 +835,7 @@ exports[`EuiInlineEditForm read mode renders 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -865,6 +869,7 @@ exports[`EuiInlineEditForm read mode sizes 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
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 b6d290edefa..7a6dc632f7d 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
@@ -10,6 +10,7 @@ exports[`EuiInlineEditText isReadOnly 1`] = `
     data-test-subj="euiInlineReadModeButton"
     disabled=""
     role="paragraph"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -41,6 +42,7 @@ exports[`EuiInlineEditText renders 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -78,6 +80,7 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -115,6 +118,7 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -152,6 +156,7 @@ exports[`EuiInlineEditText text sizes renders xs 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <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 29bbf30336e..17e1399161b 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
@@ -11,6 +11,7 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `
     data-test-subj="euiInlineReadModeButton"
     disabled=""
     role="heading"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -43,6 +44,7 @@ exports[`EuiInlineEditTitle renders 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -80,6 +82,7 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -117,6 +120,7 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -154,6 +158,7 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -191,6 +196,7 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -228,6 +234,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
@@ -265,6 +272,7 @@ exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
     aria-describedby="inlineEdit_generated-id"
     class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-flush-both-euiInlineEditReadMode"
     data-test-subj="euiInlineReadModeButton"
+    title="Hello World!"
     type="button"
   >
     <span
diff --git a/src/components/inline_edit/inline_edit_form.test.tsx b/src/components/inline_edit/inline_edit_form.test.tsx
index c79d58bd728..510b649ad8a 100644
--- a/src/components/inline_edit/inline_edit_form.test.tsx
+++ b/src/components/inline_edit/inline_edit_form.test.tsx
@@ -77,7 +77,7 @@ describe('EuiInlineEditForm', () => {
     });
 
     test('placeholder', () => {
-      const { container, getByText } = render(
+      const { container, getByText, getByTitle } = render(
         <EuiInlineEditForm
           {...commonInlineEditFormProps}
           defaultValue=""
@@ -87,6 +87,15 @@ describe('EuiInlineEditForm', () => {
 
       expect(container.firstChild).toMatchSnapshot();
       expect(getByText('This is a placeholder.')).toBeTruthy();
+      expect(getByTitle('This is a placeholder.')).toBeTruthy();
+    });
+
+    it('renders the read mode value in a title tooltip', () => {
+      const { getByTitle } = render(
+        <EuiInlineEditForm {...commonInlineEditFormProps} />
+      );
+
+      expect(getByTitle('Hello World!')).toBeTruthy();
     });
   });
 
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
index 90feb3c86a7..71e611b5e21 100644
--- a/src/components/inline_edit/inline_edit_form.tsx
+++ b/src/components/inline_edit/inline_edit_form.tsx
@@ -330,6 +330,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
         data-test-subj="euiInlineReadModeButton"
         disabled={isReadOnly}
         css={readModeCssStyles}
+        title={readModeValue || placeholder}
         {...readModeProps}
         buttonRef={setReadModeRefs}
         aria-describedby={classNames(
diff --git a/upcoming_changelogs/6966.md b/upcoming_changelogs/6966.md
new file mode 100644
index 00000000000..8d206a79d99
--- /dev/null
+++ b/upcoming_changelogs/6966.md
@@ -0,0 +1 @@
+- Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text