[EuiInlineEdit] Create `placeholder` Prop #6872

breehall · 2023-06-22T18:01:34Z

Summary

Creation of the displayDefaultValueAsPlaceholder prop for EuiInlineEdit. This is boolean that determines if the string provided by defaultValue should display as a placeholder or not.

In readMode, the style of the text is updated to a lighter color with italic font. In editMode, the form control is passed a placeholder and does not contain the default value.

If a placeholder is set, it will last until text is successfully saved by inline edit. At that point, the placeholder styling and input element placeholder are both removed.

QA

Head over to EuiInlineEdit in staging and ensure you can do the following:

Distinguish the difference between placeholder stying and default styling in readMode
See the placeholder text on the edit mode form control after clicking on the read mode button
Head to edit mode as if you're going to change the text. Cancel your edit and select the read mode button again. The placeholder should still be visible.
Head to edit mode, make a tex change, and save. Select the read mode button again and you should find your text populated in the form control.

Remove or strikethrough items that do not apply to your PR.

General checklist

Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
Checked Code Sandbox works for any docs examples
Added or updated jest and cypress tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

…This prop adds a different style in readMode and gives the editMode form control the placeholder prop

…holder prop. Update required snapshots

…r prop

breehall · 2023-06-22T18:27:28Z

src/components/inline_edit/inline_edit_form.styles.ts

+
+    hasPlaceholder: css`
+      &.euiButtonEmpty .euiText,
+      &.euiButtonEmpty .euiTitle {
+        font-style: italic;
+        color: ${euiTheme.colors.subduedText};
+      }
+    `,


The nested styling is mostly required for EuiInlineEditTitle because the text is not a direct descendant of the readMode button.
I chose to add it here because InlineEditForm is handling most of the logic around renderPlaceholder.

I think that's a legit reason for the title/text nesting, but is the extra &.euiButtonEmpty selector necessary or can we remove it?

Suggested change

hasPlaceholder: css`

&.euiButtonEmpty .euiText,

&.euiButtonEmpty .euiTitle {

font-style: italic;

color: ${euiTheme.colors.subduedText};

}

`,

hasPlaceholder: css`

.euiText,

.euiTitle {

font-style: italic;

color: ${euiTheme.colors.subduedText};

}

`,

breehall · 2023-06-22T18:28:31Z

src/components/inline_edit/inline_edit_form.tsx

+  const [editModeValue, setEditModeValue] = useState(
+    renderPlaceholder ? '' : defaultValue
+  );


When renderPlaceholder is true, we don't want to add a value to the editMode input so the placeholder text can be seen.

kibanamachine · 2023-06-22T18:51:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6872/

cee-chen · 2023-06-23T00:20:32Z

src/components/inline_edit/inline_edit_form.tsx

+    /**
+     * Adds styling to display defaultValue as a placeholder in `readMode`.
+     * Adds defaultValue as a placeholder on the `editMode` form control and does not populate the value.
+     */
+    displayDefaultValueAsPlaceholder?: boolean;


I'm not really a huge fan of this API. Why wouldn't we instead accept a placeholder string that displays whenever defaultValue is ''? If consumers want to start with it, they can do, e.g.

<EuiInlineEditText placeholder="Click here to edit text in place" defaultValue="" />

@cee-chen The reason I decided to do it this way is because both defaultValue and placeholder are serve as starting values for the component. This is the approach I originally took, but I think it could cause confusion if both defaultValue and placeholder are both passed in as in your example above. My next thought was to restrict the props with TypeScript (i.e you can pass placeholder or defaultValue, but not both).

Compared to those options, I actually prefer this instead. There's one string to set and the consumer can determine how it's styles with a boolean.

both defaultValue and placeholder are serve as starting values for the component

That's not quite correct or how placeholder works in inputs. It's not specifically about the starting value, it's about the empty value. Placeholders reappear in inputs when inputs are cleared or set to ''. The placeholder text should reappear if the user adds text but then later decides to clear it.

I feel fairly strongly we should try to follow existing input/field patterns as natively as is possible for non-native behavior. This shouldn't be confusing to most developers that frequently work with native inputs to be frank, I would consider this API to be far more confusing.

Right, this is my understanding for inputs. But for the purpose of adding the placeholder to inline edit, that wouldn't be any different than the consumer using editMode.inputProps.placeholder, right?

The goal is to provide a distinction in readMode that the value displayed is temporary and not final (until the first official save). If the placeholder prop is present at all times, I think we would need another prop to give consumers the option to have that "unofficial" styling on the readMode button. We would need a way to know if we should show the text as default or placeholder.

What about something like:

<EuiInlineEditText placeholder="Click here to edit text in place" defaultValue="A different value" readModeDisplay = "placeholder" | "defaultValue" />

The readModeDisplay could be used to provide that distinct styling (added in this PR). And it would determine which text value should actually be shown in readMode. This does mean if both fields are passed, the placeholder in editMode won't actually be visible unless the users clears the text input.

Ok, let me spell it all out to make sure my understanding is correct:

Proposed API:

<EuiInlineEditText placeholder="Click here to edit text in place" defaultValue="" />

defaultValue will remain a required prop that will accept an empty string
placeholder will be an optional prop that can be passed with no restrictions

In readMode:

placeholder will show as the value in the button if there's a placeholder, but no defaultValue

defaultValue will show as the value in the button if:

both placeholder and value are passed in OR

just defaultValue is passed in (with no placeholder)

In editMode:

placeholder will be set to the as the placeholder on the input form control

defaultValue will continue to be set to the value on the form control

Is this accurate @cee-chen ?

That looks great to me! The basic condition to display it in read mode is show the placeholder if it exists and if defaultValue is ''/falsy.

A few quick minor nuances/clarifications:

placeholder will be an optional prop that can be passed with no restrictions

placeholder should be an option prop with a string type (i.e. it should not allow any React JSX or dom)

placeholder will be set to the as the placeholder on the input form control

For maximum flexibility, we should allow consumers to override this via editModeProps.inputProps.placeholder (which allows consumers to set separate placeholders for read mode vs edit mode if they absolutely have to. In most cases they shouldn't/won't, but I just know someone will ask for that someday 🥲 )

This should be as simple as making sure the spread operator comes after the placeholder prop declaration, i.e.

<EuiFieldText placeholder={placeholder} {...editModeProps?.inputProps} />

LMK if you have any other questions!

@cee-chen As I'm updating tests, I just thought about this comment. With the API described above, consumers can still save empty strings in editMode. The above mostly accounts for the component state at load. I just want to be sure of a few this before reopening the PR.

Here are a few scenarios where an empty string being saved would result in a "blank" read mode.

defaultValue placeholder empty string saved readMode result

Present undefined ➡️ Empty string in readMode showing only the pencil icon

'' Present ➡️ Empty string in readMode showing only the pencil icon

'' undefined ➡️ Empty string in readMode showing only the pencil icon

The placeholder is a blanket at load, but if consumers don't provide validation to prevent saving empty strings, they'll likely come across a "blank" read mode.

Is this too opinionated? It would eliminate the second case in the table above.

const saveInlineEditValue = async () => { ... showPlaceholder && editModeValue === '' ? setEditModeValue(placeholder) : setEditModeValue(readModeValue); ... };

The placeholder is a blanket at load, but if consumers don't provide validation to prevent saving empty strings, they'll likely come across a "blank" read mode.

This shouldn't be happening. What logic are you using to show the placeholder in readMode? It should be based on a stateful value, not on defaultValue. There is very little we should be doing with defaultValue other than passing it in to initial state.

You likely want this: const showPlaceholder = placeholder && !readModeValue;

With the above, the placeholder will show even if the user saves an empty string and the consumer doesn't have any validation in place (which is also exactly how native inputs behave as well).

I'm glad I asked because that's a little different than what I described a few comments up. Let me push my commit so I can show you. Maybe if you have time tomorrow, we can pair review it?

cee-chen · 2023-06-23T00:22:09Z

src/components/inline_edit/inline_edit_title.test.tsx

+  test('displayDefaultValueAsPlaceholder', () => {
+    const { container } = render(
+      <EuiInlineEditTitle
+        displayDefaultValueAsPlaceholder={true}
+        {...inlineEditTitleProps}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+


inline_edit_title doesn't need a test for this prop since it's a basic passthrough to inline_edit_form. The majority of the testing should be done there

Suggested change

test('displayDefaultValueAsPlaceholder', () => {

const { container } = render(

<EuiInlineEditTitle

displayDefaultValueAsPlaceholder={true}

{...inlineEditTitleProps}

/>

);

expect(container.firstChild).toMatchSnapshot();

});

mdefazio · 2023-06-23T14:18:10Z

This one concerns me a bit. Particularly the possibility for an empty string. I'm not sure of the solution yet, but I think we need to force a string to be present. Again, I don't quite know what this means, as I know this goes against the norm for typical inputs. I'll think more on it and send along some thoughts, but wanted to raise a flag.

breehall · 2023-06-23T14:30:08Z

This one concerns me a bit. Particularly the possibility for an empty string.

@mdefazio This functionality isn't actually being added as part of this PR. All variations of inline edit have the potential to be saved with no text. There was an "empty string check" originally, but in this PR , it was removed. I believe the thought was the API was a little too opinionated and we provide consumers with the validation options so they can have full control over it.

Should we revisit this decision?

cee-chen · 2023-06-23T16:40:09Z

This functionality isn't actually being added as part of this PR. All variations of inline edit have the potential to be saved with no text.

But that's what a placeholder prop should provide UI guards for, in my opinion (if the consumer passes it). That's my argument for the prop and different API.

This reverts commit 49bbebe.

…' prop. This prop adds a different style in readMode and gives the editMode form control the placeholder prop" This reverts commit 4bda833. Revert changes that previously added the displayDefaultValueAsPlaceholder prop

kibanamachine · 2023-06-27T15:14:05Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6872/

breehall · 2023-06-28T13:19:36Z

Created PR #6883 to handle to take over this task. Closing this PR and moving forward with that one.

breehall added 4 commits June 22, 2023 13:47

[EuiInlineEdit] Created the 'displayDefaultValueAsPlaceholder' prop. …

4bda833

…This prop adds a different style in readMode and gives the editMode form control the placeholder prop

[EuiInlineEdit] Add test cases for the new displayDefaultValueAsPlace…

2043fb9

…holder prop. Update required snapshots

[EuiInlineEdit] Add documentation for displayDefaultValueAsPlaceholde…

f652d92

…r prop

CHANGELOG

49bbebe

breehall commented Jun 22, 2023

View reviewed changes

Rename 6872.md.md to 6872.md

b91c110

breehall marked this pull request as ready for review June 22, 2023 18:53

cee-chen reviewed Jun 23, 2023

View reviewed changes

Revert "CHANGELOG"

dd2d06b

This reverts commit 49bbebe.

breehall marked this pull request as draft June 26, 2023 19:21

breehall changed the title ~~[EuiInlineEdit] Create displayDefaultValueAsPlaceholder Prop~~ [EuiInlineEdit] Create placeholder Prop Jun 26, 2023

breehall added 3 commits June 26, 2023 15:24

Opt for placeholder prop over displayDefaultValueAsPlaceholder prop

3d1f1cd

Pull from branch in GH

69a6f59

breehall mentioned this pull request Jun 27, 2023

[EuiInlineEdit] Create placeholder prop for Inline Edit & Friends #6883

Merged

12 tasks

breehall closed this Jun 28, 2023

breehall deleted the inline-edit/placeholder branch October 6, 2023 16:04

`defaultValue`	`placeholder`	empty string saved	`readMode` result
Present	`undefined`	➡️	Empty string in `readMode` showing only the pencil icon
`''`	Present	➡️	Empty string in `readMode` showing only the pencil icon
`''`	`undefined`	➡️	Empty string in `readMode` showing only the pencil icon

[EuiInlineEdit] Create placeholder Prop #6872

[EuiInlineEdit] Create placeholder Prop #6872

Uh oh!

Conversation

breehall commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jun 22, 2023

Uh oh!

cee-chen Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen Jun 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mdefazio commented Jun 23, 2023

Uh oh!

breehall commented Jun 23, 2023

Uh oh!

cee-chen commented Jun 23, 2023

Uh oh!

kibanamachine commented Jun 27, 2023

Uh oh!

breehall commented Jun 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiInlineEdit] Create `placeholder` Prop #6872

[EuiInlineEdit] Create `placeholder` Prop #6872

breehall commented Jun 22, 2023 •

edited

Loading

cee-chen Jun 23, 2023 •

edited

Loading

cee-chen Jun 23, 2023 •

edited

Loading

cee-chen Jun 23, 2023 •

edited

Loading

cee-chen Jun 23, 2023 •

edited

Loading