Pass tab object to tab-panel child function

packages/components/src/tab-panel/README.md

@@ -2,7 +2,7 @@
 
 TabPanel is a React component to render an ARIA-compliant TabPanel. It has two sections: a list of tabs, and the view to show when tabs are chosen. When the list of tabs gets focused, the active tab gets focus (the first tab if there isn't one already). Use the arrow keys to navigate between tabs AND select the newly focused tab at the same time.
 
-TabPanel is a Function-as-Children component. The function takes `tabName` as an argument.
+TabPanel is a Function-as-Children component. The function takes the active tab object as as an argument.
 
 ## Usage
 
@@ -32,7 +32,7 @@ const MyTabPanel = () => (
 			},
 		] }>
 		{
-			( tabName ) => <p>{ tabName }</p>
+			( tab ) => <p>{ tab.title }</p>
 		}
 	</TabPanel>
 );
@@ -95,8 +95,8 @@ Optionally provide a tab name for a tab to be selected upon mounting of componen
 
 ### children
 
-A function which renders the tabviews given the selected tab. The function is passed a `tabName` as an argument.
+A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the the tabs prop.
 The element to which the tooltip should anchor.
 
-- Type: (`String`) => `Element`
+- Type: (`Object`) => `Element`
 - Required: Yes

packages/components/src/tab-panel/index.js

@@ -8,6 +8,7 @@ import { partial, noop, find } from 'lodash';
  */
 import { Component } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -64,6 +65,13 @@ class TabPanel extends Component {
 		const selectedTab = find( tabs, { name: selected } );
 		const selectedId = instanceId + '-' + selectedTab.name;
 
+		deprecated( 'Tab Panel child function argument used as string', {
+			alternative: 'Argument is now an object, access the name property directly.',
+			version: '4.2.0',
+			plugin: 'Gutenberg',
+			hint: 'This is a global warning, shown regardless of whether the component is used.',
+		} );
+
 		return (
 			<div className={ className }>
 				<NavigableMenu
@@ -91,7 +99,7 @@ class TabPanel extends Component {
 						className="components-tab-panel__tab-content"
 						tabIndex="0"
 					>
-						{ this.props.children( selectedTab.name ) }
+						{ this.props.children( Object.assign( new String( selectedTab.name ), selectedTab ) ) }
 					</div>
 				) }
 			</div>

packages/components/src/tab-panel/test/index.js

@@ -60,8 +60,8 @@ describe( 'TabPanel', () => {
 						className: 'gamma',
 					},
 				],
-				children: ( tabName ) => {
-					return <p tabIndex="0" className={ tabName + '-view' }>{ tabName }</p>;
+				children: ( tab ) => {
+					return <p tabIndex="0" className={ tab.name + '-view' }>{ tab.name }</p>;
 				},
 			};
 
@@ -137,8 +137,8 @@ describe( 'TabPanel', () => {
 					className: 'beta',
 				},
 			],
-			children: ( tabName ) => {
-				return <p tabIndex="0" className={ tabName + '-view' }>{ tabName }</p>;
+			children: ( tab ) => {
+				return <p tabIndex="0" className={ tab.name + '-view' }>{ tab.name }</p>;
 			},
 		};
 		const wrapper = TestUtils.renderIntoDocument(