[EuiFilePicker] Fix can still be cleared when disabled

[ayoung19]

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.

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]

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]

💚 CLA has been signed

[thompsongl]

jenkins test this

[ayoung19]

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:

[thompsongl]

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]

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

[ayoung19]

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!

[ayoung19]

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

[thompsongl]

Jenkins test this

[kibanamachine]

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

[thompsongl]

Perfect! Verified the fix with the preview deployment.

Thanks, @ayoung19!

[cee-chen]

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

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