From 897a91a0e8cef09bbe2a4922ba54a5e1362795f6 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Wed, 9 Oct 2024 10:18:06 -0400
Subject: [PATCH] fix

---
 .../PlaygroundUniscriminatedUnionForm.tsx     | 25 +++----------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/ui/app/src/playground/form/PlaygroundUniscriminatedUnionForm.tsx b/packages/ui/app/src/playground/form/PlaygroundUniscriminatedUnionForm.tsx
index 6b6f82fecb..c7112c5558 100644
--- a/packages/ui/app/src/playground/form/PlaygroundUniscriminatedUnionForm.tsx
+++ b/packages/ui/app/src/playground/form/PlaygroundUniscriminatedUnionForm.tsx
@@ -3,6 +3,7 @@ import { FernButton, FernDropdown, FernSegmentedControl } from "@fern-ui/compone
 import { NavArrowDown } from "iconoir-react";
 import dynamic from "next/dynamic";
 import { memo, useCallback, useMemo, useState } from "react";
+import { renderTypeShorthand } from "../../type-shorthand";
 import { getEmptyValueForType, matchesTypeReference } from "../utils";
 import { PlaygroundTypeReferenceForm } from "./PlaygroundTypeReferenceForm";
 
@@ -43,35 +44,15 @@ export const PlaygroundUniscriminatedUnionForm = memo<PlaygroundUniscriminatedUn
     const options = useMemo(
         () =>
             undiscriminatedUnion.variants.map((variant, idx): FernDropdown.Option => {
-                let labelFallback: string;
-                switch (variant.shape.type) {
-                    case "literal":
-                        labelFallback =
-                            variant.shape.value.type === "booleanLiteral"
-                                ? variant.shape.value.value
-                                    ? "true"
-                                    : "false"
-                                : variant.shape.value.value;
-                        break;
-                    case "primitive":
-                        labelFallback = variant.shape.value.type;
-                        break;
-                    case "optional":
-                        labelFallback = variant.shape.shape.type;
-                        break;
-                    default:
-                        labelFallback = variant.shape.type;
-                        break;
-                }
                 return {
                     type: "value",
-                    label: variant.displayName ?? labelFallback,
+                    label: variant.displayName ?? renderTypeShorthand(variant.shape, {}, types),
                     value: idx.toString(),
                     // todo: handle availability
                     tooltip: variant.description != null ? <Markdown size="xs" mdx={variant.description} /> : undefined,
                 };
             }),
-        [undiscriminatedUnion.variants],
+        [types, undiscriminatedUnion.variants],
     );
 
     const selectedOption = options