chore: migrate to disclosure

Arize-ai · Jan 3, 2025 · 2096edc · 2096edc
1 parent 00bb1ed
commit 2096edc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 36 deletions.
diff --git a/app/src/pages/prompt/PromptCodeExportCard.tsx b/app/src/pages/prompt/PromptCodeExportCard.tsx
@@ -1,10 +1,18 @@
 import React, { useMemo, useState } from "react";
+import { DisclosureGroup } from "react-aria-components";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import { Accordion, AccordionItem, Card } from "@arizeai/components";
+import { Card } from "@arizeai/components";
 
-import { CopyToClipboardButton, Flex, View } from "@phoenix/components";
+import {
+  CopyToClipboardButton,
+  Disclosure,
+  DisclosurePanel,
+  DisclosureTrigger,
+  Flex,
+  View,
+} from "@phoenix/components";
 import {
   CodeLanguage,
   CodeLanguageRadioGroup,
@@ -73,17 +81,20 @@ export function PromptCodeExportCard({
         </Flex>
       }
     >
-      <Accordion>
-        <AccordionItem title="Snippet" id="snippet">
-          <View padding="size-100">
-            {language === "Python" ? (
-              <PythonBlock value={snippet} />
-            ) : language === "TypeScript" ? (
-              <TypeScriptBlock value={snippet} />
-            ) : null}
-          </View>
-        </AccordionItem>
-      </Accordion>
+      <DisclosureGroup defaultExpandedKeys={["snippet"]}>
+        <Disclosure id="snippet">
+          <DisclosureTrigger>Code Snippet</DisclosureTrigger>
+          <DisclosurePanel>
+            <View padding="size-100">
+              {language === "Python" ? (
+                <PythonBlock value={snippet} />
+              ) : language === "TypeScript" ? (
+                <TypeScriptBlock value={snippet} />
+              ) : null}
+            </View>
+          </DisclosurePanel>
+        </Disclosure>
+      </DisclosureGroup>
     </Card>
   );
 }
diff --git a/app/src/pages/prompt/PromptIndexPage.tsx b/app/src/pages/prompt/PromptIndexPage.tsx
@@ -1,10 +1,16 @@
 import React from "react";
-import { Heading } from "react-aria-components";
+import { DisclosurePanel, Heading } from "react-aria-components";
 import { graphql, useFragment } from "react-relay";
 
-import { Accordion, AccordionItem, Card } from "@arizeai/components";
+import { Card } from "@arizeai/components";
 
-import { Flex, View } from "@phoenix/components";
+import {
+  Disclosure,
+  DisclosureGroup,
+  DisclosureTrigger,
+  Flex,
+  View,
+} from "@phoenix/components";
 
 import { PromptIndexPage__aside$key } from "./__generated__/PromptIndexPage__aside.graphql";
 import { PromptIndexPage__main$key } from "./__generated__/PromptIndexPage__main.graphql";
@@ -68,17 +74,20 @@ export function PromptIndexPageContent({
               variant="compact"
               bodyStyle={{ padding: 0 }}
             >
-              <Accordion size="M">
-                <AccordionItem
-                  title="Invocation Parameters"
-                  id="invocation-parameters"
-                >
+              <DisclosureGroup
+                defaultExpandedKeys={["invocation-parameters", "tools"]}
+              >
+                <Disclosure id="invocation-parameters">
+                  <DisclosureTrigger>Invocation Parameters</DisclosureTrigger>
                   <PromptInvocationParameters promptVersion={latestVersion} />
-                </AccordionItem>
-                <AccordionItem title="Tools" id="model-tools">
-                  <View padding="size-200">No Tools Specified</View>
-                </AccordionItem>
-              </Accordion>
+                </Disclosure>
+                <Disclosure id="tools">
+                  <DisclosureTrigger>Tools</DisclosureTrigger>
+                  <DisclosurePanel>
+                    <View padding="size-200">No Tools Specified</View>
+                  </DisclosurePanel>
+                </Disclosure>
+              </DisclosureGroup>
             </Card>
             <PromptCodeExportCard promptVersion={latestVersion} />
           </Flex>

diff --git a/app/src/pages/prompt/PromptVersionDetailsPage.tsx b/app/src/pages/prompt/PromptVersionDetailsPage.tsx
@@ -1,9 +1,16 @@
 import React from "react";
 import { useLoaderData } from "react-router";
 
-import { Accordion, AccordionItem, Card } from "@arizeai/components";
+import { Card } from "@arizeai/components";
 
-import { Flex, View } from "@phoenix/components";
+import {
+  Disclosure,
+  DisclosureGroup,
+  DisclosurePanel,
+  DisclosureTrigger,
+  Flex,
+  View,
+} from "@phoenix/components";
 
 import { promptVersionLoaderQuery$data } from "./__generated__/promptVersionLoaderQuery.graphql";
 import { PromptChatMessages } from "./PromptChatMessages";
@@ -37,14 +44,14 @@ function PromptVersionDetailsPageContent({
           variant="compact"
           bodyStyle={{ padding: 0 }}
         >
-          <Accordion size="M">
-            <AccordionItem
-              title="Invocation Parameters"
-              id="invocation-parameters"
-            >
-              <PromptInvocationParameters promptVersion={promptVersion} />
-            </AccordionItem>
-          </Accordion>
+          <DisclosureGroup defaultExpandedKeys={["invocation-parameters"]}>
+            <Disclosure id="invocation-parameters">
+              <DisclosureTrigger>Invocation Parameters</DisclosureTrigger>
+              <DisclosurePanel>
+                <PromptInvocationParameters promptVersion={promptVersion} />
+              </DisclosurePanel>
+            </Disclosure>
+          </DisclosureGroup>
         </Card>
         <PromptCodeExportCard promptVersion={promptVersion} />
       </Flex>