[collapsible]`orientation` option

[michaelhazan]

Feature request

Summary

Having a orientation prop to make the components open horizontally rather then vertically.

Examples in other libraries

MUI Collapse orientation prop

Motivation

can be useful for implementations of components such as: Drawer, Sidebar and so on..

[mj12albert]

It's already available on Accordion: https://base-ui.com/react/components/accordion#root

Example: https://master--base-ui.netlify.app/experiments/accordion/horizontal

[michaelhazan]

my bad!
changed it to only collapsible

[mj12albert]

It's not on collapsible as it's not part of the ARIA pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

Both the width/height are available at the same time though, so you can style it to open either vertically or horizontally already, and/or add an orientation prop in your wrapping component

[michaelhazan]

fair, but it doesnt seem to be a part of the accordion pattern either.. https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

[michaelhazan]

also technically an accordion is a stack of collapsibles, so it seems weird for them to have different prop options..

[CiscoFran10]

@michaelhazan I made a demo for your case on how you can make the horizontal styling:

https://stackblitz.com/edit/kadlbzhj?file=src%2FApp.tsx

[CiscoFran10]

@mj12albert Maybe we could add some examples like this to the Collapsible docs? There aren’t many besides the hero.

@michaelhazan I made a demo for your case on how you can make the horizontal styling:

https://stackblitz.com/edit/kadlbzhj?file=src%2FApp.tsx

[mj12albert]

it doesnt seem to be a part of the accordion pattern either..

Actually yeah, aria-orientation is quite specific https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-orientation#associated_roles and we don't set it on the accordion component either

However in an accordion the orientation prop is necessary to configure keyboard navigation behavior for arrowing between triggers

[michaelhazan]

it doesnt seem to be a part of the accordion pattern either..

Actually yeah, aria-orientation is quite specific https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-orientation#associated_roles and we don't set it on the accordion component either

However in an accordion the orientation prop is necessary to configure keyboard navigation behavior for arrowing between triggers

ah i see... appreciate the explanation
i guess it doesn't actually make sense to add this to the collapsible, maybe instead their should be an example in the docs to how you should make it horizontal through css?