fix: support adding extra controls on accordions

Arize-ai · Oct 14, 2024 · e56121b · e56121b
1 parent bdc7c0b
commit e56121b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 33 deletions.
diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, PropsWithChildren } from 'react';
 import { css } from '@emotion/react';
 import { Heading } from '../content';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
@@ -27,6 +27,7 @@ const accordionItemCSS = css`
   color: var(--ac-global-text-color-900);
   border-bottom: 1px solid var(--ac-global-border-color-dark);
   transition: background-color ease-in-out 0.2s;
+  box-sizing: border-box;
   &:hover {
     background-color: var(--ac-global-background-color-light);
   }
@@ -102,13 +103,15 @@ export function AccordionItem(props: AccordionItemProps) {
       css={css`
         display: flex;
         flex-direction: row;
+        align-items: center;
+        justify-content: center;
         .ac-accordion-item__title {
           margin-right: var(--ac-global-dimension-static-size-50);
         }
       `}
     >
       <span className="ac-accordion-item__title">{title}</span>
-      {titleExtra}
+      {titleExtra && <>{titleExtra}</>}
     </div>
   ) : (
     <span className="ac-accordion-item__title">{title}</span>
@@ -128,40 +131,40 @@ export function AccordionItem(props: AccordionItemProps) {
         }
       `}
     >
-      <Heading level={3}>
-        <button
-          id={headerId}
-          css={accordionItemCSS}
-          onClick={() => {
-            const newIsOpen = !isOpen;
-            setIsOpen(newIsOpen);
-            onChange && onChange(newIsOpen);
-          }}
-          aria-controls={contentId}
-          aria-expanded={isOpen}
+      <div
+        role="button"
+        id={headerId}
+        css={accordionItemCSS}
+        onClick={() => {
+          const newIsOpen = !isOpen;
+          setIsOpen(newIsOpen);
+          onChange && onChange(newIsOpen);
+        }}
+        aria-controls={contentId}
+        aria-expanded={isOpen}
+      >
+        <Heading level={3}>{titleEl}</Heading>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: var(--ac-global-dimension-static-size-100);
+          `}
         >
-          {titleEl}
-          <div
+          {extra && <StopEventPropagation>{extra}</StopEventPropagation>}
+          <Icon
+            svg={<ArrowIosDownwardOutline />}
+            className="ac-accordion-itemIndicator"
             css={css`
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              gap: var(--ac-global-dimension-static-size-100);
+              transition: transform ease var(--accordion-animation-duration);
+              transform: rotate(0deg);
             `}
-          >
-            {extra}
-            <Icon
-              svg={<ArrowIosDownwardOutline />}
-              className="ac-accordion-itemIndicator"
-              css={css`
-                transition: transform ease var(--accordion-animation-duration);
-                transform: rotate(0deg);
-              `}
-              aria-hidden={true}
-            />
-          </div>
-        </button>
-      </Heading>
+            aria-hidden={true}
+          />
+        </div>
+      </div>
+
       <div
         className="ac-accordion-itemContent"
         id={contentId}
@@ -177,3 +180,18 @@ export function AccordionItem(props: AccordionItemProps) {
     </div>
   );
 }
+
+/**
+ * A wrapper component that stops the event from propagating up the DOM tree
+ */
+function StopEventPropagation(props: PropsWithChildren) {
+  return (
+    <div
+      onClick={e => {
+        e.stopPropagation();
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -51,6 +51,11 @@ const Template: Story<AccordionProps> = args => {
         <AccordionItem
           title="2 Predictions"
           titleExtra={<InfoTip>Description of predictions</InfoTip>}
+          extra={
+            <Button variant="default" size="compact">
+              Add
+            </Button>
+          }
           id="predictions"
         >
           <AccordionContents />