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.

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] Create placeholder prop for Inline Edit & Friends #6883

Merged
merged 12 commits into from
Jun 30, 2023

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Jun 27, 2023

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

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
@kibanamachine
Copy link

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

- Reordered placeholder prop within documentation
- Update color of placeholder text color to meet contrast ratio guidelines
@kibanamachine
Copy link

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

Copy link
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 added a commit to elastic/kibana that referenced this pull request Jul 11, 2023
`[email protected]` ⏩ `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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiInlineEdit] Create placeholder prop for Inline Edit compoents
3 participants