Skip to content

Commit 53a36f8

Browse files
chdeskurchdeskur
committed
update ux
1 parent 86c1e92 commit 53a36f8

File tree

2 files changed

+124
-120
lines changed

2 files changed

+124
-120
lines changed

‎packages/fern-docs/bundle/src/components/MaybeEnvironmentDropdown.tsx

+83-74
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import { useAtom } from "jotai";
44
import { parse } from "url";
55

66
import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
7-
import { FernButton, FernDropdown, FernInput, cn } from "@fern-docs/components";
7+
import {
8+
FernButton,
9+
FernDropdown,
10+
FernInput,
11+
FernTooltip,
12+
FernTooltipProvider,
13+
cn,
14+
} from "@fern-docs/components";
815
import { useBooleanState } from "@fern-ui/react-commons";
916

1017
import { SELECTED_ENVIRONMENT_ATOM } from "@/state/environment";
@@ -162,64 +169,42 @@ export function MaybeEnvironmentDropdown({
162169
/>
163170
</span>
164171
) : (
165-
<>
166-
<span className="max-sm:hidden" style={{ pointerEvents: "auto" }}>
167-
{options && options.length > 1 ? (
168-
<FernDropdown
169-
key="selectedEnvironment-selector"
170-
options={options.map((env) => ({
171-
value: env.id,
172-
label: env.id,
173-
type: "value",
174-
}))}
175-
onValueChange={(value) => {
176-
setPlaygroundEnvironment(undefined);
177-
setSelectedEnvironmentId(value);
178-
}}
179-
value={selectedEnvironment?.id ?? environmentId}
180-
>
181-
<FernButton
182-
style={{ pointerEvents: "auto" }}
183-
className="h-auto px-1 py-0"
184-
text={
185-
<span
186-
key="protocol"
187-
className="whitespace-nowrap max-sm:hidden"
188-
>
172+
<FernTooltipProvider>
173+
<FernTooltip content="Double click to edit">
174+
<span className="max-sm:hidden" style={{ pointerEvents: "auto" }}>
175+
{options && options.length > 1 ? (
176+
<FernDropdown
177+
key="selectedEnvironment-selector"
178+
options={options.map((env) => ({
179+
value: env.id,
180+
label: env.id,
181+
type: "value",
182+
}))}
183+
onValueChange={(value) => {
184+
setPlaygroundEnvironment(undefined);
185+
setSelectedEnvironmentId(value);
186+
}}
187+
value={selectedEnvironment?.id ?? environmentId}
188+
>
189+
<FernButton
190+
style={{ pointerEvents: "auto" }}
191+
className="h-auto px-1 py-0"
192+
text={
189193
<span
190-
className={protocolTextStyle}
191-
>{`${urlProtocol}//`}</span>
192-
<span className={urlTextStyle}>
193-
{fullyQualifiedDomainAndBasePath ?? ""}
194+
key="protocol"
195+
className="whitespace-nowrap max-sm:hidden"
196+
>
197+
<span
198+
className={protocolTextStyle}
199+
>{`${urlProtocol}//`}</span>
200+
<span className={urlTextStyle}>
201+
{fullyQualifiedDomainAndBasePath ?? ""}
202+
</span>
194203
</span>
195-
</span>
196-
}
197-
size={small ? "small" : "normal"}
198-
variant="outlined"
199-
mono={true}
200-
onDoubleClick={
201-
editable
202-
? () => {
203-
setInitialState(inputValue);
204-
isEditingEnvironment.setTrue();
205-
}
206-
: () => undefined
207-
}
208-
/>
209-
</FernDropdown>
210-
) : (
211-
<span
212-
key="url"
213-
className="whitespace-nowrap font-mono max-sm:hidden"
214-
>
215-
{editable ? (
216-
<span
217-
className={cn(
218-
urlTextStyle,
219-
"p-0",
220-
small ? "text-xs" : "text-sm",
221-
"hover:shadow-lg"
222-
)}
204+
}
205+
size={small ? "small" : "normal"}
206+
variant="outlined"
207+
mono={true}
223208
onDoubleClick={
224209
editable
225210
? () => {
@@ -228,28 +213,52 @@ export function MaybeEnvironmentDropdown({
228213
}
229214
: () => undefined
230215
}
231-
>
232-
{`${urlProtocol}//${fullyQualifiedDomainAndBasePath}`}
233-
</span>
234-
) : (
235-
<>
216+
/>
217+
</FernDropdown>
218+
) : (
219+
<span
220+
key="url"
221+
className="whitespace-nowrap font-mono max-sm:hidden"
222+
>
223+
{editable ? (
236224
<span
237225
className={cn(
238-
protocolTextStyle,
239-
small ? "text-xs" : "text-sm"
226+
urlTextStyle,
227+
"p-0",
228+
small ? "text-xs" : "text-sm",
229+
"hover:shadow-lg"
240230
)}
231+
onDoubleClick={
232+
editable
233+
? () => {
234+
setInitialState(inputValue);
235+
isEditingEnvironment.setTrue();
236+
}
237+
: () => undefined
238+
}
241239
>
242-
{`${urlProtocol}//`}
243-
</span>
244-
<span className={urlTextStyle}>
245-
{fullyQualifiedDomainAndBasePath}
240+
{`${urlProtocol}//${fullyQualifiedDomainAndBasePath}`}
246241
</span>
247-
</>
248-
)}
249-
</span>
250-
)}
251-
</span>
252-
</>
242+
) : (
243+
<>
244+
<span
245+
className={cn(
246+
protocolTextStyle,
247+
small ? "text-xs" : "text-sm"
248+
)}
249+
>
250+
{`${urlProtocol}//`}
251+
</span>
252+
<span className={urlTextStyle}>
253+
{fullyQualifiedDomainAndBasePath}
254+
</span>
255+
</>
256+
)}
257+
</span>
258+
)}
259+
</span>
260+
</FernTooltip>
261+
</FernTooltipProvider>
253262
)}
254263
</>
255264
);

‎packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointUrl.tsx

+41-46
Original file line numberDiff line numberDiff line change
@@ -118,61 +118,56 @@ export const EndpointUrl = React.forwardRef<
118118
<div
119119
ref={composeRefs(ref, forwardedRef)}
120120
className={cn("flex items-center gap-1 pr-2", className)}
121+
onPointerEnter={() => setIsHovered(true)}
122+
onPointerLeave={() => setIsHovered(false)}
121123
>
122124
<HttpMethodBadge method={method} />
123125

124126
<div className={cn("flex items-center")}>
125127
<span
126-
className={`inline-flex shrink items-baseline ${isHovered ? "hover:bg-(color:--grayscale-a3)" : ""} rounded-3/2 cursor-default p-1`}
128+
className={`rounded-3/2 inline-flex shrink cursor-default items-center p-1`}
127129
>
128-
<CopyToClipboardButton
129-
content={() =>
130-
ApiDefinition.buildRequestUrl({
131-
baseUrl,
132-
path,
133-
})
134-
}
135-
>
136-
{(onClick) => (
137-
<span
138-
className="flex items-center"
139-
onClick={onClick}
140-
onPointerEnter={() => setIsHovered(true)}
141-
onPointerLeave={() => setIsHovered(false)}
142-
>
143-
<span
144-
className={cn("font-mono", {
145-
"text-xs": !large,
146-
"text-sm": large,
147-
})}
148-
>
149-
{showEnvironment && (
150-
<span className="whitespace-nowrap max-sm:hidden">
151-
<MaybeEnvironmentDropdown
152-
baseUrl={baseUrl}
153-
environmentId={environmentId}
154-
options={options}
155-
urlTextStyle="text-(color:--grayscale-a11)"
156-
protocolTextStyle="text-(color:--grayscale-a9)"
157-
isEditingEnvironment={isEditingEnvironment}
158-
editable
159-
/>
160-
</span>
161-
)}
162-
{!showEnvironment &&
163-
environmentBasepath &&
164-
environmentBasepath !== "/" && (
165-
<span className="text-(color:--grayscale-a11)">
166-
{environmentBasepath}
167-
</span>
168-
)}
169-
{pathParts}
130+
<span className="flex items-center">
131+
<span
132+
className={cn("font-mono", {
133+
"text-xs": !large,
134+
"text-sm": large,
135+
})}
136+
>
137+
{showEnvironment && (
138+
<span className="whitespace-nowrap max-sm:hidden">
139+
<MaybeEnvironmentDropdown
140+
baseUrl={baseUrl}
141+
environmentId={environmentId}
142+
options={options}
143+
urlTextStyle="text-(color:--grayscale-a11)"
144+
protocolTextStyle="text-(color:--grayscale-a9)"
145+
isEditingEnvironment={isEditingEnvironment}
146+
editable
147+
/>
170148
</span>
171-
</span>
172-
)}
173-
</CopyToClipboardButton>
149+
)}
150+
{!showEnvironment &&
151+
environmentBasepath &&
152+
environmentBasepath !== "/" && (
153+
<span className="text-(color:--grayscale-a11)">
154+
{environmentBasepath}
155+
</span>
156+
)}
157+
{pathParts}
158+
</span>
159+
</span>
174160
</span>
175161
</div>
162+
<CopyToClipboardButton
163+
className={isHovered ? "visible" : "invisible"}
164+
content={() =>
165+
ApiDefinition.buildRequestUrl({
166+
baseUrl,
167+
path,
168+
})
169+
}
170+
/>
176171
</div>
177172
);
178173
});

0 commit comments

Comments
 (0)