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

breehall · 2023-09-05T20:56:52Z

Closes #7084 || Previous PR: #7117

Summary

AllowsEuiInlineEditText and EuiInlineEditTitle title to both be used as controlled components by creating three new props (value, onChange, onCancel).
Updates the props of inline edit & friends to exclusively accept defaultValue OR controlled props (value, onChange, onCancel)
Clean up EuiInlineEditText and EuiInlineEditTitle by removing unneeded and duplicated props.
Adds test cases to ensure new logic & controlled props are covered by test cases

QA

View the new controlled component section in the Inline Edit docs

Confirm you can go from read mode to edit mode by clicking on the read mode button
Make changes in edit mode and save -> You should find your new text, not the default Hello World!
Go back to edit mode to make changes and cancel -> You should find the previous text, not your most recent changes
There should be no visual differences in this example vs. the other inline edit sections

General checklist

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
A changelog entry exists and is marked appropriately

…ontrolled component

- Created a DRY useMemo hook to handle switching/updating the value to be used in both read mode/edit mode and between controlled vs uncontrolled configurations - Replace readMode/editMode state variables with useMemo value - Pass new onChange & onCancel props to their respective functions within Inline Edit Form

- Remove the unnecessary passing of inline edit form props from EuiInlineEditText and EuiInlineEditTitle. These components we both importing props like defaultValue, placeholder, etc from InlineEditForm just send them back unchanged. The props transformed / changed within Text and Title remain while the others have been removed. - Spread {...rest} to the InlineEditForm container div. It was being passed by Text and Title, but was never used. - Updated snapshots to relflect the above change

…g a section dedicated to the props specific to creating a controlled component

kibanamachine · 2023-09-05T21:23:38Z

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

kibanamachine · 2023-09-05T23:14:48Z

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

src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap

src/components/inline_edit/inline_edit_text.tsx

src/components/inline_edit/inline_edit_title.tsx

src/components/inline_edit/inline_edit_form.tsx

cee-chen · 2023-09-06T20:05:07Z

src/components/inline_edit/inline_edit_form.tsx

  HTMLAttributes,
  MouseEvent,
  KeyboardEvent,
 } from 'react';
 import classNames from 'classnames';

-import { CommonProps } from '../common';
+import { CommonProps, ExclusiveUnion } from '../common';


Awesome that we got ExclusiveUnion to work after all! I was a little worried it would turn out to be a headache

src/components/inline_edit/inline_edit_form.test.tsx

src/components/inline_edit/inline_edit_form.tsx

src/components/inline_edit/inline_edit_form.test.tsx

src-docs/src/views/inline_edit/inline_edit_controlled.tsx

src-docs/src/views/inline_edit/inline_edit_example.js

- Inline Edit Text & Title - add the isReadOnly prop back (it was removed when refactoring these two child components by accident) - Architecture updates from PR feedback

…g inline edit as a controlled component

- Update unit tests to have more specific names and test assertions - Added an additional test for onSave validation

kibanamachine · 2023-09-07T18:46:34Z

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

src/components/inline_edit/inline_edit_form.test.tsx

src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap

- Add undefined fallback for placeholder for snapshot readability - Unit test copy and functionality updates

kibanamachine · 2023-09-07T21:07:35Z

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

src/components/inline_edit/inline_edit_form.test.tsx

…t test cases for clarity in functionality

kibanamachine · 2023-09-08T20:46:57Z

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

cee-chen

🎉 Wahoo! Thanks for taking the time to do multiple feedback rounds Bree. This approach feels clean, well-tested, and well-typed. Awesome implementation all around!

upcoming_changelogs/7157.md

kibanamachine · 2023-09-08T21:39:08Z

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

elasticmachine · 2023-09-08T21:58:58Z

💚 Build Succeeded

Buildkite Build
Commit: 4bacd73

History

💚 Build #562 succeeded f98c6fb
💚 Build #557 succeeded a180fb1
💚 Build #553 succeeded 627b33d
💚 Build #526 succeeded c0f031c
💚 Build #524 succeeded 08c5c30

EUI `88.2.0` ➡️ `88.3.0` ## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0) - `EuiGlobalToastList` now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the `showClearAllButtonAt` prop ([#7111](elastic/eui#7111)) - Added an optional `onClearAllToasts` callback to `EuiGlobalToastList` ([#7111](elastic/eui#7111)) - Added the `value`, `onChange`, and `onCancel` props that allow `EuiInlineEdit` to be used as a controlled component ([#7157](elastic/eui#7157)) - Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`, `transitionTopIn`, and `transitionTopOut` icon glyphs. ([#7168](elastic/eui#7168)) **Bug fixes** - Fixed `EuiInlineEdit` components to correctly spread `...rest` attributes to the parent wrapper ([#7157](elastic/eui#7157)) - Fixed `EuiListGroupItem` to correctly render the `extraAction` button when `showToolTip` is also passed ([#7159](elastic/eui#7159)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.3.0 ([#7125](elastic/eui#7125)) - Updated `@types/lodash` to v4.14.198 ([#7126](elastic/eui#7126)) **Accessibility** - `EuiAccordion` now correctly respects reduced motion settings ([#7161](elastic/eui#7161)) - `EuiAccordion` now shows a focus outline to keyboard users around its revealed children on open ([#7161](elastic/eui#7161)) **CSS-in-JS conversions** - Converted `EuiSplitPanel` to Emotion ([#7172](elastic/eui#7172)) ⚠️ As a quick heads up, serverless tests appear to have been extremely flake/failure-prone the last couple weeks, particularly Cypress tests. We've evaluated the listed failures and fixed ones that were related to changes in this PR, and we're relatively confident the remaining failures are not related to changes from EUI. Please let us know if you think this is not the case. --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Jon <jon@elastic.co>

⚠️ NOTE: This PR is a copy of #166292 (which was reverted due to failing Storybook builds). This is the same exact PR but with Storybook building fixed. --- EUI `88.2.0` ➡️ `88.3.0` ## [`88.3.0`](https://github.com/elastic/eui/tree/v88.3.0) - `EuiGlobalToastList` now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the `showClearAllButtonAt` prop ([#7111](elastic/eui#7111)) - Added an optional `onClearAllToasts` callback to `EuiGlobalToastList` ([#7111](elastic/eui#7111)) - Added the `value`, `onChange`, and `onCancel` props that allow `EuiInlineEdit` to be used as a controlled component ([#7157](elastic/eui#7157)) - Added `grabOmnidirectional`, `transitionLeftIn`, `transitionLeftOut`, `transitionTopIn`, and `transitionTopOut` icon glyphs. ([#7168](elastic/eui#7168)) **Bug fixes** - Fixed `EuiInlineEdit` components to correctly spread `...rest` attributes to the parent wrapper ([#7157](elastic/eui#7157)) - Fixed `EuiListGroupItem` to correctly render the `extraAction` button when `showToolTip` is also passed ([#7159](elastic/eui#7159)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.3.0 ([#7125](elastic/eui#7125)) - Updated `@types/lodash` to v4.14.198 ([#7126](elastic/eui#7126)) **Accessibility** - `EuiAccordion` now correctly respects reduced motion settings ([#7161](elastic/eui#7161)) - `EuiAccordion` now shows a focus outline to keyboard users around its revealed children on open ([#7161](elastic/eui#7161)) **CSS-in-JS conversions** - Converted `EuiSplitPanel` to Emotion ([#7172](elastic/eui#7172)) --------- Co-authored-by: Bree Hall <briannajdhall@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co>

CoenWarmer · 2023-10-26T14:45:53Z

Thanks for this @breehall!!

breehall added 5 commits August 25, 2023 09:40

[Setup] Create three new props to allow inline edit to be used as a c…

39b7818

…ontrolled component

[EuiInlineEdit] Update the test cases for Inline Edit Form by creatin…

a643cc5

…g a section dedicated to the props specific to creating a controlled component

[InlineEdit] Create documentation for controlled component usage

08c5c30

breehall changed the title ~~Eui inline edit/controlled component~~ [EuiInlineEdit] Allow EuiInlineEdit to be used as a controlled component Sep 5, 2023

breehall mentioned this pull request Sep 5, 2023

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

Closed

11 tasks

breehall added 2 commits September 5, 2023 18:36

[Clean up] Add comments to new props

977b3d5

Changelog

c0f031c

breehall requested a review from cee-chen September 5, 2023 22:51

breehall marked this pull request as ready for review September 5, 2023 22:51