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

Add "expand all" and "collapse all" functionality into the AccordionContainer component #11547

Closed
4 tasks
marcellamaki opened this issue Nov 20, 2023 · 1 comment · Fixed by #11565
Closed
4 tasks
Assignees
Labels
P1 - important Priority: High impact on UX

Comments

@marcellamaki
Copy link
Member

marcellamaki commented Nov 20, 2023

Overview

The AccordionContainer and related components were built for enhanced quiz management feature and while putting the last touches on it. Currently the solution that manages the header has some complicated functions and scope by using the slot-props.

During review @rtibbles noted that the Expand/Collapse All should probably be built into the AccordionContainer which would result in a simplified slots-and-their-props situation.

Acceptance criteria

  • The templates as they are should work visually / structurally when moved from the CreateQuizSection component into the AccordionContainer component.
  • The <KGrid key="top-bar"....> line is where the structure starts (~L193) and you'll see there are two columns in this one row. With this in mind, we can think of the "top bar" as two distinct sections.
    This means that we will need to expose two slots #left-actions and #right-actions where the user can put their own template code.
    For example:
	  <AccordionContainer /* ... */>
	  	<template #left-actions>
	      	<!-- Everything here will be rendered to the left --->
	      	<KCheckbox /* (De)select all */ />
	      </template>
	     
	      <template #right-actions>
	      	<!-- Everything here will be rendered to the right of the
	          baked-in Expand & Collapse all buttons -->
	      	<KIconButton /* delete selection */ />
	      	<KIconButton /* replace selection */ />
	  	</template>
	  </AccordionContainer>

With this, the existing #top slot can be removed and the Expand and Collapse all icons should be baked into the component. The same functions that are there can be used, but since you'll render the buttons within the AccordionContainer you won't have to pass them down to the child slots.

  • All functionality and design should remain the same.

Accessibility considerations

  • Ensure that the user's focus enters the accordion panel when Expanding and the heading/title area when Collapsing
@AlexVelezLl
Copy link
Member

Completed thanks to #11565

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P1 - important Priority: High impact on UX
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants