Skip to content

[FilePicker] Update icon type from 'importAction' to 'export'#9351

Merged
weronikaolejniczak merged 8 commits intoelastic:mainfrom
ragini-pandey:fix/9013-file-picker-icon
Feb 6, 2026
Merged

[FilePicker] Update icon type from 'importAction' to 'export'#9351
weronikaolejniczak merged 8 commits intoelastic:mainfrom
ragini-pandey:fix/9013-file-picker-icon

Conversation

@ragini-pandey
Copy link
Copy Markdown
Contributor

@ragini-pandey ragini-pandey commented Feb 2, 2026 •
edited by JasonStoltz
Loading

Summary

Changed the default icon for EuiFilePicker from importAction to export. The export icon features an upward-pointing arrow which better represents the "upload" action that the file picker performs.

Files changed:

  • packages/eui/src/components/form/file_picker/file_picker.tsx - Updated icon type from importAction to export
  • packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap - Updated snapshot to reflect the icon change
  • packages/eui/changelogs/upcoming/9013.md - Added changelog entry

Why are we making this change?

Closes #9013

The previous importAction icon (arrow pointing down) was misleading for a file upload component. As discussed in elastic/kibana#232845, the conventional usage of these icons is:

  • Arrow pointing up → "uploading" action (pushing data into the system)
  • Arrow pointing down → "downloading" action (pulling data from the system)

Since EuiFilePicker is used to upload files into the system, the export icon (arrow pointing up) is the correct choice.

Screenshots

Before After
Screenshot 2026-03-02 at 12 36 08 PM Screenshot 2026-03-02 at 12 38 31 PM

Impact to users

  • Non-breaking change: This is a visual-only change to the default icon
  • No action required: Users do not need to make any code changes
  • Visual difference: The file picker icon will now show an upward arrow instead of a downward arrow, which better communicates the upload action

QA

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
    • Added documentation - N/A (no new props or API changes)
    • Props have proper autodocs - N/A
    • Checked Code Sandbox works for any docs examples - N/A
  • Code quality checklist
    • Added or updated jest and cypress tests - Updated snapshot
    • Updated visual regression tests - N/A (icon change is intentional)
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label - N/A (not a breaking change)
    • If the changes unblock an issue in a different repo, smoke tested carefully
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes

@ragini-pandey ragini-pandey requested a review from a team as a code owner February 2, 2026 11:10
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 2, 2026

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

@github-actions github-actions bot added the community contribution (Don't delete - used for automation) label Feb 2, 2026
weronikaolejniczak
weronikaolejniczak reviewed Feb 2, 2026
View reviewed changes
@ragini-pandey ragini-pandey force-pushed the fix/9013-file-picker-icon branch from 0a20e86 to 82b8249 Compare February 2, 2026 11:19
weronikaolejniczak
weronikaolejniczak reviewed Feb 2, 2026
View reviewed changes
@weronikaolejniczak
Copy link
Copy Markdown
Contributor

weronikaolejniczak commented Feb 2, 2026

buildkite test this

@weronikaolejniczak
Copy link
Copy Markdown
Contributor

weronikaolejniczak commented Feb 2, 2026

@JoseLuisGJ can you verify this is the expected glyph?

Before After
Screenshot 2026-02-02 at 13 32 27 Screenshot 2026-02-02 at 13 31 53

JoseLuisGJ
JoseLuisGJ reviewed Feb 4, 2026
View reviewed changes
weronikaolejniczak
weronikaolejniczak reviewed Feb 4, 2026
View reviewed changes
@weronikaolejniczak
Copy link
Copy Markdown
Contributor

weronikaolejniczak commented Feb 4, 2026

Whenever we make changes that affect how components look, we run visual regression tests. This requires Docker and Storybook running, and this command: yarn workspace @elastic/eui test-visual-regression update --storiesFilter=EuiFilePicker. It's not something we can easily run in CI. I went ahead and pushed the updated reference images for you on 2f59aa6 😄 Once the CI passes, we can merge!

@ragini-pandey
Copy link
Copy Markdown
Contributor Author

ragini-pandey commented Feb 4, 2026

Whenever we make changes that affect how components look, we run visual regression tests. This requires Docker and Storybook running, and this command: yarn workspace @elastic/eui test-visual-regression update --storiesFilter=EuiFilePicker. It's not something we can easily run in CI. I went ahead and pushed the updated reference images for you on 2f59aa6 😄 Once the CI passes, we can merge!

I wasn’t aware of this before.
Thanks for explaining and for pushing the updated reference images 🙌
I’ll make sure to handle this correctly in upcoming PRs

@weronikaolejniczak
Copy link
Copy Markdown
Contributor

weronikaolejniczak commented Feb 5, 2026

buildkite test this

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Feb 5, 2026

💚 Build Succeeded

History

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Feb 5, 2026

💚 Build Succeeded

History

weronikaolejniczak
weronikaolejniczak approved these changes Feb 6, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

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

Thank you for contributing, @ragini-pandey 🙏🏻 It's a great PR, looking forward to seeing more!

@weronikaolejniczak weronikaolejniczak merged commit 0bfb13e into elastic:main Feb 6, 2026
5 checks passed
@mgadewoll mgadewoll mentioned this pull request Feb 9, 2026
Merged
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 10, 2026
@mgadewoll
Upgrade EUI to v112.3.0 (#252315)
57b3c88 
## Dependency updates

- `@elastic/eui`: v112.2.0 ⏩ v112.3.0
- `@elastic/eslint-plugin-eui`: v2.7.0 ⏩ v2.8.0

---

## Package updates

### `@elastic/eui`
[v112.3.0](https://github.com/elastic/eui/releases/tag/v112.3.0)

- Added new `server` icon.
([#9355](elastic/eui#9355))
- Added `className` support to `EuiMarkdownEditor`'s `toolbarProps` for
custom toolbar styling
([#9349](elastic/eui#9349))
- Updated `EuiFilePicker` to use the `upload` icon to better indicate
uploads. ([#9351](elastic/eui#9351))
- Exported the flyout system store singleton and added an event observer
for emitting close session events
([#9347](elastic/eui#9347))
- Updated `EuiIcon` to use standard dynamic imports for icon assets,
enabling native support for modern bundlers (Rollup, Parcel) and
improving initial load performance
([#9342](elastic/eui#9342))

**Bug fixes**

- Fixed a potential crash in the flyout system: due to asynchronous
state updates and React's batching behavior, it was possible to
experience a crash when closing a managed flyout.
([#9356](elastic/eui#9356))

### `@elastic/eslint-plugin-eui` v2.8.0

- Added new `icon-accessibility-rules` rule.
([#9357](elastic/eui#9357))
- Added new `badge-accessibility-rules` rule.
([#9354](elastic/eui#9354))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JoseLuisGJ JoseLuisGJ JoseLuisGJ approved these changes

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees

No one assigned

Labels

community contribution (Don't delete - used for automation)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Change EuiFilePicker icon to "export"

4 participants

@ragini-pandey @weronikaolejniczak @elasticmachine @JoseLuisGJ