Accordion

[btbunze]

Name of Component(s) Accordion Accordion Item

Filename(s) Accordion.vue AccordionItem.vue

Purpose Display information in coordinated, toggleable disclosures

Functionality

• An accordion item should have two states, open and closes
• An accordion should be able to have any number of accordion items as children
• A user should be able to use tab to navigate between accordion item buttons
• A user should be able to press enter/space (when focusing) or click to open/close an accordion item
• An accordion should have the ability to limit its children to only one open at once
• An accordion should have the ability to scroll the viewport to a child when it opens
• An accordion item should be able to be open by default

State

• Accordion Item
  • Open/closed

Props

• Accordion
  • exclusiveOpen - whether to only allow 1 item to be open at a time
  • scrollOnOpen - whether to scroll to an item when it opens
  • defaultOpen - set which (if any) disclosures should be open by default
• Accordion Item
  • defaultOpen set whether the disclosure should be open by default

Content Slots

• Accordion Item
  • button - content of the disclosure button
  • content - content of the disclosure panel

Dependencies

• HeadlessUI
  • Disclosure, DisclosureButton, DisclosurePanel, TransitionRoot

Notes The state of a Disclosure is contained within and managed by itself, so I think the best way to coordinate the items is to watch the data-headlessui-state attribute for each and send necessary instructions to the disclosures when one changes. The alternative, having the Accordion keep track of the state of all its children, would mean keeping (and having to sync) state in multiple locations.

[jakedohm]

@btbunze a couple of notes:

1. API: Can you show what you think the defaults should be for props. For example should exclusiveOpen be set to true/false?
2. API: Should the component allow itself to be "controlled"? I think so. Meaning, as the parent I might want to set which accordion item is open. I think this would look something like this:
3. Functionality: I think we should build in the animation in/out functionality, so that when an item opens/closes we animate the height of the item. Thoughts?
4. Functionality: Should we store the state of which item is open/active in the URL, so on refresh it opens/closes the same one? I don't think this is necessary, but want to hear other thoughts!

   <Accordion :open="2" />
   or even
   <Accordion :open="[1, 3]" />
   to set mutliple.

[DrewTJohnson]

@btbunze I had the same thought as Jake re: item #4. I definitely think we should include a state of which item is open/closed so we can link to a page with a particular item open.

@jakedohm re: item #2 is there ever an instance where we will have two items open? I'm thinking of an instance where we have the accordion set to only allow one item open at a time, but accidentally include multiple. Would we default to the first item in that array, o rhave the component fail so we can fix?

[btbunze]

Thanks for the feedback, guys! 1: I was thinking false for all, but I'm open to suggestions otherwise. I don't think either case is going to be vastly more common than the other (for exclusiveOpen and scrollOnOpen), and I'd prefer to default to less magic

2/4: I don't necessarily think we need to give the parent full control ( seems fine to me). Allowing it to send instructions and get information when an item opens/closes should suffice for both these purposes, unless there's a case I'm not thinking of.

3: Yeah, absolutely

[jakedohm]

@btbunze @DrewTJohnson For #4, I think maybe we could just use the browser's hash for this. So it won't store multiples, but if you click on the second accordion item, we do something like #accordion-3 in the URL so that the browser will auto-scroll to that element, and maybe in the component we check to see if the hash matches an item and if so, auto-open that item?

[DrewTJohnson]

@jakedohm That's how we would handle Tabs to link to a specific tab, so I think going that way for the Accordion will make a nice standard for those types of elements.