commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: improve cross button alignment and spacing in FormBuilder Options (#24247)

Browse Source 
* fix: improve cross button alignment and spacing in FormBuilder Options

* fix: revert eslint errors

---------

Co-authored-by: Devanshu Sharma <devanshusharma658@gmail.com>
This commit is contained in:
Kartik Labhshetwar
2025-10-09 08:18:19 +00:00
committed by GitHub
co-authored by Devanshu Sharma
parent 1470adb159
commit c13aa69565
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/form-builder/FormBuilder.tsx
+19 -17
View File
@@ -460,11 +460,11 @@ function Options({
<div className={className}>
<Label>{label}</Label>
<div className="bg-muted rounded-md p-4" data-testid="options-container">
<ul ref={animationRef} className="flex flex-col gap-1">
<ul ref={animationRef} className="flex flex-col gap-3">
{value?.map((option, index) => (
<li key={index}>
<div className="flex items-center gap-2">
<div className="flex-grow">
<div className="relative flex-grow">
<Input
required
value={option.label}
@@ -480,7 +480,23 @@ function Options({
}}
readOnly={readOnly}
placeholder={t("enter_option", { index: index + 1 })}
className={value.length > 2 && !readOnly ? "pr-8" : ""}
/>
{value.length > 2 && !readOnly && (
<Button
type="button"
className="absolute right-1 top-1/2 -translate-y-1/2 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
size="sm"
color="minimal"
StartIcon="x"
onClick={() => {
if (!value) return;
const newOptions = [...(value || [])];
newOptions.splice(index, 1);
onChange(newOptions);
}}
/>
)}
</div>
{showPrice && (
<div className="w-24">
@@ -505,21 +521,6 @@ function Options({
/>
</div>
)}
{value.length > 2 && !readOnly && (
<Button
type="button"
className="-ml-8 mb-2 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
size="sm"
color="minimal"
StartIcon="x"
onClick={() => {
if (!value) return;
const newOptions = [...(value || [])];
newOptions.splice(index, 1);
onChange(newOptions);
}}
/>
)}
</div>
</li>
))}
@@ -528,6 +529,7 @@ function Options({
<Button
color="minimal"
data-testid="add-option"
className="mt-3"
onClick={() => {
const newOptions = [...(value || [])];
newOptions.push({ label: "", value: "", price: 0 });