Skip to content

Commit 72682ca

Browse files
coltondotiocoltondotio
authored
fix(docs): runnable endpoint form styling (#5931)
1 parent 25dba8d commit 72682ca

File tree

6 files changed

+78
-21
lines changed

6 files changed

+78
-21
lines changed

‎packages/fern-docs/bundle/src/components/playground/WithLabel.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ import { cn } from "@fern-docs/components/cn";
1010
import { FernButton } from "@fern-docs/components/FernButton";
1111
import { FernTooltip } from "@fern-docs/components/FernTooltip";
1212
import { renderTypeShorthandRoot } from "@fern-docs/components/type-shorthand";
13-
import { HelpCircle, X } from "lucide-react";
13+
import { HelpCircle, Trash2 } from "lucide-react";
1414
import type { FC, PropsWithChildren, ReactNode } from "react";
15+
1516
import { Markdown } from "@/mdx/components/Markdown";
17+
1618
import { shouldRenderInline } from "./utils";
1719

1820
interface WithLabelProps {
@@ -108,7 +110,7 @@ export const WithLabelInternal: FC<PropsWithChildren<WithLabelInternalProps>> =
108110
"fern-playground-field-block space-y-2": !renderInline
109111
})}
110112
>
111-
<div className="fern-playground-field-header flex min-w-0 flex-1 shrink items-center justify-between gap-2">
113+
<div className="fern-playground-field-header flex min-w-0 flex-1 items-center justify-between gap-2">
112114
<label
113115
className="fern-playground-field-label inline-flex items-baseline gap-2 truncate"
114116
htmlFor={htmlFor}
@@ -141,7 +143,7 @@ export const WithLabelInternal: FC<PropsWithChildren<WithLabelInternalProps>> =
141143
<span className="fern-playground-field-actions inline-flex min-w-0 shrink items-center justify-end gap-1">
142144
{!isRequired && (
143145
<FernButton
144-
icon={<X />}
146+
icon={<Trash2 />}
145147
size="small"
146148
variant="minimal"
147149
className="fern-playground-field-remove -mr-3 opacity-50 transition-opacity hover:opacity-100"
@@ -153,8 +155,8 @@ export const WithLabelInternal: FC<PropsWithChildren<WithLabelInternalProps>> =
153155
</div>
154156

155157
<div
156-
className={cn("fern-playground-field-control flex", {
157-
"min-w-0 flex-1 shrink": !isBoolean
158+
className={cn("fern-playground-field-control flex gap-2", {
159+
"min-w-0 flex-1": !isBoolean
158160
})}
159161
>
160162
{children}
@@ -168,10 +170,10 @@ export const WithLabelInternal: FC<PropsWithChildren<WithLabelInternalProps>> =
168170
>
169171
{!isRequired && (
170172
<FernButton
171-
icon={<X />}
173+
icon={<Trash2 />}
172174
size="small"
173175
variant="minimal"
174-
className="fern-playground-field-remove -mr-3 ml-1 opacity-50 transition-opacity hover:opacity-100"
176+
className="fern-playground-field-remove opacity-50 transition-opacity hover:opacity-100"
175177
onClick={onRemove}
176178
/>
177179
)}

‎packages/fern-docs/bundle/src/components/playground/form/PlaygroundListForm.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FernButton } from "@fern-docs/components/FernButton";
66
import { t } from "@fern-docs/i18n";
77
import { Plus, X } from "lucide-react";
88
import { memo, useCallback } from "react";
9+
910
import { getEmptyValueForType, shouldRenderInline } from "../utils";
1011
import { PlaygroundTypeReferenceForm } from "./PlaygroundTypeReferenceForm";
1112

@@ -137,23 +138,25 @@ function PlaygroundListItemForm({
137138
</label>
138139

139140
{renderInline && (
140-
<PlaygroundTypeReferenceForm
141-
shape={itemShape}
142-
value={item}
143-
onChange={handleChangeItem}
144-
renderAsPanel={true}
145-
id={`${id}[${idx}]`}
146-
types={types}
147-
lang={lang}
148-
/>
141+
<div className="min-w-0 flex-1 overflow-hidden">
142+
<PlaygroundTypeReferenceForm
143+
shape={itemShape}
144+
value={item}
145+
onChange={handleChangeItem}
146+
renderAsPanel={true}
147+
id={`${id}[${idx}]`}
148+
types={types}
149+
lang={lang}
150+
/>
151+
</div>
149152
)}
150153

151154
<FernButton
152155
icon={<X />}
153156
onClick={() => onRemove(idx)}
154157
variant="minimal"
155158
size="small"
156-
className="-ml-1 -mr-3 opacity-50 transition-opacity hover:opacity-100"
159+
className="-mr-3 opacity-50 transition-opacity hover:bg-transparent hover:opacity-100"
157160
/>
158161
</div>
159162

‎packages/fern-docs/bundle/src/components/playground/form/PlaygroundTypeReferenceForm.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { FernSwitch } from "@fern-docs/components/FernSwitch";
1515
import { FernTextarea } from "@fern-docs/components/FernTextarea";
1616
import { t } from "@fern-docs/i18n";
1717
import { memo, type ReactElement, useCallback, useState } from "react";
18+
1819
import { withErrorBoundary } from "@/components/error-boundary";
1920

2021
import { IdempotentInputGroup } from "../IdempotentInputGroup";
@@ -90,7 +91,7 @@ const PlaygroundTypeReferenceFormInternal = memo<PlaygroundTypeReferenceFormProp
9091
isNullSelected={isNullSelected}
9192
lang={lang}
9293
>
93-
<span className={cn("block w-full", isNullSelected && "invisible")}>
94+
<span className={cn("block w-full min-w-0", isNullSelected && "invisible")}>
9495
<PlaygroundEnumForm enumValues={values} onChange={onChange} value={value} id={id} lang={lang} />
9596
</span>
9697
</WithLabel>
@@ -203,6 +204,7 @@ const PlaygroundTypeReferenceFormInternal = memo<PlaygroundTypeReferenceFormProp
203204
// TODO: add validation UX feedback
204205
pattern={string.regex}
205206
disabled={disabled}
207+
clearable={!disabled}
206208
lang={lang}
207209
/>
208210
)}
@@ -409,6 +411,7 @@ const PlaygroundTypeReferenceFormInternal = memo<PlaygroundTypeReferenceFormProp
409411
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
410412
onValueChange={onChange}
411413
disabled={disabled}
414+
clearable={!disabled}
412415
lang={lang}
413416
/>
414417
</span>
@@ -457,6 +460,7 @@ const PlaygroundTypeReferenceFormInternal = memo<PlaygroundTypeReferenceFormProp
457460
resettable={typeof defaultValue === "string"}
458461
onValueChange={onChange}
459462
disabled={disabled}
463+
clearable={!disabled}
460464
lang={lang}
461465
/>
462466
</span>

‎packages/fern-docs/components/src/FernButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const FernButton = forwardRef<HTMLButtonElement, FernButtonProps>(functio
6868
function isEllipsisActive() {
6969
return buttonTextRef.current != null && buttonTextRef.current.scrollWidth > buttonTextRef.current.clientWidth;
7070
}
71+
7172
const button = (
7273
<button
7374
tabIndex={0}
@@ -101,7 +102,7 @@ export const FernButton = forwardRef<HTMLButtonElement, FernButtonProps>(functio
101102

102103
if (isEllipsisActive() && !disableAutomaticTooltip && (children ?? text) != null) {
103104
return (
104-
<FernTooltip content={children ?? text} className="line-clamp-3">
105+
<FernTooltip content={children ?? text} className="max-h-24 overflow-auto">
105106
{button}
106107
</FernTooltip>
107108
);

‎packages/fern-docs/components/src/FernInput.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@
3232
@apply -ml-2 h-full min-w-8 shrink-0 px-0;
3333
}
3434

35+
.fern-input-clear-button {
36+
@apply flex items-center justify-center;
37+
@apply text-(color:--grayscale-a9) hover:text-(color:--grayscale-a11);
38+
@apply size-6 shrink-0 mr-1;
39+
@apply transition-colors;
40+
@apply cursor-pointer border-none bg-transparent;
41+
}
42+
3543
.fern-input-group,
3644
.fern-numeric-input-group {
3745
@apply h-10 sm:h-8;

‎packages/fern-docs/components/src/FernInput.tsx‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
"use client";
22

33
import { t } from "@fern-docs/i18n";
4+
45
import { composeEventHandlers } from "@radix-ui/primitive";
56
import { composeRefs } from "@radix-ui/react-compose-refs";
67
import { isEqual } from "es-toolkit/predicate";
7-
import { Undo2 } from "lucide-react";
8+
import { Undo2, X } from "lucide-react";
89
import { type ComponentPropsWithoutRef, forwardRef, useRef } from "react";
910
import { cn } from "./cn";
1011
import { Button } from "./FernButtonV2";
@@ -39,14 +40,42 @@ export interface FernInputProps extends Omit<ComponentPropsWithoutRef<"input">,
3940
* Callback to call when the reset button is clicked
4041
*/
4142
onClickReset?: () => void;
43+
/**
44+
* Whether to show a clear button inside the input when there is a value
45+
* @default false
46+
*/
47+
clearable?: boolean;
48+
/**
49+
* Callback to call when the clear button is clicked
50+
*/
51+
onClear?: () => void;
4252
lang: string;
4353
}
4454

4555
export const FernInput = forwardRef<HTMLInputElement, FernInputProps>(function FernInput(
46-
{ className, inputClassName, onValueChange, leftIcon, rightElement, resettable, onClickReset, lang, ...props },
56+
{
57+
className,
58+
inputClassName,
59+
onValueChange,
60+
leftIcon,
61+
rightElement,
62+
resettable,
63+
onClickReset,
64+
clearable,
65+
onClear,
66+
lang,
67+
...props
68+
},
4769
forwardedRef
4870
) {
4971
const inputRef = useRef<HTMLInputElement>(null);
72+
const hasValue = props.value != null && props.value.length > 0;
73+
74+
const handleClear = () => {
75+
onClear?.();
76+
onValueChange?.("");
77+
inputRef.current?.focus();
78+
};
5079

5180
return (
5281
<div className={cn("fern-input-group", className)}>
@@ -68,6 +97,16 @@ export const FernInput = forwardRef<HTMLInputElement, FernInputProps>(function F
6897
)}
6998
placeholder={props.placeholder ?? props.defaultValue}
7099
/>
100+
{clearable && hasValue && (
101+
<button
102+
type="button"
103+
className="fern-input-clear-button"
104+
onClick={handleClear}
105+
aria-label="Clear input"
106+
>
107+
<X className="size-3.5" />
108+
</button>
109+
)}
71110
<FernInputRightElement
72111
value={props.value}
73112
onReset={

0 commit comments

Comments
 (0)