Matching to color control not working

[ysm1180]

Describe the bug
we declared a matcher for color control in preview.js. And even though we declared '(string | undefined)' type 'backgroundColor' prop, the color matcher is not working. It seems that the its type is defined as undefined with "Addon controls: Control of type only supported string, received "undefined" message in console. The default value of 'backgroundColor' prop was specified, but the same bug also occurred.

To Reproduce
A simple example.

button.tsx

import React from 'react';

export interface ButtonProps {
  backgroundColor?: string;
}

export const Button: React.FC<ButtonProps> = ({ backgroundColor = '#36A3FF' }) => {
  return (
    <button type="button" style={{ backgroundColor }}>
      Button
    </button>
  );
};

button.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react';

import { Button, ButtonProps } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  args: {
    backgroundColor: '#36A3FF'
  }
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
};

preview.js

export const parameters = {
    actions: { argTypesRegex: '^on.*' },
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/,
        },
    },
};

System
Environment Info:

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Binaries:
Node: 15.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 7.7.6 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.59)
npmPackages:
@storybook/addon-a11y: ^6.3.1 => 6.3.1
@storybook/addon-actions: ^6.3.1 => 6.3.1
@storybook/addon-essentials: ^6.3.1 => 6.3.1
@storybook/addon-links: ^6.3.1 => 6.3.1
@storybook/addon-storysource: ^6.3.1 => 6.3.1
@storybook/react: ^6.3.1 => 6.3.1

┆Issue is synchronized with this Asana task by Unito

[SimeonRolev]

This must be some kind of regression, I had a color picker, now without any changes, its plain text field. Adding a proper HEX color works as expected, just not the color picker.

[shilman]

Possible duplicate to #15446

[shilman]

Can you please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏

[alee8]

I have created a reproduction of this issue using npx sb@next repro.
Here's the repo - https://github.com/alee8/sb-color-issue

[yannbf]

I have created a reproduction of this issue using npx sb@next repro.
Here's the repo - https://github.com/alee8/sb-color-issue

Thank you so much for the repro! I'll get onto it soon

[shilman]

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.15 containing PR #15549 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.5 containing PR #15549 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade