feat(surveys): Allow customers to edit zIndex of the survey popup (#2…

…5240) This commit adds a new input field for the zIndex of the survey popup.
PostHog · Sep 26, 2024 · 210e96d · 210e96d
1 parent b5fbf6d
commit 210e96d
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 0 deletions.
diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png
diff --git a/...nd/__snapshots__/scenes-app-surveys--new-survey-customisation-section--dark.png b/...nd/__snapshots__/scenes-app-surveys--new-survey-customisation-section--dark.png
diff --git a/...d/__snapshots__/scenes-app-surveys--new-survey-customisation-section--light.png b/...d/__snapshots__/scenes-app-surveys--new-survey-customisation-section--light.png
diff --git a/frontend/src/scenes/surveys/SurveyCustomization.tsx b/frontend/src/scenes/surveys/SurveyCustomization.tsx
@@ -105,6 +105,20 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
                     onChange={(submitButtonTextColor) => onAppearanceChange({ ...appearance, submitButtonTextColor })}
                     disabled={!surveysStylingAvailable}
                 />
+
+                <LemonField.Pure
+                    label="Survey form zIndex"
+                    info="If the survey popup is hidden behind another overlapping UI element, set this value higher than the overlapping element's zIndex."
+                >
+                    <LemonInput
+                        type="text"
+                        value={appearance?.zIndex}
+                        onChange={(zIndex) => onAppearanceChange({ ...appearance, zIndex })}
+                        disabled={!surveysStylingAvailable}
+                        placeholder="99999"
+                        defaultValue="99999"
+                    />
+                </LemonField.Pure>
                 {surveyQuestionItem.type === SurveyQuestionType.Open && (
                     <>
                         <div className="mt-2">Placeholder text</div>

diff --git a/frontend/src/scenes/surveys/surveyActivityDescriber.tsx b/frontend/src/scenes/surveys/surveyActivityDescriber.tsx
@@ -183,6 +183,7 @@ const surveyActionsMapping: Record<
             widgetSelector: 'widget selector',
             widgetLabel: 'widget label',
             widgetColor: 'widget color',
+            zIndex: 'survey form zIndex',
         }
 
         Object.entries(fieldNameMapping).forEach(([field, readableFieldName]) => {

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -2730,6 +2730,7 @@ export interface SurveyAppearance {
     thankYouMessageCloseButtonText?: string
     autoDisappear?: boolean
     position?: string
+    zIndex?: string
     shuffleQuestions?: boolean
     surveyPopupDelaySeconds?: number
     // widget only