search

segmentio / evergreen

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

FileUploader shadows TextInput's borders #1581

Closed pot-code closed 1 year ago

pot-code commented 1 year ago

When both <FileUploader> and <TextInput> present, TextInput's border would disappear.

Reproduction link: https://codesandbox.io/s/evergreen-ui-shadow-input-border-vveww1

brandongregoryscott commented 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.

brandongregoryscott commented 1 year ago

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