Merge branch 'main' into r38y/hide-calendar-icon-in-firefox

Author: mitkins

CHANGELOG.md

@@ -1,4 +1,18 @@
 # Changelog
+### 2.8.4 - 2025-02-22 22:04:15
+
+- User Dropdown Menu - `avatar_src` and `current_user_name` are optional by @mitkins in https://github.com/petalframework/petal_components/pull/406
+
+### 2.8.3 - 2025-02-21 22:12:41
+
+- Allow for multiple instances of the `slide_over` component by @mitkins in https://github.com/petalframework/petal_components/pull/404
+- Bump ex_doc from 0.37.0 to 0.37.1 by @dependabot in https://github.com/petalframework/petal_components/pull/403
+
+### 2.8.2 - 2025-02-17 05:41:23
+
+- Workaround for Slide Over and Modal with LiveView 1.0.4
+- Bump to Phoenix LiveView 1.0.4
+
 ### 2.8.1 - 2024-12-17 01:12:12
 
 - Bumped LiveView to 1.0.1

README.md

@@ -165,7 +165,7 @@ A: Yes! You can customize the components by overriding the CSS classes. For exam
 
 ```css
 .pc-button {
-  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-none;
+  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-hidden;
 }
 .pc-button--primary {
   @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;

assets/default.css

@@ -55,7 +55,7 @@ defmodule PetalComponents.Modal do
       {@rest}
       class="hidden pc-modal"
     >
-      <div class="pc-modal__overlay" aria-hidden="true"></div>
+      <div class="hidden pc-modal__overlay" aria-hidden="true"></div>
       <div
         class="pc-modal__wrapper"
         aria-labelledby={"pc-modal__header__text-#{@id}"}
@@ -116,13 +116,12 @@ defmodule PetalComponents.Modal do
     )
     |> JS.hide(
       to: "##{id} .pc-modal__box",
-      time: 200,
       transition:
         {"transition-all transform ease-in duration-200",
          "opacity-100 translate-y-0 sm:scale-100",
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
     )
-    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+    |> JS.hide(to: "##{id}", transition: {"block duration-200", "block", "hidden"})
     |> JS.remove_class("overflow-hidden", to: "body")
   end
 
@@ -133,10 +132,12 @@ defmodule PetalComponents.Modal do
     |> JS.show(to: "##{id}")
     |> JS.show(
       to: "##{id} .pc-modal__overlay",
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
       to: "##{id} .pc-modal__box",
+      time: 300,
       transition:
         {"transition-all transform ease-out duration-300",
          "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@@ -152,10 +153,10 @@ defmodule PetalComponents.Modal do
       class: assigns[:class] || ""
     }
 
-    base_classes = "pc-modal__box"
+    base_classes = "hidden pc-modal__box"
     max_width_class = "pc-modal__box--#{opts.max_width}"
     custom_classes = opts.class
 
-    [max_width_class, base_classes, custom_classes]
+    [base_classes, max_width_class, custom_classes]
   end
 end

lib/petal_components/modal.ex

@@ -2,6 +2,8 @@ defmodule PetalComponents.SlideOver do
   use Phoenix.Component
   alias Phoenix.LiveView.JS
 
+  attr :id, :string, default: "slide-over"
+
   attr(:origin, :string,
     default: "right",
     values: ["left", "right", "top", "bottom"],
@@ -41,12 +43,12 @@ defmodule PetalComponents.SlideOver do
     ~H"""
     <div
       {@rest}
-      phx-mounted={!@hide && show_slide_over(@origin)}
-      phx-remove={hide_slide_over(@origin, @close_slide_over_target)}
+      phx-mounted={!@hide && show_slide_over(@origin, @id)}
+      phx-remove={hide_slide_over(@origin, @id, @close_slide_over_target)}
       class="hidden pc-slide-over"
-      id="slide-over"
+      id={@id}
     >
-      <div id="slide-over-overlay" class="pc-slideover__overlay" aria-hidden="true"></div>
+      <div id={"#{@id}-overlay"} class="hidden pc-slideover__overlay" aria-hidden="true"></div>
 
       <div
         class={["pc-slideover__wrapper", get_margin_classes(@origin), @class]}
@@ -55,22 +57,26 @@ defmodule PetalComponents.SlideOver do
         aria-modal="true"
       >
         <div
-          id="slide-over-content"
+          id={"#{@id}-content"}
           class={get_classes(@max_width, @origin, @class)}
-          phx-click-away={@close_on_click_away && hide_slide_over(@origin, @close_slide_over_target)}
-          phx-window-keydown={@close_on_escape && hide_slide_over(@origin, @close_slide_over_target)}
+          phx-click-away={
+            @close_on_click_away && hide_slide_over(@origin, @id, @close_slide_over_target)
+          }
+          phx-window-keydown={
+            @close_on_escape && hide_slide_over(@origin, @id, @close_slide_over_target)
+          }
           phx-key="escape"
         >
           <!-- Header -->
           <div class="pc-slideover__header">
             <div class="pc-slideover__header__container">
-              <div class="pc-slideover__header__text">
+              <div :if={@title} class="pc-slideover__header__text">
                 {@title}
               </div>
 
               <button
                 type="button"
-                phx-click={hide_slide_over(@origin, @close_slide_over_target)}
+                phx-click={hide_slide_over(@origin, @id, @close_slide_over_target)}
                 class="pc-slideover__header__button"
               >
                 <div class="sr-only">Close</div>
@@ -90,53 +96,43 @@ defmodule PetalComponents.SlideOver do
     """
   end
 
-  def show_slide_over(origin) do
+  def show_slide_over(origin, id \\ "slide-over") do
     {start_class, end_class} = get_transition_classes(origin)
 
     %JS{}
-    |> JS.show(to: "#slide-over")
+    |> JS.show(to: "##{id}")
     |> JS.show(
-      to: "#slide-over-overlay",
+      to: "##{id}-overlay",
+      time: 300,
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> JS.show(
-      to: "#slide-over-content",
-      transition: {
-        "transition-all transform ease-out duration-300",
-        start_class,
-        end_class
-      }
+      to: "##{id}-content",
+      time: 300,
+      transition: {"transition-all transform ease-out duration-300", start_class, end_class}
     )
     |> JS.add_class("overflow-hidden", to: "body")
-    |> JS.focus_first(to: "#slide-over-content")
+    |> JS.focus_first(to: "##{id}-content")
   end
 
   # The live view that calls <.slide_over> will need to handle the "close_slide_over" event. eg:
   # def handle_event("close_slide_over", _, socket) do
   #   {:noreply, push_patch(socket, to: Routes.moderate_users_path(socket, :index))}
   # end
-  def hide_slide_over(origin, close_slide_over_target \\ nil) do
+  def hide_slide_over(origin, id \\ "slide-over", close_slide_over_target \\ nil) do
     {end_class, start_class} = get_transition_classes(origin)
 
     js =
       JS.remove_class("overflow-hidden", to: "body")
       |> JS.hide(
-        transition: {
-          "ease-in duration-200",
-          "opacity-100",
-          "opacity-0"
-        },
-        to: "#slide-over-overlay"
+        transition: {"ease-in duration-200", "opacity-100", "opacity-0"},
+        to: "##{id}-overlay"
       )
       |> JS.hide(
-        transition: {
-          "ease-in duration-200",
-          start_class,
-          end_class
-        },
-        to: "#slide-over-content"
+        transition: {"ease-in duration-200", start_class, end_class},
+        to: "##{id}-content"
       )
-      |> JS.hide(to: "#slide-over")
+      |> JS.hide(to: "##{id}", transition: {"duration-200", "", ""})
 
     if close_slide_over_target do
       JS.push(js, "close_slide_over", target: close_slide_over_target)
@@ -155,7 +151,7 @@ defmodule PetalComponents.SlideOver do
   end
 
   defp get_classes(max_width, origin, class) do
-    base_classes = "pc-slideover__box"
+    base_classes = "hidden pc-slideover__box"
 
     slide_over_classes =
       case origin do

lib/petal_components/slide_over.ex

@@ -14,8 +14,8 @@ defmodule PetalComponents.UserDropdownMenu do
     ~H"""
     <.dropdown :if={@user_menu_items != []}>
       <:trigger_element>
-        <div class="inline-flex items-center justify-center w-full align-middle focus:outline-none">
-          <%= if @current_user_name || @avatar_src do %>
+        <div class="inline-flex items-center justify-center w-full align-middle focus:outline-hidden">
+          <%= if assigns[:current_user_name] || assigns[:avatar_src] do %>
             <.avatar name={@current_user_name} src={@avatar_src} size="sm" random_color />
           <% else %>
             <.avatar size="sm" />

lib/petal_components/user_dropdown_menu.ex

@@ -2,7 +2,7 @@ defmodule PetalComponents.MixProject do
   use Mix.Project
 
   @source_url "https://github.com/petalframework/petal_components"
-  @version "2.8.1"
+  @version "2.8.4"
 
   def project do
     [