Closed pot-code closed 1 year ago
~Ah, good catch - I think this is from the style leaking issue in ui-box 5.2.0 - 5.3.0 (https://github.com/segmentio/ui-box/issues/126). Upgrading our version to 5.4.0 should solve this.~
Edit: I'm actually seeing this behavior as far back as 6.9.0, so my original hunch around the ui-box issue doesn't seem to hold. Going to dig into how those selectors were setup originally.
I put together a minimal reproduction sandbox using Box
components only, which is where I think this problem lies:
https://codesandbox.io/s/fileuploader-textinput-border-minimal-reproduction-g0hk6l?file=/src/App.tsx
I believe we've had similar issues with the flex
shorthand prop and the separate flex sizing props (flexGrow
, flexShrink
, flexBasis
):
:loudspeaker: Hey team, if you're using combo of flex and flexBasis props, make sure to not set them separately and use a shorthand version: flex="[flexGrow] [flexShrink] [flexBasis]" otherwise there's a risk your layout will not look as expected due to a complicated bug in ui-box (which is a base for all Evergreen components). For example, flex="none" flexBasis={100} => flex="0 0 100px".
Brief description of the bug: ui-box generates a separate class name for each rule and inserts it into a
When both
<FileUploader>
and<TextInput>
present, TextInput's border would disappear.Reproduction link: https://codesandbox.io/s/evergreen-ui-shadow-input-border-vveww1