feat(tabs): spread props to Tab component

packages/tabs/src/elements/Tabs.example.md

@@ -2,6 +2,7 @@ The `Tabs` component requires the following structure.
 
 - All `children` require a unique `key` and a `label` to display
 - Each `child` can have an optional `disabled` prop to disable selection
+- Each `child` can have an optional `tabProps` prop to provide props to the Tab that is created
 
 All elements proxy the props of their native DOM representations.
 
@@ -13,7 +14,7 @@ If this abstraction is not able to handle your use-case use the
   <TabPanel label="Tab 1" key="unique-value-1">
     Tab 1 content
   </TabPanel>
-  <TabPanel label={<div>Tab 2</div>} key="unique-value-2">
+  <TabPanel label={<div>Tab 2</div>} key="unique-value-2" tabProps={{ 'data-test-id': 'custom' }}>
     Tab 2 content
   </TabPanel>
   ...

packages/tabs/src/elements/Tabs.js

@@ -65,7 +65,7 @@ export default class Tabs extends ControlledComponent {
   }
 
   render() {
-    const { vertical, children, onChange } = this.props;
+    const { vertical, children, onChange, ...otherProps } = this.props;
     const { focusedKey, selectedKey } = this.getControlledState();
 
     return (
@@ -77,14 +77,14 @@ export default class Tabs extends ControlledComponent {
         onStateChange={this.setControlledState}
       >
         {({ getTabListProps, getTabPanelProps, getTabProps }) => (
-          <TabsView vertical={vertical}>
+          <TabsView vertical={vertical} {...otherProps}>
             <TabList {...getTabListProps()}>
               {Children.map(children, child => {
                 if (!isValidElement(child)) {
                   return child;
                 }
 
-                const { label, disabled } = child.props;
+                const { label, disabled, tabProps } = child.props;
                 const key = child.key;
 
                 if (disabled) {
@@ -100,7 +100,8 @@ export default class Tabs extends ControlledComponent {
                     {...getTabProps({
                       key,
                       selected: key === selectedKey,
-                      focused: key === focusedKey
+                      focused: key === focusedKey,
+                      ...tabProps
                     })}
                   >
                     {label}
@@ -117,11 +118,14 @@ export default class Tabs extends ControlledComponent {
                 return null;
               }
 
+              // Don't want to duplicate tabProps in the TabPanel
+              const { tabProps, ...other } = child.props; // eslint-disable-line no-unused-vars
+
               return cloneElement(
                 child,
                 getTabPanelProps({
                   key: child.key,
-                  ...child.props
+                  ...other
                 })
               );
             })}

packages/tabs/src/elements/Tabs.spec.js

@@ -74,6 +74,18 @@ describe('Tabs', () => {
       expect(wrapper.find(Tab).last()).toHaveProp('disabled', true);
     });
 
+    it('applies custom props if provided', () => {
+      const wrapper = mountWithTheme(
+        <Tabs>
+          <TabPanel key="custom" tabProps={{ 'data-test-id': 'custom-tab' }}>
+            Custom Tab
+          </TabPanel>
+        </Tabs>
+      );
+
+      expect(wrapper.find('[data-test-id="custom-tab"]')).toExist();
+    });
+
     it('selected first tab if in uncontrolled state', () => {
       const wrapper = mountWithTheme(basicExample);