mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-20 11:22:55 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

feat: fixing the font weight not appearing in the preview

Browse Source
This commit is contained in:
TheodorTomas
2026-02-04 13:58:46 +08:00
parent 639d63be5e
commit 9fbe32c6ab
22 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/i18n.lock
View File

@@ -1945,6 +1945,7 @@ checksums:
environments/workspace/look/advanced_styling_field_track_height: 9ce57cb4583039c224a37e013efb6b8f
environments/workspace/look/advanced_styling_field_upper_label_color: 65d75c60dfdba88e5fed38bcb24a0a5d
environments/workspace/look/advanced_styling_field_upper_label_size: ea0ca9a3ffa1650f97a31df453b0afc7
environments/workspace/look/advanced_styling_field_upper_label_weight: 946c5836d2cfaaee21e494424d550887
environments/workspace/look/advanced_styling_section_buttons: 3b44d6e2800e7bf3f133f1bce435f4c2
environments/workspace/look/advanced_styling_section_headlines: 6def704c0ac2ecb5951400c806856a41
environments/workspace/look/advanced_styling_section_inputs: 76bbeb561122a72fd3ec8c49eff7c563

2
apps/web/lib/styling/constants.ts
View File

@@ -45,6 +45,7 @@ export const ADVANCED_DEFAULTS = {
elementDescriptionColor: "#0f172a",
elementUpperLabelFontSize: 12,
elementUpperLabelColor: "#64748b",
elementUpperLabelFontWeight: "400",
progressTrackHeight: 8,
progressTrackBgColor: "#0f172a33",
progressIndicatorBgColor: "#0f172a",
@@ -129,6 +130,7 @@ export const defaultStyling: TProjectStyling = {
elementUpperLabelColor: {
light: ADVANCED_DEFAULTS.elementUpperLabelColor,
},
elementUpperLabelFontWeight: ADVANCED_DEFAULTS.elementUpperLabelFontWeight,
progressTrackHeight: ADVANCED_DEFAULTS.progressTrackHeight,
progressTrackBgColor: {
light: ADVANCED_DEFAULTS.progressTrackBgColor,

1
apps/web/locales/de-DE.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Track-Höhe",
"advanced_styling_field_upper_label_color": "Farbe der Überschriftenbeschriftung",
"advanced_styling_field_upper_label_size": "Schriftgröße der Überschriftenbeschriftung",
"advanced_styling_field_upper_label_weight": "Schriftstärke der Überschriftenbeschriftung",
"advanced_styling_section_buttons": "Buttons",
"advanced_styling_section_headlines": "Überschriften & Beschreibungen",
"advanced_styling_section_inputs": "Eingabefelder",

1
apps/web/locales/en-US.json
View File

@@ -2074,6 +2074,7 @@
"advanced_styling_field_upper_label_color": "Headline Label Color",
"advanced_styling_field_upper_label_size": "Headline Label Font Size",
"advanced_styling_field_upper_label_weight": "Headline Label Font Weight",
"advanced_styling_section_buttons": "Buttons",
"advanced_styling_section_headlines": "Headlines & Descriptions",
"advanced_styling_section_inputs": "Inputs",

1
apps/web/locales/es-ES.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Altura de la pista",
"advanced_styling_field_upper_label_color": "Color de la etiqueta del titular",
"advanced_styling_field_upper_label_size": "Tamaño de fuente de la etiqueta del titular",
"advanced_styling_field_upper_label_weight": "Grosor de fuente de la etiqueta del titular",
"advanced_styling_section_buttons": "Botones",
"advanced_styling_section_headlines": "Títulos y descripciones",
"advanced_styling_section_inputs": "Campos de entrada",

1
apps/web/locales/fr-FR.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Hauteur de la piste",
"advanced_styling_field_upper_label_color": "Couleur du libellé du titre",
"advanced_styling_field_upper_label_size": "Taille de police du libellé du titre",
"advanced_styling_field_upper_label_weight": "Graisse de police du libellé du titre",
"advanced_styling_section_buttons": "Boutons",
"advanced_styling_section_headlines": "Titres et descriptions",
"advanced_styling_section_inputs": "Champs de saisie",

1
apps/web/locales/ja-JP.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "トラック高さ",
"advanced_styling_field_upper_label_color": "見出しラベルの色",
"advanced_styling_field_upper_label_size": "見出しラベルのフォントサイズ",
"advanced_styling_field_upper_label_weight": "見出しラベルのフォントの太さ",
"advanced_styling_section_buttons": "ボタン",
"advanced_styling_section_headlines": "見出し&説明",
"advanced_styling_section_inputs": "入力フィールド",

1
apps/web/locales/nl-NL.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Hoogte van balk",
"advanced_styling_field_upper_label_color": "Kop label kleur",
"advanced_styling_field_upper_label_size": "Kop label lettergrootte",
"advanced_styling_field_upper_label_weight": "Kop label letterdikte",
"advanced_styling_section_buttons": "Knoppen",
"advanced_styling_section_headlines": "Koppen & beschrijvingen",
"advanced_styling_section_inputs": "Invoervelden",

1
apps/web/locales/pt-BR.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Altura da trilha",
"advanced_styling_field_upper_label_color": "Cor do rótulo do título",
"advanced_styling_field_upper_label_size": "Tamanho da fonte do rótulo do título",
"advanced_styling_field_upper_label_weight": "Peso da fonte do rótulo do título",
"advanced_styling_section_buttons": "Botões",
"advanced_styling_section_headlines": "Títulos e descrições",
"advanced_styling_section_inputs": "Campos de entrada",

1
apps/web/locales/pt-PT.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Altura da barra",
"advanced_styling_field_upper_label_color": "Cor da etiqueta do título",
"advanced_styling_field_upper_label_size": "Tamanho da fonte da etiqueta do título",
"advanced_styling_field_upper_label_weight": "Espessura da fonte da etiqueta do título",
"advanced_styling_section_buttons": "Botões",
"advanced_styling_section_headlines": "Títulos e descrições",
"advanced_styling_section_inputs": "Campos de entrada",

1
apps/web/locales/ro-RO.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Înălțime pistă",
"advanced_styling_field_upper_label_color": "Culoare etichetă titlu",
"advanced_styling_field_upper_label_size": "Dimensiune font etichetă titlu",
"advanced_styling_field_upper_label_weight": "Grosime font etichetă titlu",
"advanced_styling_section_buttons": "Butoane",
"advanced_styling_section_headlines": "Titluri și descrieri",
"advanced_styling_section_inputs": "Câmpuri de introducere",

1
apps/web/locales/ru-RU.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Высота трека",
"advanced_styling_field_upper_label_color": "Цвет метки заголовка",
"advanced_styling_field_upper_label_size": "Размер шрифта метки заголовка",
"advanced_styling_field_upper_label_weight": "Толщина шрифта метки заголовка",
"advanced_styling_section_buttons": "Кнопки",
"advanced_styling_section_headlines": "Заголовки и описания",
"advanced_styling_section_inputs": "Поля ввода",

1
apps/web/locales/sv-SE.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "Spårhöjd",
"advanced_styling_field_upper_label_color": "Färg på rubriketikett",
"advanced_styling_field_upper_label_size": "Teckenstorlek för rubriketikett",
"advanced_styling_field_upper_label_weight": "Teckentjocklek för rubriketikett",
"advanced_styling_section_buttons": "Knappar",
"advanced_styling_section_headlines": "Rubriker och beskrivningar",
"advanced_styling_section_inputs": "Inmatningsfält",

1
apps/web/locales/zh-Hans-CN.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "轨道高度",
"advanced_styling_field_upper_label_color": "标题标签颜色",
"advanced_styling_field_upper_label_size": "标题标签字体大小",
"advanced_styling_field_upper_label_weight": "标题标签字体粗细",
"advanced_styling_section_buttons": "按钮",
"advanced_styling_section_headlines": "标题与描述",
"advanced_styling_section_inputs": "输入框",

1
apps/web/locales/zh-Hant-TW.json
View File

@@ -2062,6 +2062,7 @@
"advanced_styling_field_track_height": "軌道高度",
"advanced_styling_field_upper_label_color": "標題標籤顏色",
"advanced_styling_field_upper_label_size": "標題標籤字體大小",
"advanced_styling_field_upper_label_weight": "標題標籤字體粗細",
"advanced_styling_section_buttons": "按鈕",
"advanced_styling_section_headlines": "標題與說明",
"advanced_styling_section_inputs": "輸入欄位",

7
apps/web/modules/survey/editor/components/form-styling-settings.tsx
View File

@@ -57,7 +57,7 @@ export const FormStylingSettings = ({
)}>
<div className="inline-flex px-4 py-4">
{!isSettingsPage && (
<div className="flex items-center pr-5 pl-2">
<div className="flex items-center pl-2 pr-5">
<CheckIcon
strokeWidth={3}
className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
@@ -121,6 +121,11 @@ export const FormStylingSettings = ({
name="elementUpperLabelFontSize"
label={t("environments.workspace.look.advanced_styling_field_upper_label_size")}
/>
<NumberField
form={form}
name="elementUpperLabelFontWeight"
label={t("environments.workspace.look.advanced_styling_field_upper_label_weight")}
/>
</div>
</StylingSection>

8
apps/web/playwright/survey-styling.spec.ts
View File

@@ -228,9 +228,10 @@ test.describe("Survey Styling", async () => {
await fillColor("Description Color", "#00ff00");
await fillDimension("Headline Font Size", "24");
await fillDimension("Description Font Size", "18");
await fillNumber("Headline Font Weight", "700");
await fillNumber("Headline Font Weight", "400");
await fillColor("Headline Label Color", "#0000ff");
await fillDimension("Headline Label Font Size", "12");
await fillNumber("Headline Label Font Weight", "700");
// ===== INPUTS =====
await page.getByText("Inputs", { exact: true }).click();
@@ -254,7 +255,7 @@ test.describe("Survey Styling", async () => {
await fillDimension("Border Radius", "6");
await fillDimension("Height", "44");
await fillDimension("Font Size", "16");
await page.getByLabel("Font Weight").last().fill("600");
await page.locator('input[name="buttonFontWeight"]').fill("400");
await fillDimension("Padding X", "20");
await fillDimension("Padding Y", "12");
@@ -270,7 +271,7 @@ test.describe("Survey Styling", async () => {
await expect(headline).toBeVisible();
await expect(headline).toHaveCSS("font-size", "24px");
await expect(headline).toHaveCSS("color", "rgb(255, 0, 0)");
await expect(headline).toHaveCSS("font-weight", "700");
await expect(headline).toHaveCSS("font-weight", /400|normal/);
const description = page.locator("#fbjs .label-description").first();
await expect(description).toHaveCSS("font-size", "18px");
@@ -296,6 +297,7 @@ test.describe("Survey Styling", async () => {
await expect(upperLabel).toBeVisible();
await expect(upperLabel).toHaveCSS("color", "rgb(0, 0, 255)");
await expect(upperLabel).toHaveCSS("font-size", "12px");
await expect(upperLabel).toHaveCSS("font-weight", /700|bold/);
});
test("Apply and verify Inputs, Buttons & Options styling fields", async ({ page, users }) => {

2
packages/survey-ui/src/components/general/element-header.tsx
View File

@@ -82,7 +82,7 @@ function ElementHeader({
{headline}
</Label>
) : (
<Label htmlFor={htmlFor} variant="headline" className="font-semibold">
<Label htmlFor={htmlFor} variant="headline">
{headline}
</Label>
)}

4
packages/survey-ui/src/styles/globals.css
View File

@@ -67,7 +67,7 @@
Used for headline text in elements.
--------------------------------------------------------------------------- */
--fb-element-headline-font-family: inherit;
--fb-element-headline-font-weight: 400;
--fb-element-headline-font-weight: 600;
--fb-element-headline-font-size: 1rem;
--fb-element-headline-color: var(--input);
--fb-element-headline-opacity: 1;
@@ -206,7 +206,7 @@
#fbjs .label-upper,
#fbjs .label-upper * {
font-family: var(--fb-element-upper-label-font-family);
font-weight: var(--fb-element-upper-label-font-weight);
font-weight: var(--fb-element-upper-label-font-weight) !important;
font-size: var(--fb-element-upper-label-font-size) !important;
color: var(--fb-element-upper-label-color);
opacity: var(--fb-element-upper-label-opacity);

2
packages/surveys/src/components/general/headline.tsx
View File

@@ -49,7 +49,7 @@ export function Headline({
dangerouslySetInnerHTML={{ __html: safeHtml }}
/>
) : (
<p data-testid="fb__surveys__headline-text-test" className="label-headline font-semibold">
<p data-testid="fb__surveys__headline-text-test" className="label-headline">
{headline}
</p>
)}

7
packages/surveys/src/lib/styles.ts
View File

@@ -200,7 +200,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
appendCssVariable("button-height", formatDimension(styling.buttonHeight));
if (styling.buttonFontSize !== undefined)
appendCssVariable("button-font-size", formatDimension(styling.buttonFontSize));
if (styling.buttonFontWeight !== undefined)
if (styling.buttonFontWeight !== undefined && styling.buttonFontWeight !== null)
appendCssVariable("button-font-weight", `${styling.buttonFontWeight}`);
if (styling.buttonPaddingX !== undefined)
appendCssVariable("button-padding-x", formatDimension(styling.buttonPaddingX));
@@ -239,7 +239,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
// Element Headline & Description (Advanced)
if (styling.elementHeadlineFontSize !== undefined)
appendCssVariable("element-headline-font-size", formatDimension(styling.elementHeadlineFontSize));
if (styling.elementHeadlineFontWeight !== undefined)
if (styling.elementHeadlineFontWeight !== undefined && styling.elementHeadlineFontWeight !== null)
appendCssVariable("element-headline-font-weight", `${styling.elementHeadlineFontWeight}`);
appendCssVariable(
"element-headline-color",
@@ -266,6 +266,8 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
appendCssVariable("element-upper-label-opacity", "1");
}
appendCssVariable("element-upper-label-font-weight", `${styling.elementUpperLabelFontWeight ?? "normal"}`);
// Progress Bar (Advanced)
if (styling.progressTrackHeight !== undefined)
appendCssVariable("progress-track-height", formatDimension(styling.progressTrackHeight));
@@ -297,6 +299,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
#fbjs .label-upper,
#fbjs .label-upper * {
font-size: var(--fb-element-upper-label-font-size) !important;
font-weight: var(--fb-element-upper-label-font-weight) !important;
color: var(--fb-element-upper-label-color) !important;
opacity: var(--fb-element-upper-label-opacity, 1) !important;
}

5
packages/types/styling.ts
View File

@@ -52,7 +52,7 @@ export const ZBaseStyling = z.object({
buttonBorderRadius: z.union([z.number(), z.string()]).nullish(),
buttonHeight: z.union([z.number(), z.string()]).nullish(),
buttonFontSize: z.union([z.number(), z.string()]).nullish(),
buttonFontWeight: z.string().nullish(), // Font weight is typically string in CSS (e.g. "500", "bold") but provided number in previous schema. Let's allow string.
buttonFontWeight: z.union([z.string(), z.number()]).nullish(),
buttonPaddingX: z.union([z.number(), z.string()]).nullish(),
buttonPaddingY: z.union([z.number(), z.string()]).nullish(),
@@ -78,12 +78,13 @@ export const ZBaseStyling = z.object({
// Headlines & Descriptions
elementHeadlineFontSize: z.union([z.number(), z.string()]).nullish(),
elementHeadlineFontWeight: z.string().nullish(),
elementHeadlineFontWeight: z.union([z.string(), z.number()]).nullish(),
elementHeadlineColor: ZStylingColor.nullish(),
elementDescriptionFontSize: z.union([z.number(), z.string()]).nullish(),
elementDescriptionColor: ZStylingColor.nullish(),
elementUpperLabelFontSize: z.union([z.number(), z.string()]).nullish(),
elementUpperLabelColor: ZStylingColor.nullish(),
elementUpperLabelFontWeight: z.union([z.string(), z.number()]).nullish(),
// Progress Bar
progressTrackHeight: z.union([z.number(), z.string()]).nullish(),