Skip to content

Add Switch, ToggleButtonGroup, ProgressBar and Drawer to Quanta - #274

Open
sneridagh wants to merge 2 commits into
feat/react-aria-1.22from
feat/quanta-controls
Open

sneridagh wants to merge 2 commits into
feat/react-aria-1.22from
feat/quanta-controls

Conversation

@sneridagh

Copy link
Copy Markdown
Member

Phase 1 of #269. Stacked on #273 (React Aria 1.22).

Adds the Quanta controls that the content types control panel needs and that Quanta didn't have yet. Like the rest of Quanta, they are thin, Tailwind-styled wrappers around React Aria Components and keep its API.

New components

  • Switch: built on React Aria's SwitchField and SwitchButton from 1.18, not on the Switch that 1.18 deprecated. It takes an optional description (linked to the control through aria-describedby) and an errorMessage, which is what settings rows like "Globally addable / Editors can add events in any folder…" need.
  • ToggleButton and ToggleButtonGroup: a toggle button and a segmented control. With selectionMode="single" the group works like a compact radio group, e.g. the type list filters "All · Custom · Not addable". It supports multiple selection and vertical orientation.
  • ProgressBar: with a label and value text, determinate or indeterminate (pulsing, still with reduced motion). It will show the progress of a workflow change.
  • Drawer: a Modal that slides in from the right (or left) over a backdrop, for editing an item next to its list, e.g. the field editor. It can be dismissed by default.

New stories for existing components

Table (selection and sorting, empty state), GridList (selection, plus drag and drop reordering with useDragAndDrop), Dialog (confirmation in a modal, dialog in a popover) and ComboBox.

Left out on purpose

  • Disclosure: AccordionItem, AccordionItemTrigger and AccordionPanel already wrap React Aria's Disclosure and work outside an Accordion, so a separate component would duplicate them.
  • Toast: stays in @plone/layout.
  • Sheet (new in React Aria 1.22): for mobile. Desktop control panels use the Drawer.

Checks

  • pnpm --filter @plone/quanta test --run: 11 tests pass, including axe checks for each new component.
  • pnpm --filter @plone/quanta lint, build, check:exports and build-storybook pass.
  • I checked each new story in the browser: the switch toggles, the segmented control, the progress bar, the drawer opening with focus in its first field, and the reorderable grid list.

Phase 1 of #269. Also add the missing stories for Table, GridList (with drag
and drop), Dialog and ComboBox.
* feat/react-aria-1.22:
  Drop the unused React imports in @plone/controlpanels
  Ship @plone/controlpanels as source, like the other add-ons
@sneridagh sneridagh mentioned this pull request Oct 11, 2026
10 tasks

This branch has not been deployed

No deployments
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 this pull request may close these issues.

1 participant