Bug (dbc.Tab): active_label_style doesn't override label_style

[Nenrikido]

• dash version: #2.8.1
• dash-bootstrap-components version: #1.3.1
• components affected by bug: dbc.Tab

What is happening?

When setting a different value on the same css property in label_style and active_label_style
the value from label_style is always the one that is applied,
Only properties from active_label_style that aren't set in label_style are applied.

Example :

tab_styles = {
    "label_style": {
        "borderRadius": "20px",         # always applied
        "width": "200px",               # always applied
        "textAlign": "center",          # always applied
        "color": "#676767",             # always applied even when active
        "backgroundColor": "#fff"       # always applied even when active
    },
    "active_label_style": {
        "backgroundColor": "#6699CC",   # not applied when active
        "color": "#fff",                # not applied when active
        "transform": "rotate(90deg)"    # applied when active
    },
}

layout = dbc.Tabs([
    dbc.Tab(dbc.Container(), label='Tab1', **tab_styles),
    dbc.Tab(dbc.Container(), label='Tab2', **tab_styles),
    dbc.Tab(dbc.Container(), label='Tab3', **tab_styles)
])

What should be happening?

Normal behavior should be to have the style within active_label_style take priority over label_style for active tabs.
It works that way with active_tab_style and tab_style.

[Nenrikido]

I just saw that a new version has been released yesterday (1.4.0)
I reproduced this on it too

[tcbegley]

Thanks for reporting. This was my fault 95c6779. We just need to swap the order of those lines (later ones override earlier ones) and ideally add a test to make sure I don't break it again.

I'll be able to fix this in the next couple of days, but would also happily accept a pull request to move line 78 below line 80 and add a test in src/components/tabs/__tests__/Tabs.test.js if you want to give it a go! Check out contributing guide for some guidance if you're interested.

EDIT: for the avoidance of confusion, here are the relevant lines on main branch as it currently stands. Line 82 needs to be moved down below 84.

[Nenrikido]

Thanks for the quick response ! I see and i'll try making a pull request today

[Nenrikido]

I made the pull request : #946
I thought setting the PR name to that would link it automatically to the issue, sorry if it isn't descriptive

[tcbegley]

Thanks for your contribution!

I just published a new pre-release with these changes.

pip install dash-bootstrap-components==1.4.1rc1

I'll publish a full release in the coming days. There's a couple of other issues I know about that I also need to fix, and since we just made a new release I will wait to see if any more bug reports come in also.