feat: adjust button styling to match the ones from the LMS

poll/__init__.py

@@ -23,4 +23,4 @@
 
 from .poll import PollBlock, SurveyBlock
 
-__version__ = "1.13.0"
+__version__ = "1.14.0"

poll/public/handlebars/poll_results.handlebars

@@ -28,7 +28,6 @@
             </li>
         {{/each}}
         </ul>
-        <input class="input-main" type="button" name="poll-submit" value="{{gettext "Submit"}}" disabled>
         <div class="poll-footnote">
           {{interpolate (ngettext "Results gathered from {total} respondent." "Results gathered from {total} respondents." total) total=total}}
         </div>

poll/public/handlebars/survey_results.handlebars

@@ -36,7 +36,6 @@
                 </tr>
             {{/each}}
         </table>
-        <input class="input-main" type="button" name="poll-submit" value="{{gettext "Submit"}}" disabled>
         <div class="poll-footnote">
             {{interpolate (ngettext "Results gathered from {total} respondent." "Results gathered from {total} respondents." total) total=total}}
         </div>

poll/public/html/poll.html

@@ -32,7 +32,9 @@ <h3 class="poll-header">{{ display_name }}</h3>
           {% endfor %}
         </div>
       </fieldset>
-      <input class="input-main" type="button" name="poll-submit" value="{% trans 'Submit' %}" disabled/>
+      <button type="button" class="submit btn-brand" disabled>
+          <span class="submit-label">{% trans 'Submit' %}</span>
+      </button>
     </form>
 
     <div class="poll-voting-thanks
@@ -61,15 +63,15 @@ <h3 class="poll-header">{% trans 'Feedback' %}</h3>
   </div>
       {% if can_view_private_results %}
       <div class="view-results-button-wrapper">
-        <button class="view-results-button">{% trans 'View results' %}</button>
+          <button type="button" class="view-results-button btn-link btn-small"><span class="show-label">{% trans 'View results' %}</span></button>
       </div>
     {% endif %}
 </div>
 {% if can_view_private_results %}
   {% if not studio_edit %}
     <div class="export-results-button-wrapper">
-      <button class="export-results-button">{% trans "Export results to CSV" %}</button>
-      <button disabled class="download-results-button">{% trans "Download CSV" %}</button>
+      <button class="export-results-button btn-brand">{% trans "Export results to CSV" %}</button>
+      <button disabled class="download-results-button btn-brand">{% trans "Download CSV" %}</button>
       <p class="error-message poll-hidden"></p>
     </div>
   {% else %}

poll/public/html/survey.html

@@ -50,7 +50,9 @@ <h3 class="poll-header">{{block_name}}</h3>
                 </tr>
             {% endfor %}
             </table>
-            <input class="input-main" type="button" name="poll-submit" value="{% trans 'Submit' %}" disabled />
+            <button type="button" class="submit btn-brand" disabled>
+                <span class="submit-label">{% trans 'Submit' %}</span>
+            </button>
         </form>
         <div class="poll-voting-thanks{% if not choices or can_vote %} poll-hidden{% endif %}"><span>{% trans 'Thank you.' %}</span></div>
         <div class="poll-submissions-count poll-hidden">
@@ -70,16 +72,16 @@ <h3 class="poll-header">{% trans 'Feedback' %}</h3>
 
         {% if can_view_private_results %}
             <div class="view-results-button-wrapper">
-                <button class="view-results-button">{% trans "View results" %}</button>
+                <button type="button" class="view-results-button btn-link btn-small"><span class="show-label">{% trans 'View results' %}</span></button>
             </div>
         {% endif %}
     </div>
 </div>
 {% if can_view_private_results %}
   {% if not studio_edit %}
     <div class="export-results-button-wrapper">
-      <button class="export-results-button">{% trans "Export results to CSV" %}</button>
-      <button disabled class="download-results-button">{% trans "Download CSV" %}</button>
+      <button class="export-results-button btn-brand">{% trans "Export results to CSV" %}</button>
+      <button disabled class="download-results-button btn-brand">{% trans "Download CSV" %}</button>
       <p class="error-message poll-hidden"></p>
     </div>
   {% else %}

poll/public/js/poll.js

@@ -10,7 +10,7 @@ function PollUtil (runtime, element, pollType) {
         this.tallyURL = runtime.handlerUrl(element, 'get_results');
         this.csv_url= runtime.handlerUrl(element, 'csv_export');
         this.votedUrl = runtime.handlerUrl(element, 'student_voted');
-        this.submit = $('input[type=button]', element);
+        this.submit = $('button.submit', element);
         this.answers = $('input[type=radio]', element);
         this.errorMessage = $('.error-message', element);
 

poll/translations/en/LC_MESSAGES/textjs.po

@@ -1,25 +1,20 @@
 msgid ""
 msgstr "Content-Type: text/plain; charset=utf-8\n"
 
-#: poll/public/handlebars/survey_results.handlebars:4
 #: poll/public/handlebars/poll_results.handlebars:5
+#: poll/public/handlebars/survey_results.handlebars:4
 msgid "Results"
 msgstr ""
 
-#: poll/public/handlebars/survey_results.handlebars:39
-#: poll/public/handlebars/poll_results.handlebars:31
-msgid "Submit"
-msgstr ""
-
-#: poll/public/handlebars/survey_results.handlebars:41
-#: poll/public/handlebars/poll_results.handlebars:33
+#: poll/public/handlebars/poll_results.handlebars:32
+#: poll/public/handlebars/survey_results.handlebars:40
 msgid "Results gathered from {total} respondent."
 msgid_plural "Results gathered from {total} respondents."
 msgstr[0] ""
 msgstr[1] ""
 
-#: poll/public/handlebars/survey_results.handlebars:46
-#: poll/public/handlebars/poll_results.handlebars:37
+#: poll/public/handlebars/poll_results.handlebars:36
+#: poll/public/handlebars/survey_results.handlebars:45
 msgid "Feedback"
 msgstr ""
 
@@ -63,4 +58,4 @@ msgid ""
 "image, you must also provide an alternative text that describes the image "
 "in a way that would allow someone to answer the poll if the image did not "
 "load."
-msgstr ""
+msgstr ""

tests/integration/base_test.py

@@ -43,7 +43,7 @@ def setUp(self):
         self.translation_merge_patch.start()
 
     def get_submit(self):
-        return self.browser.find_element_by_css_selector('input[name="poll-submit"]')
+        return self.browser.find_element_by_css_selector('button.submit')
 
     def make_selections(self, names):
         """

tests/integration/test_functions.py

@@ -25,6 +25,8 @@
 should.
 """
 
+from selenium.common.exceptions import NoSuchElementException
+
 from .base_test import PollBaseTest
 
 
@@ -58,7 +60,7 @@ def test_submit_enabled(self):
         answer_elements[0].click()
 
         # When an answer is selected, make sure submit is enabled.
-        self.wait_until_exists('input[name=poll-submit]:enabled')
+        self.wait_until_exists('button.submit:enabled')
 
     def test_poll_submission(self):
         """
@@ -82,11 +84,11 @@ def test_poll_submission(self):
         self.assertEqual(self.browser.find_element_by_css_selector('.poll-footnote').text,
                          'Results gathered from 100 respondents.')
 
-        self.assertFalse(self.browser.find_element_by_css_selector('input[name=poll-submit]').is_enabled())
+        self.assertRaises(NoSuchElementException, self.browser.find_element_by_css_selector, 'button.submit')
 
-    def test_submit_not_enabled_on_revisit(self):
+    def test_submit_not_present_on_revisit(self):
         """
-        Verify that revisiting the page post-vote does not re-enable the submit button.
+        Verify that revisiting the page post-vote does not show the submit button.
         """
         self.go_to_page('Poll Functions')
 
@@ -97,11 +99,10 @@ def test_submit_not_enabled_on_revisit(self):
 
         self.get_submit().click()
 
-        # Button will be replaced with a new disabled copy, not just disabled.
-        self.wait_until_exists('input[name=poll-submit]:disabled')
+        self.wait_until_exists('.poll-results-wrapper')
 
         self.go_to_page('Poll Functions')
-        self.assertFalse(self.get_submit().is_enabled())
+        self.assertRaises(NoSuchElementException, self.browser.find_element_by_css_selector, 'button.submit')
 
     def test_poll_options_a11y(self):
         """
@@ -250,21 +251,20 @@ def test_survey_submission(self):
         self.assertTrue(self.browser.find_element_by_css_selector('.poll-feedback').text,
                         "Thank you\nfor running the tests.")
 
-    def test_submit_not_enabled_on_revisit(self):
+    def test_submit_not_present_on_revisit(self):
         """
-        Verify that revisiting the page post-vote does not re-enable the submit button.
+        Verify that revisiting the page post-vote does not show the submit button.
         """
         self.go_to_page('Survey Functions')
 
         self.fill_survey()
 
         self.get_submit().click()
 
-        # Button will be replaced with a new disabled copy, not just disabled.
-        self.wait_until_exists('input[name=poll-submit]:disabled')
+        self.wait_until_exists('.poll-results-wrapper')
 
-        self.go_to_page('Poll Functions')
-        self.assertFalse(self.get_submit().is_enabled())
+        self.go_to_page('Survey Functions')
+        self.assertRaises(NoSuchElementException, self.browser.find_element_by_css_selector, 'button.submit')
 
     def test_survey_radio_ids_unique(self):
         """

tests/integration/test_max_submissions.py

@@ -51,7 +51,7 @@ def test_infinite_submissions(self, page, names):
             self.go_to_page(page)
             for ___ in range(1, 5):
                 self.do_submit(names)
-            self.wait_until_exists('input[name=poll-submit]:enabled')
+            self.wait_until_exists('button.submit:enabled')
 
     @unpack
     @data(*scenarios_max)

tests/integration/test_submit_button.py

@@ -46,7 +46,7 @@ def test_submit_button(self):
         # Select the first choice
         answer_elements[1].click()
         # When an answer is selected, make sure submit is enabled.
-        self.wait_until_exists('input[name=poll-submit]:enabled')
+        self.wait_until_exists('button.submit:enabled')
 
         submit_button = self.get_submit()
         submit_button.click()