Skip to content

DropZone: Allow overriding the default icon #70236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
May 28, 2025
Merged

DropZone: Allow overriding the default icon #70236

merged 3 commits into from
May 28, 2025

Conversation

Mamaduka
Copy link
Member

What?

Closes #14335.

PR introduces a new icon prop for the DropZone component and allows overriding the default upload icon.

This is a slightly different approach from the one proposed in the issue, but it allows content modification without consumers needing to worry about custom CSS.

Testing Instructions

  1. Run Storybook in dev mode - npm run storybook:dev
  2. Test new icon prop for DropZone component.

Testing Instructions for Keyboard

Same.

Screenshots or screencast

CleanShot.2025-05-28.at.13.49.47.mp4

@Mamaduka Mamaduka self-assigned this May 28, 2025
@Mamaduka Mamaduka requested a review from ajitbohra as a code owner May 28, 2025 09:51
@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels May 28, 2025
@Mamaduka Mamaduka requested a review from swissspidy May 28, 2025 09:51
@github-actions GitHub Actions
Copy link

github-actions bot commented May 28, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@Mamaduka Mamaduka requested review from tyxla and t-hamano May 28, 2025 10:00
t-hamano
t-hamano approved these changes May 28, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM! As with labels, I think it makes sense to allow the default icon to be overridden.

packages/components/src/drop-zone/types.ts Outdated
Comment on lines 8 to 10
/**
* An icon to be shown within the drop zone area.
*/
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/**
* An icon to be shown within the drop zone area.
*/
/**
* An icon to be shown within the drop zone area.
*
* @default "upload"
*/

I'm not sure if this is the right way to express a JSX element as a default value, but I followed the format of the DropdownMenu component:

gutenberg/packages/components/src/dropdown-menu/types.ts

Lines 65 to 71 in f1ebacf

export type DropdownMenuProps = {
/**
* The icon to be shown in the collapsed menu button.
*
* @default "menu"
*/
icon?: IconProps[ 'icon' ] | null;

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks, I was checking other examples, but didn't see this one.

P.S. It seems that icon prop types are defined in different ways. I initially tried using IconProps, but I was getting a type error. It might be a good idea to standardize this in the future.

cc @WordPress/gutenberg-components

@Mamaduka Mamaduka merged commit 1572d8e into trunk May 28, 2025
62 of 63 checks passed
@Mamaduka Mamaduka deleted the add/drop-zone-icon-support branch May 28, 2025 13:25
@github-actions github-actions bot added this to the Gutenberg 21.0 milestone May 28, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@Mamaduka @t-hamano
@youknowriad @swissspidy @chriszarate
DropZone: Allow overriding the default icon (WordPress#70236)
1eac94c 
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@swissspidy swissspidy Awaiting requested review from swissspidy

@tyxla tyxla Awaiting requested review from tyxla

Assignees

@Mamaduka Mamaduka

Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 21.0
Development

Successfully merging this pull request may close these issues.

DropZone: Allow overriding children
2 participants
@Mamaduka @t-hamano