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.

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

Try: G2-inspired iconography #20464

Merged
merged 19 commits into from
Mar 5, 2020
Merged

Try: G2-inspired iconography #20464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
5f41da5
Icons, batch 1
Feb 26, 2020
a1af439
Batch 2.
Feb 26, 2020
4ad8629
Icon tweaks.
Feb 26, 2020
e7e91d8
Fix tools menu.
jasmussen Mar 3, 2020
3432d81
Use ChevronDown icon.
jasmussen Mar 3, 2020
70e2ff4
Polish color picker in nav menu and retire dropdown mixin.
jasmussen Mar 3, 2020
302ae33
Polish sibling inserter.
jasmussen Mar 3, 2020
2f7d02d
Unify Buttons, Navigation, Social Links inserter CSS.
jasmussen Mar 3, 2020
f9611be
Refine the unified inserter look.
jasmussen Mar 3, 2020
64e2969
Another batch of icons.
jasmussen Mar 3, 2020
0d34960
Last batch.
jasmussen Mar 3, 2020
a0ee569
Update plus icon, library colors, navigation icon.
jasmussen Mar 4, 2020
9de89ca
Fix breadcrumb.
jasmussen Mar 4, 2020
5fdff50
Polish menus and checks.
jasmussen Mar 4, 2020
5018fed
Fix tests
youknowriad Mar 4, 2020
d09b186
Non-icon-package-feedback.
jasmussen Mar 4, 2020
87290be
Merge branch 'try/g2-iconography' of github.com:WordPress/gutenberg i…
jasmussen Mar 4, 2020
6865c60
Remove useless files
youknowriad Mar 5, 2020
79e9042
Checkbox.
jasmussen Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/base-styles/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ $white: #fff;

// G2 colors.
$dark-gray-primary: #1e1e1e;
$medium-gray-text: #757575;
$medium-gray-text: #757575; // Meets 4.6:1 text contrast.
$light-gray-ui: #949494; // Meets 3:1 UI contrast.
$light-gray-secondary: #ccc;
$light-gray-tertiary: #e7e8e9;
$theme-color: theme(button);
Expand Down
28 changes: 6 additions & 22 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,22 +302,6 @@
text-align: center;
}

@mixin dropdown-arrow() {
content: "";
pointer-events: none;
display: block;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 5px solid;
margin-left: $grid-unit-05;

// This gives the icon space on the right side consistent with the material
// icon standards.
margin-right: 2px;
}


/**
* Allows users to opt-out of animations via OS-level preferences.
Expand Down Expand Up @@ -417,13 +401,13 @@

input[type="checkbox"],
input[type="radio"] {
border: $border-width + 1 solid $dark-gray-300;
margin-right: 12px;
border: $border-width + 1 solid $medium-gray-text;
margin-right: $grid-unit-15;
transition: none;

&:focus {
border-color: $dark-gray-300;
box-shadow: 0 0 0 1px $dark-gray-300;
border-color: $medium-gray-text;
box-shadow: 0 0 0 1px $medium-gray-text;
}

&:checked {
Expand All @@ -432,12 +416,12 @@
}

&:checked:focus {
box-shadow: 0 0 0 2px $dark-gray-500;
box-shadow: 0 0 0 2px $medium-gray-text;
}
}

input[type="checkbox"] {
border-radius: $radius-round-rectangle / 2;
border-radius: $radius-block-ui;

&:checked::before,
&[aria-checked="mixed"]::before {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/alignment-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function AlignmentToolbar( props ) {
return (
<Toolbar
isCollapsed={ isCollapsed }
icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
icon={ activeAlignment ? activeAlignment.icon : alignLeft }
label={ label }
popoverProps={ POPOVER_PROPS }
controls={ alignmentControls.map( ( control ) => {
Expand Down
28 changes: 14 additions & 14 deletions packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
Object {
"align": "custom-left",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
/>
</SVG>,
"isActive": false,
Expand All @@ -22,11 +22,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
Object {
"align": "custom-right",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M14 5V3H6v2h8zm3 4V7H3v2h14zm-3 4v-2H6v2h8zm3 4v-2H3v2h14z"
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
/>
</SVG>,
"isActive": true,
Expand All @@ -38,11 +38,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
}
icon={
<SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M14 5V3H6v2h8zm3 4V7H3v2h14zm-3 4v-2H6v2h8zm3 4v-2H3v2h14z"
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
/>
</SVG>
}
Expand All @@ -63,11 +63,11 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
Object {
"align": "left",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
/>
</SVG>,
"isActive": true,
Expand All @@ -78,11 +78,11 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
Object {
"align": "center",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M14 5V3H6v2h8zm3 4V7H3v2h14zm-3 4v-2H6v2h8zm3 4v-2H3v2h14z"
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
/>
</SVG>,
"isActive": false,
Expand All @@ -93,11 +93,11 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
Object {
"align": "right",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M17 5V3H8v2h9zm0 4V7H3v2h14zm0 4v-2H8v2h9zm0 4v-2H3v2h14z"
d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
/>
</SVG>,
"isActive": false,
Expand All @@ -109,11 +109,11 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
}
icon={
<SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
/>
</SVG>
}
Expand Down
16 changes: 8 additions & 8 deletions ...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
Array [
Object {
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M3 5h14V3H3v2zm9 8V7H3v6h9zm2-4h3V7h-3v2zm0 4h3v-2h-3v2zM3 17h14v-2H3v2z"
d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
/>
</SVG>,
"isActive": true,
Expand All @@ -20,11 +20,11 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
},
Object {
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z"
d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
/>
</SVG>,
"isActive": false,
Expand All @@ -34,11 +34,11 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
},
Object {
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M3 5h14V3H3v2zm0 4h3V7H3v2zm14 4V7H8v6h9zM3 13h3v-2H3v2zm0 4h14v-2H3v2z"
d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
/>
</SVG>,
"isActive": false,
Expand All @@ -50,11 +50,11 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
}
icon={
<SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M3 5h14V3H3v2zm9 8V7H3v6h9zm2-4h3V7h-3v2zm0 4h3v-2h-3v2zM3 17h14v-2H3v2z"
d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
/>
</SVG>
}
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-breadcrumb/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
line-height: $button-size-small;
padding: 0;

&:hover {
&:hover:not(:disabled) {
text-decoration: underline;
box-shadow: none;
}

&:focus {
Expand Down
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,35 +21,35 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
Object {
"align": "left",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
/>
</SVG>,
"title": "Align left",
},
Object {
"align": "center",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M14 5V3H6v2h8zm3 4V7H3v2h14zm-3 4v-2H6v2h8zm3 4v-2H3v2h14z"
d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
/>
</SVG>,
"title": "Align center",
},
Object {
"align": "right",
"icon": <SVG
viewBox="-2 -2 24 24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<Path
d="M17 5V3H8v2h9zm0 4V7H3v2h14zm0 4v-2H8v2h9zm0 4v-2H3v2h14z"
d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
/>
</SVG>,
"title": "Align right",
Expand Down
13 changes: 7 additions & 6 deletions packages/block-editor/src/components/block-list-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
// These styles are only applied to the appender when it appears inside of a block.
// Otherwise the default appender may be improperly positioned in some themes.
.block-editor-block-list__block .block-list-appender {
margin: $block-padding 0;
margin: $grid-unit-10 0;

// Add additional margin to the appender when inside a group with a background color.
// If changing this, be sure to sync up with group/editor.scss line 13.
.has-background & {
margin: ($block-padding*2 + $block-spacing) $block-padding;
margin: ($grid-unit-20 + $block-spacing) $grid-unit-10;
}
}

.block-list-appender.is-drop-target > div::before {
content: "";
position: absolute;
right: -$block-padding;
left: -$block-padding;
top: -$block-padding;
bottom: -$block-padding;
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
right: -$grid-unit-10;
left: -$grid-unit-10;
top: -$grid-unit-10;
bottom: -$grid-unit-10;
border-radius: $radius-block-ui;
border: 3px solid theme(primary);
}

Expand Down
35 changes: 32 additions & 3 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,15 +365,44 @@
}

// Sibling inserter / "inbetweenserter".
// Fade it in after a delay.
.block-editor-block-list__insertion-point-inserter,
.block-editor-block-list__block-popover-inserter {
.block-editor-inserter__toggle.components-button {
// Special dimensions for this button.
min-width: 32px;
height: 32px;
animation: block-editor-inserter__toggle__fade-in-animation-delayed 1.2s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");

&:hover {
animation: block-editor-inserter__toggle__fade-in-animation 0.2s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}
}
}

@keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes block-editor-inserter__toggle__fade-in-animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}


// This is the edge-to-edge hover area that contains the plus.
.block-editor-block-list__block {
> .block-editor-block-list__insertion-point {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-navigation/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ const MenuIcon = (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
width="24"
height="24"
>
<Path d="M5 5H3v2h2V5zm3 8h11v-2H8v2zm9-8H6v2h11V5zM7 11H5v2h2v-2zm0 8h2v-2H7v2zm3-2v2h11v-2H10z" />
<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
</SVG>
);

Expand Down
13 changes: 2 additions & 11 deletions packages/block-editor/src/components/block-navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,9 @@ $tree-item-height: 36px;
outline: none;
background: none;
padding: $grid-unit-10;
padding: 6px;
margin-left: 0.8em;
width: $button-size;
border-radius: 4px;

&:hover:not(:disabled):not([aria-disabled="true"]) {
@include menu-style__hover;
outline: none;
}

&:focus:not(:disabled):not([aria-disabled="true"]) {
@include menu-style__focus;
}
width: calc(100% - 0.8em);
}

.block-editor-block-navigation__list .block-editor-block-navigation__list {
Expand Down
Loading