feat: allow customizing text color on surveys #2787
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
77ac12e to
f1a534d
Compare
Contributor
Contributor
|
Size Change: +715 B (+0.01%) Total Size: 5.3 MB
ℹ️ View Unchanged
|
f1a534d to
39a0b5d
Compare
39a0b5d to
8f9ca73
Compare
8f9ca73 to
3c98c33
Compare
lucasheriques
commented
Dec 17, 2025
Contributor
Author
There was a problem hiding this comment.
there are many tests here and some of them repeated, so i'm consolidating them a little
adboio
approved these changes
Dec 18, 2025
| // keep in sync with frontend/src/types.ts -> SurveyAppearance | ||
| backgroundColor?: string | ||
| // Optional override for main survey text color. If not set, auto-calculated from backgroundColor. | ||
| textColor?: string |
Contributor
There was a problem hiding this comment.
this will now exist on the rn sdk types, so we should still document somewhere that it doesn't work on react-native (until we update it)
Contributor
Author
There was a problem hiding this comment.
the implementation is a part of the PR, not sure if you saw it before the update, can you double check?
ioannisj
reviewed
Dec 18, 2025
| placeholder={appearance.placeholder} | ||
| placeholderTextColor={ | ||
| getContrastingTextColor(appearance.inputBackground) === 'black' | ||
| (appearance.inputTextColor ?? getContrastingTextColor(appearance.inputBackground)) === 'black' |
Contributor
There was a problem hiding this comment.
This would be white if inputTextColor is anything other than black right? Doesn't seem right
Contributor
Author
There was a problem hiding this comment.
| Case | Result |
|---|---|
| No inputTextColor, light bg → 'black' → needs 'white' contrast | dark placeholder ✓ |
| No inputTextColor, dark bg → 'white' → needs 'black' contrast | light placeholder ✓ |
| inputTextColor = 'black' → needs 'white' contrast | dark placeholder ✓ |
| inputTextColor = '#000000' → needs 'white' contrast | dark placeholder ✓ (FIXED) |
fixed it now, see if the table above makes sense too
ioannisj
reviewed
Dec 18, 2025
Comment on lines
123
to
+130
| export type SurveyAppearanceTheme = Omit< | ||
| Required<SurveyAppearance>, | ||
| 'widgetSelector' | 'widgetType' | 'widgetColor' | 'widgetLabel' | 'shuffleQuestions' | ||
| > | ||
| 'widgetSelector' | 'widgetType' | 'widgetColor' | 'widgetLabel' | 'shuffleQuestions' | 'textColor' | 'inputTextColor' | ||
| > & { | ||
| textColor?: string | ||
| inputTextColor?: string | ||
| } |
Contributor
There was a problem hiding this comment.
Don't really know how to read this type. Are we omitting textColor, inputTextColor from original type and adding them back as optional properties?
Member
There was a problem hiding this comment.
its omitting all hardcoded values and adding back the 2 as optional
Contributor
Author
There was a problem hiding this comment.
Don't really know how to read this type. Are we omitting textColor, inputTextColor from original type and adding them back as optional properties?
yep! we're making most fields required (so we always have defaults to render with), but textColor and inputTextColor stay optional since they're overrides - if not set, we auto-calculate them from the background for contrast.
adboio
approved these changes
Dec 18, 2025
3cc50e3 to
c8d1fe7
Compare
Contributor
Author
Merge activity
|
lucasheriques
added a commit
to PostHog/posthog
that referenced
this pull request
Dec 23, 2025
## Problem The survey appearance customization UI needs improvement to be more organized and user-friendly. The current layout doesn't group related options logically and lacks explicit text color controls. Requires PostHog/posthog-js#2787 to be in before this is ready to ship ## Changes - Reorganized the survey appearance options into logical subgroups (Survey background, Inputs and ratings, Submit button) - Added explicit text color controls with "auto-contrast" hints - Improved responsive layout with better grid structure (1 column on mobile, 3 columns on larger screens) - Updated the "inherit" font label to be more concise Before: ![CleanShot 2025-12-17 at [email protected]](https://app.graphite.com/user-attachments/assets/3efe948e-54bb-46c3-ada4-6a481f150001.jpg) After: ![CleanShot 2025-12-17 at [email protected]](https://app.graphite.com/user-attachments/assets/b072dabe-2984-4d57-812a-ed7c95b060d7.jpg) ## How did you test this code? Tested the UI in both mobile and desktop viewports to ensure the responsive layout works correctly. Verified that all color controls function properly and that the auto-contrast hint displays correctly. Confirmed that the new text color fields are properly saved and applied to surveys. ## Changelog Yes, feature completed
warpbuild-benchmark-bot bot
added a commit
to WarpBuilds/benchmarks-posthog
that referenced
this pull request
Dec 23, 2025
## Problem The survey appearance customization UI needs improvement to be more organized and user-friendly. The current layout doesn't group related options logically and lacks explicit text color controls. Requires PostHog/posthog-js#2787 to be in before this is ready to ship ## Changes - Reorganized the survey appearance options into logical subgroups (Survey background, Inputs and ratings, Submit button) - Added explicit text color controls with "auto-contrast" hints - Improved responsive layout with better grid structure (1 column on mobile, 3 columns on larger screens) - Updated the "inherit" font label to be more concise Before: ![CleanShot 2025-12-17 at [email protected]](https://app.graphite.com/user-attachments/assets/3efe948e-54bb-46c3-ada4-6a481f150001.jpg) After: ![CleanShot 2025-12-17 at [email protected]](https://app.graphite.com/user-attachments/assets/b072dabe-2984-4d57-812a-ed7c95b060d7.jpg) ## How did you test this code? Tested the UI in both mobile and desktop viewports to ensure the responsive layout works correctly. Verified that all color controls function properly and that the auto-contrast hint displays correctly. Confirmed that the new text color fields are properly saved and applied to surveys. ## Changelog Yes, feature completed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Survey appearance customization needs improvement to ensure consistent text contrast across different elements, particularly for rating buttons and text inputs.
Changes
Implemented the changes for both React Native and Web (posthog-js) and now began sharing more fields between them too.
Release info Sub-libraries affected
Libraries affected
Checklist
If releasing new changes
pnpm changesetto generate a changeset file