[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>
elastic · Jul 20, 2023 · ec2602d · ec2602d
1 parent 08e234e
commit ec2602d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+- Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text