[Bug]: Default values on select controls aren't keep as defined

[SalahAdDin]

Describe the bug

So we defined the following configuration:

mport { Chip, CHIP_COLORS, CHIP_VARIANTS } from "./Chip";

const meta: Meta<typeof Chip> = {
  component: Chip,
  argTypes: {
    color: {
      options: CHIP_COLORS,
      control: "select",
      defaultValue: "neutral",
    },
    variant: {
      options: CHIP_VARIANTS,
      control: "select",
      defaultValue: "filled",
    },
  },
};

export default meta;

type Story = StoryObj<typeof Chip>;

export const Simple: Story = {
  args: {
    label: faker.lorem.word(),
  },
};

export const Label: Story = {
  args: {
    label: <LiveLabel />,
  },
};

export const Link: Story = {
  args: {
    label: faker.lorem.word(),
    to: faker.internet.url(),
  },
};

with:

export const CHIP_COLORS = [
  "error",
  "info",
  "neutral",
  "success",
  "warning",
] as const;

export const CHIP_VARIANTS = ["filled", "outlined"] as const;

We expect to see neutral and filled as default values on the controls, but:

To Reproduce

Demo.

System

   ~/Projects/TRT/twe_fe_next    feature/TGLS…article-page *1 !4 ?12  npx storybook@latest info                                                                                                                                                  ✔  20.11.0  
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.1 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: 7.6.15 => 7.6.15 
    @storybook/addon-essentials: 7.6.15 => 7.6.15 
    @storybook/addon-interactions: 7.6.15 => 7.6.15 
    @storybook/addon-links: 7.6.15 => 7.6.15 
    @storybook/addon-onboarding: 1.0.11 => 1.0.11 
    @storybook/addon-storysource: 7.6.15 => 7.6.15 
    @storybook/addon-themes: 7.6.15 => 7.6.15 
    @storybook/blocks: 7.6.15 => 7.6.15 
    @storybook/nextjs: 7.6.15 => 7.6.15 
    @storybook/react: 7.6.15 => 7.6.15 
    @storybook/test: 8.0.0-alpha.16 => 8.0.0-alpha.16 
    @storybook/theming: 7.6.15 => 7.6.15 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: 7.6.15 => 7.6.15 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2 
    storybook-addon-rtl: 0.5.0 => 0.5.0

Additional context

No response

[vanessayuenn]

Hi @SalahAdDin, to set default value, you should be using args instead. Something like this:

const meta: Meta<typeof Chip> = {
  component: Chip,
  argTypes: {
    color: {
      options: CHIP_COLORS
    },
    variant: {
      options: CHIP_VARIANTS
    },
  },
  args: {
    color: 'neutral',
    variant: 'filled'
  }
};

See this FAQ also.