search

react-native-community / upgrade-helper

⚛️ A web tool to support React Native developers in upgrading their apps.
https://react-native-community.github.io/upgrade-helper
MIT License
3.67k stars 112 forks source link

Revamp `UsefulContentSection` #235

Closed lucasbento closed 4 years ago

lucasbento commented 4 years ago

Summary

This PR adds a little bit of ✨ to UsefulContentSection so user can notice it better, it also puts the AppNameWarning inside of it as well as make it no longer closable but rather collapsable.

Test Plan

Make sure that it looks good, it collapses fine and all the links are easily readable and clickable.

Checklist

Before ![image](https://user-images.githubusercontent.com/6207220/79551422-ee06dc00-8099-11ea-8619-21aa5c147b94.png)
After ![image](https://user-images.githubusercontent.com/6207220/79551449-f7904400-8099-11ea-9c05-daa579c2002a.png)
Almost *8 megabytes* GIF showcasing the collapsing animation ![Gif](https://user-images.githubusercontent.com/6207220/79551753-65d50680-809a-11ea-8cc9-6913b23ea1c2.gif)

Thanks to @thymikee for the suggestions for this 🙂

lucasbento commented 4 years ago

(It's a biiit laggy for me, maybe firefox is not being supergreat animating it? 🤔)

Weird, I'll check on Firefox!

pvinis commented 4 years ago

But don't worry too much, merge whenever you feel like doing it! :D

thymikee commented 4 years ago

The animation will be laggy in any browser powered by sufficiently slow CPU, because it's a layout property max-height that's being animated. I wouldn't bother too much, this targets devs with beefed up machines and I personally wouldn't even bother collapsing it 🤷

lucasbento commented 4 years ago

Added some changes which includes the use of https://github.com/Stanko/react-animate-height and translate instead of animation margin/padding transitions, it improves a little bit the animation on Firefox but it still doesn't look sharp.

pvinis commented 4 years ago

🙌 It is indeed better.

Merge when you want! :D