feat(components): Disclosure (fka Accordion)

app/.eslintrc.js

@@ -54,6 +54,11 @@ module.exports = {
     ],
     "deprecate/import": [
       "error",
+      {
+        name: "Accordion",
+        module: "@arizeai/components",
+        use: "import { DisclosureGroup, Disclosure, DisclosureTrigger, DisclosurePanel } from '@phoenix/components'",
+      },
       {
         name: "Button",
         module: "@arizeai/components",

app/src/components/StopPropagation.tsx

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from "react";
+
+/**
+ * A component that stops the propagation of events.
+ *
+ * This is useful for preventing events from bubbling up to the parent component.
+ * Such as when buttons are nested, like inside of a DisclosureTrigger.
+ */
+export function StopPropagation({ children }: PropsWithChildren) {
+  return (
+    <div
+      style={{ display: "contents" }}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}

app/src/components/button/styles.tsx

@@ -14,8 +14,14 @@ export const buttonCSS = css`
   cursor: pointer;
   /* Disable outline since there are other mechanisms to show focus */
   outline: none;
+  &[data-focus-visible] {
+    // Only show outline on focus-visible, aka only when tabbed but not clicked
+    outline: 1px solid var(--ac-global-input-field-border-color-active);
+    outline-offset: 1px;
+  }
   &:not([disabled]) {
     transition: all 0.2s ease-in-out;
+    transition: outline 0s;
   }
   &[disabled] {
     cursor: default;

app/src/components/disclosure/Disclosure.tsx

@@ -0,0 +1,96 @@
+import React, { PropsWithChildren } from "react";
+import {
+  Button,
+  Disclosure as AriaDisclosure,
+  DisclosureGroup as AriaDisclosureGroup,
+  type DisclosureGroupProps as AriaDisclosureGroupProps,
+  DisclosurePanel as AriaDisclosurePanel,
+  type DisclosurePanelProps as AriaDisclosurePanelProps,
+  type DisclosureProps as AriaDisclosureProps,
+  Heading,
+} from "react-aria-components";
+
+import { Flex, Icon, Icons } from "@phoenix/components";
+
+import { FlexStyleProps, SizingProps } from "../types";
+
+import { disclosureCSS, disclosureGroupCSS } from "./styles";
+
+export type DisclosureGroupProps = AriaDisclosureGroupProps;
+
+/**
+ * Wrap multiple Disclosure components in a DisclosureGroup to control
+ * the expanded state of the items more easily.
+ *
+ * AKA Accordion with one or more items
+ */
+export const DisclosureGroup = (props: DisclosureGroupProps) => {
+  return (
+    <AriaDisclosureGroup
+      allowsMultipleExpanded
+      css={disclosureGroupCSS}
+      {...props}
+    />
+  );
+};
+
+export type DisclosureProps = AriaDisclosureProps & SizingProps;
+
+/**
+ * A Disclosure is a component that allows for a single item to be expanded.
+ *
+ * AKA Accordion (with a single item) / Accordion Item
+ */
+export const Disclosure = ({ size, ...props }: DisclosureProps) => {
+  return (
+    <AriaDisclosure
+      css={disclosureCSS}
+      data-size={size}
+      defaultExpanded
+      {...props}
+    />
+  );
+};
+
+export type DisclosurePanelProps = AriaDisclosurePanelProps;
+
+/**
+ * A DisclosurePanel is a component that contains the content of a Disclosure.
+ *
+ * AKA Accordion Content
+ */
+export const DisclosurePanel = (props: DisclosurePanelProps) => {
+  return <AriaDisclosurePanel {...props} />;
+};
+
+export type DisclosureTriggerProps = PropsWithChildren<{
+  arrowPosition?: "start" | "end";
+  justifyContent?: FlexStyleProps["justifyContent"];
+}>;
+
+/**
+ * A DisclosureTrigger is a component that triggers the Disclosure.
+ *
+ * AKA Accordion Title
+ */
+export const DisclosureTrigger = ({
+  children,
+  arrowPosition,
+  justifyContent,
+}: DisclosureTriggerProps) => {
+  return (
+    <Heading>
+      <Button slot="trigger" data-arrow-position={arrowPosition}>
+        <Flex
+          justifyContent={justifyContent}
+          alignItems="center"
+          width="100%"
+          gap="size-100"
+        >
+          {children}
+        </Flex>
+        <Icon svg={<Icons.ArrowIosForwardOutline />} />
+      </Button>
+    </Heading>
+  );
+};

app/src/components/disclosure/index.ts

@@ -0,0 +1,2 @@
+export * from "./Disclosure";
+export * from "./styles";

app/src/components/disclosure/styles.tsx

@@ -0,0 +1,99 @@
+import { css } from "@emotion/react";
+
+export const disclosureGroupCSS = css`
+  & > * {
+    width: 100%;
+    .react-aria-Heading {
+      width: 100%;
+      .react-aria-Button[slot="trigger"] {
+        width: 100%;
+      }
+    }
+  }
+
+  // add border between items, only when child is expanded
+  > *:not(:last-child) {
+    &[data-expanded] {
+      border-bottom: 1px solid var(--ac-global-border-color-default);
+    }
+  }
+`;
+
+export const disclosureCSS = css`
+  .react-aria-Heading {
+    margin: 0;
+  }
+
+  .react-aria-Button[slot="trigger"] {
+    // reset trigger styles
+    background: none;
+    border: none;
+    box-shadow: none;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: var(--ac-global-dimension-static-size-100)
+      var(--ac-global-dimension-static-size-200);
+
+    // style trigger
+    color: var(--ac-global-text-color-900);
+    border-bottom: 1px solid var(--ac-global-border-color-default);
+    outline: none;
+    background-color: transparent;
+    &:hover:not([disabled]) {
+      background-color: var(--ac-global-input-field-background-color-active);
+    }
+    &[data-focus-visible] {
+      outline: 1px solid var(--ac-global-input-field-border-color-active);
+      outline-offset: -1px;
+    }
+    &:not([disabled]) {
+      transition: all 0.2s ease-in-out;
+    }
+    &[disabled] {
+      cursor: default;
+      opacity: 0.6;
+    }
+
+    // style trigger icon
+    > svg,
+    > i {
+      rotate: 90deg;
+      transition: rotate 200ms;
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+
+    &[data-arrow-position="start"] {
+      flex-direction: row-reverse;
+      > svg,
+      > i {
+        rotate: 0deg;
+      }
+    }
+  }
+
+  &[data-size="L"] .react-aria-Button[slot="trigger"] {
+    height: 48px;
+    max-height: 48px;
+  }
+
+  &[data-expanded] .react-aria-Button[slot="trigger"] {
+    > svg,
+    > i {
+      rotate: -90deg;
+    }
+
+    &[data-arrow-position="start"] {
+      > svg,
+      > i {
+        rotate: 90deg;
+      }
+    }
+  }
+`;

app/src/components/index.tsx

@@ -15,6 +15,7 @@ export * from "./ViewSummaryAside";
 export * from "./CopyToClipboardButton";
 
 // design system based components
+export * from "./disclosure";
 export * from "./combobox";
 export * from "./button";
 export * from "./icon";