Reakit: Typing Issues with multiple components

Created on 21 Sep 2018  路  4Comments  路  Source: reakit/reakit

Bug report

What is the current behavior?

In a pure Typescript Project, Button props aren't inferring correctly.

Error output

[at-loader] Checking finished with 1 errors
[at-loader] ./src/components/Atoms/Button/Button.stories.tsx:7:14
    TS2322: Type '{ children: string; }' is not assignable to type 'Pick<ThemedOuterStyledProps<Pick<Pick<ThemedOuterStyledProps<Pick<{ as: ComponentType<{}>; }, "as"> & { theme?: any; } & BoxProps, any>, "opaque" | "fixed" | "absolute" | "relative" | "static" | "sticky" | "theme" | "palette" | "tone" | "innerRef"> & Pick<...> & { ...; } & StandardProperties<...> & Pick<...>, "as" |...'.
  Property 'boxAlign' is missing in type '{ children: string; }'.

If the current behavior is a bug, please provide the steps to reproduce.

Just using the component as documented.

image

What is the expected behavior?

I should be able to import button and use it without any required props.

e.g.

<Button>Text</Button>


Other relevant information:

reakit version: 0.15.1

typescript version: 3.0.3

bug typings

Most helpful comment

Thank you for reporting it, @codyaverett.

I tried to reproduce it with our test.tsx without success. I'm gonna try it with another project. How is your tsconfig.json?

UPDATE: I can reproduce it in a new project. Investigating...

UPDATE: These are the problematic props. I'm not sure why it's happening only with them:

boxAlign=""
boxFlexGroup=""
boxLines=""
boxOrdinalGroup=""
initialLetterAlign=""
offsetBlockEnd=""
offsetBlockStart=""
offsetInlineEnd=""
offsetInlineStart=""

All 4 comments

From what I have found thus-far it happens for Heading, Card.Fit, and Paragraph as well. The commonality between these is is that they all expecting me to provide boxProps to the component props. They aren't optional apparently.

Card and Box work fine.

How the typings work in Reakit are a little confusing to me still, so i can't wait to see the results of #229

I'll see what else I can find out.

Thank you for reporting it, @codyaverett.

I tried to reproduce it with our test.tsx without success. I'm gonna try it with another project. How is your tsconfig.json?

UPDATE: I can reproduce it in a new project. Investigating...

UPDATE: These are the problematic props. I'm not sure why it's happening only with them:

boxAlign=""
boxFlexGroup=""
boxLines=""
boxOrdinalGroup=""
initialLetterAlign=""
offsetBlockEnd=""
offsetBlockStart=""
offsetInlineEnd=""
offsetInlineStart=""

Should be fixed in v0.15.2

Perfect! I tested it and it works now!
Thanks for the quick response and help @diegohaz

Was this page helpful?
0 / 5 - 0 ratings