Add toggleMode to accordion and accordion section #2559
Conversation
🦋 Changeset detectedLatest commit: b5a04ab The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +240 B (+0.23%) Total Size: 103 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-snxieqtpnq.chromatic.com/ Chromatic results:
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (f57fd50) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2559"Packages can also be installed manually by running: pnpm add @khanacademy/wonder-blocks-<package-name>@PR2559 |
| key={`nested-section-1`} | ||
| caretPosition="start" | ||
| > | ||
| <AccordionSection |
There was a problem hiding this comment.
Can you add a small margin around the inner nested sections so it's visually more clear that they're nested?
| key={`nested-section-1`} | ||
| caretPosition="start" | ||
| > | ||
| <AccordionSection |
There was a problem hiding this comment.
suggestion: Looking at the rendered markup, it would be helpful to have Accordions output in a nested UL and LIs. That would indicate the structure semantically. Is there a way to handle this under the hood and make it automatic for consumers?
Design-wise, the nested accordions aren't super clear that they're nested beyond the caret icons and a subtle outline. You. might already be working on this, but can we make the nesting more obvious somehow? Some design ideas could include indentation or other spacing, or background/foreground colors.
| </View> | ||
|
|
||
| <View> | ||
| <LabelLarge>Nested Accordion Example</LabelLarge> |
There was a problem hiding this comment.
suggestion: Even though this uses toggle mode, could the nested example be broken out into a separate story? It would make it easier to find!
| expect(await screen.findByText("Content 1")).toBeVisible(); | ||
| expect(await screen.findByText("Content 2")).toBeVisible(); | ||
|
|
||
| // Act: now re-render with toggleMode="collapse-all" |
There was a problem hiding this comment.
question: Can you break this out into a separate test to isolate the assertions? Since the first set of expectations are testing the same visibility, perhaps they could also be combined into one group with a different query selector, like findAllByRole?
There are some tips and reasoning in this doc: https://khanacademy.atlassian.net/wiki/spaces/ENG/pages/98402353/Unit+Testing+Best+Practices#Assert-One-Requirement-Per-Test
| @@ -73,6 +83,26 @@ type Props = AriaProps & { | |||
| * Custom styles for the overall accordion container. | |||
| */ | |||
| style?: StyleType; | |||
|
|
|||
| /** | |||
| * Called whenever the accordion’s overall expansion state may have changed, | |||
There was a problem hiding this comment.
praise: Thanks for these comments! They are super helpful!
| @@ -17,7 +17,7 @@ type Props = { | |||
| // Unique ID for this section's button. | |||
| id: string; | |||
| // Header content. | |||
| header: string | React.ReactElement; | |||
| header: string | React.ReactElement | TemplateStringsArray; | |||
There was a problem hiding this comment.
question: I'm curious, are there specific cases where TemplateStringsArray becomes necessary?
Summary:
This PR updates the Accordion and AccordionSection so that sections can be nested and exposes an internal toggle handler.
Updates:
Screenshots:
Screen.Recording.2025-04-15.at.9.50.50.PM.mov
Issue: CLASS-11631
Test plan: