fix: ux improvements for CSS selector field in surveys (#29373)

PostHog · Mar 2, 2025 · 40f6320 · 40f6320
1 parent 806ccee
commit 40f6320
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 17 deletions.
diff --git a/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png b/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png
diff --git a/frontend/__snapshots__/replay-player-success--recent-recordings--light.png b/frontend/__snapshots__/replay-player-success--recent-recordings--light.png
diff --git a/frontend/src/lib/lemon-ui/LemonField/LemonField.tsx b/frontend/src/lib/lemon-ui/LemonField/LemonField.tsx
@@ -24,6 +24,8 @@ export type LemonPureFieldProps = {
     inline?: boolean
     /** The id of the input this field is for */
     htmlFor?: string
+    /** The class name override for the label */
+    labelClassName?: string
 }
 
 const LemonFieldError = ({ error }: { error: string }): JSX.Element => {
@@ -47,6 +49,7 @@ const LemonPureField = ({
     inline,
     onClick,
     renderError,
+    labelClassName,
 }: LemonPureFieldProps): JSX.Element => {
     return (
         <div
@@ -64,7 +67,7 @@ const LemonPureField = ({
                     info={info}
                     showOptional={showOptional}
                     onExplanationClick={onExplanationClick}
-                    className={clsx({
+                    className={clsx(labelClassName, {
                         'cursor-pointer': !!onClick,
                     })}
                     htmlFor={htmlFor}

diff --git a/frontend/src/scenes/surveys/SurveyCustomization.tsx b/frontend/src/scenes/surveys/SurveyCustomization.tsx
@@ -172,8 +172,8 @@ export function Customization({
                         value={appearance?.zIndex}
                         onChange={(zIndex) => onAppearanceChange({ ...appearance, zIndex })}
                         disabled={!surveysStylingAvailable}
-                        placeholder="99999"
-                        defaultValue="99999"
+                        placeholder="2147482647"
+                        defaultValue="2147482647"
                         className="ignore-error-border"
                     />
                 </LemonField.Pure>
@@ -309,27 +309,37 @@ export function Customization({
     )
 }
 
-export function WidgetCustomization({ appearance, onAppearanceChange }: WidgetCustomizationProps): JSX.Element {
+export function WidgetCustomization({
+    appearance,
+    onAppearanceChange,
+    validationErrors,
+}: WidgetCustomizationProps): JSX.Element {
     return (
         <>
-            <div className="mt-2">Feedback button type</div>
-            <LemonSelect
-                value={appearance.widgetType}
-                onChange={(widgetType) => onAppearanceChange({ ...appearance, widgetType })}
-                options={[
-                    { label: 'Embedded tab', value: 'tab' },
-                    { label: 'Custom', value: 'selector' },
-                ]}
-            />
+            <LemonField.Pure label="Feedback button type" className="mt-2" labelClassName="font-normal">
+                <LemonSelect
+                    value={appearance.widgetType}
+                    onChange={(widgetType) => onAppearanceChange({ ...appearance, widgetType })}
+                    options={[
+                        { label: 'Embedded tab', value: 'tab' },
+                        { label: 'Custom', value: 'selector' },
+                    ]}
+                />
+            </LemonField.Pure>
             {appearance.widgetType === 'selector' ? (
-                <>
-                    <div className="mt-2">Class or ID selector</div>
+                <LemonField.Pure
+                    className="mt-2"
+                    label="CSS selector"
+                    labelClassName="font-normal"
+                    info="Enter a class or ID selector for the feedback button, like .feedback-button or #feedback-button. If you're using a custom theme, you can use the theme's class name."
+                >
                     <LemonInput
                         value={appearance.widgetSelector}
                         onChange={(widgetSelector) => onAppearanceChange({ ...appearance, widgetSelector })}
                         placeholder="ex: .feedback-button, #feedback-button"
                     />
-                </>
+                    {validationErrors?.widgetSelector && <LemonField.Error error={validationErrors?.widgetSelector} />}
+                </LemonField.Pure>
             ) : (
                 <>
                     <div className="mt-2">Label</div>

diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -660,6 +660,7 @@ export default function SurveyEdit(): JSX.Element {
                                                                   onAppearanceChange={(appearance) => {
                                                                       onChange(appearance)
                                                                   }}
+                                                                  validationErrors={surveyErrors?.appearance}
                                                               />
                                                               <LemonDivider className="mt-4" />
                                                               <div className="font-bold">Survey customization</div>

diff --git a/frontend/src/scenes/surveys/surveyLogic.tsx b/frontend/src/scenes/surveys/surveyLogic.tsx
@@ -1461,7 +1461,7 @@ export const surveyLogic = kea<surveyLogicType>([
     forms(({ actions, props, values }) => ({
         survey: {
             defaults: { ...NEW_SURVEY } as NewSurvey | Survey,
-            errors: ({ name, questions, appearance }) => {
+            errors: ({ name, questions, appearance, type }) => {
                 const sanitizedAppearance = sanitizeSurveyAppearance(appearance)
                 return {
                     name: !name && 'Please enter a name.',
@@ -1538,6 +1538,12 @@ export const surveyLogic = kea<surveyLogicType>([
                             sanitizedAppearance.submitButtonTextColor,
                             'button text color'
                         ),
+                        widgetSelector:
+                            type === 'widget' &&
+                            appearance?.widgetType === 'selector' &&
+                            !sanitizedAppearance.widgetSelector
+                                ? 'Please enter a CSS selector.'
+                                : undefined,
                     },
                 }
             },