mirror of https://github.com/halo-dev/halo
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
parent
687c1b2266
commit
499b9eabb5
|
@ -14,7 +14,7 @@ const boxClassification = {
|
||||||
"group border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg",
|
"group border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg",
|
||||||
wrapper:
|
wrapper:
|
||||||
"flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
|
"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",
|
input: "form-check-input mr-2 bg-white",
|
||||||
inner: "flex items-center",
|
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",
|
fileItem: "block flex text-gray-800 text-sm mb-1",
|
||||||
fileRemove: "ml-auto text-blue-500 text-sm",
|
fileRemove: "ml-auto text-blue-500 text-sm",
|
||||||
},
|
},
|
||||||
checkbox: boxClassification,
|
checkbox: {
|
||||||
|
...boxClassification,
|
||||||
|
wrapper: "flex items-center mb-1 cursor-pointer",
|
||||||
|
},
|
||||||
radio: {
|
radio: {
|
||||||
...boxClassification,
|
...boxClassification,
|
||||||
input: boxClassification.input.replace("rounded-sm", "rounded-full"),
|
input: boxClassification.input.replace("rounded-sm", "rounded-full"),
|
||||||
|
help: `${boxClassification.help} px-2`,
|
||||||
},
|
},
|
||||||
range: {
|
range: {
|
||||||
...textClassification,
|
...textClassification,
|
||||||
|
@ -83,7 +87,7 @@ const theme: Record<string, Record<string, string>> = {
|
||||||
legend: `${textClassification.label} px-2`,
|
legend: `${textClassification.label} px-2`,
|
||||||
fieldset: boxClassification.fieldset,
|
fieldset: boxClassification.fieldset,
|
||||||
wrapper: boxClassification.wrapper,
|
wrapper: boxClassification.wrapper,
|
||||||
help: boxClassification.wrapper,
|
help: `${boxClassification.wrapper} mb-2`,
|
||||||
inner: "flex flex-col gap-4",
|
inner: "flex flex-col gap-4",
|
||||||
items: "flex flex-col w-full gap-2 rounded-base",
|
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",
|
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`,
|
legend: `${textClassification.label} px-2`,
|
||||||
fieldset: boxClassification.fieldset,
|
fieldset: boxClassification.fieldset,
|
||||||
wrapper: boxClassification.wrapper,
|
wrapper: boxClassification.wrapper,
|
||||||
help: boxClassification.wrapper,
|
help: `${boxClassification.wrapper} mb-2`,
|
||||||
inner: "flex flex-col px-2 divide-y divide-gray-100",
|
inner: "flex flex-col px-2 divide-y divide-gray-100",
|
||||||
},
|
},
|
||||||
tagSelect: {
|
tagSelect: {
|
||||||
|
|
Loading…
Reference in New Issue