Regression with default value not being selected in Controls column

Describe the bug We’ve been loving Storybook with our Typescript setup, but after upgrading from 6.2.9 to 6.3.0, we’ve lost the feature to have SB select the default value in the Controls column.

For example, in the demo files produced with npx sb init, a Button.tsx is created. Its size prop has a default value of medium, but the RadioControl does not select the radio option labeled medium anymore.

To Reproduce I have a very simple reproduction repo which simply ran npx sb@next repro with no manual configurations.

System Environment Info:

System: OS: macOS 11.4 CPU: (8) x64 Intel® Core™ i7-1068NG7 CPU @ 2.30GHz Binaries: Node: 12.20.2 - ~/rg/community/bin/build/nodejs/bin/node Yarn: 1.22.5 - ~/rg/community/bin/build/yarn/bin/yarn npm: 6.14.11 - ~/rg/community/bin/build/nodejs/bin/npm Browsers: Chrome: 91.0.4472.114 Firefox: 89.0 Safari: 14.1.1

Additional context I’m not that familiar with SB’s codebase, but what I can tell is that the value prop for RadioControl is undefined. The only time this is not undefined is when the Story supplies it via the args property, i.e.

const Template: ComponentStory<typeof Button> = (args) => <Button {...args />

const Example1 = Template.bind({});

Example1.args = {
  size: 'large'
}

[tmeasday]

@penx 👋 - so the issue here is that it is setting it to undefined rather than not setting it at all?

[DaniGuardiola]

@shilman would it be possible to just not pass any value at all to the props? The current behavior messes with our setup:

• We have completely typed props.
• We also have docs for the defaults in the form of JSDoc comments.
• Example of the above:

export interface AvatarProps {
  /**
   * The visual style of the avatar.
   * @default "user"
   */
  variant?: "user" | "entity";

  /**
   * The avatar size.
   * @default "medium"
   */
  size?: "xs" | "small" | "medium" | "large" | "xl" | "2xl";
}

• Then, to enforce the default and still have good type safety, we use this pattern:

const DEFAULT_PROPS = {
  variant: "user",
  size: "medium",
  isButton: false,
} as const;

function Avatar(
  props: AvatarProps
): ReactElement {
  const propsWithDefaults = { ...DEFAULT_PROPS, ...props };
  // ...
}

This allows us to have:

1. Full type safety.
2. Documentation on default values.
3. A propsWithDefaults object that automatically gets the resolved types for each props, potentially with defaults. E.g. instead of 'user' | 'entity' | undefined the type gets resolved to 'user' | 'entity' which is great since that’s the actual type due to the default, and undefined is not an option.
4. Barely any boilerplate, which is great given how cumbersome it usually is to implement defaults with typescript on a React component.

This worked great for earlier versions of storybook, but now I have two issues:

• The defaults stopped working. They don’t show up in their column on the args table.
• Due to storybook passing an object with all props set to undefined, the object spread (which will accept any own property, no matter the value) is replacing the default props with undefined.

This is an awkward situation, because if you look at the types, the component always expects some props to have a value (for example the variant prop above), but it comes with undefined which typescript doesn’t even contemplate.

Doesn’t it suffice just not setting the props at all? Otherwise, this will force us to either not upgrade or change our whole codebase for a storybook quirk 😕

By the way, I’ve also realized that this is only happening the second time a component is loaded in storybook. The first time, it’s fine. This was one of the biggest head-scratchers I initially found 😛

Thank you!