fix: support inherit font family on surveys

PostHog · Feb 25, 2025 · 8d1a418 · 8d1a418
1 parent 581275d
commit 8d1a418
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/__tests__/extensions/surveys-utils.test.ts b/src/__tests__/extensions/surveys-utils.test.ts
@@ -1,4 +1,9 @@
-import { canActivateRepeatedly, hasEvents, hasWaitPeriodPassed } from '../../extensions/surveys/surveys-utils'
+import {
+    canActivateRepeatedly,
+    getFontFamily,
+    hasEvents,
+    hasWaitPeriodPassed,
+} from '../../extensions/surveys/surveys-utils'
 import { Survey, SurveySchedule, SurveyType } from '../../posthog-surveys-types'
 
 describe('hasWaitPeriodPassed', () => {
@@ -179,3 +184,21 @@ describe('canActivateRepeatedly', () => {
         expect(canActivateRepeatedly(survey)).toBe(false)
     })
 })
+
+describe('getFontFamily', () => {
+    it('should return the default font family with fallbacks when no font family is provided', () => {
+        expect(getFontFamily()).toBe(
+            '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+        )
+    })
+
+    it('should return the provided font family with fallbacks when a custom font family is provided', () => {
+        expect(getFontFamily('Arial')).toBe(
+            'Arial, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+        )
+    })
+
+    it('should return only "inherit" when "inherit" is provided as font family', () => {
+        expect(getFontFamily('inherit')).toBe('inherit')
+    })
+})
diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx
@@ -17,6 +17,16 @@ const SurveySeenPrefix = 'seenSurvey_'
 
 const logger = createLogger('[Surveys]')
 
+export function getFontFamily(fontFamily?: string): string {
+    if (fontFamily === 'inherit') {
+        return 'inherit'
+    }
+
+    const defaultFontStack =
+        'BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+    return fontFamily ? `${fontFamily}, ${defaultFontStack}` : `-apple-system, ${defaultFontStack}`
+}
+
 export const style = (appearance: SurveyAppearance | null) => {
     const positions = {
         left: 'left: 30px;',
@@ -33,7 +43,7 @@ export const style = (appearance: SurveyAppearance | null) => {
               bottom: 0px;
               color: black;
               font-weight: normal;
-              font-family: ${appearance?.fontFamily || '-apple-system'}, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+              font-family: ${getFontFamily(appearance?.fontFamily)};
               text-align: left;
               max-width: ${parseInt(appearance?.maxWidth || '300')}px;
               width: 100%;
@@ -67,7 +77,7 @@ export const style = (appearance: SurveyAppearance | null) => {
           .survey-form textarea {
               color: #2d2d2d;
               font-size: 14px;
-              font-family: ${appearance?.fontFamily || '-apple-system'}, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+              font-family: ${getFontFamily(appearance?.fontFamily)};
               background: white;
               color: black;
               outline: none;