Right now, SlideOverPanel can be opened/closed by passing <SlideOverPanel open={isPanelOpen} or by conditionally rendering it with isPanelOpen && <SlideOverPanel. This is problematic because when there are two ways to open/close something, it means there are multiple ways we need to account for when thinking about animations and deferring rendering the contents.

This PR removes the open prop. SlideOverPanel now must be rendered conditionally with && in JSX. This required an update to how the contents are deferred on mount, but otherwise behaviour is preserved.

I was pushed towards the isOpen && API due to a practical problem in Dashboards, but I also think it's a reasonable choice overall.

Rationale

Consider:

<Container>
  <SlideOverPanel ...
  <PreviewWidget /...
</Container>

Imagine that the container has a panel, and a preview which both take up half the screen and slide in from opposite sides. The container takes up the full screen, and is shown over some background content. It's offset against the main sidebar.

• the container must exist to account for the sidebar, and to correctly split space between the panel and preview
• the container must take up the whole screen, which means it prevents clicks on content underneath
• I need to hide/show the container, panel, preview when users click on buttons in the UI
• the panel and preview both have a slight animation to make it less jarring when they open-close

+-------------------------+
| +---------++---------+  |
| |         ||         |  |
| |         ||         |  |
| | Panel   || Preview |  |
| |         ||         |  |
| |         ||         |  |
| |         ||         |  |
| +---------++---------+  |
|                         |
|  Container              |
|                         |
+-------------------------+

There are two major problems.

1. How should I go about hiding/showing the container? The container blocks the content underneath. When the panel and the preview close, how do I hide the container? I could either make it "invisible" by turning off opacity and pointer events, or use display: none. The former is messy, and error prone. It's easy to accidentally leave this in, and cause issues with clicks. The latter is difficult, how do I coordinate setting display: none vs. the panel and preview when they slide? This is the case in the Widget Builder.
2. What if I need to remount the Container for some reason? e.g., the container might have some kind of context, or something else that needs to be remounted or re-rendered that might cause a re-mount of the panel. In that case, deferring the content of the panel won't work, since it's relying on the open prop state changing, but on initial mount there is no change. This is also the case in the Widget Builder. It's not possible to have a deferral mechanism that works both on mount and on prop change!

If the API is isOpen && these problems are solved. I can just mount/unmount the entire tree, and everything works as expected. Since there is only one way to show/hide the panel, I can use one deferral method, and I don't need explanations in the doc for how to handle animations and deferral.

In short, controlling mounting/unmounting is a lot easier than controlling an open prop because I don't have to worry about keeping surrounding components in the DOM just to make animations and deferred rendering work.