prima-ref -> data-prima-ref

Author: ukutaht

CLAUDE.md

@@ -62,7 +62,7 @@ end
 ```
 
 ### Custom Data Attributes
-- `prima-ref` - Component instance identifier
+- `data-prima-ref` - Component instance identifier
 - `data-focus` - Focus state for dropdown items (true/false)
 - Standard data attributes for component state management
 

assets/js/hooks/modal.js

@@ -141,7 +141,7 @@ export default {
   },
 
   ref(ref) {
-    return this.modalEl.querySelector(`[prima-ref="${ref}"]`);
+    return this.modalEl.querySelector(`[data-prima-ref="${ref}"]`);
   },
 
   log(message) {

lib/prima/modal.ex

@@ -155,7 +155,7 @@ defmodule Prima.Modal do
       style="display: none;"
       js-show={JS.show(transition: @transition_enter)}
       js-hide={JS.hide(transition: @transition_leave)}
-      prima-ref="modal-overlay"
+      data-prima-ref="modal-overlay"
       class={@class}
     >
     </div>
@@ -180,7 +180,7 @@ defmodule Prima.Modal do
   """
   def modal_loader(assigns) do
     ~H"""
-    <div prima-ref="modal-loader" js-show={JS.show()} js-hide={JS.hide()}>
+    <div data-prima-ref="modal-loader" js-show={JS.show()} js-hide={JS.hide()}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -248,7 +248,7 @@ defmodule Prima.Modal do
       js-focus-first={JS.focus_first()}
       phx-mounted={panel_mounted()}
       phx-remove={panel_removed()}
-      prima-ref="modal-panel"
+      data-prima-ref="modal-panel"
       phx-window-keydown={close()}
       phx-key="escape"
       phx-click-away={close()}
@@ -373,7 +373,7 @@ defmodule Prima.Modal do
   def modal_title(assigns) do
     assigns =
       assign(assigns, %{
-        "prima-ref": "modal-title"
+        "data-prima-ref": "modal-title"
       })
 
     case assigns[:as] do

lib/prima_web/live/fixtures_live.ex

@@ -63,7 +63,7 @@ defmodule PrimaWeb.FixturesLive do
 
   defp custom_title_component(assigns) do
     ~H"""
-    <span class="custom-title" prima-ref={assigns[:"prima-ref"]} id={assigns[:id]}>
+    <span class="custom-title" data-prima-ref={assigns[:"data-prima-ref"]} id={assigns[:id]}>
       {render_slot(assigns.inner_block)}
     </span>
     """

test/wallaby/prima_web/async_modal_test.exs

@@ -1,10 +1,10 @@
 defmodule PrimaWeb.AsyncModalTest do
   use Prima.WallabyCase, async: true
 
-  @modal_panel Query.css("#demo-form-modal [prima-ref=modal-panel]")
-  @modal_overlay Query.css("#demo-form-modal [prima-ref=modal-overlay]")
+  @modal_panel Query.css("#demo-form-modal [data-prima-ref=modal-panel]")
+  @modal_overlay Query.css("#demo-form-modal [data-prima-ref=modal-overlay]")
   @modal_container Query.css("#demo-form-modal")
-  @modal_loader Query.css("#demo-form-modal [prima-ref=modal-loader]")
+  @modal_loader Query.css("#demo-form-modal [data-prima-ref=modal-loader]")
 
   feature "shows modal when button is clicked", %{session: session} do
     session
@@ -88,7 +88,7 @@ defmodule PrimaWeb.AsyncModalTest do
     |> click(Query.css("#open-form-modal-button"))
     |> assert_has(@modal_panel |> Query.visible(true))
     |> execute_script(
-      "document.querySelector('#demo-form-modal [prima-ref=\"modal-title\"]').innerHTML = 'Dirty Modal'"
+      "document.querySelector('#demo-form-modal [data-prima-ref=\"modal-title\"]').innerHTML = 'Dirty Modal'"
     )
     |> send_keys([:escape])
     |> assert_has(@modal_container |> Query.visible(false))
@@ -98,7 +98,7 @@ defmodule PrimaWeb.AsyncModalTest do
     |> assert_has(@modal_panel |> Query.visible(true))
     # Verify the fresh content eventually appears
     |> assert_text(
-      Query.css("#demo-form-modal [prima-ref=\"modal-title\"]"),
+      Query.css("#demo-form-modal [data-prima-ref=\"modal-title\"]"),
       "Data loaded successfully"
     )
     |> execute_script("window.liveSocket.disableLatencySim()")

test/wallaby/prima_web/modal_title_test.exs

@@ -3,16 +3,16 @@ defmodule PrimaWeb.ModalTitleTest do
   import Phoenix.LiveViewTest
 
   @modal_container Query.css("#demo-modal")
-  @modal_title Query.css("#demo-modal [prima-ref=modal-title]")
+  @modal_title Query.css("#demo-modal [data-prima-ref=modal-title]")
 
   feature "modal title renders as h3 by default", %{session: session} do
     session
     |> visit_fixture("/fixtures/simple-modal", "#demo-modal")
     |> click(Query.css("#simple-modal button"))
     |> assert_has(@modal_container |> Query.visible(true))
     |> assert_has(@modal_title)
-    |> assert_has(Query.css("#demo-modal h3[prima-ref=modal-title]"))
-    |> assert_has(Query.css("#demo-modal h3[prima-ref=modal-title]", text: "Good news"))
+    |> assert_has(Query.css("#demo-modal h3[data-prima-ref=modal-title]"))
+    |> assert_has(Query.css("#demo-modal h3[data-prima-ref=modal-title]", text: "Good news"))
   end
 
   feature "modal title can render as custom HTML tag", %{session: session} do
@@ -22,8 +22,10 @@ defmodule PrimaWeb.ModalTitleTest do
     |> click(Query.css("#custom-tag-modal button"))
     |> assert_has(@modal_container |> Query.visible(true))
     |> assert_has(@modal_title)
-    |> assert_has(Query.css("#demo-modal h1[prima-ref=modal-title]"))
-    |> assert_has(Query.css("#demo-modal h1[prima-ref=modal-title]", text: "Custom Tag Title"))
+    |> assert_has(Query.css("#demo-modal h1[data-prima-ref=modal-title]"))
+    |> assert_has(
+      Query.css("#demo-modal h1[data-prima-ref=modal-title]", text: "Custom Tag Title")
+    )
   end
 
   feature "modal title can render as function component", %{session: session} do
@@ -33,9 +35,9 @@ defmodule PrimaWeb.ModalTitleTest do
     |> click(Query.css("#function-modal button"))
     |> assert_has(@modal_container |> Query.visible(true))
     |> assert_has(@modal_title)
-    |> assert_has(Query.css("#demo-modal span[prima-ref=modal-title].custom-title"))
+    |> assert_has(Query.css("#demo-modal span[data-prima-ref=modal-title].custom-title"))
     |> assert_has(
-      Query.css("#demo-modal span[prima-ref=modal-title]", text: "Function Component Title")
+      Query.css("#demo-modal span[data-prima-ref=modal-title]", text: "Function Component Title")
     )
   end
 

test/wallaby/prima_web/simple_modal_test.exs

@@ -1,8 +1,8 @@
 defmodule PrimaWeb.SimpleModalTest do
   use Prima.WallabyCase, async: true
 
-  @modal_panel Query.css("#demo-modal [prima-ref=modal-panel]")
-  @modal_overlay Query.css("#demo-modal [prima-ref=modal-overlay]")
+  @modal_panel Query.css("#demo-modal [data-prima-ref=modal-panel]")
+  @modal_overlay Query.css("#demo-modal [data-prima-ref=modal-overlay]")
   @modal_container Query.css("#demo-modal")
 
   feature "shows modal when button is clicked", %{session: session} do