Fix type shorthands being muted

fern-api · May 15, 2024 · 0d357b7 · 0d357b7
1 parent 90742d7
commit 0d357b7
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx b/packages/ui/app/src/api-page/endpoints/EndpointParameter.tsx
@@ -37,7 +37,7 @@ export const EndpointParameter = memo<EndpointParameter.Props>(
         <EndpointParameterContent
             name={name}
             description={description}
-            typeShorthand={renderTypeShorthandRoot(shape, types)}
+            typeShorthand={renderTypeShorthandRoot(shape, types, false, "t-muted")}
             anchorIdParts={anchorIdParts}
             route={route}
             availability={availability}

diff --git a/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx b/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx
@@ -125,7 +125,7 @@ const UnmemoizedObjectPropertyInternal = forwardRef<HTMLDivElement, ObjectProper
                         {property.key}
                     </span>
                 </div>
-                {renderTypeShorthandRoot(property.valueShape, types, contextValue.isResponse)}
+                {renderTypeShorthandRoot(property.valueShape, types, contextValue.isResponse, "t-muted")}
                 {property.availability != null && (
                     <EndpointAvailabilityTag availability={property.availability} minimal={true} />
                 )}

diff --git a/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx b/packages/ui/app/src/api-page/types/type-shorthand/TypeShorthand.tsx
@@ -1,4 +1,5 @@
 import { visitDiscriminatedUnion } from "@fern-ui/core-utils";
+import clsx from "clsx";
 import { ReactNode } from "react";
 import {
     ResolvedTypeDefinition,
@@ -19,11 +20,12 @@ export function renderTypeShorthandRoot(
     shape: ResolvedTypeShape,
     types: Record<string, ResolvedTypeDefinition>,
     isResponse: boolean = false,
+    className?: string,
 ): ReactNode {
     const typeShorthand = renderTypeShorthand(unwrapOptional(shape, types), { nullable: isResponse }, types);
     const unaliasedShape = unwrapAlias(shape, types);
     return (
-        <span className="text-inherit inline-flex items-baseline gap-2 text-xs">
+        <span className={clsx("text-inherit inline-flex items-baseline gap-2 text-xs", className)}>
             <span>{typeShorthand}</span>
             {unaliasedShape.type === "optional" ? (
                 <span>{isResponse ? "Optional" : "Optional"}</span>