Storybook: Props table shows extra unwanted props not specified in the code

[kruthivijay31]

Describe the bug
I am getting a long list of props

Screenshot
https://github.com/storybookjs/storybook/files/4652429/storybook.pdf

Expected behavior
Show only the props passed in the tsx file

Code snippets
props

export type CommonProps = {
  /**
    * Used to change the size of the button
    * @default lg
  */
  size?: 'md' | 'sm'
  /**
    * Used to display button in dark background
    * @default false
  */
  inverse?: boolean
  /**
    * Used to change the button type
    * @default false
  */
  secondary?: boolean
  /**
    * Used to add an icon to the button
    * @default false
  */
  icon?: boolean
  /**
    * Used to add custom styles
  */
  className?: string
  /**
    * Used to add children
  */
  children?: React.ReactChild | React.ReactChild[]
  /**
    * Used to change the button to be used as any other element e.g. link
  */
  as?:
    | keyof JSX.IntrinsicElements
    | React.JSXElementConstructor<{className?: string}>
} & ButtonHTMLAttributes<HTMLButtonElement> &
  BaseHTMLAttributes<HTMLAnchorElement>

tsconfig.sb.json

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": ["../src"],
    "baseUrl": "../src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "esModuleInterop":true
  },
  "include": ["packages/**/*.tsx"],
  "exclude": ["node_modules"]
}

storybook main.js

module.exports = {
  stories: ["../packages/**/*.stories.mdx"],
  addons: [
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve("ts-loader"),
          options: {
            configFile: "tsconfig.storybook.json",
          },
        },
        {
          loader: require.resolve("react-docgen-typescript-loader"),
        },
      ],
    })
    config.resolve.extensions.push(".ts", ".tsx")
    return config
  },
}

package.json

"dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@paypalcorp/pp-react": "^6.4.0",
    "@paypalcorp/pp-vx": "^3.8.0",
    "@storybook/addon-docs": "^5.3.14",
    "@storybook/react": "^5.3.14",
    "@storybook/storybook-deployer": "^2.8.6",
    "babel-loader": "^8.0.6",
    "clsx": "^1.1.0",
    "react-docgen-typescript-loader": "^3.7.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3"
  }

Additional context
Not sure where these props are coming from.

[shilman]

They are coming from here:

& ButtonHTMLAttributes<HTMLButtonElement> &
  BaseHTMLAttributes<HTMLAnchorElement>

[kruthivijay31]

ah, is there a way to suppress this? I thought the complex props/interface were resolved as union in storybook, correct me if i am wrong.

[kruthivijay31]

@shilman any workaround to suppress these props?

[shilman]

@kruthivijay31 https://github.com/storybookjs/storybook/issues/8538#issuecomment-634080579

[kruthivijay31]

We are using 5.3.x hence tried using @ignore

export type CommonProps = {
  /**
    * Used to add children
  */
  children?: React.ReactChild | React.ReactChild[]
 /**
    * @ignore
  */
  as?:
    | keyof JSX.IntrinsicElements
    | React.JSXElementConstructor<{className?: string}>
} & ButtonHTMLAttributes<HTMLButtonElement> &
  BaseHTMLAttributes<HTMLAnchorElement>

ignore works for props inside {} and not outside.
ignores as but not able to ignore.

  /**
    * @ignore
  */
 & ButtonHTMLAttributes<HTMLButtonElement> &
  BaseHTMLAttributes<HTMLAnchorElement>

@shilman Can you please let me know the release timeline for 6.0 stable version release. Looks like these timelines are not upto date https://github.com/storybookjs/storybook/issues/9311,
This will help us to make a decision whether to wait for 6.0 release to adopt the propfilter or find a workaround with 5.3.

I really appreciate all the quick responses in this forum, great work!!

[shilman]

@kruthivijay31 Apologies for the outdated release dates. I've updated the issue with new estimates. Hopefully we can get it out ahead of those dates, but it's been slipping so I want to make sure we have ample time.

[kruthivijay31]

Thanks @shilman !!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

FYI this has been updated in 6.0 and probably works out of the box. see the default propFilter:

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md#mainjs-configuration

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!