Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiInlineEdit] Add title to Read Mode Button #6966

Merged
merged 7 commits into from
Jul 20, 2023
Merged

[EuiInlineEdit] Add title to Read Mode Button #6966

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6a7db1f
[EuiInlineEdit] Add title prop to EuiEmptyButton in read mode to assi…
breehall Jul 19, 2023
fb01c03
[EuiInlineEdit] Update test cases & snapshots
breehall Jul 19, 2023
40fd7cb
CHANGELOG
breehall Jul 19, 2023
3c0b89b
Update upcoming_changelogs/6966.md
breehall Jul 19, 2023
66ed905
Update src/components/inline_edit/inline_edit_form.test.tsx
breehall Jul 19, 2023
56945c1
Update src/components/inline_edit/inline_edit_form.test.tsx
breehall Jul 19, 2023
53f7d27
[PR Feedback] Allow title on read mode button to be overridden; Adjus…
breehall Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -889,3 +894,71 @@ exports[`EuiInlineEditForm read mode sizes 1`] = `
</span>
</div>
`;

exports[`EuiInlineEditForm read mode title for defaultValue 1`] = `
<div
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
>
<button
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
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
Hello World!
</span>
<span
color="inherit"
data-euiicon-type="pencil"
/>
</span>
</button>
<span
hidden=""
id="inlineEdit_generated-id"
>
Click to edit this text inline.
</span>
</div>
`;

exports[`EuiInlineEditForm read mode title for placeholder 1`] = `
<div
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
>
<button
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
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
>
This is a placeholder.
</span>
<span
color="inherit"
data-euiicon-type="pencil"
/>
</span>
</button>
<span
hidden=""
id="inlineEdit_generated-id"
>
Click to edit this text inline.
</span>
</div>
`;
5 changes: 5 additions & 0 deletions src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ exports[`EuiInlineEditText isReadOnly 1`] = `
data-test-subj="euiInlineReadModeButton"
disabled=""
role="paragraph"
title="Hello World!"
type="button"
>
<span
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `
data-test-subj="euiInlineReadModeButton"
disabled=""
role="heading"
title="Hello World!"
type="button"
>
<span
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
26 changes: 26 additions & 0 deletions src/components/inline_edit/inline_edit_form.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,32 @@ describe('EuiInlineEditForm', () => {
expect(container.firstChild).toMatchSnapshot();
expect(getByText('This is a placeholder.')).toBeTruthy();
});

test('title for defaultValue', () => {
const { container, getByTestSubject } = render(
<EuiInlineEditForm {...commonInlineEditFormProps} />
);

expect(container.firstChild).toMatchSnapshot();
expect(
getByTestSubject('euiInlineReadModeButton').getAttribute('title')
).toEqual('Hello World!');
});

test('title for placeholder', () => {
const { container, getByTestSubject } = render(
<EuiInlineEditForm
{...commonInlineEditFormProps}
defaultValue=""
placeholder="This is a placeholder."
/>
);

expect(container.firstChild).toMatchSnapshot();
expect(
getByTestSubject('euiInlineReadModeButton').getAttribute('title')
).toEqual('This is a placeholder.');
});
});

describe('edit mode', () => {
Expand Down
1 change: 1 addition & 0 deletions src/components/inline_edit/inline_edit_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
activateEditMode();
readModeProps?.onClick?.(e);
}}
title={readModeValue || placeholder}
>
{children(readModeValue || placeholder)}
</EuiButtonEmpty>
Expand Down
1 change: 1 addition & 0 deletions upcoming_changelogs/6966.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added `title` to `EuiInlineEdit` read mode button to increase readability of truncated text