UI: Boolean control change for UI Fix toggle button

[cjmcintyre]

Issue: UI: Fix toggle button for custom theming #13924

Boolean control change for UI Fix toggle button for custom themeing

Apologies in advance if anything here is out of your norm.. First time contributing to an O/S project + first time using storybook... 😟

What I did

Reproduced by: git cloning, added custom theming .storybook/YourTheme.js (complex example) and a control button as per examples on playbook website.

When adding the custom theme it seems Control takes the property form barBg as indicated beforehand, the propose change will make it take from appBg instead.

Example of my custom theme

    // UI
    appBg: 'white',
    appContentBg: 'silver',
    appBorderColor: 'grey',
    appBorderRadius: 4,  

    // Toolbar default and active colors
    barTextColor: 'silver',
    barSelectedColor: 'black',
    barBg: 'black',
  

How to test

Tested by: Reproducing above and then applying fix to Boolean.tsx and building locally with yarn build-storybook to test (Sorry no automation this time...)

• Is this testable with Jest or Chromatic screenshots?
  Not sure, sorry.
• Does this need a new example in the kitchen sink apps?
  Not that I'm aware of.
• Does this need an update to the documentation?
  Not that I'm aware of.

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 70d6826. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[ndelangen]

Apologies in advance if anything here is out of your norm.. First time contributing to an O/S project + first time using storybook... 😟

It's very important to us that new contributors feel welcome, and are encouraged.

Thank you very much for fixing this bug @cjmcintyre !

This looks great to me!