feat: add custom font sizes to fields (#1376)

Adds custom font sizes to fields

https://github.com/user-attachments/assets/1473a4d7-8dc6-4ead-acf5-dd78be7782a0
This commit is contained in:
Ephraim Duncan
2024-10-16 05:05:41 +00:00
committed by GitHub
parent 0bd2760792
commit e0c948c2ac
30 changed files with 663 additions and 186 deletions

View File

@@ -22,9 +22,10 @@ export const TextFieldAdvancedSettings = ({
const { _ } = useLingui();
const handleInput = (field: keyof TextFieldMeta, value: string | boolean) => {
const text = field === 'text' ? String(value) : fieldState.text || '';
const text = field === 'text' ? String(value) : fieldState.text ?? '';
const limit =
field === 'characterLimit' ? Number(value) : Number(fieldState.characterLimit || 0);
field === 'characterLimit' ? Number(value) : Number(fieldState.characterLimit ?? 0);
const fontSize = field === 'fontSize' ? Number(value) : Number(fieldState.fontSize ?? 14);
const readOnly = field === 'readOnly' ? Boolean(value) : Boolean(fieldState.readOnly);
const required = field === 'required' ? Boolean(value) : Boolean(fieldState.required);
@@ -32,6 +33,8 @@ export const TextFieldAdvancedSettings = ({
characterLimit: Number(limit),
readOnly,
required,
fontSize,
type: 'text',
});
handleErrors(textErrors);
@@ -93,6 +96,22 @@ export const TextFieldAdvancedSettings = ({
/>
</div>
<div>
<Label>
<Trans>Font Size</Trans>
</Label>
<Input
id="fontSize"
type="number"
className="bg-background mt-2"
placeholder={_(msg`Field font size`)}
value={fieldState.fontSize}
onChange={(e) => handleInput('fontSize', e.target.value)}
min={8}
max={96}
/>
</div>
<div className="mt-4 flex flex-col gap-4">
<div className="flex flex-row items-center gap-2">
<Switch