Skip to content

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

Merged
breehall merged 12 commits intoelastic:mainfrom
breehall:feature/InlineEdit-placeholder
Jun 30, 2023
Merged

[EuiInlineEdit] Create placeholder prop for Inline Edit & Friends#6883
breehall merged 12 commits intoelastic:mainfrom
breehall:feature/InlineEdit-placeholder

Conversation

@breehall
Copy link
Copy Markdown
Contributor

@breehall breehall commented Jun 27, 2023 •
edited by cee-chen
Loading

Fixes #6857 || Original PR: #6872

Summary

Creation of the placeholder prop for EuiInlineEdit.

Read Mode:
The placeholder value is displayed in readMode when the placeholder is present and no defaultValue is passed in or if readModeValue is empty. The placeholder text will also appear in a light color in readMode.

Edit Mode:
placeholder is passed to the editMode input form control.

image

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 text change, and save. Select the read mode button again and you should find your text populated in the form control.
  • Head to edit mode and save empty text. The placeholder should show in read mode.

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

General checklist

  • Checked in both light and dark modes
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Added documentation
  • 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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 27, 2023

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

@breehall breehall requested a review from cee-chen June 28, 2023 13:18
@breehall breehall marked this pull request as ready for review June 28, 2023 13:18
@breehall breehall mentioned this pull request Jun 28, 2023
Closed
11 tasks
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
cee-chen
cee-chen reviewed Jun 29, 2023
View reviewed changes
breehall and others added 6 commits June 29, 2023 16:57
@breehall @cee-chen
Update src/components/inline_edit/inline_edit_form.test.tsx
a7e6018 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall @cee-chen
Update src-docs/src/views/inline_edit/inline_edit_placeholder.tsx
fe3ce9c 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall @cee-chen
Update src-docs/src/views/inline_edit/inline_edit_placeholder.tsx
3e37cc2 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall @cee-chen
Update src/components/inline_edit/inline_edit_form.tsx
b9cd428 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall @cee-chen
Update src-docs/src/views/inline_edit/inline_edit_example.js
cfa1854 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall @cee-chen
Update src-docs/src/views/inline_edit/inline_edit_example.js
ae4858c 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 29, 2023

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

@breehall
[EuiInlineEdit] PR Feedback
e30c1e3 
- Reordered placeholder prop within documentation
- Update color of placeholder text color to meet contrast ratio guidelines
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 29, 2023

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

cee-chen
cee-chen approved these changes Jun 29, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Looks great! I hope it works well as well in production Kibana usage!

@breehall breehall merged commit f28c1b1 into elastic:main Jun 30, 2023
@1Copenut 1Copenut mentioned this pull request Jul 7, 2023
Merged
1Copenut added a commit to elastic/kibana that referenced this pull request Jul 11, 2023
@1Copenut
Upgrade EUI to 83.1.0 (#161490)
e58c455 
`eui@83.0.0` ⏩ `83.1.0`

---

## [`83.1.0`](https://github.com/elastic/eui/tree/v83.1.0)

- Added `placeholder` prop to `EuiInlineEdit`
([#6883](elastic/eui#6883))
- Added `sparkles` glyph to `EuiIcon`
([#6898](elastic/eui#6898))

**Bug fixes**

- Fixed Safari-only bug for single-line row `EuiDataGrid`s, where cell
actions on hover would overlap instead of pushing content to the left
([#6881](elastic/eui#6881))
- Fixed `EuiButton` not correctly merging in passed `className`s with
its base `.euiButton` class
([#6887](elastic/eui#6887))
- Fixed `EuiIcon` not correctly passing the `style` prop custom `img`
icons ([#6888](elastic/eui#6888))
- Fixed multiple components with child props (e.g. `buttonProps`,
`iconProps`, etc.) unsetting EUI's Emotion styling if custom `css` was
passed to the child props object
([#6896](elastic/eui#6896))

**CSS-in-JS conversions**

- Converted `EuiHeader` and `EuiHeaderLogo` to Emotion
([#6878](elastic/eui#6878))
- Removed Sass variables `$euiHeaderDarkBackgroundColor`,
`$euiHeaderBorderColor`, and `$euiHeaderBreadcrumbColor`
([#6878](elastic/eui#6878))
- Removed Sass mixin `@euiHeaderDarkTheme`
([#6878](elastic/eui#6878))
@breehall breehall deleted the feature/InlineEdit-placeholder branch October 6, 2023 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiInlineEdit] Create placeholder prop for Inline Edit compoents

3 participants

@breehall @kibanamachine @cee-chen