Skip to content

[EuiFilePicker] Fix can still be cleared when disabled#5603

Merged
thompsongl merged 3 commits intoelastic:mainfrom
ayoung19:main
Feb 4, 2022
Merged

[EuiFilePicker] Fix can still be cleared when disabled#5603
thompsongl merged 3 commits intoelastic:mainfrom
ayoung19:main

Conversation

@ayoung19
Copy link
Copy Markdown
Contributor

@ayoung19 ayoung19 commented Feb 4, 2022 •
edited
Loading

Summary

I simply passed down the disabled prop in EuiFilePicker into it's child button components to disallow removing the files when disabled. This doesn't fix the use case of programmatically removing the file but that shouldn't matter at all since that's the expected behavior where users should be implementing that themselves.

Above approach introduced some inconsistent UI behavior so instead the clearButton is actually removed from the UI entirely when EuiFilePicker is disabled.

image

image

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 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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 4, 2022

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

@cla-checker-service
Copy link
Copy Markdown

cla-checker-service bot commented Feb 4, 2022 •
edited
Loading

💚 CLA has been signed

@ayoung19 ayoung19 mentioned this pull request Feb 4, 2022
Closed
@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Feb 4, 2022

jenkins test this

@ayoung19
Copy link
Copy Markdown
Contributor Author

ayoung19 commented Feb 4, 2022 •
edited
Loading

Hey Greg! Thanks for starting up the tests. I actually realized just now though that when using large={false} for the file picker, the fixes from this pr still works but the style of the button wrapping the "cross" icon computes cursor: pointer even when disabled. I'm guessing this is some kind of css overwrite and probably outside of the scope of this particular issue right? Or should I try fix that in this PR?

Here is a screenshot to hopefully clarify everything:
image

@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Feb 4, 2022

Hey @ayoung19!
Thanks for catching that. I suggest we not render the remove button at all when disabled. That would solve both cases and (I think) make it even more clear that the component is not interactive.

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 4, 2022

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

@ayoung19
Copy link
Copy Markdown
Contributor Author

ayoung19 commented Feb 4, 2022 •
edited
Loading

That's an awesome suggestion and makes perfect sense! And it actually matches the behavior of EuiFieldSearch (clear button is removed when disabled). Seems like a win in both code obtrusiveness and ui clarity!

@cee-chen cee-chen linked an issue Feb 4, 2022 that may be closed by this pull request
[EuiFilePicker] can still be cleared when disabled #5564
Closed
@ayoung19
Copy link
Copy Markdown
Contributor Author

ayoung19 commented Feb 4, 2022

Functionality has been added, I think tests need to be reran.

@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Feb 4, 2022

Jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Feb 4, 2022

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

thompsongl
thompsongl approved these changes Feb 4, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

Perfect! Verified the fix with the preview deployment.

Thanks, @ayoung19!

@thompsongl thompsongl enabled auto-merge (squash) February 4, 2022 17:23
@thompsongl thompsongl merged commit 966bb88 into elastic:main Feb 4, 2022
@cee-chen
Copy link
Copy Markdown
Contributor

cee-chen commented Feb 4, 2022 •
edited
Loading

(not urgent and fix is fine, mentioning for completeness) I'm kinda surprised we didn't have to update any test snapshots for this - do we not have a Jest unit test for when disabled is passed to EuiFilePicker?

@ayoung19
Copy link
Copy Markdown
Contributor Author

ayoung19 commented Feb 4, 2022 •
edited
Loading

Yeah I saw that file_picker.test.tsx didn’t have anything except checking that it was rendered so I figured it was fine.

@breehall breehall mentioned this pull request Feb 8, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@thompsongl thompsongl thompsongl 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.

[EuiFilePicker] can still be cleared when disabled

4 participants

@ayoung19 @kibanamachine @thompsongl @cee-chen