Skip to content
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.

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

Add improved "Group" and "Ungroup" icons #16001

Merged
merged 2 commits into from Jun 7, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jun 5, 2019

Closes #15602. Followup from #14908.

This PR replaces the Group and Ungroup icons with those decided on in #15602 (comment). It replaces both the action icons in the ellipsis menu, and also the Group block icon itself for consistency.

Screenshots

Screen Shot 2019-06-05 at 8 32 56 AM

Screen Shot 2019-06-05 at 8 32 33 AM

Screen Shot 2019-06-05 at 8 30 26 AM

Screen Shot 2019-06-05 at 8 41 21 AM

@getdave

getdave approved these changes Jun 5, 2019

Copy link
Contributor

left a comment

I'll leave the visual and design side to those who are better placed to comment. Technically I can't see anything that would block this being merged.

@getdave

This comment has been minimized.

Copy link
Contributor

commented Jun 6, 2019

Is this going to be merged? 😀

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jun 6, 2019

😄 Just waiting for a design review too. @mapk or @jasmussen, do you have a sec to take a look?

@mapk

mapk approved these changes Jun 7, 2019

Copy link
Contributor

left a comment

:shipit:

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2019

These are nice, and definitely good enough to ship. No objections.

Since you ask, I do kind of wish the "ungroup" had a more direct relation to group, kind of like how link and unlink have in the material set:

Screenshot 2019-06-07 at 08 17 22

I don't know that the diagonal cross over the group would work here, as it seems so destructive. But I do like the connection between the two. It's also interesting to see the noun project's page for this term: https://thenounproject.com/term/ungroup/ — lots of different interpretations.

But those are mostly musings, and one should be careful with those because otherwise things can devolve into fence painting. The truth is, these icons are good, and are going to be shown next to labels, so let's ship it. But lets also be open to shower-ideas for futher improvements, should such be possible!

@sarahmonster

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

These make sense to me. Using the icons consistently across where this action appears should help connect the two different entry points for users, making it easier to understand the behaviour.

🚢

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jun 7, 2019

Since you ask, I do kind of wish the "ungroup" had a more direct relation to group, kind of like how link and unlink have in the material set:

Yeah, fully agree. :/ I couldn't quite get that crossed-out approach to work here. But I think we can sort this out in another round though.

Anyway, thanks folks! I'll merge these in.

@kjellr kjellr merged commit 9febd55 into master Jun 7, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@kjellr kjellr deleted the update/group-icons branch Jun 7, 2019

@kjellr kjellr added this to the Gutenberg 5.9 milestone Jun 7, 2019

@@ -4,5 +4,5 @@
import { Path, SVG } from '@wordpress/components';

export default (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>
<SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill-rule="evenodd" clip-rule="evenodd" d="M9 8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-1v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1V8zm2 3h4V9h-4v2zm2 2H9v2h4v-2z" /><Path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.732A2 2 0 1 1 4.732 2h14.536A2 2 0 1 1 22 4.732v14.536A2 2 0 1 1 19.268 22H4.732A2 2 0 1 1 2 19.268V4.732zM4.732 4h14.536c.175.304.428.557.732.732v14.536a2.01 2.01 0 0 0-.732.732H4.732A2.01 2.01 0 0 0 4 19.268V4.732A2.01 2.01 0 0 0 4.732 4z" /></SVG>

This comment has been minimized.

Copy link
@aduth

aduth Jun 11, 2019

Member

fill-rule and clip-rule are not valid names for props. When running with the SCRIPT_DEBUG constant, you will see errors log to the developer tools console:

Warning: Invalid DOM property fill-rule. Did you mean fillRule?

Warning: Invalid DOM property clip-rule. Did you mean clipRule?

(The message includes the respective solution for each)

React uses DOM property names for elements, not the HTML element attribute names. This is the same reason we assign classes as className and not class.

See also:

This comment has been minimized.

Copy link
@kjellr

kjellr Jun 11, 2019

Author Contributor

Thanks for catching that! I've submitted #16096 to correct the issue.

nicolad added a commit to nicolad/gutenberg that referenced this pull request Jun 15, 2019

Add improved "Group" and "Ungroup" icons (WordPress#16001)
* Update Group block icon

* Update Group/Ungroup action icons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.