feat: add collapsible plugin cards in native apps#74
Conversation
There was a problem hiding this comment.
Pull request overview
Adds per-plugin expand/collapse behavior to the Native Apps “Plugins” step by introducing an expander control in each plugin card header, while keeping cards expanded by default.
Changes:
- Added
Expandercontrol next to each plugin badge in the plugin card header. - Implemented per-plugin expanded/collapsed state and conditional rendering of plugin input sections.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ...previous, | ||
| [plugin.id]: !(previous[plugin.id] ?? true), | ||
| })) | ||
| } |
There was a problem hiding this comment.
The new expand/collapse control is rendered via Expander, which currently uses a clickable <div> (no keyboard interaction, no role="button", no aria-expanded/label). Since this PR introduces the expander in the job creation flow, please make the control accessible (prefer a <button type="button"> in Expander with aria-expanded and an aria-label, or add equivalent keyboard/ARIA support).
| } | |
| } | |
| aria-label={ | |
| isExpanded | |
| ? 'Collapse plugin details' | |
| : 'Expand plugin details' | |
| } | |
| aria-expanded={isExpanded} | |
| aria-controls={`plugin-card-${plugin.id}`} |
Summary\n- add an expander arrow next to each plugin badge in the Native Apps Plugins step\n- allow each plugin card to toggle between expanded and collapsed states\n- keep plugin content expanded by default and preserve existing remove behavior\n\n## Verification\n- npm run lint -- src/components/create-job/plugins/PluginsSection.tsx