[accordion] New Accordion components and hooks #577

mj12albert · 2024-09-03T06:43:15Z

Closes #25
Closes #627
Closes #702
Closes mui/material-ui#36297

Builds on top of:

Preview

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

Summary

Accordion is built using Collapsible, some changes were made to Collapsible while working on this:

useCollapsibleTrigger (and Collapsible/AccordionTrigger) now uses useButton
Collapsible.Content is now renamed to Collapsible.Panel
perf improvements: reduced the use of window.getComputedStyle to an absolute minimum, merged the internal states into one
style hooks follows the latest convention: [data-open] on the panel, and [data-panel-open] on the trigger

Accordion features

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

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

mui-bot · 2024-09-03T06:46:05Z

Netlify deploy preview

https://deploy-preview-577--base-ui.netlify.app/

Generated by 🚫 dangerJS against faf9231

atomiks · 2024-10-22T08:33:48Z

packages/mui-base/src/Accordion/Root/AccordionRoot.tsx

+    customStyleHookMapping: {
+      disabled: (isDisabled) => {
+        if (isDisabled) {
+          return { 'data-disabled': '' };
+        }
+        return null;
+      },
+      value: () => null,
+    },


Should be placed outside the component. I don't think data-disabled needs a custom style hook as this should work by default?

@atomiks Moved - by default disabled becomes data-disabled="true" instead of just data-disabled which seems a bit better, maybe the getStyleHookProps util could be updated to handle this universally?

I'm ok with just data-disabled and whatever we choose, we should apply to all components. So getStyleHookProps should handle it.

2c8327e
Since we already don't render any data attr when the value is false, I think we could change all data-attr='true' to just data-attr (e.g. data-readonly, data-required...)

docs/data/components/accordion/accordion.mdx

michaldudak · 2024-10-22T08:45:07Z

docs/data/components/accordion/accordion.mdx

+When uncontrolled, use the `defaultValue` prop to set the initial state of the accordion:
+
+```tsx
+<Accordion.Root defaultValue={[0]}>


I wonder if openPanels wouldn't make more sense than value (and now that I think of it, I'd rename Tabs's value as well).

I agree the API for Tabs and Accordion should be as similar as possible, wonder what @vladmoroz and @colmtuite think?
The API would be openPanels/defaultOpenPanels? and onOpenPanelChange?

@michaldudak what would value become on the item itself? E.g. here <Accordion.Item value="1">

value on items still makes sense to me.

If items have value, I think the connection gets lost then if the root uses anything else other than value

But it's not the same thing. A panel has a value (or really, an identifier, so we could consider using the id here as well), and the Accordion controls which panels are open. Using the same prop for both is counterintuitive for me.

React Aria's DisclosureGroup uses expandedKeys and id (a bit weird as well, as "key" != "id")
Ariakit's Tab uses selectedId and id.

For using id, I worry it's not a good idea to conflate the "panel value" with the id attribute 🤔
but since this is equally relevant to Tabs let's discuss this in the next call to unblock this PR 🙏

I'm not entirely convinced it's the best idea either, especially that on Tabs you can use non-string values as well, which won't be possible with id. But then, is it a real use case?

We discussed this and decided to stick with value/onValueChange for general consistency, all the other options we could come up with are a bit clumsy by comparison

docs/data/components/collapsible/CssAnimatedCollapsible.tsx

packages/mui-base/src/Accordion/Item/AccordionItemContext.tsx

packages/mui-base/src/Accordion/Root/AccordionRootContext.tsx

Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michał Dudak <[email protected]> Co-authored-by: atomiks <[email protected]>

mj12albert added new feature New feature or request component: accordion This is the name of the generic UI component, not the React module! labels Sep 3, 2024

mj12albert mentioned this pull request Sep 3, 2024

[Accordion] New Accordion components and hooks #551

Closed

1 task

mj12albert force-pushed the feat/accordion branch 4 times, most recently from 36e29e3 to 881476c Compare September 3, 2024 15:02

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 4, 2024

mj12albert force-pushed the feat/accordion branch 2 times, most recently from 84b0482 to e16cad0 Compare September 4, 2024 05:33

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 4, 2024

mj12albert force-pushed the feat/accordion branch 7 times, most recently from bb181bf to c735efb Compare September 4, 2024 07:49

mj12albert marked this pull request as ready for review September 4, 2024 07:50

mj12albert requested review from atomiks, colmtuite and michaldudak as code owners September 4, 2024 07:50

mj12albert force-pushed the feat/accordion branch 3 times, most recently from b5f818e to 6969cd2 Compare September 5, 2024 05:11

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 5, 2024

mj12albert force-pushed the feat/accordion branch from 6969cd2 to 91333ff Compare September 5, 2024 09:25

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 5, 2024

mj12albert force-pushed the feat/accordion branch from 91333ff to 85062eb Compare September 5, 2024 09:33

mj12albert mentioned this pull request Oct 17, 2024

[collapsible] Layout shift when using CSS transitions and the Panel is initially open #740

Open

Update experiments

8e0df16

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 18, 2024

Merge remote-tracking branch 'upstream/master' into feat/accordion

03e0ec4

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 21, 2024

mj12albert added 2 commits October 21, 2024 19:04

prettier

7dce2b3

Merge remote-tracking branch 'upstream/master' into feat/accordion

0321519

atomiks reviewed Oct 22, 2024

View reviewed changes

michaldudak reviewed Oct 22, 2024

View reviewed changes

mj12albert added 2 commits October 22, 2024 22:08

Fix review comments

fc14621

Universally update style hooks from data-attr='true' to data-attr

e1134df

mj12albert force-pushed the feat/accordion branch from 2c8327e to e1134df Compare October 22, 2024 15:33

mj12albert requested review from michaldudak and atomiks October 23, 2024 00:05

mj12albert linked an issue Oct 24, 2024 that may be closed by this pull request

[Accordion][base-ui] Vertical Accordion Alignment mui/material-ui#36297

Closed

2 tasks

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Oct 24, 2024

Merge remote-tracking branch 'upstream/master' into feat/accordion

e7de337

mj12albert force-pushed the feat/accordion branch from 5dc3aac to e7de337 Compare October 24, 2024 12:53

mj12albert added 2 commits October 28, 2024 17:52

Merge remote-tracking branch 'upstream/master' into feat/accordion

7b9bf09

Merge remote-tracking branch 'upstream/master' into feat/accordion

91c0cbb

michaldudak approved these changes Oct 29, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 29, 2024

Merge remote-tracking branch 'upstream/master' into feat/accordion

217ead7

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 29, 2024

mj12albert added 2 commits October 29, 2024 23:50

Fix conflict

ec8d70b

Fix jsdom tests

faf9231

mj12albert merged commit 8054a85 into mui:master Oct 29, 2024
18 checks passed

mj12albert deleted the feat/accordion branch October 30, 2024 06:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[accordion] New Accordion components and hooks #577

[accordion] New Accordion components and hooks #577

mj12albert commented Sep 3, 2024 •

edited

Loading

mui-bot commented Sep 3, 2024 •

edited

Loading

atomiks Oct 22, 2024

mj12albert Oct 22, 2024

michaldudak Oct 22, 2024

mj12albert Oct 22, 2024

michaldudak Oct 22, 2024

mj12albert Oct 22, 2024

vladmoroz Oct 22, 2024

michaldudak Oct 22, 2024

vladmoroz Oct 22, 2024

michaldudak Oct 23, 2024

mj12albert Oct 24, 2024

michaldudak Oct 25, 2024

mj12albert Oct 28, 2024 •

edited

Loading

[accordion] New Accordion components and hooks #577

[accordion] New Accordion components and hooks #577

Conversation

mj12albert commented Sep 3, 2024 • edited Loading

Preview

Summary

Accordion features

Extra demos

mui-bot commented Sep 3, 2024 • edited Loading

Netlify deploy preview

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mj12albert Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

mj12albert commented Sep 3, 2024 •

edited

Loading

mui-bot commented Sep 3, 2024 •

edited

Loading

mj12albert Oct 28, 2024 •

edited

Loading