Revert using Icon in IconButton to avoid regression in plugin icons (…

…pinned icons) (#11256)
WordPress · Oct 30, 2018 · 9d46788 · 9d46788
1 parent 3add7c1
commit 9d46788
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 29 deletions.
diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isArray } from 'lodash';
+import { isArray, isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
  */
 import Tooltip from '../tooltip';
 import Button from '../button';
-import Icon from '../icon';
+import Dashicon from '../dashicon';
 
 // This is intentionally a Component class, not a function component because it
 // is common to apply a ref to the button element (only supported in class)
@@ -42,7 +42,7 @@ class IconButton extends Component {
 
 		let element = (
 			<Button aria-label={ label } { ...additionalProps } className={ classes }>
-				<Icon icon={ icon } />
+				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
 				{ children }
 			</Button>
 		);

diff --git a/packages/components/src/icon-button/test/index.js b/packages/components/src/icon-button/test/index.js
@@ -20,7 +20,7 @@ describe( 'IconButton', () => {
 
 		it( 'should render a Dashicon component matching the wordpress icon', () => {
 			const iconButton = shallow( <IconButton icon="wordpress" /> );
-			expect( iconButton.find( 'Icon' ).prop( 'icon' ) ).toBe( 'wordpress' );
+			expect( iconButton.find( 'Dashicon' ).shallow().hasClass( 'dashicons-wordpress' ) ).toBe( true );
 		} );
 
 		it( 'should render child elements when passed as children', () => {

diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -42,16 +42,22 @@ exports[`MoreMenu should match snapshot 1`] = `
               onMouseLeave={[Function]}
               type="button"
             >
-              <Icon
+              <Dashicon
                 icon="ellipsis"
                 key="0,0"
               >
-                <Dashicon
-                  icon="ellipsis"
-                  size={20}
+                <SVG
+                  aria-hidden={true}
+                  className="dashicon dashicons-ellipsis"
+                  focusable="false"
+                  height={20}
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width={20}
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <SVG
-                    aria-hidden={true}
+                  <svg
+                    aria-hidden="true"
                     className="dashicon dashicons-ellipsis"
                     focusable="false"
                     height={20}
@@ -60,27 +66,16 @@ exports[`MoreMenu should match snapshot 1`] = `
                     width={20}
                     xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      className="dashicon dashicons-ellipsis"
-                      focusable="false"
-                      height={20}
-                      role="img"
-                      viewBox="0 0 20 20"
-                      width={20}
-                      xmlns="http://www.w3.org/2000/svg"
+                    <Path
+                      d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                     >
-                      <Path
+                      <path
                         d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                      >
-                        <path
-                          d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                        />
-                      </Path>
-                    </svg>
-                  </SVG>
-                </Dashicon>
-              </Icon>
+                      />
+                    </Path>
+                  </svg>
+                </SVG>
+              </Dashicon>
             </button>
           </Button>
         </Tooltip>