fix(surveys): survey popover improvements (#1029)

* reduce disabled submit button grayscale intensity * increase font size and weight of rating question numbers * fix test
PostHog · Feb 19, 2024 · cdfd10a · cdfd10a
1 parent 7c6532b
commit cdfd10a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/cypress/e2e/surveys.cy.ts b/cypress/e2e/surveys.cy.ts
@@ -154,6 +154,28 @@ describe('Surveys', () => {
             onPageLoad()
             cy.get('.PostHogSurvey123').should('not.exist')
         })
+
+        it('does not allow user to submit non optional survey questions if they have not responded to it', () => {
+            cy.intercept('GET', '**/surveys/*', {
+                surveys: [
+                    {
+                        id: '123',
+                        name: 'Test survey',
+                        description: 'description',
+                        type: 'popover',
+                        start_date: '2021-01-01T00:00:00Z',
+                        questions: [{ ...openTextQuestion, optional: false }],
+                        appearance: { submitButtonColor: 'pink' },
+                    },
+                ],
+            }).as('surveys')
+            cy.visit('./playground/cypress')
+            onPageLoad()
+            cy.get('.PostHogSurvey123').shadow().find('.survey-form').should('be.visible')
+            cy.get('.PostHogSurvey123').shadow().find('.form-submit').should('be.disabled')
+            cy.get('.PostHogSurvey123').shadow().find('textarea').type('This is great!')
+            cy.get('.PostHogSurvey123').shadow().find('.form-submit').should('not.be.disabled')
+        })
     })
 
     describe('Survey question types', () => {

diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx
@@ -24,7 +24,7 @@ export const style = (appearance: SurveyAppearance | null) => {
               font-weight: normal;
               font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
               text-align: left;
-              max-width: ${parseInt(appearance?.maxWidth || '290')}px;
+              max-width: ${parseInt(appearance?.maxWidth || '300')}px;
               z-index: ${parseInt(appearance?.zIndex || '99999')};
               border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};
               border-bottom: 0px;
@@ -33,7 +33,7 @@ export const style = (appearance: SurveyAppearance | null) => {
           }
           .form-submit[disabled] {
               opacity: 0.6;
-              filter: grayscale(100%);
+              filter: grayscale(50%);
               cursor: not-allowed;
           }
           .survey-form {
@@ -141,7 +141,8 @@ export const style = (appearance: SurveyAppearance | null) => {
           }
           .ratings-number {
               background-color: ${appearance?.ratingButtonColor || 'white'};
-              font-size: 14px;
+              font-size: 16px;
+              font-weight: 600;
               padding: 8px 0px;
               border: none;
           }
@@ -278,7 +279,7 @@ export const style = (appearance: SurveyAppearance | null) => {
               background: ${appearance?.backgroundColor || '#eeeded'};
               border: 1.5px solid ${appearance?.borderColor || '#c9c6c6'};
               text-align: center;
-              max-width: ${parseInt(appearance?.maxWidth || '290')}px;
+              max-width: ${parseInt(appearance?.maxWidth || '300')}px;
               min-width: 150px;
               width: 100%;
               ${positions[appearance?.position || 'right'] || 'right: 30px;'}