Icons: add new "send" icon #64130
Merged
Icons: add new "send" icon #64130
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
simison
added
[Type] Enhancement
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @javierarce. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
simison
added
the
Needs Figma Update
|
If merged, Figma needs updating the icon from "Explored" to the "Generic" section. Who should I attribute as the designer? |
|
Size Change: 0 B Total Size: 1.76 MB ℹ️ View Unchanged
|
|
As far as design goes, the horizontal version in chat examples seems to work well in small size, even in outlined variation as seen with Gmail . |
|
Nice one, we definitely need this icon. However we don't often use that particular angle, which is not quite 45 degrees. There's also something about the curve on the tail end of the plane, and the stroke widths, that doesn't feel quite right. Here's a remix:
What do you think? If you're into it, here are the vectors: Separate note, ideally the SVGs are flattened to have a single |
|
Excellent! Any difference using I'll update screenshots in the description, for the history: Old: New: |
I think we could use the 45º angle. As @jasmussen said, it's not very common, but it's definitely something we could consider if it makes sense. To me, it does, because the direction implies we are sending something up to the sky. But more important than the angle, I think we should add some border radius to the edges to match the roundness of other icons. Here's a quick mockup:
And I added my proposals here:
|
|
I don't feel strongly about the angle, even if I prefer it straight. Happy to defer. I'm not convinced about the roundness, though. If you look at the other examples you cite, the roundness is applied sparingly, e.g. not to the "Edit" icon at all. So the comparison doesn't work too great to me. However in comparison with my quick sketch, your is definitely less "sharp", so that makes sense. I'm not sold on this curve though:
When viewed at 24x24 it's too small to notice, really. Not sure if the following is any better, but it's a quick test. |
|
Once the icon is finalized, we will need to remove the hardcoded For example, given the current SVG, the following SVG should also display correctly: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.7 3.59 22.322 12 3.7 20.41 6.704 12 3.7 3.59Zm4.329 9.16L6.3 17.59l10.717-4.84H8.03Zm8.988-1.5H8.03L6.3 6.41l10.717 4.84Z"
/>
</svg>Update: Since this is actually a React element, <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M3.7 3.59 22.322 12 3.7 20.41 6.704 12 3.7 3.59Zm4.329 9.16L6.3 17.59l10.717-4.84H8.03Zm8.988-1.5H8.03L6.3 6.41l10.717 4.84Z"
/>
</SVG> |
|
These icons are easy to update, and will be even easier in the future, so let's not overthink this. Based on Javi and Aki's feedback, I pushed this version. |
|
@t-hamano @jasmussen thanks! I addressed the feedback, and I think this is ready now. Confirmed colour still works in the storybook: 
|
jasmussen
approved these changes
Aug 1, 2024
t-hamano
approved these changes
Aug 1, 2024
|
Merged but if we'd like to tweak designs, happy to open follow-up PR. Just lemme know. |
|
You'll probably need to use strict formatting, which means you'll need to paste the props code exactly as it appears in this comment in order for co-author avatars to appear in the commits.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds a new "send" icon to be used by WordPress plugins that might be doing anything "sending" related, such as chats, emails, newsletters, CRM, comments, form submissions, debug messages, etc.
Pulling from WordPress Figma design library's icon explorations.Update: redesigned below.Why?
"Send" is a fairly typical action in different admin and frontend UIs, and a paper plane has become a common symbol for the action. E.g. Apple Mail uses the symbol:
So does Google Gmail:
Various chat apps also use paperplane:
Telegram
WhatsApp
FB Messenger
Example usage in the plugin's feature to send blog posts as emails to yourself:
How?
Testing Instructions
npm run storybook:devTesting Instructions for Keyboard
Screenshots or screencast