Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow providing custom attributes to <Tab> (spread attributes) #93

Closed
wants to merge 2 commits into from
Closed

Allow providing custom attributes to <Tab> (spread attributes) #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3517cc7
Allow passing through custom attributes
Apr 19, 2016
92ef1cf
Fix codestyle to match project
Apr 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions lib/components/Tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ module.exports = React.createClass({
render() {
return (
<li
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}
{...this.props}
className={cx(
'ReactTabs__Tab',
this.props.className,
Expand All @@ -59,12 +66,6 @@ module.exports = React.createClass({
'ReactTabs__Tab--disabled': this.props.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}
>
{this.props.children}
</li>
Expand Down
24 changes: 22 additions & 2 deletions lib/components/__tests__/Tab-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { findDOMNode } from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { Tab } from '../../main';
import { equal } from 'assert';
import { equal, notEqual } from 'assert';

/* eslint func-names:0 */
describe('Tab', function() {
Expand All @@ -24,7 +24,7 @@ describe('Tab', function() {
const tab = TestUtils.renderIntoDocument(<Tab className="foobar"/>);
const node = findDOMNode(tab);

equal(node.className, 'ReactTabs__Tab foobar');
notEqual(node.className.indexOf('foobar'), -1);
});

it('should support being selected', function() {
Expand All @@ -45,4 +45,24 @@ describe('Tab', function() {

equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--disabled');
});

it('should pass through custom properties', function() {
const tab = TestUtils.renderIntoDocument(<Tab data-tooltip="Tooltip contents"/>);
const node = findDOMNode(tab);

equal(node.getAttribute('data-tooltip'), 'Tooltip contents');
});
it('should allow overriding all default properties', function() {
const tab = TestUtils.renderIntoDocument(<Tab role="micro-tab"/>);
const node = findDOMNode(tab);

equal(node.getAttribute('role'), 'micro-tab');
});
it('should merge className instead of overriding', function() {
const tab = TestUtils.renderIntoDocument(<Tab className="foobar"/>);
const node = findDOMNode(tab);

notEqual(node.className.indexOf('ReactTabs__Tab'), -1);
notEqual(node.className.indexOf('foobar'), -1);
});
});