test(dify-ui): align select form story with field primitives (#37670)

This commit is contained in:
yyh 2026-06-22 10:17:35 +08:00 committed by GitHub
parent 8c484411ea
commit f06127aaa4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -14,6 +14,9 @@ import {
SelectTrigger,
SelectValue,
} from '.'
import { Button } from '../button'
import { FieldDescription, FieldRoot } from '../field'
import { Form } from '../form'
const triggerWidth = 'w-64'
@ -326,40 +329,33 @@ export const Controlled: Story = {
export const InForm: Story = {
render: () => (
<form
onSubmit={(event) => {
event.preventDefault()
}}
className="flex w-72 flex-col gap-3"
>
<label className="text-xs font-medium text-text-tertiary" htmlFor="timezone">
Timezone
</label>
<Select name="timezone" defaultValue="utc">
<SelectTrigger id="timezone" aria-label="Timezone">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="utc">
<SelectItemText>UTC</SelectItemText>
<SelectItemIndicator />
</SelectItem>
<SelectItem value="pst">
<SelectItemText>Pacific (PST)</SelectItemText>
<SelectItemIndicator />
</SelectItem>
<SelectItem value="jst">
<SelectItemText>Japan (JST)</SelectItemText>
<SelectItemIndicator />
</SelectItem>
</SelectContent>
</Select>
<button
type="submit"
className="h-8 rounded-lg bg-components-button-primary-bg px-3 text-sm text-components-button-primary-text"
>
Submit
</button>
</form>
<Form aria-label="Timezone form" className="grid w-72 gap-3" onFormSubmit={() => undefined}>
<FieldRoot name="timezone">
<Select name="timezone" defaultValue="utc">
<SelectLabel>Timezone</SelectLabel>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="utc">
<SelectItemText>UTC</SelectItemText>
<SelectItemIndicator />
</SelectItem>
<SelectItem value="pst">
<SelectItemText>Pacific (PST)</SelectItemText>
<SelectItemIndicator />
</SelectItem>
<SelectItem value="jst">
<SelectItemText>Japan (JST)</SelectItemText>
<SelectItemIndicator />
</SelectItem>
</SelectContent>
</Select>
<FieldDescription>Used to schedule workflow runs.</FieldDescription>
</FieldRoot>
<div className="flex justify-end">
<Button type="submit" variant="primary">Save</Button>
</div>
</Form>
),
}