Accordion #6931

reidbarber · 2024-08-22T16:54:16Z

Accordion

This implements the Accordion pattern, with an emphasis on individual accordion items as opposed to groups.

Features

Implements hidden=until-found
Supports additional interactive elements adjacent to Heading (i.e. Menu)
Not a collection component

API

React Aria/Stately hooks:

useDisclosure
useDisclosureState

React Aria components:

AccordionItem
- Heading
  - Button
- AccordionPanel

RSP v3 components:

AccordionGroup
- AccordionItem
  - AccordionHeader
  - AccordionPanel

Spectrum 2 components:

AccordionGroup
- AccordionItem
  - AccordionHeader
  - AccordionPanel

Examples

RAC

<AccordionItem>
  {({isExpanded}) => (
    <>
      <Header>
        <Heading level={3}>
          <Button slot="trigger">{isExpanded ? '⬇️' : '➡️'} This is an accordion header</Button>
        </Heading>
      </Header>
      <AccordionPanel>
        <p>This is the content of the accordion panel.</p>
      </AccordionPanel>
    </>
  )}
</AccordionItem>

Spectrum 2

<AccordionGroup isQuiet styles={style({width: 384})}>
  <AccordionItem>
    <AccordionHeader>
      Files
    </AccordionHeader>
    <AccordionPanel>
      Files content
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      People
    </AccordionHeader>
    <AccordionPanel>
      <TextField label="Name" />
    </AccordionPanel>
  </AccordionItem>
</AccordionGroup>

Additional comments

With regards to an Accordion (or AccordionGroup) wrapper around AccordionItem elements in React Aria, there is no ARIA semantics for that element, and keyboard arrow navigation is listed as optional, so we're going to prioritize the individual AccordionItem element for now but may revisit this in a follow-up. The main benefit would be controlling the expanded items' state at the group level and using Up/Down or Home/End keyboard navigation between item headers.

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2024-08-23T16:17:02Z

Build successful! 🎉

nwidynski · 2024-08-27T19:56:31Z

Hey @reidbarber thanks getting to work on this!

I've got a couple of questions regarding the spec the team chose here and would love to provide some input from our own learnings as we implemented both <Disclosure /> and <Accordion /> pattern using react-aria.

Is there a reason not to follow the <...Trigger/> pattern instead of <AccordionItem>? I could imagine your spec of additional interactive elements inside the <Header /> introducing this constraint?

<DisclosureTrigger isOpen>
  <Heading level={3}>
    <Button />
  </Heading>
  <Disclosure>
    <Text>I am controlled.</Text>
  </Disclosure>
</DisclosureTrigger>

Since the W3C patterns do not collide in their ARIA properties or interactivity, would there be reasoning against re-cycling <Disclosure /> inside <Accordion />, similar to how <Checkbox/> works in both grouped and ungrouped scenario?

const { buttonProps, regionProps } = isNil(ctxState)
  ? // eslint-disable-next-line react-hooks/rules-of-hooks
    useDisclosureTrigger(state)
  : // eslint-disable-next-line react-hooks/rules-of-hooks
    useAccordionItem(props, ctxState, objectRef);

Have you guys considered adding something like useDisclosureAnimation()?

export const useDisclosureAnimation = (
  ...option: AtomicDisclosureAnimationOptions
): AtomicDisclosureAnimation => {
  const [ref, isOpen] = option;

  const previous = useRef(isOpen);
  const [, rerender] = useState({});

  const isAnimating = previous.current !== isOpen;
  const onEnd = useCallback(() => rerender({}), []);
  
  if (isAnimating) previous.current = isOpen;
  
  useAnimation(ref, isAnimating, onEnd);

  return {
    isOpening: isOpen && isAnimating,
    isClosing: !isOpen && isAnimating,
  };
};

Does the team already have an idea how to work in arrow key navigation inside <Accordion />? I suppose it would work similar to the <Tabs /> pattern but i would be very interested in any guidance.

reidbarber · 2024-08-28T20:10:13Z

@nwidynski Thanks for the input! We are definitely still considering different API options, so I appreciate the comments.

Is there a reason not to follow the <...Trigger/> pattern instead of <AccordionItem>?

I think the main reason is that we want to support additional interactive elements adjacent to the accordion header, and that pattern usually means the entire first child is the trigger.

would there be reasoning against re-cycling <Disclosure /> inside <Accordion />

We haven't given much thought into including a disclosure component, but as it seems like a simple subset of accordion features, I think we could consider having accordion build on top it, maybe at the hook level.

Have you guys considered adding something like useDisclosureAnimation()

This looks great! I think we definitely want to include these states.

Does the team already have an idea how to work in arrow key navigation inside <Accordion />?

Arrow key navigation between items is optional in ARIA, so we're still considering options for this.

LFDanLu

Just some initial comments, but I think overall the api makes sense. Might be a bit odd to have a AccordionItem only for RAC without a container Accordion element, but the wrapping container doesn't seem to have much of a purpose so it might be ok. If we feel like that might be confusing, we could change it from "Item" so that it doesn't sound like it is a collection element

packages/@react-aria/accordion/src/useAccordionItem.ts

packages/@react-spectrum/accordion/src/Accordion.tsx

packages/@react-stately/accordion/package.json

packages/@react-stately/accordion/src/useAccordionItemState.ts

LFDanLu · 2024-09-03T22:37:08Z

packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

+      <AccordionHeader>
+        Your files
+      </AccordionHeader>
+      <AccordionPanel>
+        files
+      </AccordionPanel>


Noticed that if you flip the order of these that the panel renders about the header when opened. This is probably fine if we want to just enforce the order that these elements are provided to the AccordionItem but otherwise we might need to use a flex container + order?

For react spectrum i think enforcing the order is a good idea

packages/react-aria-components/src/Accordion.tsx

snowystinger

Please add react-stately/accordion to the ts strict config

packages/@react-aria/accordion/src/useAccordionItem.ts

snowystinger · 2024-09-04T00:10:33Z

packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

+      <AccordionHeader>
+        Your files
+      </AccordionHeader>
+      <AccordionPanel>
+        files
+      </AccordionPanel>


For react spectrum i think enforcing the order is a good idea

packages/@react-spectrum/accordion/src/Accordion.tsx

snowystinger · 2024-09-04T03:46:59Z

packages/react-aria-components/src/Accordion.tsx

@@ -0,0 +1,128 @@
+/*


Just checking, but recommendation for building a mutually exclusive AccordionGroup with arrow key navigation would be something like this?

function AccordionGroup() { let [openIndex, setOpenIndex] = useState(0); let focusManager = useFocusManager({accept: (node) => { return node.getAttribute('data-accordion-trigger-g1') === true; }}); return ( <div onKeyDown={(e) => { if (e.key === 'ArrowDown') { focusManager.focusNext(); e.preventDefault(); } else if (e.key === 'ArrowUp') { focusManager.focusPrevious(); e.preventDefault(); } }}> <AccordionItem isOpen={openIndex === 0} onOpenChange={val => val && setOpenIndex(0)}> {({isOpen}) => ( <> <Header> <Heading level={3}> <Button slot="trigger" data-accordion-trigger-g1>{isOpen ? '⬇️' : '➡️'} Item 1</Button> </Heading> </Header> <AccordionPanel> <p>Content for panel 1.</p> </AccordionPanel> </> )} </AccordionItem> <AccordionItem isOpen={openIndex === 1} onOpenChange={val => val && setOpenIndex(1)}> {({isOpen}) => ( <> <Header> <Heading level={3}> <Button slot="trigger" data-accordion-trigger-g1>{isOpen ? '⬇️' : '➡️'} Item 2</Button> </Heading> </Header> <AccordionPanel> <p>Panel 2's content.</p> </AccordionPanel> </> )} </AccordionItem> </div> ); } export const AccordionGroupExample = { render: () => <FocusScope><AccordionGroup /></FocusScope> };

rspbot · 2024-09-05T00:46:05Z

Build successful! 🎉

packages/@react-spectrum/s2/src/Accordion.tsx

rspbot · 2024-09-18T22:23:38Z

Build successful! 🎉

packages/@react-aria/accordion/src/useAccordion.ts

packages/@react-spectrum/s2/src/Accordion.tsx

packages/react-aria-components/stories/Accordion.stories.tsx

rspbot · 2024-09-19T17:14:08Z

Build successful! 🎉

rspbot · 2024-09-19T17:36:33Z

Build successful! 🎉

It uses more normal numbers

rspbot · 2024-09-19T20:51:47Z

Build successful! 🎉

rspbot · 2024-09-19T21:30:38Z

Build successful! 🎉

LFDanLu

behavior looks good, just one other dep that I think we can get rid of

LFDanLu · 2024-09-19T21:35:05Z

packages/react-aria-components/package.json

@@ -39,8 +39,10 @@
  "dependencies": {
    "@internationalized/date": "^3.5.5",
    "@internationalized/string": "^3.2.3",
+    "@react-aria/accordion": "3.0.0-alpha.33",


can we remove this dep now? Noticed it in @react-spectrum/accordion's package json too

snowystinger

Happy for anything else to be follow up

rspbot · 2024-09-20T14:49:37Z

Build successful! 🎉

rspbot · 2024-09-20T14:49:39Z

## API Changes

react-aria-components

/react-aria-components:Disclosure

+Disclosure {
+  children?: ReactNode | ((DisclosureRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:DisclosurePanel

+DisclosurePanel {
+  children: ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:DisclosureStateContext

+DisclosureStateContext {
+  UNTYPED
+}

/react-aria-components:DisclosureContext

+DisclosureContext {
+  UNTYPED
+}

/react-aria-components:DisclosureProps

+DisclosureProps {
+  children?: ReactNode | ((DisclosureRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:DisclosurePanelProps

+DisclosurePanelProps {
+  children: ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

@react-spectrum/accordion

/@react-spectrum/accordion:Accordion

-Accordion <T extends {}> {
+Accordion {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
-  children: CollectionChildren<{}>
-  defaultExpandedKeys?: Iterable<Key>
-  disabledKeys?: Iterable<Key>
+  children: React.ReactNode
   end?: Responsive<DimensionValue>
-  expandedKeys?: Iterable<Key>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isHidden?: Responsive<boolean>
-  items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
-  onExpandedChange?: (Set<Key>) => any
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:Item

-Item <T> {
-  props: ItemProps<T>
-  returnVal: undefined
-}

/@react-spectrum/accordion:SpectrumAccordionProps

-SpectrumAccordionProps <T> {
+SpectrumAccordionProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
-  children: CollectionChildren<T>
-  defaultExpandedKeys?: Iterable<Key>
-  disabledKeys?: Iterable<Key>
+  children: React.ReactNode
   end?: Responsive<DimensionValue>
-  expandedKeys?: Iterable<Key>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isHidden?: Responsive<boolean>
-  items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
-  onExpandedChange?: (Set<Key>) => any
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/accordion:Disclosure

+Disclosure {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: [ReactElement<SpectrumDisclosureHeaderProps>, ReactElement<SpectrumDisclosurePanelProps>]
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  id?: string
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/@react-spectrum/accordion:DisclosureHeader

+DisclosureHeader {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  id?: string
+  level?: number = 3
+}

/@react-spectrum/accordion:DisclosurePanel

+DisclosurePanel {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  id?: string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/@react-spectrum/accordion:SpectrumDisclosureProps

+SpectrumDisclosureProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: [ReactElement<SpectrumDisclosureHeaderProps>, ReactElement<SpectrumDisclosurePanelProps>]
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  id?: string
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/@react-spectrum/accordion:SpectrumDisclosurePanelProps

+SpectrumDisclosurePanelProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  id?: string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/@react-spectrum/accordion:SpectrumDisclosureHeaderProps

+SpectrumDisclosureHeaderProps {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  id?: string
+  level?: number = 3
+}

@react-spectrum/s2

/@react-spectrum/s2:Accordion

+Accordion {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: React.ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = "regular"
+  id?: string
+  isDisabled?: boolean
+  isQuiet?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:AccordionContext

+AccordionContext {
+  UNTYPED
+}

/@react-spectrum/s2:DisclosureHeader

+DisclosureHeader {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: React.ReactNode
+  id?: string
+  level?: number = 3
+}

/@react-spectrum/s2:Disclosure

+Disclosure {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: [ReactElement<DisclosureHeaderProps>, ReactElement<DisclosurePanelProps>]
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  density?: 'compact' | 'regular' | 'spacious' = "regular"
+  id?: string
+  isDisabled?: boolean
+  isExpanded?: boolean
+  isQuiet?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  size?: 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  styles?: StylesProp
+}

/@react-spectrum/s2:DisclosurePanel

+DisclosurePanel {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  id?: string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/@react-spectrum/s2:DisclosureContext

+DisclosureContext {
+  UNTYPED
+}

/@react-spectrum/s2:AccordionProps

+AccordionProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: React.ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = "regular"
+  id?: string
+  isDisabled?: boolean
+  isQuiet?: boolean
+  size?: 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:DisclosureProps

+DisclosureProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  children: [ReactElement<DisclosureHeaderProps>, ReactElement<DisclosurePanelProps>]
+  className?: string | ((DisclosureRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpanded?: boolean
+  density?: 'compact' | 'regular' | 'spacious' = "regular"
+  id?: string
+  isDisabled?: boolean
+  isExpanded?: boolean
+  isQuiet?: boolean
+  onExpandedChange?: (boolean) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  size?: 'S' | 'M' | 'L' | 'XL' = "M"
+  slot?: string | null
+  style?: CSSProperties | ((DisclosureRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  styles?: StylesProp
+}

/@react-spectrum/s2:DisclosurePanelProps

+DisclosurePanelProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children: React.ReactNode
+  className?: string | (({
+  
+} & {
+    defaultClassName: string | undefined
+})) => string
+  id?: string
+  role?: 'group' | 'region' = 'group'
+  style?: CSSProperties | (({
+  
+} & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

@react-aria/disclosure

/@react-aria/disclosure:useDisclosure

+useDisclosure {
+  props: AriaDisclosureProps
+  state: DisclosureState
+  ref?: RefObject<Element | null>
+  returnVal: undefined
+}

/@react-aria/disclosure:DisclosureAria

+DisclosureAria {
+  buttonProps: AriaButtonProps
+  contentProps: HTMLAttributes<HTMLElement>
+}

/@react-aria/disclosure:AriaDisclosureProps

+AriaDisclosureProps {
+  defaultExpanded?: boolean
+  isDisabled?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+}

@react-stately/disclosure

/@react-stately/disclosure:useDisclosureState

+useDisclosureState {
+  props: DisclosureProps
+  returnVal: undefined
+}

/@react-stately/disclosure:DisclosureState

+DisclosureState {
+  collapse: () => void
+  expand: () => void
+  isExpanded: boolean
+  setExpanded: (boolean) => void
+  toggle: () => void
+}

/@react-stately/disclosure:DisclosureProps

+DisclosureProps {
+  defaultExpanded?: boolean
+  isExpanded?: boolean
+  onExpandedChange?: (boolean) => void
+}

reidbarber added 4 commits August 22, 2024 11:38

initialize accordion item

f8bdd1d

update yarn.lock

2215a47

better hidden=until-found support

33e0342

allow passing in panel ref

a399d01

reidbarber added the in sprint label Aug 22, 2024

reidbarber added 2 commits August 22, 2024 16:48

comments

aaa2015

use RAC in v3 Accordion

0c20600

Merge remote-tracking branch 'origin/main' into accordionitem

eeec6d2

use disclosure hooks

1284b05

LFDanLu reviewed Sep 3, 2024

View reviewed changes

snowystinger reviewed Sep 4, 2024

View reviewed changes

reidbarber added 5 commits September 4, 2024 18:23

initialize S2 Accordion

388f95d

fix lint

11a3114

add exports

d3e30a0

lint

8400f19

Merge remote-tracking branch 'origin/main' into accordionitem

dde08d2

reidbarber changed the title ~~WIP: Accordion~~ Accordion Sep 5, 2024

reidbarber commented Sep 5, 2024

View reviewed changes

packages/@react-spectrum/s2/src/Accordion.tsx Outdated Show resolved Hide resolved

reidbarber added 8 commits September 5, 2024 12:21

fix chevron color in dark mode

a162de4

fix version of @react-stately/accordion

8fa4881

keep aria-controls even when closed

f0ec20f

add isFocusVisibleWithin to AccordionPanel

0ff7a6b

fix panel height

2329d85

fix versions

0d8d49b

Merge remote-tracking branch 'origin/main' into accordionitem

b6335e1

add to ts strict config

1dc71d2

LFDanLu added the release label Sep 18, 2024

devongovett reviewed Sep 19, 2024

View reviewed changes

reidbarber added 5 commits September 19, 2024 11:29

revert renames in useAccordion

37dc1ff

move Disclosure to its own file

5075dcf

reanme RAC Accordion stories to Disclosure

195ed2b

fix styles prop type

2bf5b92

fix imports

53f4e0b

reidbarber added 2 commits September 19, 2024 12:26

update styles type on Disclosure

40aed9a

add dedicated story for S2 Disclosure

d58b5e4

devongovett added 2 commits September 19, 2024 16:23

Slight fixes

750431a

Center baseline and simplify padding by changing the minHeight instead

cafacea

It uses more normal numbers

devongovett previously approved these changes Sep 19, 2024

View reviewed changes

fix import

39e772c

devongovett dismissed their stale review via 39e772c September 19, 2024 21:11

update lockfile

a045812

LFDanLu approved these changes Sep 19, 2024

View reviewed changes

snowystinger approved these changes Sep 20, 2024

View reviewed changes

Merge branch 'main' into accordionitem

3aeb8db

reidbarber merged commit 9421c14 into main Sep 20, 2024
29 checks passed

reidbarber deleted the accordionitem branch September 20, 2024 17:54

This was referenced Sep 30, 2024

Multiple tab stops inside collection components #7121

Open

add Accordion breaking changes to release notes #7128

Merged

oliviertassinari mentioned this pull request Oct 3, 2024

[accordion] Support "hidden=until-found" pattern mui/base-ui#702

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accordion #6931

Accordion #6931

reidbarber commented Aug 22, 2024 •

edited

Loading

rspbot commented Aug 23, 2024

nwidynski commented Aug 27, 2024 •

edited

Loading

reidbarber commented Aug 28, 2024

LFDanLu left a comment

LFDanLu Sep 3, 2024

snowystinger Sep 4, 2024

snowystinger left a comment

snowystinger Sep 4, 2024

snowystinger Sep 4, 2024

rspbot commented Sep 5, 2024

rspbot commented Sep 18, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

LFDanLu left a comment

LFDanLu Sep 19, 2024

snowystinger left a comment

rspbot commented Sep 20, 2024

rspbot commented Sep 20, 2024

Accordion #6931

Accordion #6931

Conversation

reidbarber commented Aug 22, 2024 • edited Loading

Accordion

Features

API

React Aria/Stately hooks:

React Aria components:

RSP v3 components:

Spectrum 2 components:

Examples

RAC

Spectrum 2

Additional comments

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Aug 23, 2024

nwidynski commented Aug 27, 2024 • edited Loading

reidbarber commented Aug 28, 2024

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Sep 3, 2024

Choose a reason for hiding this comment

snowystinger Sep 4, 2024

Choose a reason for hiding this comment

snowystinger left a comment

Choose a reason for hiding this comment

snowystinger Sep 4, 2024

Choose a reason for hiding this comment

snowystinger Sep 4, 2024

Choose a reason for hiding this comment

rspbot commented Sep 5, 2024

rspbot commented Sep 18, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

rspbot commented Sep 19, 2024

LFDanLu left a comment

Choose a reason for hiding this comment

LFDanLu Sep 19, 2024

Choose a reason for hiding this comment

snowystinger left a comment

Choose a reason for hiding this comment

rspbot commented Sep 20, 2024

rspbot commented Sep 20, 2024

react-aria-components

/react-aria-components:Disclosure

/react-aria-components:DisclosurePanel

/react-aria-components:DisclosureStateContext

/react-aria-components:DisclosureContext

/react-aria-components:DisclosureProps

/react-aria-components:DisclosurePanelProps

@react-spectrum/accordion

/@react-spectrum/accordion:Accordion

/@react-spectrum/accordion:Item

/@react-spectrum/accordion:SpectrumAccordionProps

/@react-spectrum/accordion:Disclosure

/@react-spectrum/accordion:DisclosureHeader

/@react-spectrum/accordion:DisclosurePanel

/@react-spectrum/accordion:SpectrumDisclosureProps

/@react-spectrum/accordion:SpectrumDisclosurePanelProps

/@react-spectrum/accordion:SpectrumDisclosureHeaderProps

@react-spectrum/s2

/@react-spectrum/s2:Accordion

/@react-spectrum/s2:AccordionContext

/@react-spectrum/s2:DisclosureHeader

/@react-spectrum/s2:Disclosure

/@react-spectrum/s2:DisclosurePanel

/@react-spectrum/s2:DisclosureContext

/@react-spectrum/s2:AccordionProps

/@react-spectrum/s2:DisclosureProps

/@react-spectrum/s2:DisclosurePanelProps

@react-aria/disclosure

/@react-aria/disclosure:useDisclosure

/@react-aria/disclosure:DisclosureAria

/@react-aria/disclosure:AriaDisclosureProps

@react-stately/disclosure

/@react-stately/disclosure:useDisclosureState

reidbarber commented Aug 22, 2024 •

edited

Loading

nwidynski commented Aug 27, 2024 •

edited

Loading