Integration with typescript appears to be broken when using latest deps

[DarrienG]

Describe the issue. What is the expected and unexpected behavior?

On the latest releases of patternfly/typescript, a number of components complain about the css property not being set.

Error message in text:

Property 'css' is missing in type '{ children: string; variant: "primary"; }' but required in type 'Pick<ButtonProps & InjectedOuiaProps, "ref" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "children" | ... 359 more ... | "icon">'.  TS2741

I've done my due diligence here and tried to see if I can fix it myself and came across a number of related issues in other repos over the years.

The emotion repo is the most prominent that suffered from it a while ago: emotion-js/emotion#1249

With the fix being to add emotion types to compilerOptions: emotion-js/emotion#1249 (comment)

Adding:

"compilerOptions": {
    "types": ["@patternfly/react-core"]
}

Does not fix the issue.

I tried clearing my yarn.lock and node_modules and reinstalling and this did not fix either.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

create-react-app test-issue --template typescript
yarn add @patternfly/react-core @patternfly/patternfly
# Add a button somewhere
yarn install && yarn start
# error

I've included a repo I made a few minutes ago to demonstrate the error here.

https://gitlab.com/DarrienG/ts-patternfly-issue

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

The only workaround I can see is not upgrading my deps.

What is your product and what release version are you targeting?

I've included the info in the repo, but these are the patternfly versions that have the issue:

    "@patternfly/patternfly": "2.65.3",
    "@patternfly/react-core": "3.140.11",

Using node 13.8.0, yarn v1.22.0 (all latest) on Ubuntu 19.10 (sorry not fedora).

Upgrading from "@patternfly/react-core": "3.134.2 and "typescript": "3.7.2" to "typescript": "3.7.4"

[seanforyou23]

I'm seeing this also. I was able to update to as far as 3.136.6 without getting the error.

[idevat]

+1

[redallen]

Hey, @DarrienG, you are correct that our types for button are wrongly requiring css: string. it looks like our higher order OUIA component is causing a mess with our exported types. I've submitted #3872 to fix this issue.

We're changing these types even further soon (within 2 weeks, maybe this week!) as a part of our breaking change release, so hopefully this isn't a problem ever again. See this PR comment for details: #3622 (comment)

[DarrienG]

I'm not entirely sure what it all means, but I appreciate the work being done to fix it and hopefully make it so it doesn't happen again.

Thank you!

[ibolton336]

Still seeing this issue occur when consuming the TextInput component in a downstream typescript project.

[idevat]

If I remember correctly, I met this issue in components Button, TextInput and Alert but I haven't tried fixed version yet.

[DarrienG]

Confirming it is still not fixed on the latest release.

My assumption is that the fix hasn't been made into an official release yet.

Current latest version with the issue: @patternfly/react-core@3.146.0

[redallen]

Hey @DarrienG , I believe this should be fixed in our latest release, @patternfly/react-core@3.146.0. Could you try that?