diff --git a/src/components/tabs/Tabs.js b/src/components/tabs/Tabs.js index 8f4a46e6..d8f96dab 100644 --- a/src/components/tabs/Tabs.js +++ b/src/components/tabs/Tabs.js @@ -79,9 +79,9 @@ const Tabs = props => { {active} )} style={{ - ...(active && childProps.active_label_style), ...(!childProps.disabled && {cursor: 'pointer'}), - ...childProps.label_style + ...childProps.label_style, + ...(active && childProps.active_label_style) }} disabled={childProps.disabled} onClick={() => { diff --git a/src/components/tabs/__tests__/Tabs.test.js b/src/components/tabs/__tests__/Tabs.test.js index 00ac83e2..42e4507d 100644 --- a/src/components/tabs/__tests__/Tabs.test.js +++ b/src/components/tabs/__tests__/Tabs.test.js @@ -80,4 +80,48 @@ describe('Tabs', () => { expect(nav.children[0].firstChild).not.toHaveClass('active'); expect(nav.children[1].firstChild).toHaveClass('active'); }); + + test('checks if inline styles from "tab_style", "active_tab_style", "label_style" and "active_label_style" are consistent', () => { + const tabStyle = {backgroundColor: '#fff', borderRadius: '20px'}; + const activeTabStyle = {backgroundColor: '#000'}; + const labelStyle = {color: '#000', textDecoration: 'underline'}; + const activeLabelStyle = {color: '#fff'}; + + const {container} = render( + + + tab-content-1 + + + tab-content-2 + + + ); + const nav = container.querySelector('ul.nav.nav-tabs'); + + expect(nav.children[0]).toHaveStyle(tabStyle); + expect(nav.children[0].firstChild).toHaveStyle(labelStyle); + expect(nav.children[1]).toHaveStyle({ + backgroundColor: '#000', + borderRadius: '20px' + }); + expect(nav.children[1].firstChild).toHaveStyle({ + color: '#fff', + textDecoration: 'underline' + }); + }); });