add required data attrs to component

primer · Jan 27, 2025 · a8b2c05 · a8b2c05
1 parent dfcd3fc
commit a8b2c05
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/app/components/primer/beta/details.rb b/app/components/primer/beta/details.rb
@@ -22,6 +22,15 @@ class Details < Primer::Component
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
+        system_arguments[:data] = merge_data(
+          system_arguments, {
+            data: {
+              target: "details-toggle.summaryTarget",
+              action: "click:details-toggle#toggle",
+            }
+          }
+        )
+
         if disabled?
           # rubocop:disable Primer/ComponentNameMigration
           Primer::ButtonComponent.new(**system_arguments, disabled: true)
@@ -57,6 +66,13 @@ def initialize(overlay: NO_OVERLAY, reset: false, disabled: false, **system_argu
           OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
           "details-reset" => reset
         )
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              target: "details-toggle.detailsTarget",
+            }
+          }
+        )
         @disabled = disabled
         @summary_info = nil
       end

diff --git a/test/components/beta/details_test.rb b/test/components/beta/details_test.rb
@@ -142,4 +142,20 @@ def test_disabled
   def test_status
     assert_component_state(Primer::Beta::Details, :beta)
   end
+
+  def test_renders_details_catalyst_element_and_data_attributes
+    render_inline(Primer::Beta::Details.new) do |component|
+      component.with_summary do
+        "Summary"
+      end
+      component.with_body do
+        "Body"
+      end
+    end
+
+    assert_selector("details-toggle")
+    assert_selector("details[data-target='detailsToggle.detailsElement']")
+    assert_selector("summary[data-target='detailsToggle.summaryElement']")
+    assert_selector("summary[data-action='click:detailsToggle#toggle']")
+  end
 end