feat: add expandDirection prop to List.Accordion/Group (#4852)

[futurk]

Motivation

upward-expanding-lists are common on the web.

Related issue

#4852

Test plan

check out the last List.Section components of :
example/src/Examples/ListAccordionExample.tsx and example/src/Examples/ListAccordionGroupExample.tsx

[callstack-bot]

Hey @futurk, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[azizbecha]

Hey @futurk,
Thanks for your efforts, can you also add this to the documentation too ?
Notice: can we simplify this block of nested ternary operators by creating a simpler function to avoid excessive complexity.

Example:

function getExpandedContent({
  isExpanded,
  children,
  left,
  theme,
}: {
  isExpanded: boolean;
  children: React.ReactNode;
  left: boolean;
  theme: Theme;
}) {
  if (!isExpanded) {
    return null;
  }

  return React.Children.map(children, (child) => {
    if (
      left &&
      React.isValidElement<ListChildProps>(child) &&
      !child.props.left &&
      !child.props.right
    ) {
      return React.cloneElement(child, {
        style: [
          theme.isV3 ? styles.childV3 : styles.child,
          child.props.style,
        ],
        theme,
      });
    }

    return child;
  });
}

Usage:

const expandedContent = getExpandedContent({
  isExpanded,
  children,
  left,
  theme,
});

[futurk]

Done. The default value of expandDirection is also documented now.