Skip to content

[EuiColorPicker] onBlur and data-test-subj#4822

Merged
thompsongl merged 7 commits intoelastic:masterfrom
thompsongl:4803-4792-colorpicker
May 27, 2021
Merged

[EuiColorPicker] onBlur and data-test-subj#4822
thompsongl merged 7 commits intoelastic:masterfrom
thompsongl:4803-4792-colorpicker

Conversation

@thompsongl
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl commented May 25, 2021

Summary

Fixes #4803 and fixes #4792, two bugs related to prop propagation.

  • onBlur callback will get called after leaving the main input
  • data-test-subj configuration is respected

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

  • Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for the any docs examples

  • Added or updated jest 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

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

@kibanamachine
Copy link
Copy Markdown

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

autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon"
data-test-subj="colorPickerAnchor"
data-test-subj="test subject string"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Did you mean to remove the old one? I'd suspect you'd just want to append any custom DTS? Otherwise I'd consider this a breaking change as there might be consumers targeting the old manual DTS.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is more just validation that a DTS passed by a consumer will get used; test subject string should've been here previously but we were ignoring the prop and using the manual default.
We could consider this a breaking change because I did switch to using a generated ID rather than colorPickerAnchor

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Right but should it be overriding or appending like with do with custom classNames?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Oh good point; we could append. I forgot that findTestSubject uses '~=', // Exists in a space-separated list by default for selector matching. I'll update.

Would you also like to revert the generated ID change to avoid the breaking change?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think the manual string is a good approach so that if consumers want to target the EUI supplied one, they can and it doesn't change every render/test run. But the previous one lacked the eui prefix, so I'd still make the breaking change but use euiColorPickerAnchor (or something most appropriate but with the eui prefix).

@kibanamachine
Copy link
Copy Markdown

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

Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Code LGTM. Didn't test the the actual onBlur action.

};

const handleOnBlur = () => {
if (!isColorSelectorShown && onBlur) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Curious why the caveat of if !isColorSelectorShown here? Maybe just add a comment for the future?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Prevents onBlur from being called twice if the popover is open. I'll add a comment 👍

@kibanamachine
Copy link
Copy Markdown

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

@thompsongl thompsongl merged commit 0b6b58f into elastic:master May 27, 2021
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.

[EuiColorPicker] onBlur is not triggered if the popup is not open [EuiColorPicker] data-test-subj is ignored on rendering

3 participants