Skip to content

[Bug]: Storybook Angular not setting required Inputs() correctly #28706

Open

Description

Describe the bug

I have a very simple component with a story. The component has an input:
@Input({ required: true }) public title: string;

Compodoc successfully generates the correct object:

   {
      "required": true,
      "name": "title",
      "deprecated": false,
      "deprecationMessage": "",
      "optional": false,
      "line": 20,
      "type": "string",
      "decorators": []
    }

However it appears the Storybook does not pick up the required property automatically (implied by the docs that Storybook will infer required fields) and set the argType in the table to required.

If I manually add the required flag to the argTypes in the story meta, it works (with some caveats)

Story meta (shortened for brevity)

const meta: Meta<TestComponent> = {
  title: 'TestComponent',
  component: TestComponent,
  argTypes: {
    title: {
      // @ts-ignore
      type: { required: true },
      control: { type: 'text' },
    },
  },
};

So here we see the second issue. I have to add @ts-ignore as it throws a Typescript error Type { required: true; } is not assignable to type - however it works, so feels like something is missing from the @storybook/angular Meta type

I've noticed that if you set argType with a name, typescript doesn't complain:

type: { name: 'string', required: true },

Feels strange having to set the name to one of the accepted types, as it doesn't appear to actually do anything. Could maybe make name optional?

Reproduction link

https://stackblitz.com/edit/storybook-angular-required-fields?file=src%2Fstories%2Fbutton.stories.ts

Reproduction steps

  1. Go to the above link (might need to manually navigate to the Primary button story in the preview)
  2. Note the required field is appearing after manually setting type: { required: true}
  3. Remove @ts-ignore to see first issue - Angular Meta definition doesn't see type as valid
  4. Remove the argType.primary config entirely so it reverts to Storybooks inferred setup for the control
  5. Notice how the field is not marked as required even though compodoc marks it as required: true

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-essentials: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-interactions: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-links: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-onboarding: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/angular: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/blocks: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/test: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    storybook: ^8.3.0-alpha.2 => 8.3.0-alpha.2 

Additional context

Feels like there's two issue here but closely related:

  1. The Meta type from @storybook/angular needs to be able to see type: {} as valid if just required is set
  2. Probably more important to me, Storybook needs to infer from compodoc that if a field is marked as required in the component and the property "required": true exists in the documentation.json then automatically mark that control as required without having to manually add that info to the control. Much nicer dev experience
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions