Survey plugin updates: fix CSS, clean up code/comments, add survey.css to dist archive (#3287)

* make applyStyles private and clean up comments
* fix box shadow in input elements
* fix dropdown element width
* remove old/unused plugin-survey.css file
* add survey.css to dist archive
* add changeset

.changeset/shy-cheetahs-grow.md

@@ -0,0 +1,6 @@
+---
+"@jspsych/config": patch
+"@jspsych/plugin-survey": patch
+---
+
+This fixes the incorrect width for dropdown question options (#3286), adds the survey.css file to the dist archive (#3131), and cleans up code/comments.

packages/config/gulp.js

@@ -82,6 +82,9 @@ export const createCoreDistArchive = () =>
     // jspsych.css
     src("packages/jspsych/css/jspsych.css").pipe(rename("/dist/jspsych.css")),
 
+    // survey.css
+    src("packages/survey/css/survey.css").pipe(rename("/dist/survey.css")),
+
     // Examples
     src("examples/**/*", { base: "." })
       // Rewrite script source paths

packages/plugin-survey/css/plugin-survey.css

@@ -1,36 +0,0 @@
-/* navigation buttons */
-.jspsych-survey-btn {
-    margin-bottom: 20px;
-    margin-top: 10px;
-}
-
-/* question prompt text */
-.jspsych-survey-question-prompt {
-    font-family: "Open Sans", "Arial", sans-serif;
-    font-size: 18px;
-    line-height: 1em;
-}
-
-/* question spacing */
-.jspsych-display-element div.jspsych-survey-question {
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-bottom: 0.5em;
-}
-
-/* html prompts */
-.jspsych-survey-html {
-    font-size: 18px;
-}
-
-/* textbox inputs, dropdown menu */
-.jspsych-display-element input[type="text"], .jspsych-display-element textarea, .jspsych-display-element select.jspsych-survey-dropdown {
-    font-family: "Open Sans", "Arial", sans-serif;
-    font-size: 14px;
-    padding: 4px;
-}
-
-/* required astrisk and error text */
-.jspsych-display-element .jspsych-survey-required {
-    color: red;
-}

packages/plugin-survey/css/survey.scss

@@ -13,6 +13,7 @@ input[type="text"] {
 // center the question content 
 .jspsych-question-content {
   display: inline-block;
+  width: 100%;
 }
 
 // prevent question content from overflowing question border/panel

packages/plugin-survey/src/index.ts

@@ -79,45 +79,9 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
     this.jsPsych = jsPsych;
   }
 
-  applyStyles(survey) {
+  private applyStyles(survey) {
-    // TO DO: this method of applying custom styles is deprecated, but I'm
-    // saving this here for reference while we make decisions about default style
-
-    // import { StylesManager } from "survey-core";
-
-    // const colors = StylesManager.ThemeColors["default"];
-
-    // colors["$background-dim"] = "#f3f3f3";
-    // colors["$body-background-color"] = "white";
-    // colors["$body-container-background-color"] = "white";
-    // colors["$border-color"] = "#e7e7e7";
-    // colors["$disable-color"] = "#dbdbdb";
-    // colors["$disabled-label-color"] = "rgba(64, 64, 64, 0.5)";
-    // colors["$disabled-slider-color"] = "#cfcfcf";
-    // colors["$disabled-switch-color"] = "#9f9f9f";
-    // colors["$error-background-color"] = "#fd6575";
-    // colors["$error-color"] = "#ed5565";
-    // colors["$foreground-disabled"] = "#161616";
-    // //colors['$foreground-light'] = "orange"
-    // colors["$header-background-color"] = "white";
-    // colors["$header-color"] = "#6d7072";
-    // colors["$inputs-background-color"] = "white";
-    // colors["$main-color"] = "#919191";
-    // colors["$main-hover-color"] = "#6b6b6b";
-    // colors["$progress-buttons-color"] = "#8dd9ca";
-    // colors["$progress-buttons-line-color"] = "#d4d4d4";
-    // colors["$progress-text-color"] = "#9d9d9d";
-    // colors["$slider-color"] = "white";
-    // colors["$text-color"] = "#6d7072";
-    // colors["$text-input-color"] = "#6d7072";
-
-    // StylesManager.applyTheme();
-
-    // Updated method for creating custom themes
     // https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles#create-a-custom-theme
 
-    //colors["$border-color"] = "#e7e7e7";
-
     survey.applyTheme({
       cssVariables: {
         "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
@@ -137,7 +101,6 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
         "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
         "--sjs-shadow-medium": "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
         "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.05)",
-        "--sjs-shadow-inner": "0px 0px 0px 1px rgba(0, 0, 0, 0.15)",
         "--sjs-shadow-inner-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
         "--sjs-border-light": "rgba(0, 0, 0, 0.15)",
         "--sjs-border-default": "rgba(0, 0, 0, 0.15)",
@@ -162,7 +125,8 @@ class SurveyPlugin implements JsPsychPlugin<Info> {
       trial.survey_function(this.survey);
     }
 
-    this.applyStyles(this.survey); // customize colors
+    // apply our custom theme
+    this.applyStyles(this.survey);
 
     // apply our custom CSS class names
     this.survey.css = jsPsychSurveyCssClassMap;