Ability to exclude some chained prop types

[mustran]

Is your feature request related to a problem? Please describe.
I am trying to generate docs for a library and suddenly I got into a problem where I can't exclude some inherited types (props) from TypeScript.

TypeScript types:

type ContentProps = {
  icon?: ReactNode | null;
  iconPosition?: string;
  children?: any;
};

export type Props = ButtonHTMLAttributes<HTMLButtonElement> &
  ContentProps & {
    buttonModifiers?: Array<string>;
    sizeType?: Size;
    style?: CSSProperties;
    className?: string;
    fullWidth?: boolean;
    fullHeight?: boolean;
  };

Button Component:

const Button = (props: Props) => ()

Describe the solution you'd like
I want to be able to remove the props from HTMLButtonElement so it shows only the ContentProps and the other defined props (buttonModifiers,sizeType etc).

Describe alternatives you've considered
None.

Are you able to assist bring the feature to reality?
maybe ..

Screenshot

[shilman]

Sort of dupe to #7943

[mustran]

@shilman As I can see, the issue is still opened which means that there is still no support for this feature ? If that is the case, in which version we should expect this feature to be available ?

[shilman]

@mustran Either 6.0, which should be stable by mid-May, or 6.1, which should be stable mid-Summer.

[stale]

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]

A workaround I've added is the ability to specify props include and exclude:

type PropDescriptor = string[] | RegExp;

interface BaseProps {
  include?: PropDescriptor;
  exclude?: PropDescriptor;
}

So you could achieve what you want by only including non-chained props. E.g.:

const include = ['buttonModifiers', 'sizeType', 'style', 'className', 'fullWidth', 'fullHeight'];

<Props of={Button} include={include} />;

[mustran]

Hi @shilman. Thank you a lot for your answer, it looks amazing.
Is the feature available in the beta version ?

[shilman]

@mustran Yeah, available for a couple weeks #10464

LMK if that works for you!

[mustran]

@shilman I deleted node_modules, installed the beta version and when I run yarn run storybook I get this error:

Also, this is how my scripts are defined:

and in the dependencies I have storybook: '6.0.0-beta/2'

[shilman]

https://raw.githubusercontent.com/storybookjs/storybook/next/examples/official-storybook/stories/addon-docs/props-include-exclude.stories.mdx

[shilman]

Disabling via argTypes customization:

https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-can-i-disable-controls-for-certain-fields-on-a-particular-story

Disabling via propFilter:

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