base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[accordion] New Accordion components and hooks

Open mj12albert opened this issue 5 months ago • 2 comments

Closes #25 Closes #627 Closes #702

Builds on top of:

  • https://github.com/mui/base-ui/pull/481
  • https://github.com/mui/base-ui/pull/487

Preview

👉 https://deploy-preview-577--base-ui.netlify.app/components/react-accordion

Summary

  • orientation: 'vertical' | 'horizontal': sets a data attr and navigates focus between triggers with ArrowRight/Left instead of ArrowDown/Up
  • Collapsible.Content now exposes the --collapsible-content-width var to support horizontal orientation
  • direction: 'ltr' | 'rtl': sets the dir attr like other components and reverses ArrowRight & ArrowLeft when orientation === 'horizontal'
  • openMultiple: boolean: default true, controls whether multiple sections can be open at the same time, not expected to change during the lifetime of the component
  • disabled can be set on the Root, Section, or Trigger
  • hidden="until-found" can be set on the Root or a Panel
  • useCollapsibleTrigger (and Collapsible/AccordionTrigger) now uses useButton

Extra demos

  • Animations + hidden="until-found" https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-animations
  • Horizontal LTR + RTL https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-horizontal

mj12albert avatar Sep 03 '24 06:09 mj12albert