pref: optimize the help style of some formkit components (#5521)

#### What type of PR is this?

/kind improvement
/area ui

#### What this PR does / why we need it:

优化 formkit 中 checkout、repeater、group 组件的 help 样式。

移除 checkout 的内边距
为 repeater、group 组件增加底部边距

#### How to test it?

观察上述组件的 help 样式是否正常。

#### Which issue(s) this PR fixes:

Fixes #5411

#### Does this PR introduce a user-facing change?
```release-note
优化 formkit 中 checkout、repeater 及 group 组件的 help 样式
```
pull/5590/head
Takagi 2024-03-25 11:00:08 +08:00 committed by GitHub
parent 687c1b2266
commit 499b9eabb5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 4 deletions

View File

@ -14,7 +14,7 @@ const boxClassification = {
"group border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg",
wrapper:
"flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
help: "mb-2 mt-0 px-2",
help: "mb-2 mt-0",
input: "form-check-input mr-2 bg-white",
inner: "flex items-center",
};
@ -47,10 +47,14 @@ const theme: Record<string, Record<string, string>> = {
fileItem: "block flex text-gray-800 text-sm mb-1",
fileRemove: "ml-auto text-blue-500 text-sm",
},
checkbox: boxClassification,
checkbox: {
...boxClassification,
wrapper: "flex items-center mb-1 cursor-pointer",
},
radio: {
...boxClassification,
input: boxClassification.input.replace("rounded-sm", "rounded-full"),
help: `${boxClassification.help} px-2`,
},
range: {
...textClassification,
@ -83,7 +87,7 @@ const theme: Record<string, Record<string, string>> = {
legend: `${textClassification.label} px-2`,
fieldset: boxClassification.fieldset,
wrapper: boxClassification.wrapper,
help: boxClassification.wrapper,
help: `${boxClassification.wrapper} mb-2`,
inner: "flex flex-col gap-4",
items: "flex flex-col w-full gap-2 rounded-base",
item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-visible focus-within:shadow-sm",
@ -98,7 +102,7 @@ const theme: Record<string, Record<string, string>> = {
legend: `${textClassification.label} px-2`,
fieldset: boxClassification.fieldset,
wrapper: boxClassification.wrapper,
help: boxClassification.wrapper,
help: `${boxClassification.wrapper} mb-2`,
inner: "flex flex-col px-2 divide-y divide-gray-100",
},
tagSelect: {