Components: Pass through props to KeyboardShortcuts wrapper

WordPress · Oct 30, 2018 · ca91f7f · ca91f7f
1 parent 43a42e2
commit ca91f7f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -28,6 +28,7 @@
 ### New Feature
 
 - Added new prop `ignoreChildHandled` to the `KeyboardShortcuts` component.
+- `KeyboardShortcuts` now passes through extra props to its rendered element when wrapping children.
 
 ### Deprecation
 

diff --git a/packages/components/src/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md
@@ -34,7 +34,7 @@ const MyKeyboardShortcuts = withState( {
 
 ## Props
 
-The component accepts the following props:
+The component accepts the following props. Any other props are passed to the rendered wrapping element, if passed with `children`.
 
 ### children
 

diff --git a/packages/components/src/keyboard-shortcuts/index.js b/packages/components/src/keyboard-shortcuts/index.js
@@ -3,7 +3,7 @@
  */
 import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
-import { forEach } from 'lodash';
+import { forEach, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -70,7 +70,17 @@ class KeyboardShortcuts extends Component {
 			return null;
 		}
 
-		return <div ref={ this.bindKeyTarget }>{ children }</div>;
+		return (
+			<div
+				ref={ this.bindKeyTarget }
+				{ ...omit( this.props, [
+					'shortcuts',
+					'bindGlobal',
+					'eventName',
+					'ignoreChildHandled',
+				] ) }
+			/>
+		);
 	}
 }
 

diff --git a/packages/components/src/keyboard-shortcuts/test/__snapshots__/index.js.snap b/packages/components/src/keyboard-shortcuts/test/__snapshots__/index.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KeyboardShortcuts should passes through props to children wrapper 1`] = `"<div class=\\"is-ok\\"><textarea></textarea></div>"`;
diff --git a/packages/components/src/keyboard-shortcuts/test/index.js b/packages/components/src/keyboard-shortcuts/test/index.js
@@ -226,4 +226,22 @@ describe( 'KeyboardShortcuts', () => {
 		keyPress( 68, textareas.at( 0 ).getDOMNode() );
 		expect( spy ).toHaveBeenCalled();
 	} );
+
+	it( 'should passes through props to children wrapper', () => {
+		const attachNode = document.createElement( 'div' );
+		document.body.appendChild( attachNode );
+
+		const wrapper = mount(
+			<KeyboardShortcuts
+				ignoreChildHandled
+				shortcuts={ {} }
+				className="is-ok"
+			>
+				<textarea></textarea>
+			</KeyboardShortcuts>,
+			{ attachTo: attachNode }
+		);
+
+		expect( wrapper.getDOMNode().outerHTML ).toMatchSnapshot();
+	} );
 } );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		exports[`KeyboardShortcuts should passes through props to children wrapper 1`] = `"<div class=\\"is-ok\\"><textarea></textarea></div>"`;