Fix dbc.Tab.active_label_style (#946)

facultyai · Feb 28, 2023 · 75b8cea · 75b8cea
1 parent 42e4deb
commit 75b8cea
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git 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
@@ -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(
+      <Tabs active_tab="tab-2">
+        <Tab
+          tab_id="tab-1"
+          label="tab-label-1"
+          tab_style={tabStyle}
+          active_tab_style={activeTabStyle}
+          label_style={labelStyle}
+          active_label_style={activeLabelStyle}
+        >
+          tab-content-1
+        </Tab>
+        <Tab
+          tab_id="tab-2"
+          label="tab-label-2"
+          tab_style={tabStyle}
+          active_tab_style={activeTabStyle}
+          label_style={labelStyle}
+          active_label_style={activeLabelStyle}
+        >
+          tab-content-2
+        </Tab>
+      </Tabs>
+    );
+    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'
+    });
+  });
 });