Allow passing through custom attributes (#93)

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "es2015",
-    "react"
+    "react",
+    "stage-1"
   ]
 }

.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true

package.json

@@ -43,10 +43,12 @@
   "devDependencies": {
     "babel-cli": "^6.9.0",
     "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
     "babel-jest": "^12.1.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
     "cross-env": "^1.0.8",
     "enzyme": "^2.3.0",
     "eslint": "^2.11.1",

src/components/Tab.js

@@ -49,24 +49,27 @@ module.exports = React.createClass({
   },
 
   render() {
+    const { selected, disabled, panelId, className, children, id, ...attributes } = this.props;
+
     return (
       <li
+        {...attributes}
         className={cx(
           'ReactTabs__Tab',
-          this.props.className,
+          className,
           {
-            'ReactTabs__Tab--selected': this.props.selected,
-            'ReactTabs__Tab--disabled': this.props.disabled,
+            'ReactTabs__Tab--selected': selected,
+            'ReactTabs__Tab--disabled': disabled,
           }
         )}
         role="tab"
-        id={this.props.id}
-        aria-selected={this.props.selected ? 'true' : 'false'}
-        aria-expanded={this.props.selected ? 'true' : 'false'}
-        aria-disabled={this.props.disabled ? 'true' : 'false'}
-        aria-controls={this.props.panelId}
+        id={id}
+        aria-selected={selected ? 'true' : 'false'}
+        aria-expanded={selected ? 'true' : 'false'}
+        aria-disabled={disabled ? 'true' : 'false'}
+        aria-controls={panelId}
       >
-        {this.props.children}
+        {children}
       </li>
     );
   },

src/components/TabList.js

@@ -13,15 +13,18 @@ module.exports = React.createClass({
   },
 
   render() {
+    const { className, children, ...attributes } = this.props;
+
     return (
       <ul
+        {...attributes}
         className={cx(
           'ReactTabs__TabList',
-          this.props.className
+          className
         )}
         role="tablist"
       >
-        {this.props.children}
+        {children}
       </ul>
     );
   },

src/components/TabPanel.js

@@ -29,25 +29,24 @@ module.exports = React.createClass({
   },
 
   render() {
-    const children = (this.context.forceRenderTabPanel || this.props.selected) ?
-      this.props.children :
-      null;
+    const { className, children, selected, id, tabId, ...attributes } = this.props;
 
     return (
       <div
+        {...attributes}
         className={cx(
           'ReactTabs__TabPanel',
-          this.props.className,
+          className,
           {
-            'ReactTabs__TabPanel--selected': this.props.selected,
+            'ReactTabs__TabPanel--selected': selected,
           }
         )}
         role="tabpanel"
-        id={this.props.id}
-        aria-labelledby={this.props.tabId}
-        style={{ display: this.props.selected ? null : 'none' }}
+        id={id}
+        aria-labelledby={tabId}
+        style={{ display: selected ? null : 'none' }}
       >
-        {children}
+        {(this.context.forceRenderTabPanel || selected) ? children : null}
       </div>
     );
   },

src/components/Tabs.js

@@ -346,12 +346,24 @@ module.exports = React.createClass({
       }, 0);
     }
 
+    const { className, ...attributes } = this.props;
+
+    // Delete all known props, so they don't get added to DOM
+    delete attributes.selectedIndex;
+    delete attributes.onSelect;
+    delete attributes.focus;
+    delete attributes.children;
+    delete attributes.forceRenderTabPanel;
+    delete attributes.onClick;
+    delete attributes.onKeyDown;
+
     return (
       <div
+        {...attributes}
         className={cx(
           'ReactTabs',
           'react-tabs',
-          this.props.className
+          className
         )}
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}

src/components/__tests__/Tab-test.js

@@ -44,4 +44,17 @@ describe('<Tab />', () => {
     expect(wrapper.hasClass('ReactTabs__Tab--disabled')).toBe(true);
     expect(wrapper.prop('aria-disabled')).toBe('true');
   });
+
+  it('should pass through custom properties', () => {
+    const wrapper = shallow(<Tab data-tooltip="Tooltip contents" />);
+
+    expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
+  });
+
+  it('should not allow overriding all default properties', () => {
+    // eslint-disable-next-line jsx-a11y/aria-role
+    const wrapper = shallow(<Tab role="micro-tab" />);
+
+    expect(wrapper.prop('role')).toBe('tab');
+  });
 });

src/components/__tests__/TabList-test.js

@@ -17,4 +17,17 @@ describe('<TabList />', () => {
     expect(wrapper.hasClass('ReactTabs__TabList')).toBe(true);
     expect(wrapper.hasClass('foobar')).toBe(true);
   });
+
+  it('should pass through custom properties', () => {
+    const wrapper = shallow(<TabList data-tooltip="Tooltip contents" />);
+
+    expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
+  });
+
+  it('should not allow overriding all default properties', () => {
+    // eslint-disable-next-line jsx-a11y/aria-role
+    const wrapper = shallow(<TabList role="micro-tab" />);
+
+    expect(wrapper.prop('role')).toBe('tablist');
+  });
 });

src/components/__tests__/TabPanel-test.js

@@ -35,5 +35,18 @@ describe('Tab', () => {
     expect(wrapper.prop('style')).not.toBe(null);
     expect(wrapper.prop('style').display).toBe(null);
   });
+
+  it('should pass through custom properties', () => {
+    const wrapper = shallow(<TabPanel data-tooltip="Tooltip contents" />);
+
+    expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
+  });
+
+  it('should not allow overriding all default properties', () => {
+    // eslint-disable-next-line jsx-a11y/aria-role
+    const wrapper = shallow(<TabPanel role="micro-tab" />);
+
+    expect(wrapper.prop('role')).toBe('tabpanel');
+  });
 });
 

src/components/__tests__/Tabs-test.js

@@ -270,4 +270,10 @@ describe('react-tabs', () => {
       assertTabSelected(innerTabs, 1);
     });
   });
+
+  it('should pass through custom properties', () => {
+    const wrapper = shallow(<Tabs data-tooltip="Tooltip contents" />);
+
+    expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
+  });
 });