Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite37ddd4

Browse files
authored
chore: improve the design of the create workspace page for dynamic parameters (#17654)
contributes tocoder/preview#591. Improves the design and layout of the presets dropdown and switch2. Improves the design for the immutable badge<img width="537" alt="Screenshot 2025-05-01 at 23 28 11"src="https://github.com/user-attachments/assets/f0967758-5ea7-4436-b44a-e014c048202c"/><img width="714" alt="Screenshot 2025-05-01 at 23 28 34"src="https://github.com/user-attachments/assets/0bb091e1-611f-4a58-8f6f-b3bb027c6a10"/>
1 parent912b6ab commite37ddd4

File tree

3 files changed

+44
-25
lines changed

3 files changed

+44
-25
lines changed

‎site/src/components/Badge/Badge.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,15 @@ const badgeVariants = cva(
2626
sm:"text-2xs font-regular h-5.5 [&_svg]:size-icon-xs",
2727
md:"text-xs font-medium [&_svg]:size-icon-sm",
2828
},
29+
border:{
30+
none:"border-transparent",
31+
solid:"border border-solid",
32+
},
2933
},
3034
defaultVariants:{
3135
variant:"default",
3236
size:"md",
37+
border:"solid",
3338
},
3439
},
3540
);
@@ -41,14 +46,14 @@ export interface BadgeProps
4146
}
4247

4348
exportconstBadge=forwardRef<HTMLDivElement,BadgeProps>(
44-
({ className, variant, size, asChild=false, ...props},ref)=>{
49+
({ className, variant, size,border,asChild=false, ...props},ref)=>{
4550
constComp=asChild ?Slot :"div";
4651

4752
return(
4853
<Comp
4954
{...props}
5055
ref={ref}
51-
className={cn(badgeVariants({ variant, size}),className)}
56+
className={cn(badgeVariants({ variant, size, border}),className)}
5257
/>
5358
);
5459
},

‎site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
106106
<Tooltip>
107107
<TooltipTriggerasChild>
108108
<spanclassName="flex items-center">
109-
<Badgesize="sm"variant="warning">
109+
<Badgesize="sm"variant="warning"border="none">
110110
<TriangleAlert/>
111111
Immutable
112112
</Badge>

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
55
import{Avatar}from"components/Avatar/Avatar";
66
import{Button}from"components/Button/Button";
77
import{FeatureStageBadge}from"components/FeatureStageBadge/FeatureStageBadge";
8-
import{SelectFilter}from"components/Filter/SelectFilter";
98
import{Input}from"components/Input/Input";
109
import{Label}from"components/Label/Label";
1110
import{Pill}from"components/Pill/Pill";
11+
import{
12+
Select,
13+
SelectContent,
14+
SelectItem,
15+
SelectTrigger,
16+
SelectValue,
17+
}from"components/Select/Select";
1218
import{Spinner}from"components/Spinner/Spinner";
13-
import{Stack}from"components/Stack/Stack";
1419
import{Switch}from"components/Switch/Switch";
1520
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
1621
import{typeFormikContextType,useFormik}from"formik";
@@ -153,11 +158,11 @@ export const CreateWorkspacePageViewExperimental: FC<
153158
},[form.submitCount,form.errors]);
154159

155160
const[presetOptions,setPresetOptions]=useState([
156-
{label:"None",value:""},
161+
{label:"None",value:"None"},
157162
]);
158163
useEffect(()=>{
159164
setPresetOptions([
160-
{label:"None",value:""},
165+
{label:"None",value:"None"},
161166
...presets.map((preset)=>({
162167
label:preset.Name,
163168
value:preset.ID,
@@ -421,38 +426,47 @@ export const CreateWorkspacePageViewExperimental: FC<
421426
)}
422427

423428
{parameters.length>0&&(
424-
<sectionclassName="flex flex-col gap-6">
429+
<sectionclassName="flex flex-col gap-9">
425430
<hgroup>
426431
<h2className="text-xl font-semibold m-0">Parameters</h2>
427432
<pclassName="text-sm text-content-secondary m-0">
428433
These are the settings used by your template. Immutable
429434
parameters cannot be modified once the workspace is created.
430435
</p>
431436
</hgroup>
432-
<Diagnosticsdiagnostics={diagnostics}/>
437+
{diagnostics.length>0&&(
438+
<Diagnosticsdiagnostics={diagnostics}/>
439+
)}
433440
{presets.length>0&&(
434-
<Stackdirection="column"spacing={2}>
435-
<divclassName="flex flex-col gap-2">
436-
<divclassName="flex gap-2 items-center">
437-
<LabelclassName="text-sm">Preset</Label>
438-
<FeatureStageBadgecontentType={"beta"}size="md"/>
439-
</div>
440-
<divclassName="flex">
441-
<SelectFilter
442-
label="Preset"
443-
options={presetOptions}
444-
onSelect={(option)=>{
441+
<divclassName="flex flex-col gap-2">
442+
<divclassName="flex gap-2 items-center">
443+
<LabelclassName="text-sm">Preset</Label>
444+
<FeatureStageBadgecontentType={"beta"}size="md"/>
445+
</div>
446+
<divclassName="flex flex-col gap-4">
447+
<divclassName="max-w-lg">
448+
<Select
449+
onValueChange={(option)=>{
445450
constindex=presetOptions.findIndex(
446-
(preset)=>preset.value===option?.value,
451+
(preset)=>preset.value===option,
447452
);
448453
if(index===-1){
449454
return;
450455
}
451456
setSelectedPresetIndex(index);
452457
}}
453-
placeholder="Select a preset"
454-
selectedOption={presetOptions[selectedPresetIndex]}
455-
/>
458+
>
459+
<SelectTrigger>
460+
<SelectValueplaceholder={"Select a preset"}/>
461+
</SelectTrigger>
462+
<SelectContent>
463+
{presetOptions.map((option)=>(
464+
<SelectItemkey={option.value}value={option.value}>
465+
{option.label}
466+
</SelectItem>
467+
))}
468+
</SelectContent>
469+
</Select>
456470
</div>
457471
<spanclassName="flex items-center gap-3">
458472
<Switch
@@ -465,7 +479,7 @@ export const CreateWorkspacePageViewExperimental: FC<
465479
</Label>
466480
</span>
467481
</div>
468-
</Stack>
482+
</div>
469483
)}
470484

471485
<divclassName="flex flex-col gap-9">

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp