From bf614447950053b9a2086800032029bb047d4817 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 31 May 2021 18:12:33 -0300
Subject: [PATCH] styles: add animation for tags expanding/collapsing

---
 .../javascripts/components/NoteTags.tsx       | 23 +++++++++----------
 app/assets/stylesheets/_sn.scss               |  4 ++++
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index ab7a84620..ce9ad8de1 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -35,14 +35,11 @@ const NoteTags = observer(({ application, appState }: Props) => {
   const tagsRef = useRef<HTMLButtonElement[]>([]);
   const overflowButtonRef = useRef<HTMLButtonElement>();
 
-  useCloseOnClickOutside(
-    tagsContainerRef,
-    (expanded: boolean) => {
-      if (overflowButtonRef.current || tagsContainerExpanded) {
-        appState.activeNote.setTagsContainerExpanded(expanded);
-      }
+  useCloseOnClickOutside(tagsContainerRef, (expanded: boolean) => {
+    if (overflowButtonRef.current || tagsContainerExpanded) {
+      appState.activeNote.setTagsContainerExpanded(expanded);
     }
-  );
+  });
 
   const onTagBackspacePress = async (tag: SNTag) => {
     await appState.activeNote.removeTagFromActiveNote(tag);
@@ -114,15 +111,17 @@ const NoteTags = observer(({ application, appState }: Props) => {
     mt-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`;
 
   return (
-    <div className="flex" ref={containerRef} style={{ height: tagsContainerHeight }}>
+    <div
+      className="flex transition-height duration-150"
+      ref={containerRef}
+      style={{ height: tagsContainerHeight }}
+    >
       <div
         ref={tagsContainerRef}
-        className={`absolute flex flex-wrap pl-1 -ml-1 ${
-          tagsContainerExpanded ? '' : 'overflow-hidden'
-        }`}
+        className="absolute flex flex-wrap pl-1 -ml-1 overflow-hidden transition-height duration-150"
         style={{
           maxWidth: tagsContainerMaxWidth,
-          height: TAGS_ROW_HEIGHT,
+          height: tagsContainerHeight,
         }}
       >
         {tags.map((tag: SNTag, index: number) => (
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 4d4746c82..56744c242 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -236,6 +236,10 @@
   white-space: nowrap;
 }
 
+.transition-height {
+  transition-property: height;
+}
+
 /**
  * A button that is just an icon. Separated from .sn-button because there
  * is almost no style overlap.