Components: Implement Button as assigning ref via forwardRef

components/button/index.js

@@ -6,67 +6,47 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Component, createElement } from '@wordpress/element';
+import { createElement, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-class Button extends Component {
-	constructor( props ) {
-		super( props );
-		this.setRef = this.setRef.bind( this );
-	}
-
-	componentDidMount() {
-		if ( this.props.focus ) {
-			this.ref.focus();
-		}
-	}
-
-	setRef( ref ) {
-		this.ref = ref;
-	}
-
-	focus() {
-		this.ref.focus();
-	}
-
-	render() {
-		const {
-			href,
-			target,
-			isPrimary,
-			isLarge,
-			isSmall,
-			isToggled,
-			isBusy,
-			className,
-			disabled,
-			...additionalProps
-		} = this.props;
-		const classes = classnames( 'components-button', className, {
-			button: ( isPrimary || isLarge || isSmall ),
-			'button-primary': isPrimary,
-			'button-large': isLarge,
-			'button-small': isSmall,
-			'is-toggled': isToggled,
-			'is-busy': isBusy,
-		} );
-
-		const tag = href !== undefined && ! disabled ? 'a' : 'button';
-		const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
-
-		delete additionalProps.focus;
-
-		return createElement( tag, {
-			...tagProps,
-			...additionalProps,
-			className: classes,
-			ref: this.setRef,
-		} );
-	}
+export function Button( props, ref ) {
+	const {
+		href,
+		target,
+		isPrimary,
+		isLarge,
+		isSmall,
+		isToggled,
+		isBusy,
+		className,
+		disabled,
+		focus,
+		...additionalProps
+	} = props;
+
+	const classes = classnames( 'components-button', className, {
+		button: ( isPrimary || isLarge || isSmall ),
+		'button-primary': isPrimary,
+		'button-large': isLarge,
+		'button-small': isSmall,
+		'is-toggled': isToggled,
+		'is-busy': isBusy,
+	} );
+
+	const tag = href !== undefined && ! disabled ? 'a' : 'button';
+	const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
+
+	return createElement( tag, {
+		...tagProps,
+		...additionalProps,
+		className: classes,
+		autoFocus: focus,
+		ref,
+	} );
 }
 
-export default Button;
+export default forwardRef( Button );

components/button/test/index.js

@@ -1,12 +1,20 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Button from '../';
+import ButtonWithForwardedRef, { Button } from '../';
+
+// [TEMPORARY]: Only needed so long as Enzyme does not support React.forwardRef
+jest.unmock( '../' );
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
@@ -93,4 +101,18 @@ describe( 'Button', () => {
 			expect( button.type() ).toBe( 'button' );
 		} );
 	} );
+
+	// Disable reason: This test is desirable, but unsupported by Enzyme in
+	// the current version, as it depends on features new to React in 16.3.0.
+	//
+	// eslint-disable-next-line jest/no-disabled-tests
+	describe.skip( 'ref forwarding', () => {
+		it( 'should enable access to DOM element', () => {
+			const ref = createRef();
+
+			mount( <ButtonWithForwardedRef ref={ ref } /> );
+
+			expect( ref.current.nodeName ).toBe( 'button' );
+		} );
+	} );
 } );

element/index.js

@@ -5,6 +5,7 @@ import {
 	createElement,
 	createContext,
 	createRef,
+	forwardRef,
 	Component,
 	cloneElement,
 	Children,
@@ -51,6 +52,19 @@ export { createElement };
  */
 export { createRef };
 
+/**
+ * Component enhancer used to enable passing a ref to its wrapped component.
+ * Pass a function argument which receives `props` and `ref` as its arguments,
+ * returning an element using the forwarded ref. The return value is a new
+ * component which forwards its ref.
+ *
+ * @param {Function} forwarder Function passed `props` and `ref`, expected to
+ *                             return an element.
+ *
+ * @return {WPComponent} Enhanced component.
+ */
+export { forwardRef };
+
 /**
  * Renders a given element into the target DOM node.
  *

test/unit/jest.config.json

@@ -10,7 +10,8 @@
 	"setupFiles": [
 		"core-js/fn/symbol/async-iterator",
 		"<rootDir>/test/unit/setup-blocks.js",
-		"<rootDir>/test/unit/setup-wp-aliases.js"
+		"<rootDir>/test/unit/setup-wp-aliases.js",
+		"<rootDir>/test/unit/setup-mocks.js"
 	],
 	"transform": {
 		"\\.pegjs$": "<rootDir>/test/unit/pegjs-transform.js"

test/unit/setup-mocks.js

@@ -0,0 +1,16 @@
+// [TEMPORARY]: Button uses React.forwardRef, added in [email protected] but not yet
+// supported by Enzyme as of [email protected] . This mock unwraps
+// the ref forwarding, so any tests relying on this behavior will fail.
+//
+// See: https://github.com/airbnb/enzyme/issues/1604
+// See: https://github.com/airbnb/enzyme/pull/1592/files
+jest.mock( '../../components/button', () => {
+	const { Button: RawButton } = require.requireActual( '../../components/button' );
+	const { Component } = require( 'react' );
+
+	return class Button extends Component {
+		render() {
+			return RawButton( this.props );
+		}
+	};
+} );