adjustments

coingaming · Jan 31, 2023 · cbb7814 · cbb7814
1 parent da636e2
commit cbb7814
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/lib/moon/design/popover/panel.ex b/lib/moon/design/popover/panel.ex
@@ -1,9 +1,7 @@
 defmodule Moon.Design.Popover.Panel do
   @moduledoc false
 
-  use Surface.Component, slot: "default"
-
-  import Moon.Helpers.MergeClass
+  use Moon.StatelessComponent, slot: "default"
 
   prop(class, :css_class)
 
@@ -27,8 +25,8 @@ defmodule Moon.Design.Popover.Panel do
     ~F"""
     <div class={
       "absolute flex items-center z-[9999999]",
-      "left-full -translate-y-1/3 px-2 rtl:flex-row-reverse": @position == "right",
-      "right-full -translate-y-1/3 px-2 ltr:flex-row-reverse": @position == "left",
+      "left-full -translate-y-1/2 px-2 rtl:flex-row-reverse": @position == "right",
+      "right-full -translate-y-1/2 px-2 ltr:flex-row-reverse": @position == "left",
       "top-full left-0 right-0 pt-2 flex-col": String.starts_with?(@position, "bottom"),
       "bottom-full left-0 right-0 pb-2 flex-col-reverse": String.starts_with?(@position, "top")
     }>
@@ -39,7 +37,14 @@ defmodule Moon.Design.Popover.Panel do
     """
   end
 
-  defp content_class(class, align \\ "center") do
+  defp content_class(class, position \\ "center") do
+    align =
+      case position do
+        "top-" <> a -> a
+        "bottom-" <> a -> a
+        _ -> "center"
+      end
+
     merge([
       "w-72 z-[9999999] p-1 rounded-moon-i-md box-border bg-gohan shadow-moon-lg",
       [

diff --git a/lib/moon_web/pages/design/popover_page.ex b/lib/moon_web/pages/design/popover_page.ex
@@ -3,8 +3,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
 
   use MoonWeb, :live_view
 
-  alias MoonWeb.Pages.Design.Popover.TriggerElements
-
   alias Moon.Design.Popover
   alias Moon.Design.Button
   alias Moon.Design.Button.IconButton
@@ -13,8 +11,11 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
   alias MoonWeb.Components.ComponentPageDescription
   alias MoonWeb.Components.ExampleAndCode
   alias MoonWeb.Components.PropsTable
-  alias MoonWeb.Components.PageSection
-  alias MoonWeb.Components.ComponentAnatomy
+
+  alias MoonWeb.Pages.Design.Popover.Content.Default
+  alias MoonWeb.Pages.Design.Popover.Content.Position
+  alias MoonWeb.Pages.Design.Popover.Content.TriggerElements
+  alias MoonWeb.Pages.Design.Popover.Content.WithClose
 
   data(breadcrumbs, :any,
     default: [
@@ -85,7 +86,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
       <ComponentPageDescription is_in_progress is_aria_support title="Popover">
         <p>Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.</p>
       </ComponentPageDescription>
-
       <ExampleAndCode title="Default" id="default_example">
         <:example>
           <Popover id="popover_id_1">
@@ -99,7 +99,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         </:example>
         <:code>{popover_1_code()}</:code>
       </ExampleAndCode>
-
       <ExampleAndCode title="Position" id="position_example">
         <:note>{"The complete list of all possible positions is in the props table below."}</:note>
         <:example>
@@ -111,7 +110,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
               <Position id="content_position_1" />
             </Popover.Panel>
           </Popover>
-
           <Popover id="popover_id_3">
             <Popover.Trigger>
               <Button>Right</Button>
@@ -120,7 +118,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
               <Position id="content_position_2" />
             </Popover.Panel>
           </Popover>
-
           <Popover id="popover_id_4">
             <Popover.Trigger>
               <Button>Left</Button>
@@ -132,7 +129,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         </:example>
         <:code>{popover_2_code()}</:code>
       </ExampleAndCode>
-
       <ExampleAndCode title="Trigger elements" id="trigger_elements_example">
         <:example>
           <Popover id="popover_id_5">
@@ -143,7 +139,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
               <TriggerElements id="content_elements_1" />
             </Popover.Panel>
           </Popover>
-
           <Popover id="popover_id_6">
             <Popover.Trigger>
               <IconButton icon_only="controls_chevron_down" variant="secondary" />
@@ -152,7 +147,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
               <TriggerElements id="content_elements_2" />
             </Popover.Panel>
           </Popover>
-
           <Popover id="popover_id_7">
             <Popover.Trigger>
               <span class="text-moon-14 text-trunks cursor-pointer hover:text-piccolo">
@@ -166,7 +160,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         </:example>
         <:code>{popover_3_code()}</:code>
       </ExampleAndCode>
-
       <ExampleAndCode title="With close button" id="close_button_example">
         <:example>
           <Popover id="popover_id_8">
@@ -180,7 +173,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         </:example>
         <:code>{popover_4_code()}</:code>
       </ExampleAndCode>
-
       <PropsTable title="Popover props" data={@props_info_array} />
       <PropsTable title="Popover.Panel" data={@panel_info_array} />
     </Page>
@@ -210,7 +202,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         <Position id="content_position_1" />
       </Popover.Panel>
     </Popover>
-
     <Popover id="popover_id_3">
       <Popover.Trigger>
         <Button>Right</Button>
@@ -219,7 +210,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         <Position id="content_position_2" />
       </Popover.Panel>
     </Popover>
-
     <Popover id="popover_id_4">
       <Popover.Trigger>
         <Button>Left</Button>
@@ -241,7 +231,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         <TriggerElements id="content_elements_1" />
       </Popover.Panel>
     </Popover>
-
     <Popover id="popover_id_6">
       <Popover.Trigger>
         <IconButton icon_only="controls_chevron_down" variant="secondary" />
@@ -250,7 +239,6 @@ defmodule MoonWeb.Pages.Design.PopoverPage do
         <TriggerElements id="content_elements_2" />
       </Popover.Panel>
     </Popover>
-
     <Popover id="popover_id_7">
       <Popover.Trigger>
         <span class="text-moon-14 text-trunks cursor-pointer hover:text-piccolo">