search

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

v6 - warnings with failed prop types for borderTop, borderBottom... #1208

Closed psiho closed 3 years ago

psiho commented 3 years ago

My project after upgrade to v6 throws warnings:

Warning: Failed prop type: Invalid prop `borderBottom` of type `boolean` supplied to `Box`, expected `string`.
    in Box (created by ForwardRef(Pane))
    in ForwardRef(Pane)
    in ForwardRef(Pane) (created by ForwardRef(Card))
    in ForwardRef(Card)
    in ForwardRef(Card) (created by OfferEdit)

same thing for all 4 border types.

akleiner2 commented 3 years ago

Interesting - I just tried to repro that here, but not seeing it: https://codesandbox.io/s/eloquent-johnson-597k9?file=/src/App.tsx

Are you looking in a dev environment? What does a minimal repro-able example look like?

psiho commented 3 years ago

Yes, dev environment. Ill try to setup an example. Will take me a day or two as I'm on a very tight schedule this week.

Basically I just updated evergreen to v6 and reported differences from v5 on my project in progress.

Will get back to you soon.

akleiner2 commented 3 years ago

All good - going to keep this open and hopefully see what you're seeing. 👍

psiho commented 3 years ago

Ok, iI found out where it is comming from. It's in this line and property border={false} causes it:

<Card {...cardStyle} border={false} background="transparent" display="flex" justifyContent="space-between">

border={true} does not cause it and works properly. I'm pretty sure I was not getting this in v5. I'm building a project in typescript and was relying on my editor to describe props. For card prop border I get: (JSX attribute) PaneOwnProps.border?: string | boolean | undefined

... so I guess either there's a problem with typings or in code. For now, it's easy to get around this by using border="0" instead.

akleiner2 commented 3 years ago

So, the typings and the run-time behavior are actually correct, it's just a matter of how these props get generated that ends up pretty noisy.

Under the hood, we use ui-box. You can see the prop types declarations are probably incorrect here: https://github.com/segmentio/ui-box/blob/master/src/enhancers/border-radius.ts#L6. Happy to accept a PR over there, but for now going to close this out as the actual behavior is as expected.