UI: Fix theming of elements inside bars

[valentinpalkovic]

Closes #26448

What I did

In Storybook 8.0, we have broken theming for elements inside bars. The theming variables "barTextColor", "barHoverColor" and "barSelectedColor" were mostly ignored and mainly other variable colors were applied.

This commit mainly ensures, that the default dark and light theming doesn't change. If "barTextColor", "barHoverColor" or "barSelectedColor" are set by the user, they get normally applied to the icon and text elements inside the bar areas, like the topbar, bottom-bar or the tab area in the addons panel.

Additionally, I have introduced a hover effect on the Tabs inside the TabsPanel. Until now, a hover didn't change the color at all.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. yarn task -> Compile all packages
2. Go to code/ui/.storybook and create a new file MyTheme.js and put the following content in:

import { create } from '@storybook/theming/create';

export default create({
  base: 'light',

  // Toolbar default and active colors
  barTextColor: 'violet',
  barSelectedColor: 'yellow',
  barHoverColor: 'green',
  barBg: 'red',
});

3. Import the theme in code/ui/.storybook/manager.tsx:

import React from 'react';
import { addons, types } from '@storybook/manager-api';
import startCase from 'lodash/startCase.js';
+ import MyTheme from './MyTheme.js';

addons.setConfig({
  sidebar: {
    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
  },
+  theme: MyTheme,
});

4. Make sure that the bar styles are properly applied in the TopBar:

5. Make sure that the bar styles are properly applied in the Addon Panel:

6. Make sure the bottom bar in mobile mode is properly styled:

7. Adjust the theming so that it applies to dark mode, and repeat the testing instructions.
8. Remove the custom theming and ensure the default dark and light modes haven't changed.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-26527-sha-db4e08ae. Try it out in a new sandbox by running npx storybook@0.0.0-pr-26527-sha-db4e08ae sandbox or in an existing project with npx storybook@0.0.0-pr-26527-sha-db4e08ae upgrade.

More information

Published version	0.0.0-pr-26527-sha-db4e08ae
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/fix-theming-for-bar-areas
Commit	db4e08ae
Datetime	Fri Mar 15 20:41:38 UTC 2024 (1710535298)
Workflow run	8302078089

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=26527

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a76f857. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many --target=prep --all --parallel=8 --max-parallel=3 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[valentinpalkovic]

All reported visual changes in Chromatic are unrelated to this PR.

[cdedreuille]

Thanks @valentinpalkovic for finding a nice clean work around here. I don't really like to add some custom code in the Button itself but I'm not sure we have that much choice.

Perhaps you could add a comment to explain why we had to do that and the fact that we will remove it in Theming 2.0