Use native hidden attribute instead of d-none

Author: HDinger

app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -6,7 +6,7 @@
         <%= count %>
       <% end %>
       <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", data: { target: "collapsible-header.arrowUp" })) %>
-      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", display: :none, data: { target: "collapsible-header.arrowDown" })) %>
+      <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: true, data: { target: "collapsible-header.arrowDown" })) %>
     <% end %>
     <%= flex.with_row do %>
       <% if description? %>

app/components/primer/open_project/collapsible_helper.ts

@@ -23,22 +23,23 @@ export abstract class CollapsibleHelperElement extends HTMLElement {
   }
 
   hideAll() {
-    this.arrowDown?.classList.remove('d-none')
-    this.arrowUp?.classList.add('d-none')
+    // For whatever reason, setting `hidden` directly does not work on the SVGs
+    this.arrowDown.removeAttribute('hidden')
+    this.arrowUp.setAttribute('hidden', '')
 
     for (const el of this.collapsibleElements) {
-      el.classList.add('d-none')
+      el.hidden = true
     }
 
     this.classList.add(`${this.baseClass}--collapsed`)
   }
 
   expandAll() {
-    this.arrowDown?.classList.add('d-none')
-    this.arrowUp?.classList.remove('d-none')
+    this.arrowUp.removeAttribute('hidden')
+    this.arrowDown.setAttribute('hidden', '')
 
     for (const el of this.collapsibleElements) {
-      el.classList.remove('d-none')
+      el.hidden = false
     }
 
     this.classList.remove(`${this.baseClass}--collapsed`)

app/components/primer/open_project/collapsible_section.html.erb

@@ -12,7 +12,7 @@
         <% end %>
         <%= header.with_column do %>
           <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", data: { target: "collapsible-section.arrowUp" })) %>
-          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", display: :none, data: { target: "collapsible-section.arrowDown" })) %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: true, data: { target: "collapsible-section.arrowDown" })) %>
         <% end %>
         <%= header.with_column(flex: 1, text_align: :right) do %>
           <%= additional_information %>

test/components/primer/open_project/border_box/collapsible_header_test.rb

@@ -9,8 +9,8 @@ def test_renders_default
     render_preview(:default)
 
     assert_selector(".CollapsibleHeader", text: "Backlog")
-    assert_selector("svg.octicon.octicon-chevron-up")
-    assert_selector("svg.octicon.octicon-chevron-down.d-none")
+    assert_selector("svg.octicon.octicon-chevron-up", visible: true)
+    assert_selector("svg.octicon.octicon-chevron-down", visible: false)
   end
 
   def test_does_not_render_without_box
@@ -44,7 +44,7 @@ def test_renders_with_description
 
     assert_selector(".CollapsibleHeader .color-fg-subtle",
                     text: "This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.")
-    assert_no_selector(".CollapsibleHeader .color-fg-subtle.d-none")
+    assert_selector(".CollapsibleHeader .color-fg-subtle", visible: true)
   end
 
   def test_renders_with_count

test/system/open_project/border_box/collapsible_header_test.rb

@@ -12,8 +12,8 @@ def test_renders_component
   def test_renders_collapsed
     visit_preview(:collapsed, module_prefix: "border_box")
 
-    assert_selector(".octicon.octicon-chevron-up.d-none", visible: false)
-    assert_no_selector(".octicon.octicon-chevron-down.d-none")
+    assert_selector(".octicon.octicon-chevron-up", visible: false)
+    assert_selector(".octicon.octicon-chevron-down", visible: true)
     assert_no_text("This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.")
   end
 
@@ -22,21 +22,21 @@ def test_click_behaviour
 
     # First, make sure it is not collapsed
     assert_no_selector(".CollapsibleHeader--collapsed")
-    assert_selector(".octicon.octicon-chevron-down.d-none", visible: false)
-    assert_no_selector(".octicon.octicon-chevron-up.d-none")
+    assert_selector(".octicon.octicon-chevron-down", visible: false)
+    assert_selector(".octicon.octicon-chevron-up", visible: true)
 
     # Collapse it
     find('.CollapsibleHeader').click
 
     assert_selector(".CollapsibleHeader--collapsed")
-    assert_selector(".octicon.octicon-chevron-up.d-none", visible: false)
-    assert_no_selector(".octicon.octicon-chevron-down.d-none")
+    assert_selector(".octicon.octicon-chevron-up", visible: false)
+    assert_selector(".octicon.octicon-chevron-down", visible: true)
 
     # Expand it again
     find('.CollapsibleHeader').click
 
     assert_no_selector(".CollapsibleHeader--collapsed")
-    assert_selector(".octicon.octicon-chevron-down.d-none", visible: false)
-    assert_no_selector(".octicon.octicon-chevron-up.d-none")
+    assert_selector(".octicon.octicon-chevron-down", visible: false)
+    assert_selector(".octicon.octicon-chevron-up", visible: true)
   end
 end

test/system/open_project/collapsible_section_test.rb

@@ -12,8 +12,8 @@ def test_renders_component
   def test_renders_collapsed
     visit_preview(:collapsed)
 
-    assert_selector(".octicon.octicon-chevron-up.d-none", visible: false)
-    assert_no_selector(".octicon.octicon-chevron-down.d-none")
+    assert_selector(".octicon.octicon-chevron-up", visible: false)
+    assert_selector(".octicon.octicon-chevron-down", visible: true)
     assert_no_text("How did you hear about us?")
   end