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?

[DarrienG]

Confirming now it is fixed for some components, but not all. TextInput is one of the components still broken (but Button is now fine).

TypeScript error in /home/darrien/developer/webdev/test-issue/src/App.tsx(14,10):
Property 'css' is missing in type '{ id: string; value: string; type: "text"; }' but required in type 'Pick<TextInputProps, "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "hidden" | "wrap" | "innerRef" | "className" | ... 350 more ... | "validated">'.  TS2741

    12 |       <header className="App-header">
    13 |         <Button variant="primary">Get started</Button>
  > 14 |         <TextInput id="error" value="needs css" type="text"/>
       |          ^
    15 |         <img src={logo} className="App-logo" alt="logo" />
    16 |         <p>
    17 |           Edit <code>src/App.tsx</code> and save to reload.

I updated the repo I was using to show the issue to @patternfly/react-core@3.146.0 so you can see here: https://gitlab.com/DarrienG/ts-patternfly-issue

It seems like some components got the update, but others didn't? I'm not certain all of the components that may or may not have been fixed, but TextInput is definitely one of them.

[DarrienG]

Could this issue be updated when a release with the fix is pushed out? I check in every so often, and update every once in a while to see if it's fixed, but the latest release is still 3.146.0 which has the issue.

[redallen]

Hey @DarrienG , we're releasing Monday March 31 or Tuesday April 1. In the meantime you can try our prerelease package which is @patternfly/react-core@^3.152.0.