storybookjs/storybook

[Bug]: Boolean prop set to 'false' for subcomponent is not showing up in show code section.

Open

#26582 opened on Mar 20, 2024

View on GitHub
 (3 comments) (7 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedsev:S3

Description

Describe the bug

If I have story that uses another component in it and is set in subcomponents the boolean prop set for that component is not shown correctly in show code section. If I pass for example primary={true} it shows as just primary, but if I pass primary={false} nothing is shown. This present on version 7 and 8 and potentially some older versions. I would like it to be shown even if it is set to false.

To Reproduce

  1. Follow this guide
  2. Add simple wrapper component:
import React from "react";

interface ContainerComponentProps {
  children: React.ReactNode;
}

export const ContainerComponent = ({ children }: ContainerComponentProps) => {
  return <div id="container">{children}</div>;
};
  1. Add story with subcomponent Button from example components. Add autodocs and set primary={false}
import type { StoryFn } from "@storybook/react";
import { ContainerComponent } from "./ContainerComponent";
import { Button } from "./Button";

const meta = {
  title: "Example/ContainerComponent",
  component: ContainerComponent,
  subcomponents: { Button },
  tags: ["autodocs"],
};

export default meta;
type Story = StoryFn<{}>;

export const Primary: Story = (args) => (
  <ContainerComponent {...args}>
    <Button label="test" primary={false} />
  </ContainerComponent>
);

  1. Run storybook, open Story for ContainerComponent go to Docs and press show code on example.
<ContainerComponent>
  <Button
    label="test"
  />
</ContainerComponent>

The boolean prop is trimmed.

System

System:
    OS: macOS 14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.17.0/bin/npm <----- active
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: ^7.6.10 => 7.6.10 
    @storybook/addon-interactions: ^7.6.10 => 7.6.10 
    @storybook/addon-links: ^7.6.10 => 7.6.10 
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11 
    @storybook/blocks: ^7.6.10 => 7.6.10 
    @storybook/preset-create-react-app: ^7.6.10 => 7.6.10 
    @storybook/react: ^7.6.10 => 7.6.10 
    @storybook/react-webpack5: ^7.6.10 => 7.6.10 
    @storybook/test: ^7.6.10 => 7.6.10 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^7.6.10 => 7.6.10

Additional context

No response

Contributor guide