mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-28 09:30:21 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

Add option ask for short answers in Open Text questions (#435)

Browse Source 
* feat: add shortAnswer: boolean to OpenTextQuestion interface

* feat: add longAnswer switch to OpenTextForm

* toggle textare lines depending on question.shortAnswer

* fix type build error

* move long answer switch to baseline

* adjust spacing between switches

* rename shortAnswer -> longAnswer, change textarea to input field

---------

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Moritz Rengert
2023-06-30 12:10:48 +02:00
committed by GitHub
parent 5dc9dfdb3d
commit 888d10434a
7 changed files with 81 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/preview/OpenTextQuestion.tsx
+24 -10
View File
@@ -33,16 +33,30 @@ export default function OpenTextQuestion({
<Headline headline={question.headline} questionId={question.id} />
<Subheader subheader={question.subheader} questionId={question.id} />
<div className="mt-4">
<textarea
autoFocus
rows={3}
name={question.id}
id={question.id}
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={question.placeholder}
required={question.required}
className="block w-full rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:ring-0 sm:text-sm"></textarea>
{question.longAnswer === false ? (
<input
autoFocus
name={question.id}
id={question.id}
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={question.placeholder}
required={question.required}
className="block w-full rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-0 sm:text-sm"
/>
) : (
<textarea
autoFocus
rows={3}
name={question.id}
id={question.id}
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={question.placeholder}
required={question.required}
className="block w-full rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:ring-0 sm:text-sm"
/>
)}
</div>
<div className="mt-4 flex w-full justify-between">
<div></div>