fix: dropdown animation [MDS-1358] (#855)

* fix: dropdown animation [MDS-1358]

* fix: test cases

lib/moon/design/dropdown/bottom_options.ex

@@ -46,10 +46,12 @@ defmodule Moon.Design.Dropdown.BottomOptions do
     ~F"""
     <div
       class={merge([
-        "fixed inset-x-0 w-full z-[99999] bottom-0 rounded-t-xl shadow-moon-lg box-border bg-goku shadow-moon-lg overflow-y-auto focus:outline-none",
+        "fixed inset-x-0 w-full z-[99999] bottom-0 rounded-t-xl shadow-moon-lg box-border bg-goku shadow-moon-lg focus:outline-none overflow-hidden",
         dropdown_classes(@as_dropdown_on),
         @class,
-        hidden: !@is_open,
+        @is_open && "translate-y-0",
+        !@is_open && "translate-y-full",
+        "transition-transform duration-300 ease-in-out transform",
         "flex flex-col absolute z-[99] p-1 my-2 w-full top-full rounded-moon-s-md bottom-auto":
           !@as_dropdown_on
       ])}

lib/moon/design/dropdown/options.ex

@@ -40,9 +40,12 @@ defmodule Moon.Design.Dropdown.Options do
     <div
       class={merge([
         "flex flex-col absolute z-[99]",
-        "p-1 rounded-moon-s-md box-border bg-goku shadow-moon-lg overflow-y-auto focus:outline-none",
+        "p-1 rounded-moon-s-md box-border bg-goku shadow-moon-lg overflow-hidden focus:outline-none",
         (@position && position_class(@position)) || "w-full top-full my-2",
-        [hidden: !@is_open, "p-0": slot_assigned?(:header) || slot_assigned?(:footer)],
+        @is_open && "max-h-96 opacity-100 scale-100",
+        !@is_open && "max-h-0 opacity-0 scale-95",
+        ["p-0": slot_assigned?(:header) || slot_assigned?(:footer)],
+        "transition-all duration-300 ease-in-out transform",
         get_config(:default_class),
         @class
       ])}

test/moon_web/examples/dropdown/default_test.exs

@@ -8,14 +8,23 @@ defmodule MoonWeb.Examples.Dropdown.DefaultTest do
            |> element("#dropdown-02 div[aria-haspopup=true]")
            |> render() =~ "Choose name..."
 
-    assert view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element("#dropdown-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]")
+           |> has_element?()
 
     view
     |> element("#dropdown-02 div[aria-haspopup=true]")
     |> render_click()
 
-    assert view |> element("#dropdown-02 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-02 div[role=listbox][class*=\"max-h-96\"][class*=\"opacity-100\"]"
+           )
+           |> has_element?()
+
+    refute view
+           |> element("#dropdown-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]")
+           |> has_element?()
   end
 
   test "should select", %{conn: conn} do
@@ -32,7 +41,9 @@ defmodule MoonWeb.Examples.Dropdown.DefaultTest do
 
     assert select |> render() =~ "Wade Cooper"
 
-    assert view |> element("#dropdown-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element("#dropdown-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]")
+           |> has_element?()
   end
 
   # TODO: add screenshot test of default state, hover state, open state, selected state

test/moon_web/examples/dropdown/option_layouts/with_checkbox_test.exs

@@ -8,7 +8,12 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do
            |> element("#dropdown-options-03 div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-options-03 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
+
     assert view |> element("#dropdown-options-03 div.border-trunks") |> has_element?()
     assert view |> element("#dropdown-options-03 div.border-piccolo.bg-piccolo") |> has_element?()
 
@@ -17,7 +22,12 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithCheckboxTest do
     |> render_click()
 
     assert view |> element("#dropdown-options-03 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-options-03 div.hidden[role=listbox]") |> has_element?()
+
+    refute view
+           |> element(
+             "#dropdown-options-03 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
   end
 
   # TODO: add screenshot test of default state, hover state, open state, selected state

test/moon_web/examples/dropdown/option_layouts/with_icons_test.exs

@@ -8,15 +8,25 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithIconsTest do
            |> element("#dropdown-options-01 div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#dropdown-options-01 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-options-01 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
+
     assert view |> element("#dropdown-options-01 svg.moon-icon.fill-none") |> has_element?()
 
     view
     |> element("#dropdown-options-01 div[aria-haspopup=true]")
     |> render_click()
 
     assert view |> element("#dropdown-options-01 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-options-01 div.hidden[role=listbox]") |> has_element?()
+
+    refute view
+           |> element(
+             "#dropdown-options-01 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
   end
 
   # TODO: add screenshot test of default state, hover state, open state, selected state

test/moon_web/examples/dropdown/option_layouts/with_radio_test.exs

@@ -8,14 +8,23 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithRadioTest do
            |> element("#dropdown-options-02 div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-options-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     view
     |> element("#dropdown-options-02 div[aria-haspopup=true]")
     |> render_click()
 
     assert view |> element("#dropdown-options-02 div[role=listbox]") |> has_element?()
-    refute view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?()
+
+    refute view
+           |> element(
+             "#dropdown-options-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
   end
 
   test "should have radio and should select", %{conn: conn} do
@@ -34,7 +43,11 @@ defmodule MoonWeb.Examples.Dropdown.OptionLayouts.WithRadioTest do
 
     assert view |> element("#dropdown-options-02 span.shadow-piccolo") |> has_element?()
 
-    assert view |> element("#dropdown-options-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-options-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
   end
 
   # TODO: add screenshot test of default state, hover state, open state, selected state

test/moon_web/examples/dropdown/positions/bottom_end_test.exs

@@ -9,7 +9,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomEndTest do
            |> has_element?()
 
     assert view
-           |> element("#drop-positions-bottom-end div.hidden[role=listbox]")
+           |> element(
+             "#drop-positions-bottom-end div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
            |> has_element?()
 
     assert view

test/moon_web/examples/dropdown/positions/bottom_start_test.exs

@@ -9,7 +9,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomStartTest do
            |> has_element?()
 
     assert view
-           |> element("#drop-positions-bottom-start div.hidden[role=listbox]")
+           |> element(
+             "#drop-positions-bottom-start div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
            |> has_element?()
 
     assert view

test/moon_web/examples/dropdown/positions/bottom_test.exs

@@ -8,11 +8,15 @@ defmodule MoonWeb.Examples.Dropdown.Positions.BottomTest do
            |> element("#drop-positions-bottom div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-bottom div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-bottom div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element(
-             "#drop-positions-bottom div.top-full[class~=\"left-1/2\", \"-translate-x-1/2\"]"
+             "#drop-positions-bottom div.top-full[class~=\"left-1/2\"][class~=\"-translate-x-1/2\"]"
            )
            |> has_element?()
   end

test/moon_web/examples/dropdown/positions/left_end_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftEndTest do
            |> element("#drop-positions-left-end div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-left-end div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-left-end div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-left-end div.ltr\\:right-full.rtl\\:left-full.bottom-0")

test/moon_web/examples/dropdown/positions/left_start_test.exs

@@ -9,7 +9,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftStartTest do
            |> has_element?()
 
     assert view
-           |> element("#drop-positions-left-start div.hidden[role=listbox]")
+           |> element(
+             "#drop-positions-left-start div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
            |> has_element?()
 
     assert view

test/moon_web/examples/dropdown/positions/left_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.LeftTest do
            |> element("#drop-positions-left div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-left div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-left div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-left div.ltr\\:right-full.rtl\\:left-full")

test/moon_web/examples/dropdown/positions/right_end_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightEndTest do
            |> element("#drop-positions-right-end div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-right-end div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-right-end div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-right-end div.ltr\\:left-full.rtl\\:right-full.bottom-0")

test/moon_web/examples/dropdown/positions/right_start_test.exs

@@ -9,7 +9,9 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightStartTest do
            |> has_element?()
 
     assert view
-           |> element("#drop-positions-right-start div.hidden[role=listbox]")
+           |> element(
+             "#drop-positions-right-start div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
            |> has_element?()
 
     assert view

test/moon_web/examples/dropdown/positions/right_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.RightTest do
            |> element("#drop-positions-right div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-right div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-right div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-right div.ltr\\:left-full.rtl\\:right-full")

test/moon_web/examples/dropdown/positions/top_end_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopEndTest do
            |> element("#drop-positions-top-end div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-top-end div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-top-end div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-top-end div.ltr\\:right-0.rtl\\:left-0.bottom-full")

test/moon_web/examples/dropdown/positions/top_start_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopStartTest do
            |> element("#drop-positions-top-start div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-top-start div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-top-start div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element("#drop-positions-top-start div.ltr\\:left-0.rtl\\:right-0.bottom-full")

test/moon_web/examples/dropdown/positions/top_test.exs

@@ -8,11 +8,15 @@ defmodule MoonWeb.Examples.Dropdown.Positions.TopTest do
            |> element("#drop-positions-top div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-positions-top div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-positions-top div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view
            |> element(
-             "#drop-positions-top div.bottom-full[class~=\"left-1/2\", \"-translate-x-1/2\"]"
+             "#drop-positions-top div.bottom-full[class~=\"left-1/2\"][class~=\"-translate-x-1/2\"]"
            )
            |> has_element?()
   end

test/moon_web/examples/dropdown/responsive_dropdown_test.exs

@@ -8,7 +8,9 @@ defmodule MoonWeb.Examples.Dropdown.ResponsiveDropdownTest do
            |> element("#responsive-dropdown div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#responsive-dropdown div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element("#responsive-dropdown div[role=listbox][class*=\"translate-y-full\"]")
+           |> has_element?()
 
     assert view
            |> element(

test/moon_web/examples/dropdown/sizes/lg_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.LargeTest do
            |> element("#drop-sizes-lg div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-sizes-lg div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-sizes-lg div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     assert view |> element("#drop-sizes-lg button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 

test/moon_web/examples/dropdown/sizes/md_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.MediumTest do
            |> element("#drop-sizes-md div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-sizes-md div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-sizes-md div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     refute view |> element("#drop-sizes-md button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 

test/moon_web/examples/dropdown/sizes/sm_test.exs

@@ -8,7 +8,11 @@ defmodule MoonWeb.Examples.Dropdown.Sizes.SmallTest do
            |> element("#drop-sizes-sm div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#drop-sizes-sm div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#drop-sizes-sm div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
 
     refute view |> element("#drop-sizes-sm button.h-12.p-3.rounded-moon-i-sm") |> has_element?()
 

test/moon_web/examples/dropdown/trigger_elements/button_test.exs

@@ -8,7 +8,12 @@ defmodule MoonWeb.Examples.Dropdown.TriggerElements.ButtonTest do
            |> element("#dropdown-trigger-02 div[aria-haspopup=true]")
            |> has_element?()
 
-    assert view |> element("#dropdown-trigger-02 div.hidden[role=listbox]") |> has_element?()
+    assert view
+           |> element(
+             "#dropdown-trigger-02 div[role=listbox][class*=\"max-h-0\"][class*=\"opacity-0\"]"
+           )
+           |> has_element?()
+
     assert view |> element("#dropdown-trigger-02 button.bg-piccolo") |> has_element?()
   end