diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
index feac082de26346..cf0801f4316199 100644
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Basic rendering should display with required props 1`] = `""`;
+exports[`Basic rendering should display with required props 1`] = `""`;
diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
index 3987b0b31ac28f..77271b82ebb3b2 100644
--- a/packages/components/src/button/index.js
+++ b/packages/components/src/button/index.js
@@ -2,12 +2,19 @@
* External dependencies
*/
import classnames from 'classnames';
+import { isArray } from 'lodash';
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
-import { createElement, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Tooltip from '../tooltip';
+import Icon from '../icon';
export function Button( props, ref ) {
const {
@@ -25,6 +32,13 @@ export function Button( props, ref ) {
isDestructive,
className,
disabled,
+ icon,
+ iconSize,
+ showTooltip,
+ tooltipPosition,
+ shortcut,
+ label,
+ children,
...additionalProps
} = props;
@@ -44,19 +58,54 @@ export function Button( props, ref ) {
'is-busy': isBusy,
'is-link': isLink,
'is-destructive': isDestructive,
+ 'has-text': !! icon && !! children,
+ // Ideally should be has-icon but this is named this way for BC
+ 'components-icon-button': !! icon,
} );
- const tag = href !== undefined && ! disabled ? 'a' : 'button';
- const tagProps = tag === 'a' ?
+ const Tag = href !== undefined && ! disabled ? 'a' : 'button';
+ const tagProps = Tag === 'a' ?
{ href, target } :
{ type: 'button', disabled, 'aria-pressed': isPressed };
- return createElement( tag, {
- ...tagProps,
- ...additionalProps,
- className: classes,
- ref,
- } );
+ // Should show the tooltip if...
+ const shouldShowTooltip = ! disabled && (
+ // an explicit tooltip is passed or...
+ ( showTooltip && label ) ||
+ // there's a shortcut or...
+ shortcut ||
+ (
+ // there's a label and...
+ !! label &&
+ // the children are empty and...
+ ( ! children || ( isArray( children ) && ! children.length ) ) &&
+ // the tooltip is not explicitly disabled.
+ false !== showTooltip
+ )
+ );
+
+ const element = (
+
+ { icon && }
+ { children }
+
+ );
+
+ if ( ! shouldShowTooltip ) {
+ return element;
+ }
+
+ return (
+
+ { element }
+
+ );
}
export default forwardRef( Button );
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 154120ffd2c2b1..b33e087b450369 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -228,6 +228,23 @@
}
}
+.components-icon-button {
+ .dashicon {
+ display: inline-block;
+ flex: 0 0 auto;
+ }
+
+ // Ensure that even SVG icons that don't include the .dashicon class are colored.
+ svg {
+ fill: currentColor;
+ outline: none;
+ }
+
+ &.has-text svg {
+ margin-right: 8px;
+ }
+}
+
@keyframes components-button__busy-animation {
0% {
background-position: 200px 0;
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
index c0b03149abd2f0..fdb194f6611c44 100644
--- a/packages/components/src/button/test/index.js
+++ b/packages/components/src/button/test/index.js
@@ -74,6 +74,57 @@ describe( 'Button', () => {
expect( button.prop( 'WordPress' ) ).toBe( 'awesome' );
} );
+
+ it( 'should render an icon button', () => {
+ const iconButton = shallow( );
+ expect( iconButton.hasClass( 'components-icon-button' ) ).toBe( true );
+ expect( iconButton.prop( 'aria-label' ) ).toBeUndefined();
+ } );
+
+ it( 'should render a Dashicon component matching the wordpress icon', () => {
+ const iconButton = shallow( );
+ expect( iconButton.find( 'Icon' ).dive().shallow().hasClass( 'dashicons-wordpress' ) ).toBe( true );
+ } );
+
+ it( 'should render child elements and icon', () => {
+ const iconButton = shallow(