Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Accordion components for extensibility and flexibility #12676

Closed
Tracked by #11888
marcellamaki opened this issue Sep 24, 2024 · 0 comments · Fixed by #12693
Closed
Tracked by #11888

Update Accordion components for extensibility and flexibility #12676

marcellamaki opened this issue Sep 24, 2024 · 0 comments · Fixed by #12693
Assignees

Comments

@marcellamaki
Copy link
Member

marcellamaki commented Sep 24, 2024

The Accordion component was created for 0.17 to allow for better management of space and to also allow user control over seeing more and less details.

For 0.18, we will continue to use an Accordion pattern, and while the overall use is the same (a toggle open and close), the use cases are more varied. There is also some amount of general cleanup of the Accordion that can be done in the course of this extension. This should not be a comprehensive refactor, but rather the focus should be ensuring that the uses of the accordion are supported, that any small updates that make the accordion easier to use are implemented, and that we set a strong foundation for the API as we have been discussing moving the accordion to KDS.

The following places are where the accordion is used in 0.18

Description Screenshot
The new "selected resources" preview - a "shopping cart" feature that allows the coach to see which items they've currently selected to add to the lesson or quiz, while navigating through searches or up and down the topic tree Screenshot 2024-09-24 at 10 09 17 AM
In quizzes - when previewing the quiz (new) or when looking at the quiz as a learner, or the quiz report as a coach. The accordions allow for separating the quiz sections Screenshot 2024-09-24 at 10 11 08 AM
In the search filters panel in coach, to manage filter options (note that this is a variation of the current implementation of the search filters panel) Screenshot 2024-09-24 at 10 09 55 AM
Question previewing in the quiz editing side panel Screenshot 2024-09-24 at 10 09 39 AM
When used for example in the "filter" panel, the accordion reflects the selection state of it's child items Screenshot 2024-09-25 at 11 40 56 AM
Alternatively, if no options within the accordion may be selected, the accordion is inactive Screenshot 2024-09-25 at 11 41 16 AM

Tasks

  • Accordion components and related composables are updated as needed to support all interactions outlined above, including potentially multiple different types of interactions (checkboxes, "accordion item is a button", and icon buttons as part of the accordion item slot)

Acceptance Criteria

  • Accordion contains a flexible slot that supports both text display as well as interactive elements within the accordion that could be one or more semantic elements (button, li, p, etc.)
  • Accordion header can reflect a selected state that matches the selection of one or more of its children
  • Accordion header can be inactive if no matching options exist at the current "filter" level ( note: please speak to Radina about accessibility implications. loop in Marcella and Jessica as needed.)
  • documentation (code comments) is updated accordingly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants