From 54c589ade478ec24b3ed285adede357b85d956a7 Mon Sep 17 00:00:00 2001 From: David Newell Date: Thu, 2 Oct 2025 11:02:14 +0100 Subject: [PATCH] add button radius and input background options --- packages/browser/src/extensions/surveys/survey.css | 3 ++- .../src/extensions/surveys/surveys-extension-utils.tsx | 9 +++------ packages/browser/src/posthog-surveys-types.ts | 4 +++- packages/core/src/types.ts | 4 +++- .../src/surveys/components/BottomSection.tsx | 3 +-- packages/react-native/src/surveys/surveys-utils.ts | 2 ++ 6 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/browser/src/extensions/surveys/survey.css b/packages/browser/src/extensions/surveys/survey.css index bd8b08a39..3088a12ca 100644 --- a/packages/browser/src/extensions/surveys/survey.css +++ b/packages/browser/src/extensions/surveys/survey.css @@ -12,6 +12,7 @@ --ph-survey-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --ph-survey-submit-button-color: black; --ph-survey-submit-button-text-color: white; + --ph-survey-submit-button-radius: 6px; --ph-survey-rating-bg-color: white; --ph-survey-rating-text-color: #020617; --ph-survey-rating-active-bg-color: black; @@ -509,7 +510,7 @@ cursor: pointer; user-select: none; padding: 12px; - border-radius: 6px; + border-radius: var(--ph-survey-submit-button-radius); background: var(--ph-survey-submit-button-color); color: var(--ph-survey-submit-button-text-color); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); diff --git a/packages/browser/src/extensions/surveys/surveys-extension-utils.tsx b/packages/browser/src/extensions/surveys/surveys-extension-utils.tsx index ec3249c60..142b411c5 100644 --- a/packages/browser/src/extensions/surveys/surveys-extension-utils.tsx +++ b/packages/browser/src/extensions/surveys/surveys-extension-utils.tsx @@ -54,9 +54,11 @@ export const defaultSurveyAppearance = { backgroundColor: '#eeeded', submitButtonColor: 'black', submitButtonTextColor: 'white', + submitButtonRadius: '6px', ratingButtonColor: 'white', ratingButtonActiveColor: 'black', borderColor: '#c9c6c6', + inputBackground: 'white', placeholder: 'Start typing...', whiteLabel: false, displayThankYouMessage: true, @@ -76,7 +78,6 @@ export const defaultSurveyAppearance = { surveyPopupDelaySeconds: undefined, // Not customizable atm outlineColor: 'rgba(59, 130, 246, 0.8)', - inputBackground: 'white', inputTextColor: BLACK_TEXT_COLOR, scrollbarThumbColor: 'var(--ph-survey-border-color)', scrollbarTrackColor: 'var(--ph-survey-background-color)', @@ -118,6 +119,7 @@ export const addSurveyCSSVariablesToElement = ( '--ph-survey-submit-button-text-color', appearance?.submitButtonTextColor || getContrastingTextColor(effectiveAppearance.submitButtonColor) ) + hostStyle.setProperty('--ph-survey-submit-button-radius', effectiveAppearance.submitButtonRadius) hostStyle.setProperty('--ph-survey-rating-bg-color', effectiveAppearance.ratingButtonColor) hostStyle.setProperty( '--ph-survey-rating-text-color', @@ -137,11 +139,6 @@ export const addSurveyCSSVariablesToElement = ( hostStyle.setProperty('--ph-widget-text-color', getContrastingTextColor(effectiveAppearance.widgetColor)) hostStyle.setProperty('--ph-widget-z-index', effectiveAppearance.zIndex) - // Adjust input/choice background slightly if main background is white - if (effectiveAppearance.backgroundColor === 'white') { - hostStyle.setProperty('--ph-survey-input-background', '#f8f8f8') - } - hostStyle.setProperty('--ph-survey-input-background', effectiveAppearance.inputBackground) hostStyle.setProperty('--ph-survey-input-text-color', getContrastingTextColor(effectiveAppearance.inputBackground)) hostStyle.setProperty('--ph-survey-scrollbar-thumb-color', effectiveAppearance.scrollbarThumbColor) diff --git a/packages/browser/src/posthog-surveys-types.ts b/packages/browser/src/posthog-surveys-types.ts index 5ecd3a458..e2443b3e2 100644 --- a/packages/browser/src/posthog-surveys-types.ts +++ b/packages/browser/src/posthog-surveys-types.ts @@ -34,10 +34,13 @@ export interface SurveyAppearance { // deprecate submit button text eventually submitButtonText?: string submitButtonTextColor?: string + submitButtonRadius?: string descriptionTextColor?: string ratingButtonColor?: string ratingButtonActiveColor?: string ratingButtonHoverColor?: string + inputBackground?: string + placeholder?: string whiteLabel?: boolean autoDisappear?: boolean displayThankYouMessage?: boolean @@ -47,7 +50,6 @@ export interface SurveyAppearance { thankYouMessageCloseButtonText?: string borderColor?: string position?: SurveyPosition - placeholder?: string shuffleQuestions?: boolean surveyPopupDelaySeconds?: number // widget options diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 86c2df14e..934bfdc2b 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -283,8 +283,11 @@ export type SurveyAppearance = { // deprecate submit button text eventually submitButtonText?: string submitButtonTextColor?: string + submitButtonRadius?: string ratingButtonColor?: string ratingButtonActiveColor?: string + inputBackground?: string + placeholder?: string autoDisappear?: boolean displayThankYouMessage?: boolean thankYouMessageHeader?: string @@ -293,7 +296,6 @@ export type SurveyAppearance = { thankYouMessageCloseButtonText?: string borderColor?: string position?: SurveyPosition - placeholder?: string shuffleQuestions?: boolean surveyPopupDelaySeconds?: number // widget options diff --git a/packages/react-native/src/surveys/components/BottomSection.tsx b/packages/react-native/src/surveys/components/BottomSection.tsx index 6d9a1c4c0..863455ec7 100644 --- a/packages/react-native/src/surveys/components/BottomSection.tsx +++ b/packages/react-native/src/surveys/components/BottomSection.tsx @@ -21,7 +21,7 @@ export function BottomSection({