Skip to content

[EuiInlineEdit] Allow EuiInlineEdit to be used as a controlled component #7157

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

Merged
cee-chen merged 13 commits into from
Sep 8, 2023
Merged

[EuiInlineEdit] Allow EuiInlineEdit to be used as a controlled component #7157

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
39b7818
[Setup] Create three new props to allow inline edit to be used as a c…
breehall Aug 25, 2023
d3862c5
[EuiInlineEdit] Implement control logic
breehall Aug 25, 2023
53d5b38
[EuiInlineEdit] Bug Fix & Cleanup
breehall Aug 25, 2023
a643cc5
[EuiInlineEdit] Update the test cases for Inline Edit Form by creatin…
breehall Sep 5, 2023
08c5c30
[InlineEdit] Create documentation for controlled component usage
breehall Sep 5, 2023
977b3d5
[Clean up] Add comments to new props
breehall Sep 5, 2023
c0f031c
Changelog
breehall Sep 5, 2023
433ff26
[PR Feedback]
breehall Sep 7, 2023
a0dedea
[PR Feedback] Small update to documentation copy and example for usin…
breehall Sep 7, 2023
627b33d
[Test Updates]
breehall Sep 7, 2023
a180fb1
[PR Feedback]
breehall Sep 7, 2023
f98c6fb
[PR Feedback] Add comment explaining placeholder fallback. Update uni…
breehall Sep 8, 2023
4bacd73
Changelog addition
cee-chen Sep 8, 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
22 changes: 22 additions & 0 deletions src-docs/src/views/inline_edit/inline_edit_controlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useState, ChangeEvent } from 'react';

import { EuiInlineEditText } from '../../../../src';

export default () => {
const [inlineEditValue, setInlineEditValue] = useState('Hello World!');

const inlineEditOnChange = (e: ChangeEvent<HTMLInputElement>) => {
setInlineEditValue(e.target.value);
};

return (
<EuiInlineEditText
inputAriaLabel="Edit title inline"
value={inlineEditValue}
onChange={inlineEditOnChange}
onCancel={(previousValue) => {
setInlineEditValue(previousValue);
}}
/>
);
};
35 changes: 35 additions & 0 deletions src-docs/src/views/inline_edit/inline_edit_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,17 @@ const inlineEditTitleSnippet = `<EuiInlineEditTitle
size="m"
/>`;

import InlineEditControlled from './inline_edit_controlled';
const inlineEditControlledSource = require('!!raw-loader!./inline_edit_controlled');
const inlineEditControlledSnippet = `<EuiInlineEditText
inputAriaLabel="Edit title inline"
value={inlineEditValue}
onChange={inlineEditOnChange}
onCancel={(previousValue) => {
setInlineEditValue(previousValue);
}}
/>`;

import InlineEditPlaceholder from './inline_edit_placeholder';
const inlineEditPlaceholderSource = require('!!raw-loader!./inline_edit_placeholder');
const inlineEditPlaceholderSnippet = `<EuiInlineEditText
Expand Down Expand Up @@ -152,6 +163,30 @@ export const InlineEditExample = {
snippet: inlineEditTitleSnippet,
playground: inlineEditTitleConfig,
},
{
title: 'Controlled values',
text: (
<>
<p>
To control the text value for inline edit, use the{' '}
<EuiCode>value</EuiCode> prop to continually pass a text value. An
<EuiCode>onChange</EuiCode> callback is required to receive and
update <EuiCode>value</EuiCode> based on user input. An{' '}
<EuiCode>onCancel</EuiCode> callback is required to reset the value
to the previous read mode text value.
</p>
</>
),
source: [
{
type: GuideSectionTypes.TSX,
code: inlineEditControlledSource,
},
],
demo: <InlineEditControlled />,
props: { EuiInlineEditText },
snippet: inlineEditControlledSnippet,
},
{
title: 'Saving edited text',
text: (
Expand Down
26 changes: 26 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 @@ -2,7 +2,9 @@

exports[`EuiInlineEditForm edit mode editModeProps.cancelButtonProps 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -89,7 +91,9 @@ exports[`EuiInlineEditForm edit mode editModeProps.cancelButtonProps 1`] = `

exports[`EuiInlineEditForm edit mode editModeProps.formRowProps 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -176,7 +180,9 @@ exports[`EuiInlineEditForm edit mode editModeProps.formRowProps 1`] = `

exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -268,7 +274,9 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `

exports[`EuiInlineEditForm edit mode editModeProps.saveButtonProps 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -354,7 +362,9 @@ exports[`EuiInlineEditForm edit mode editModeProps.saveButtonProps 1`] = `

exports[`EuiInlineEditForm edit mode isInvalid 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -449,7 +459,9 @@ exports[`EuiInlineEditForm edit mode isInvalid 1`] = `

exports[`EuiInlineEditForm edit mode isLoading 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -559,7 +571,9 @@ exports[`EuiInlineEditForm edit mode isLoading 1`] = `

exports[`EuiInlineEditForm edit mode placeholder 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -646,7 +660,9 @@ exports[`EuiInlineEditForm edit mode placeholder 1`] = `

exports[`EuiInlineEditForm edit mode renders 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
Expand Down Expand Up @@ -732,7 +748,9 @@ exports[`EuiInlineEditForm edit mode renders 1`] = `

exports[`EuiInlineEditForm read mode isReadOnly 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -761,7 +779,9 @@ exports[`EuiInlineEditForm read mode isReadOnly 1`] = `

exports[`EuiInlineEditForm read mode placeholder 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -795,7 +815,9 @@ exports[`EuiInlineEditForm read mode placeholder 1`] = `

exports[`EuiInlineEditForm read mode readModeProps 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -829,7 +851,9 @@ exports[`EuiInlineEditForm read mode readModeProps 1`] = `

exports[`EuiInlineEditForm read mode renders 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -863,7 +887,9 @@ exports[`EuiInlineEditForm read mode renders 1`] = `

exports[`EuiInlineEditForm read mode sizes 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit testClass1 testClass2 emotion-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down
10 changes: 10 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 @@ -2,7 +2,9 @@

exports[`EuiInlineEditText isReadOnly 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -36,7 +38,9 @@ exports[`EuiInlineEditText isReadOnly 1`] = `

exports[`EuiInlineEditText renders 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -74,7 +78,9 @@ exports[`EuiInlineEditText renders 1`] = `

exports[`EuiInlineEditText text sizes renders m 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -112,7 +118,9 @@ exports[`EuiInlineEditText text sizes renders m 1`] = `

exports[`EuiInlineEditText text sizes renders s 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-s-s-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -150,7 +158,9 @@ exports[`EuiInlineEditText text sizes renders s 1`] = `

exports[`EuiInlineEditText text sizes renders xs 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditText testClass1 testClass2 emotion-euiInlineEditText-xs-xs-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down
16 changes: 16 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 @@ -2,7 +2,9 @@

exports[`EuiInlineEditTitle isReadOnly 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -38,7 +40,9 @@ exports[`EuiInlineEditTitle isReadOnly 1`] = `

exports[`EuiInlineEditTitle renders 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -76,7 +80,9 @@ exports[`EuiInlineEditTitle renders 1`] = `

exports[`EuiInlineEditTitle title sizes renders size l 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-l-l-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -114,7 +120,9 @@ exports[`EuiInlineEditTitle title sizes renders size l 1`] = `

exports[`EuiInlineEditTitle title sizes renders size m 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-m-m-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -152,7 +160,9 @@ exports[`EuiInlineEditTitle title sizes renders size m 1`] = `

exports[`EuiInlineEditTitle title sizes renders size s 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-s-s-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -190,7 +200,9 @@ exports[`EuiInlineEditTitle title sizes renders size s 1`] = `

exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xs-xs-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -228,7 +240,9 @@ exports[`EuiInlineEditTitle title sizes renders size xs 1`] = `

exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxs-xxs-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down Expand Up @@ -266,7 +280,9 @@ exports[`EuiInlineEditTitle title sizes renders size xxs 1`] = `

exports[`EuiInlineEditTitle title sizes renders size xxxs 1`] = `
<div
aria-label="aria-label"
class="euiInlineEdit euiInlineEditTitle testClass1 testClass2 emotion-euiInlineEditTitle-xxxs-xxxs-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-describedby="inlineEdit_generated-id"
Expand Down
Loading