Merge pull request #276 from opf/bug/63443-collapsed-preview-not-working

[63443] Collapsed preview not working

Author: HDinger

.changeset/petite-ties-repair.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Stabilise initally collapsed state for CollapsibleSection and CollapsibleHeader

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

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

app/components/primer/open_project/border_box/collapsible_header.rb

@@ -39,6 +39,7 @@ class CollapsibleHeader < Primer::Component
               }
             }
           )
+          system_arguments[:hidden] = @collapsed
 
           Primer::Beta::Text.new(**system_arguments, &block)
         }

app/components/primer/open_project/collapsible.ts

@@ -24,8 +24,8 @@ export abstract class CollapsibleElement extends HTMLElement {
 
   hideAll() {
     // For whatever reason, setting `hidden` directly does not work on the SVGs
-    this.arrowDown.removeAttribute('hidden')
-    this.arrowUp.setAttribute('hidden', '')
+    this.arrowDown?.removeAttribute('hidden')
+    this.arrowUp?.setAttribute('hidden', '')
 
     for (const el of this.collapsibleElements) {
       el.hidden = true
@@ -35,8 +35,8 @@ export abstract class CollapsibleElement extends HTMLElement {
   }
 
   expandAll() {
-    this.arrowUp.removeAttribute('hidden')
-    this.arrowDown.setAttribute('hidden', '')
+    this.arrowUp?.removeAttribute('hidden')
+    this.arrowDown?.setAttribute('hidden', '')
 
     for (const el of this.collapsibleElements) {
       el.hidden = false

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

@@ -10,15 +10,15 @@
           <%= caption %>
         <% 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", hidden: true, data: { target: "collapsible-section.arrowDown" })) %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-up", hidden: @collapsed, data: { target: "collapsible-section.arrowUp" })) %>
+          <%= render(Primer::Beta::Octicon.new(icon: "chevron-down", hidden: !@collapsed, data: { target: "collapsible-section.arrowDown" })) %>
         <% end %>
         <%= header.with_column(flex: 1, text_align: :right) do %>
           <%= additional_information %>
         <% end %>
       <% end %>
     <% end %>
-    <%= flex.with_row(mt: 3, data: { targets: "collapsible-section.collapsibleElements" }) do %>
+    <%= flex.with_row(hidden: @collapsed, mt: 3, data: { targets: "collapsible-section.collapsibleElements" }) do %>
       <%= collapsible_content %>
     <% end %>
   <% end %>