Move Alignment, movers and trash icons to the icons package (#19944)

WordPress · Jan 30, 2020 · cfa9a97 · cfa9a97
1 parent d66d53b
commit cfa9a97
Show file tree

Hide file tree

Showing 30 changed files with 313 additions and 129 deletions.
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -8,20 +8,21 @@ import { find } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
+import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
 
 const DEFAULT_ALIGNMENT_CONTROLS = [
 	{
-		icon: 'editor-alignleft',
+		icon: alignLeft,
 		title: __( 'Align text left' ),
 		align: 'left',
 	},
 	{
-		icon: 'editor-aligncenter',
+		icon: alignCenter,
 		title: __( 'Align text center' ),
 		align: 'center',
 	},
 	{
-		icon: 'editor-alignright',
+		icon: alignRight,
 		title: __( 'Align text right' ),
 		align: 'right',
 	},

diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -34,31 +34,61 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
     Array [
       Object {
         "align": "left",
-        "icon": "editor-alignleft",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
+          />
+        </SVG>,
         "isActive": true,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align text left",
       },
       Object {
         "align": "center",
-        "icon": "editor-aligncenter",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M14 5V3H6v2h8zm3 4V7H3v2h14zm-3 4v-2H6v2h8zm3 4v-2H3v2h14z"
+          />
+        </SVG>,
         "isActive": false,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align text center",
       },
       Object {
         "align": "right",
-        "icon": "editor-alignright",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M17 5V3H8v2h9zm0 4V7H3v2h14zm0 4v-2H8v2h9zm0 4v-2H3v2h14z"
+          />
+        </SVG>,
         "isActive": false,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align text right",
       },
     ]
   }
-  icon="editor-alignleft"
+  icon={
+    <SVG
+      viewBox="-2 -2 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M12 5V3H3v2h9zm5 4V7H3v2h14zm-5 4v-2H3v2h9zm5 4v-2H3v2h14z"
+      />
+    </SVG>
+  }
   isCollapsed={true}
   label="Change text alignment"
 />

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -5,6 +5,13 @@ import { __ } from '@wordpress/i18n';
 import { Toolbar } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import {
+	positionCenter,
+	positionLeft,
+	positionRight,
+	stretchFullWidth,
+	stretchWide,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -13,23 +20,23 @@ import { withBlockEditContext } from '../block-edit/context';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
-		icon: 'align-left',
+		icon: positionLeft,
 		title: __( 'Align left' ),
 	},
 	center: {
-		icon: 'align-center',
+		icon: positionCenter,
 		title: __( 'Align center' ),
 	},
 	right: {
-		icon: 'align-right',
+		icon: positionRight,
 		title: __( 'Align right' ),
 	},
 	wide: {
-		icon: 'align-wide',
+		icon: stretchWide,
 		title: __( 'Wide width' ),
 	},
 	full: {
-		icon: 'align-full-width',
+		icon: stretchFullWidth,
 		title: __( 'Full width' ),
 	},
 };
@@ -43,9 +50,9 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const enabledControls = wideControlsEnabled ?
-		controls :
-		controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 );
+	const enabledControls = wideControlsEnabled
+		? controls
+		: controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 );
 
 	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
 	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];

diff --git a/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/...ages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -5,29 +5,59 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = `
   controls={
     Array [
       Object {
-        "icon": "align-left",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M3 5h14V3H3v2zm9 8V7H3v6h9zm2-4h3V7h-3v2zm0 4h3v-2h-3v2zM3 17h14v-2H3v2z"
+          />
+        </SVG>,
         "isActive": true,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align left",
       },
       Object {
-        "icon": "align-center",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z"
+          />
+        </SVG>,
         "isActive": false,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align center",
       },
       Object {
-        "icon": "align-right",
+        "icon": <SVG
+          viewBox="-2 -2 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M3 5h14V3H3v2zm0 4h3V7H3v2zm14 4V7H8v6h9zM3 13h3v-2H3v2zm0 4h14v-2H3v2z"
+          />
+        </SVG>,
         "isActive": false,
         "onClick": [Function],
         "role": "menuitemradio",
         "title": "Align right",
       },
     ]
   }
-  icon="align-left"
+  icon={
+    <SVG
+      viewBox="-2 -2 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M3 5h14V3H3v2zm9 8V7H3v6h9zm2-4h3V7h-3v2zm0 4h3v-2h-3v2zM3 17h14v-2H3v2z"
+      />
+    </SVG>
+  }
   isCollapsed={true}
   label="Change alignment"
 />

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js
@@ -25,7 +25,7 @@ describe( 'BlockAlignmentToolbar', () => {
 	} );
 
 	test( 'should call onChange with undefined, when the control is already active', () => {
-		const activeControl = controls.find( ( { icon } ) => icon === `align-${ alignment }` );
+		const activeControl = controls.find( ( { title } ) => title === 'Align left' );
 		activeControl.onClick();
 
 		expect( activeControl.isActive ).toBe( true );
@@ -34,7 +34,7 @@ describe( 'BlockAlignmentToolbar', () => {
 	} );
 
 	test( 'should call onChange with alignment value when the control is inactive', () => {
-		const inactiveCenterControl = controls.find( ( { icon } ) => icon === 'align-center' );
+		const inactiveCenterControl = controls.find( ( { title } ) => title === 'Align center' );
 		inactiveCenterControl.onClick();
 
 		expect( inactiveCenterControl.isActive ).toBe( false );

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -10,6 +10,7 @@ import { ToolbarButton } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -39,7 +40,7 @@ const BlockMobileToolbar = ( {
 				)
 			}
 			onClick={ onDelete }
-			icon="trash"
+			icon={ trash }
 			extraProps={ { hint: __( 'Double tap to remove the block' ) } }
 		/>
 	</View>

diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js
@@ -1,26 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { Path, Polygon, SVG } from '@wordpress/components';
-
-export const upArrow = (
-	<SVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-		<Polygon points="9,4.5 3.3,10.1 4.8,11.5 9,7.3 13.2,11.5 14.7,10.1 " />
-	</SVG>
-);
+import { Path, SVG } from '@wordpress/components';
 
 export const leftArrow = (
 	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
 		<Path d="M4.5 9l5.6-5.7 1.4 1.5L7.3 9l4.2 4.2-1.4 1.5L4.5 9z" />
 	</SVG>
 );
 
-export const downArrow = (
-	<SVG width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-		<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
-	</SVG>
-);
-
 export const rightArrow = (
 	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
 		<Path d="M13.5 9L7.9 3.3 6.5 4.8 10.7 9l-4.2 4.2 1.4 1.5L13.5 9z" />

diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
@@ -18,7 +18,8 @@ import { withInstanceId, compose } from '@wordpress/compose';
  * Internal dependencies
  */
 import { getBlockMoverDescription } from './mover-description';
-import { leftArrow, rightArrow, upArrow, downArrow, dragHandle } from './icons';
+import { leftArrow, rightArrow, dragHandle } from './icons';
+import { chevronUp, chevronDown } from '@wordpress/icons';
 import BlockDraggable from '../block-draggable';
 
 export class BlockMover extends Component {
@@ -56,12 +57,12 @@ export class BlockMover extends Component {
 				if ( orientation === 'horizontal' ) {
 					return isRTL ? rightArrow : leftArrow;
 				}
-				return upArrow;
+				return chevronUp;
 			} else if ( moveDirection === 'down' ) {
 				if ( orientation === 'horizontal' ) {
 					return isRTL ? leftArrow : rightArrow;
 				}
-				return downArrow;
+				return chevronDown;
 			}
 			return null;
 		};

diff --git a/packages/block-editor/src/components/block-mover/test/index.js b/packages/block-editor/src/components/block-mover/test/index.js
@@ -3,11 +3,15 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { chevronUp, chevronDown } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import { BlockMover } from '../';
-import { upArrow, downArrow } from '../icons';
 
 describe( 'BlockMover', () => {
 	describe( 'basic rendering', () => {
@@ -45,15 +49,15 @@ describe( 'BlockMover', () => {
 				className: 'block-editor-block-mover__control',
 				onClick: undefined,
 				label: 'Move up',
-				icon: upArrow,
+				icon: chevronUp,
 				'aria-disabled': undefined,
 				'aria-describedby': 'block-editor-block-mover__up-description-1',
 			} );
 			expect( moveDown.props() ).toMatchObject( {
 				className: 'block-editor-block-mover__control',
 				onClick: undefined,
 				label: 'Move down',
-				icon: downArrow,
+				icon: chevronDown,
 				'aria-disabled': undefined,
 				'aria-describedby': 'block-editor-block-mover__down-description-1',
 			} );

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -14,6 +14,7 @@ import {
 	MenuItem,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -120,7 +121,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 									{ ! isLocked && (
 										<MenuItem
 											onClick={ flow( onClose, onRemove ) }
-											icon="trash"
+											icon={ trash }
 											shortcut={ shortcuts.remove }
 										>
 											{ _n( 'Remove Block', 'Remove Blocks', count ) }

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -26,7 +26,7 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { table as icon } from '@wordpress/icons';
+import { table as icon, alignLeft, alignRight, alignCenter } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -68,17 +68,17 @@ const BACKGROUND_COLORS = [
 
 const ALIGNMENT_CONTROLS = [
 	{
-		icon: 'editor-alignleft',
+		icon: alignLeft,
 		title: __( 'Align Column Left' ),
 		align: 'left',
 	},
 	{
-		icon: 'editor-aligncenter',
+		icon: alignCenter,
 		title: __( 'Align Column Center' ),
 		align: 'center',
 	},
 	{
-		icon: 'editor-alignright',
+		icon: alignRight,
 		title: __( 'Align Column Right' ),
 		align: 'right',
 	},