opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): redesign provider tri-state controls (#27288)

Browse Source
This commit is contained in:
Danielle Maywood
2026-07-16 12:12:38 +01:00
committed by GitHub
parent 457fa5afa3
commit 213f5ce606
1 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelConfigFields.tsx
+25 -18
View File
@@ -43,8 +43,9 @@ import {
} from "./pricingFields";
const booleanFieldOptions = [
{ label: "On", value: "true" },
{ label: "Off", value: "false" },
{ label: "On", value: "true" },
{ label: "Default", value: "" },
] as const;
/** Sentinel value for Select components to represent "no selection". */
@@ -325,13 +326,12 @@ const SegmentedField: FC<
const currentValue = (getIn(form.values, fieldKey) as string) || "";
return (
<div className="flex min-w-0 flex-col gap-1.5">
<FieldLabel htmlFor={fieldKey} label={label} description={description} />
<div className="flex min-w-0 flex-wrap items-center gap-2 self-stretch">
<div
role="radiogroup"
aria-label={label}
className={cn(
"flex h-9 items-stretch rounded-md border border-solid border-border p-0.5",
"flex items-center gap-0.75 rounded-lg border border-solid border-border p-2",
fieldError && "border-content-destructive",
)}
>
@@ -345,23 +345,34 @@ const SegmentedField: FC<
aria-checked={isActive}
disabled={disabled}
className={cn(
"h-8 flex-1 cursor-pointer rounded-[5px] border-0 px-3 text-[13px] font-medium transition-colors",
"flex h-6 cursor-pointer items-center justify-center gap-2.5 rounded-xl border-0 px-2 pb-px text-sm font-normal leading-6 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
isActive
? "bg-surface-secondary text-content-primary"
? "rounded bg-surface-tertiary text-content-primary"
: "bg-transparent text-content-secondary hover:text-content-primary",
disabled && "pointer-events-none opacity-60",
)}
onClick={() =>
void form.setFieldValue(fieldKey, isActive ? "" : opt.value)
}
onClick={() => void form.setFieldValue(fieldKey, opt.value)}
>
{opt.label}
</button>
);
})}
</div>
<div className="flex items-center gap-1 text-sm font-normal leading-6 text-content-primary">
<span>{label}</span>
{description && (
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon className="size-3 text-content-secondary" />
</TooltipTrigger>
<TooltipContent side="top" className="max-w-[240px]">
{description}
</TooltipContent>
</Tooltip>
)}
</div>
{fieldError && (
<p id={errorId} className="m-0 text-xs text-content-destructive">
<p id={errorId} className="m-0 w-full text-xs text-content-destructive">
{fieldError}
</p>
)}
@@ -518,18 +529,14 @@ const SchemaField: FC<SchemaFieldProps> = ({
/**
* How many grid columns a field should span in the 3-col layout.
* 1 = default (inputs, booleans, small enums)
* 3 = full-width (large enums, json textareas)
* 1 = default (inputs, small enums)
* 3 = full-width (booleans, large enums, json textareas)
*/
function colSpan(field: FieldSchema): 1 | 3 {
if (field.input_type === "json") {
if (field.type === "boolean" || field.input_type === "json") {
return 3;
}
if (
field.input_type === "select" &&
field.type !== "boolean" &&
(field.enum?.length ?? 0) > 3
) {
if (field.input_type === "select" && (field.enum?.length ?? 0) > 3) {
return 3;
}
return 1;