Another round of review feedback

Author: HDinger

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

@@ -35,7 +35,7 @@ class CollapsibleHeader < Primer::Component
           system_arguments[:data] = merge_data(
             system_arguments, {
             data: {
-                target: "collapsible-header.collapsibleElements"
+                targets: "collapsible-header.collapsibleElements"
               }
             }
           )

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

@@ -1,8 +1,8 @@
 import {controller} from '@github/catalyst'
-import {CollapsibleHelperElement} from '../collapsible_helper'
+import {CollapsibleElement} from '../collapsible'
 
 @controller
-class CollapsibleHeaderElement extends CollapsibleHelperElement {
+class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {
       throw new Error('No surrounding BorderBox found')

…rimer/open_project/collapsible_helper.ts …nents/primer/open_project/collapsible.tsapp/components/primer/open_project/collapsible_helper.ts renamed to app/components/primer/open_project/collapsible.ts app/components/primer/open_project/collapsible_helper.ts renamed to app/components/primer/open_project/collapsible.ts

@@ -1,9 +1,9 @@
 import {attr, target, targets} from '@github/catalyst'
 
 // eslint-disable-next-line custom-elements/expose-class-on-global
-export abstract class CollapsibleHelperElement extends HTMLElement {
-  @target arrowDown: HTMLElement
-  @target arrowUp: HTMLElement
+export abstract class CollapsibleElement extends HTMLElement {
+  @target arrowDown: Element
+  @target arrowUp: Element
   @targets collapsibleElements: HTMLElement[]
 
   @attr collapsed = false

app/components/primer/open_project/collapsible_section.rb

@@ -47,7 +47,7 @@ class CollapsibleSection < Primer::Component
         Primer::BaseComponent.new(tag: :div, **system_arguments)
       }
 
-
+      # @param collapsed [Boolean] Whether the section is collapsed on initial render.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(collapsed: false, **system_arguments)
         @collapsed = collapsed

app/components/primer/open_project/collapsible_section.ts

@@ -1,8 +1,8 @@
 import {controller} from '@github/catalyst'
-import {CollapsibleHelperElement} from './collapsible_helper'
+import {CollapsibleElement} from './collapsible'
 
 @controller
-class CollapsibleSectionElement extends CollapsibleHelperElement {
+class CollapsibleSectionElement extends CollapsibleElement {
   get baseClass(): string {
     return 'CollapsibleSection'
   }

app/components/primer/primer.ts

@@ -30,6 +30,6 @@ import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'
 import './open_project/danger_dialog_form_helper'
-import './open_project/collapsible_helper'
+import './open_project/collapsible'
 import './open_project/border_box/collapsible_header'
 import './open_project/collapsible_section'

previews/primer/open_project/collapsible_section_preview/collapsed.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::OpenProject::CollapsibleSection.new(collapsed: true)) do |section| %>
   <% section.with_title { "Final question" } %>
   <% section.with_collapsible_content do %>
-    <%= render(Primer::Alpha::Banner.new(mb: 2)) { "Please take one minute time to answer this question" } %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
     <%= primer_form_with(url: "/foo") do |f| %>
       <%= render(RadioButtonGroupForm.new(f)) %>
     <% end %>

previews/primer/open_project/collapsible_section_preview/default.html.erb

@@ -1,7 +1,7 @@
 <%= render(Primer::OpenProject::CollapsibleSection.new) do |section| %>
   <% section.with_title { "Feedback" } %>
   <% section.with_collapsible_content do %>
-    <%= render(Primer::Alpha::Banner.new(mb: 2)) { "Please take one minute time to answer this question" } %>
+    <%= render(Primer::Alpha::Banner.new(mb: 3)) { "Please take one minute time to answer this question" } %>
     <%= primer_form_with(url: "/foo") do |f| %>
       <%= render(RadioButtonGroupForm.new(f)) %>
     <% end %>

static/classes.json

@@ -243,7 +243,7 @@
   "CollapsibleHeader": [
     "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
-  "CollapsibleSection": [
+  "CollapsibleSection--triggerArea": [
     "Primer::OpenProject::CollapsibleSection"
   ],
   "Counter": [