feat: allow changing the font family for surveys #27292

lucasheriques · 2025-01-06T21:09:51Z

Problem

Feature request: #25338

Adds a new appearance property to surveys: font family.

For this current version, we allow to change for the default web fonts.

Releasing behind a feature flag, which is only enabled for PostHog internal use atm.

Changes

CleanShot.2025-01-06.at.18.11.44.mp4

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

Yes

How did you test this code?

Verified on localhost and on the surveyPreview that the fonts are matching

github-actions · 2025-01-06T21:21:37Z

Size Change: -92 B (-0.01%)

Total Size: 1.12 MB

ℹ️ View Unchanged

Filename	Size	Change
`frontend/dist/toolbar.js`	1.12 MB	-92 B (-0.01%)

_{compressed-size-action}

posthog-bot · 2025-01-06T21:27:37Z

📸 UI snapshots have been updated

64 snapshot changes in total. 0 added, 64 modified, 0 deleted:

chromium: 0 added, 64 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

lucasheriques · 2025-01-06T21:32:11Z

frontend/src/scenes/surveys/SurveyCustomization.tsx

-                                }
-                                onChange={(placeholder) => onAppearanceChange({ ...appearance, placeholder })}
-                                disabled={!surveysStylingAvailable}
-                            />
-                        </LemonField.Pure>
-                    </>
+                    <LemonField.Pure className="mt-2" label="Placeholder text">
+                        <LemonInput
+                            value={
+                                appearance?.placeholder !== undefined
+                                    ? appearance.placeholder
+                                    : defaultSurveyAppearance.placeholder
+                            }
+                            onChange={(placeholder) => onAppearanceChange({ ...appearance, placeholder })}
+                            disabled={!surveysStylingAvailable}
+                        />
+                    </LemonField.Pure>


changes here are just to remove the unneeded fragment

corywatilo · 2025-01-06T21:40:09Z

Exciting! A few pieces of feedback:

As a front end-oriented person, I'd be pretty disappointed to see only this list of fonts since this triggers my PTSD of being a front end developer back when the web was actually limited to these fonts. (I get this is an MVP and we're going to add more - woo! But just to say I hope we don't launch with just these.) =]
- Even if we're going to do email surveys, I'd still opt for progressive enhancement and use good fonts on the web and just fall back to whatever we have to in email. It's also worth noting that recent versions of Mac OS come with a tonnn more fonts (eg: Proxima Nova), so I'd probably look at that list as a starting point.
Mac OS has started shipping with a much larger library of fonts like Avenir Next, Baskerville, Noto Sans, Proxima Nova. It'd be worth including options for these (again, progressive enhancement), though denoting fallbacks might be used on other devices.
Figma imports all Google Fonts and lets you pick any of them from there. Since that library has become a pretty solid resource of cross-compatible fonts, it's worth considering doing something similar. Some random implementation thoughts which may or may not be useful:
- If we're planning on showing a preview of each font in the select, it probably makes sense to only load the single weight used in the select until a font is chosen
- When loading a Google font on a customer's site, we can probably make a gut call to just import two weights (like 400 and 700) and omit italic (and let the OS infer it if necessary).
- If the customer is already importing a Google font on their site, we might want an option to exclude us loading it on their site so we're not loading it twice! (Assuming we're not shadow dom'd and have access to the parent?)
Obviously supporting custom fonts would be awesome, but that also introduces a bunch of variables:
a. Can we just ask for their font string and assume they'll have the font loaded on their site for us to use?
b. (We're not running in shadow DOM are we?) Do we host them upload fonts to us? Or if we reference their hosted font, any CORS issues?

posthog-bot · 2025-01-06T22:07:39Z

📸 UI snapshots have been updated

64 snapshot changes in total. 0 added, 64 modified, 0 deleted:

chromium: 0 added, 64 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-01-14T07:30:57Z

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week. If you want to permanentely keep it open, use the waiting label.

posthog-bot · 2025-01-14T15:20:01Z

📸 UI snapshots have been updated

22 snapshot changes in total. 0 added, 22 modified, 0 deleted:

chromium: 0 added, 22 modified, 0 deleted (wasn't pushed!)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

lucasheriques · 2025-01-14T15:23:05Z

frontend/src/scenes/surveys/SurveyCustomization.tsx

                {customizePlaceholderText && (
-                    <>
-                        <LemonField.Pure className="mt-2" label="Placeholder text">
-                            <LemonInput
-                                value={
-                                    appearance?.placeholder !== undefined
-                                        ? appearance.placeholder
-                                        : defaultSurveyAppearance.placeholder
+                    <LemonField.Pure className="mt-2" label="Placeholder text">
+                        <LemonInput
+                            value={
+                                appearance?.placeholder !== undefined
+                                    ? appearance.placeholder
+                                    : defaultSurveyAppearance.placeholder
+                            }
+                            onChange={(placeholder) => onAppearanceChange({ ...appearance, placeholder })}
+                            disabled={!surveysStylingAvailable}
+                        />
+                    </LemonField.Pure>
+                )}


no changes here, just removing the unneeded fragment

posthog-bot · 2025-01-14T15:40:07Z

📸 UI snapshots have been updated

77 snapshot changes in total. 0 added, 77 modified, 0 deleted:

chromium: 0 added, 77 modified, 0 deleted (diff for shard 1, diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-01-14T16:00:35Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

frontend/src/scenes/surveys/SurveyCustomization.tsx

marandaneto

nice

lucasheriques changed the title ~~feat: allow custom fonts on surveys~~ feat: allow admins to configure font in the survey editor Jan 6, 2025

lucasheriques force-pushed the feat/allow-custom-fonts-on-surveys branch from 4212e3f to 6c1c9f8 Compare January 6, 2025 21:30

lucasheriques commented Jan 6, 2025

View reviewed changes

posthog-bot added the stale label Jan 14, 2025

lucasheriques requested a review from a team January 14, 2025 15:02

lucasheriques force-pushed the feat/allow-custom-fonts-on-surveys branch from adf1772 to 931e1fa Compare January 14, 2025 15:04

feat: allow custom fonts on surveys

8f17bab

lucasheriques force-pushed the feat/allow-custom-fonts-on-surveys branch from 931e1fa to 8f17bab Compare January 14, 2025 15:21

lucasheriques changed the title ~~feat: allow admins to configure font in the survey editor~~ feat: allow changing the font family for surveys Jan 14, 2025

lucasheriques commented Jan 14, 2025

View reviewed changes

github-actions bot added 2 commits January 14, 2025 15:38

Update UI snapshots for chromium (1)

407d218

Update UI snapshots for chromium (2)

fcb566d

lucasheriques marked this pull request as ready for review January 14, 2025 15:53

Update UI snapshots for chromium (2)

8e5d265

marandaneto reviewed Jan 14, 2025

View reviewed changes

frontend/src/scenes/surveys/SurveyCustomization.tsx Outdated Show resolved Hide resolved

lucasheriques added 2 commits January 14, 2025 13:05

feature flag key a constant

9a1a992

use feature flags from global state instead

03387fc

marandaneto approved these changes Jan 14, 2025

View reviewed changes

lucasheriques enabled auto-merge (squash) January 14, 2025 17:40

lucasheriques merged commit d667e01 into master Jan 14, 2025
99 checks passed

lucasheriques deleted the feat/allow-custom-fonts-on-surveys branch January 14, 2025 17:55

marandaneto mentioned this pull request Jan 14, 2025

Feature request: allow admins to configure font in the survey editor #25338

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow changing the font family for surveys #27292

feat: allow changing the font family for surveys #27292

lucasheriques commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025 •

edited

Loading

posthog-bot commented Jan 6, 2025

lucasheriques Jan 6, 2025

corywatilo commented Jan 6, 2025

posthog-bot commented Jan 6, 2025

posthog-bot commented Jan 14, 2025

posthog-bot commented Jan 14, 2025

lucasheriques Jan 14, 2025

posthog-bot commented Jan 14, 2025

posthog-bot commented Jan 14, 2025

marandaneto left a comment

feat: allow changing the font family for surveys #27292

feat: allow changing the font family for surveys #27292

Conversation

lucasheriques commented Jan 6, 2025 • edited Loading

Problem

Changes

Does this work well for both Cloud and self-hosted?

How did you test this code?

github-actions bot commented Jan 6, 2025 • edited Loading

posthog-bot commented Jan 6, 2025

📸 UI snapshots have been updated

lucasheriques Jan 6, 2025

Choose a reason for hiding this comment

corywatilo commented Jan 6, 2025

posthog-bot commented Jan 6, 2025

📸 UI snapshots have been updated

posthog-bot commented Jan 14, 2025

posthog-bot commented Jan 14, 2025

📸 UI snapshots have been updated

lucasheriques Jan 14, 2025

Choose a reason for hiding this comment

posthog-bot commented Jan 14, 2025

📸 UI snapshots have been updated

posthog-bot commented Jan 14, 2025

📸 UI snapshots have been updated

marandaneto left a comment

Choose a reason for hiding this comment

lucasheriques commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025 •

edited

Loading