From 92d66ea643ef385c5cac78863e630ad7d9b50f23 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:06:26 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20transition=20when=20toggli?=
 =?UTF-8?q?ng=20panel=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This currently has two problems:

1. It does not allow dropdowns from within the options to render lower
   than the boundaries.
2. It transitions the height from viewport height to 0, however all the
   actual panel option divs are shorter than that. This means there is a
   delay before the transition makes a visible change, and the speed is
   much faster than if it went from panel option div's height to 0.

(2) is more of a nuisance and can be addressed by dynamically setting
the max-height based on the containing div's scrollHeight, however (1)
is the prevailing and blocking problem.
---
 src/components/controls/panelSection.tsx |  6 ++++--
 src/components/controls/styles.js        | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index de22a67a9..bd3c34488 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { PanelSectionContainer } from "./styles";
+import { PanelOptionsContainer, PanelSectionContainer } from "./styles";
 import { Title, Tooltip } from "./annotatedTitle";
 import { PanelHeader, PanelId } from "./panelHeader";
 import { RootState } from "../../store";
@@ -42,7 +42,9 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+        {options}
+      </PanelOptionsContainer>
     </PanelSectionContainer>
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 30b57b5db..702905b9a 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -48,6 +48,18 @@ export const PanelSectionContainer = styled.div`
   }
 `;
 
+export const PanelOptionsContainer = styled.div`
+  visibility: hidden;
+  transition: visibility .5s, max-height .5s;
+  max-height: 0;
+  overflow: hidden;
+
+  &.open {
+    visibility: visible;
+    max-height: 100vh;
+  }
+`
+
 export const TitleAndIconContainer = styled.span`
   display: inline-flex;
   align-items: center;