Prefer @wordpress/icons over dashicons in docs and tests (#20094)

WordPress · Feb 7, 2020 · a7fbd6e · a7fbd6e
1 parent def0768
commit a7fbd6e
Show file tree

Hide file tree

Showing 26 changed files with 415 additions and 329 deletions.
diff --git a/docs/designers-developers/developers/block-api/block-registration.md b/docs/designers-developers/developers/block-api/block-registration.md
diff --git a/docs/designers-developers/developers/slotfills/plugin-more-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-more-menu-item.md
@@ -5,13 +5,16 @@ This slot will add a new item to the More Tools & Options section.
 ## Example
 
 ```js
-const { registerPlugin } = wp.plugins;
-const { PluginMoreMenuItem } = wp.editPost;
+import { registerPlugin } from '@wordpress/plugins';
+import { PluginMoreMenuItem } from '@wordpress/edit-post';
+import { image } from '@wordpress/icons';
 
 const MyButtonMoreMenuItemTest = () => (
 	<PluginMoreMenuItem
-		icon="smiley"
-		onClick={ () => { alert( 'Button Clicked' ) } }
+		icon={ image }
+		onClick={ () => {
+			alert( 'Button Clicked' );
+		} }
 	>
 		More Menu Item
 	</PluginMoreMenuItem>
@@ -23,4 +26,3 @@ registerPlugin( 'more-menu-item-test', { render: MyButtonMoreMenuItemTest } );
 ## Location
 
 ![Location](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/plugin-more-menu-item.png?raw=true)
-
diff --git a/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-sidebar-more-menu-item.md
@@ -3,30 +3,30 @@
 This slot allows the creation of a `<PluginSidebar>` with a menu item that when clicked will expand the sidebar to the appropriate Plugin section.
 This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match the `name` on the `<PluginSidebar>`
 
-
 ## Example
 
 ```js
-const { registerPlugin } = wp.plugins;
-
-const {
+import { registerPlugin } from '@wordpress/plugins';
+import {
 	PluginSidebar,
 	PluginSidebarMoreMenuItem
-} = wp.editPost;
+} from '@wordpress/edit-post';
+import { image } from '@wordpress/icons';
 
 const { Fragment } = wp.element;
+const myIcon =
 
 const PluginSidebarMoreMenuItemTest = () => (
 	<Fragment>
 		<PluginSidebarMoreMenuItem
 		    target="sidebar-name"
-		    icon="smiley"
+		    icon={ image }
 		    >
 			Expanded Sidebar - More item
 		</PluginSidebarMoreMenuItem>
 		<PluginSidebar
 			name="sidebar-name"
-			icon="smiley"
+			icon={ image }
 			title="My Sidebar" >
 			Content of the sidebar
 		</PluginSidebar>

diff --git a/docs/designers-developers/developers/slotfills/plugin-sidebar.md b/docs/designers-developers/developers/slotfills/plugin-sidebar.md
@@ -6,22 +6,22 @@ Using this slot will add an icon to the bar that, when clicked, will open a side
 ## Example
 
 ```js
-const { registerPlugin } = wp.plugins;
-const { PluginSidebar } = wp.editPost;
+import { registerPlugin } from '@wordpress/plugins';
+import { PluginSidebar } from '@wordpress/edit-post';
+import { image } from '@wordpress/icons';
 
 const PluginSidebarTest = () => {
-	return(
+	return (
 		<PluginSidebar
-			name='plugin-sidebar-test'
-			title='My Plugin'
-			icon="smiley"
+			name="plugin-sidebar-test"
+			title="My Plugin"
+			icon={ image }
 		>
 			<p>Plugin Sidebar</p>
 		</PluginSidebar>
-	)
-}
+	);
+};
 registerPlugin( 'plugin-sidebar-test', { render: PluginSidebarTest } );
-
 ```
 
 ## Location

diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
@@ -7,6 +7,7 @@ import { shallow } from 'enzyme';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { image } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,21 +16,21 @@ import BlockIcon from '../';
 
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
-		const wrapper = shallow( <BlockIcon icon="format-image" /> );
+		const wrapper = shallow( <BlockIcon icon={ image } /> );
 
 		expect(
-			wrapper.containsMatchingElement( <Icon icon="format-image" /> )
+			wrapper.containsMatchingElement( <Icon icon={ image } /> )
 		).toBe( true );
 	} );
 
 	it( 'renders a span without the has-colors classname', () => {
-		const wrapper = shallow( <BlockIcon icon="format-image" /> );
+		const wrapper = shallow( <BlockIcon icon={ image } /> );
 
 		expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( false );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
-		const wrapper = shallow( <BlockIcon icon="format-image" showColors /> );
+		const wrapper = shallow( <BlockIcon icon={ image } showColors /> );
 
 		expect( wrapper.find( 'span' ).hasClass( 'has-colors' ) ).toBe( true );
 	} );

diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
@@ -8,6 +8,7 @@ import TestUtils from 'react-dom/test-utils';
  * WordPress dependencies
  */
 import { createRef } from '@wordpress/element';
+import { plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -85,36 +86,24 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render an icon button', () => {
-			const iconButton = shallow( <Button icon="plus" /> );
+			const iconButton = shallow( <Button icon={ plusCircle } /> );
 			expect( iconButton.hasClass( 'has-icon' ) ).toBe( true );
 			expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
 		} );
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
-			const iconButton = shallow( <Button icon="wordpress" /> );
-			expect(
-				iconButton
-					.find( 'Icon' )
-					.dive()
-					.shallow()
-					.hasClass( 'dashicons-wordpress' )
-			).toBe( true );
+			const iconButton = shallow( <Button icon={ plusCircle } /> );
+			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
 		} );
 
 		it( 'should render child elements and icon', () => {
 			const iconButton = shallow(
 				<Button
-					icon="wordpress"
+					icon={ plusCircle }
 					children={ <p className="test">Test</p> }
 				/>
 			);
-			expect(
-				iconButton
-					.find( 'Icon' )
-					.dive()
-					.shallow()
-					.hasClass( 'dashicons-wordpress' )
-			).toBe( true );
+			expect( iconButton.find( 'Icon' ).dive() ).not.toBeNull();
 			expect(
 				iconButton
 					.find( '.test' )
@@ -125,7 +114,7 @@ describe( 'Button', () => {
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', () => {
 			const iconButton = shallow(
-				<Button icon="WordPress" label="WordPress" />
+				<Button icon={ plusCircle } label="WordPress" />
 			);
 			expect( iconButton.name() ).toBe( 'Tooltip' );
 			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
@@ -142,7 +131,7 @@ describe( 'Button', () => {
 		it( 'should allow tooltip disable', () => {
 			const iconButton = shallow(
 				<Button
-					icon="WordPress"
+					icon={ plusCircle }
 					label="WordPress"
 					showTooltip={ false }
 				/>
@@ -153,15 +142,15 @@ describe( 'Button', () => {
 
 		it( 'should show the tooltip for empty children', () => {
 			const iconButton = shallow(
-				<Button icon="WordPress" label="WordPress" children={ [] } />
+				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
 			expect( iconButton.name() ).toBe( 'Tooltip' );
 			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', () => {
 			const iconButton = shallow(
-				<Button icon="WordPress" label="WordPress">
+				<Button icon={ plusCircle } label="WordPress">
 					Children
 				</Button>
 			);
@@ -170,7 +159,7 @@ describe( 'Button', () => {
 
 		it( 'should force showing the tooltip even if icon and children defined', () => {
 			const iconButton = shallow(
-				<Button icon="WordPress" label="WordPress" showTooltip>
+				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
 				</Button>
 			);

diff --git a/packages/components/src/draggable/README.md b/packages/components/src/draggable/README.md
@@ -12,56 +12,53 @@ The component accepts the following props:
 
 The HTML id of the element to clone on drag
 
-- Type: `string`
-- Required: Yes
+-   Type: `string`
+-   Required: Yes
 
 ### transferData
 
 Arbitrary data object attached to the drag and drop event.
 
-- Type: `Object`
-- Required: Yes
+-   Type: `Object`
+-   Required: Yes
 
 ### onDragStart
 
 A function to be called when dragging starts.
 
-- Type: `Function`
-- Required: No
-- Default: `noop`
+-   Type: `Function`
+-   Required: No
+-   Default: `noop`
 
 ### onDragEnd
 
 A function to be called when dragging ends.
 
-- Type: `Function`
-- Required: No
-- Default: `noop`
+-   Type: `Function`
+-   Required: No
+-   Default: `noop`
 
 ## Usage
 
 ```jsx
-import { Dashicon, Draggable, Panel, PanelBody } from '@wordpress/components';
+import { Draggable, Panel, PanelBody } from '@wordpress/components';
+import { Icon, more } from '@wordpress/icons';
 
 const MyDraggable = () => (
 	<div id="draggable-panel">
-		<Panel header="Draggable panel" >
+		<Panel header="Draggable panel">
 			<PanelBody>
-				<Draggable
-					elementId="draggable-panel"
-					transferData={ { } }
-				>
-					{
-						( { onDraggableStart, onDraggableEnd } ) => (
-							<div className="example-drag-handle" draggable>
-								<Dashicon
-									icon="move"
-									onDragStart={ onDraggableStart }
-									onDragEnd={ onDraggableEnd }
-								/>
-							</div>
-						)
-					}
+				<Draggable elementId="draggable-panel" transferData={ {} }>
+					{ ( { onDraggableStart, onDraggableEnd } ) => (
+						<div
+							className="example-drag-handle"
+							draggable
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+						>
+							<Icon icon={ more } />
+						</div>
+					) }
 				</Draggable>
 			</PanelBody>
 		</Panel>
@@ -72,29 +69,29 @@ const MyDraggable = () => (
 In case you want to call your own `dragstart` / `dragend` event handlers as well, you can pass them to `Draggable` and it'll take care of calling them after their own:
 
 ```jsx
-import { Dashicon, Draggable, Panel, PanelBody } from '@wordpress/components';
+import { Draggable, Panel, PanelBody } from '@wordpress/components';
+import { Icon, more } from '@wordpress/icons';
 
 const MyDraggable = ( { onDragStart, onDragEnd } ) => (
 	<div id="draggable-panel">
-		<Panel header="Draggable panel" >
+		<Panel header="Draggable panel">
 			<PanelBody>
 				<Draggable
 					elementId="draggable-panel"
-					transferData={ { } }
+					transferData={ {} }
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
 				>
-					{
-						( { onDraggableStart, onDraggableEnd } ) => (
-							<div className="example-drag-handle" draggable>
-								<Dashicon
-									icon="move"
-									onDragStart={ onDraggableStart }
-									onDragEnd={ onDraggableEnd }
-								/>
-							</div>
-						)
-					}
+					{ ( { onDraggableStart, onDraggableEnd } ) => (
+						<div
+							className="example-drag-handle"
+							draggable
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+						>
+							<Icon icon={ more } />
+						</div>
+					) }
 				</Draggable>
 			</PanelBody>
 		</Panel>

diff --git a/packages/components/src/draggable/stories/index.js b/packages/components/src/draggable/stories/index.js
@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { Icon, more } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Draggable from '../';
-import Dashicon from '../../dashicon';
 
 export default { title: 'Components/Draggable', component: Draggable };
 
@@ -56,7 +56,7 @@ const DraggalbeExample = () => {
 								onDragEnd={ handleOnDragEnd }
 								draggable
 							>
-								<Dashicon icon="move" />
+								<Icon icon={ more } />
 							</Box>
 						);
 					} }