[Bug]: Theming barHoverColor property not working in v8

[julien-deramond]

Describe the bug

While upgrading a project from SB v7 to v8 and applying our custom theme (working in v7), I've maybe spotted an issue where the barHoverColor property might have disappeared, or at least doesn't work anymore.

To Reproduce

I've created a reproducible environment via StackBlitz: https://stackblitz.com/edit/github-ezja5c?file=.storybook%2FMyTheme.js,.storybook%2Fmanager.js&preset=node

In this environment with fake colors, barHoverColor: 'green', means that the hover color of the main bar should be green, and it stays grayish. The other properties seem to work well since the bar background is red.

System

Storybook Environment Info:

  System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm <----- active
  Browsers:
    Chrome: 122.0.6261.112
    Firefox: 123.0.1
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.0 => 8.0.0 
    @storybook/addon-interactions: ^8.0.0 => 8.0.0 
    @storybook/addon-links: ^8.0.0 => 8.0.0 
    @storybook/blocks: ^8.0.0 => 8.0.0 
    @storybook/html: ^8.0.0 => 8.0.0 
    @storybook/html-vite: ^8.0.0 => 8.0.0 
    @storybook/test: ^8.0.0 => 8.0.0 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    ods-storybook-theme: ^1.1.0 => 1.1.0 
    storybook: ^8.0.0 => 8.0.0

Additional context

• Related documentation containing barHoverColor: https://storybook.js.org/docs/configure/theming#create-a-theme-quickstart
• Related PRs: Docs: Add missing barHoverColor in theme common snippet #25051 and Theming: Add barHoverColor #20169

[valentinpalkovic]

Hi @julien-deramond, @fredvisser.

Please try out the following canary release and let me know whether it fixes your issue:
0.0.0-pr-26527-sha-db4e08ae

npx storybook@0.0.0-pr-26527-sha-db4e08ae upgrade

You can see the changes I've made in this PR: #26527

[julien-deramond]

Thanks @valentinpalkovic for fixing this issue!

Tried out https://github.com/Orange-OpenSource/ods-storybook-theme/blob/main/OrangeTheme.js with the canary release 0.0.0-pr-26527-sha-db4e08ae and it fixes well the issue with barHoverColor (defined in the theme as being orange):

The only difference I can see with v7 with the same theme is that there's a semi-transparent background on hover, but I suppose it's normal and new in v8 (like the outline selected state, etc.):

[valentinpalkovic]

That's correct! In Storybook 8, our designers have tweaked the hover and active states a bit :)

I am glad that the PR fixes your issue. I try to get approval on Monday and then I'll merge it and release a new version. Have a great weekend!