Add props for styling active tabs

Author: tcbegley

docs/components_page/components/tabs.md

@@ -29,6 +29,8 @@ You can also apply CSS classes to the tab or label using the `tabClassName` or `
 
 {{example:components/tabs/style.py:tabs}}
 
+To apply certain styles only to the currently active tab, you can use the `active_tab_style`, `activeTabClassName`, `active_label_style` and `activeLabelClassName` properties.
+
 {{apidoc:src/components/tabs/Tabs.js}}
 
 {{apidoc:src/components/tabs/Tab.js}}

src/components/tabs/Tab.js

@@ -10,7 +10,7 @@ const Tab = props => {
 
 Tab.defaultProps = {
   disabled: false
-}
+};
 
 Tab.propTypes = {
   /**
@@ -37,12 +37,24 @@ Tab.propTypes = {
    */
   tab_style: PropTypes.object,
 
+  /**
+   * Defines CSS styles which will override styles previously set. The styles
+   * set here apply to the NavItem in the tab when it is active.
+   */
+  active_tab_style: PropTypes.object,
+
   /**
    * Defines CSS styles which will override styles previously set. The styles
    * set here apply to the NavLink in the tab.
    */
   label_style: PropTypes.object,
 
+  /**
+   * Defines CSS styles which will override styles previously set. The styles
+   * set here apply to the NavLink in the tab when it is active
+   */
+  active_label_style: PropTypes.object,
+
   /**
    * Often used with CSS to style elements with common properties.
    */
@@ -54,12 +66,26 @@ Tab.propTypes = {
    */
   tabClassName: PropTypes.string,
 
+  /**
+   * Often used with CSS to style elements with common properties. The classes
+   * specified with this prop will be applied to the NavItem in the tab when it
+   * is active.
+   */
+  activeTabClassName: PropTypes.string,
+
   /**
    * Often used with CSS to style elements with common properties. The classes
    * specified with this prop will be applied to the NavLink in the tab.
    */
   labelClassName: PropTypes.string,
 
+  /**
+   * Often used with CSS to style elements with common properties. The classes
+   * specified with this prop will be applied to the NavLink in the tab when
+   * it is active.
+   */
+  activeLabelClassName: PropTypes.string,
+
   /**
    * A unique identifier for the component, used to improve
    * performance by React.js while rendering components

src/components/tabs/Tabs.js

@@ -75,18 +75,32 @@ const Tabs = props => {
     children.map((child, idx) => {
       const childProps = resolveChildProps(child);
       const tabId = childProps.key || childProps.tab_id || 'tab-' + idx;
+      const active = active_tab === tabId;
       return (
         <NavItem
           key={tabId}
-          style={childProps.tab_style}
-          className={childProps.tabClassName}
+          style={
+            active
+              ? {...childProps.tab_style, ...childProps.active_tab_style}
+              : childProps.tab_style
+          }
+          className={classnames(
+            childProps.tabClassName,
+            active && childProps.activeTabClassName
+          )}
         >
           <NavLink
-            className={classnames(childProps.labelClassName, {
-              active: active_tab === tabId
-            })}
+            className={classnames(
+              childProps.labelClassName,
+              active && childProps.activeLabelClassName,
+              {active}
+            )}
             href="#"
-            style={childProps.label_style}
+            style={
+              active
+                ? {...childProps.label_style, ...childProps.active_label_style}
+                : childProps.label_style
+            }
             disabled={childProps.disabled}
             onClick={() => {
               if (!childProps.disabled) {
@@ -110,9 +124,13 @@ const Tabs = props => {
         tab_id,
         label,
         tab_style,
+        active_tab_style,
         label_style,
+        active_label_style,
         tabClassName,
+        activeTabClassName,
         labelClassName,
+        activeLabelClassName,
         loading_state,
         ...otherProps
       } = childProps;