v1.5.5

Author: nhobes

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+### 1.5.5 - 2023-09-18 02:15:19
+
+- adds an attribute to `hide_close_button` in the modal header
+
 ### 1.5.4 - 2023-09-13 04:05:32
 
 - Changed close icon svg to Heroicons

assets/default.css

@@ -1239,7 +1239,7 @@ select.has-error:not(.phx-no-feedback) {
 }
 
 input[type="file_input"].has-error:not(.phx-no-feedback) {
-  @apply !border-danger-500 !rounded-md focus:!border-danger-500 !text-danger-900 !placeholder-danger-700 !bg-danger-50 file:!border-none dark:!border-none dark:!bg-[#160B0B] dark:text-danger-400;
+  @apply !border-danger-500 !rounded-md focus:!border-danger-500 !text-danger-900 !placeholder-danger-700 !bg-danger-50 file:!border-none dark:!border-none dark:!bg-gray-950 dark:text-danger-400;
 }
 
 /* If in tailwind.config.json, darkMode: 'class', use this: */

lib/petal_components/modal.ex

@@ -22,6 +22,10 @@ defmodule PetalComponents.Modal do
     default: true,
     doc: "whether the modal should close when a user hits escape"
 
+  attr :hide_close_button, :boolean,
+    default: false,
+    doc: "whether or not the modal should have a close button in the header"
+
   attr :max_width, :string,
     default: "md",
     values: ["sm", "md", "lg", "xl", "2xl", "full"],
@@ -57,15 +61,16 @@ defmodule PetalComponents.Modal do
               <div class="pc-modal__header__text">
                 <%= @title %>
               </div>
-
-              <button
-                type="button"
-                phx-click={hide_modal(@close_modal_target, @id)}
-                class="pc-modal__header__button"
-              >
-                <div class="sr-only">Close</div>
-                <Heroicons.x_mark class="pc-modal__header__close-svg" />
-              </button>
+              <%= unless @hide_close_button do %>
+                <button
+                  type="button"
+                  phx-click={hide_modal(@close_modal_target, @id)}
+                  class="pc-modal__header__button"
+                >
+                  <div class="sr-only">Close</div>
+                  <Heroicons.x_mark class="pc-modal__header__close-svg" />
+                </button>
+              <% end %>
             </div>
           </div>
           <!-- Content -->

mix.exs

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

test/petal/modal_test.exs

@@ -90,4 +90,22 @@ defmodule PetalComponents.ModalTest do
 
     refute html =~ ~s{phx-window-keydown}
   end
+
+  test "hide_close_button" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <.modal></.modal>
+      """)
+
+    assert html =~ "<svg"
+
+    html =
+      rendered_to_string(~H"""
+      <.modal hide_close_button></.modal>
+      """)
+
+    refute html =~ "<svg"
+  end
 end