Doesn't support union types

[jeffcstock]

Consider the following:

Working, no union type

export const Button = (props: ButtonProps) => { ... }

Broken when union type (&) used

export const Button = (
  props: ButtonProps & React.HTMLAttributes<HTMLButtonElement>
) => { ... }

Any help would be much appreciated.

[NathanDeveloping]

The same problem is occuring to me. I'm using interface and inheritance as a workaround.

It might be cool to be able to distinguish props & extended props too.

[kennycrosby]

@NathanDeveloping I am running into this as well, can you elaborate on your workaround?

[YozhEzhi]

@jeffcstock Sorry for offtop, but how you styled TS docs so beauty? :)

Where I can find info to make my docs as pretty as yours? Thanks.

[kennycrosby]

@YozhEzhi I believe he is using this addon: https://www.npmjs.com/package/@storybook/addon-docs

[YozhEzhi]

@kennycrosby I think you're right. Thanks!

[NathanDeveloping]

@kennycrosby, with your example :

export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
// extra button props
}

export const Button: React.FunctionComponent<ButtonProps> = ({
 // props decomposed
}) => { ... }

In this way, doc generation works.

[dancingshell]

I also have used React.FC in this case and it works

export const Button: React.FunctionComponent<ButtonProps & React.HTMLAttributes<HTMLButtonElement>> = (props) => {...}