Merge pull request #3149 from alphagov/resize-all-textbox-dem

Let textareas resize automatically without having to highlight placeholders

app/templates/components/textbox.html

@@ -2,8 +2,9 @@
   field,
   label=None,
   hint=False,
-  highlight_tags=False,
+  highlight_placeholders=False,
   autofocus=False,
+  autosize=False,
   colour_preview=False,
   help_link=None,
   help_link_text=None,
@@ -34,7 +35,7 @@
       {% endif %}
     </label>
     {%
-      if highlight_tags
+      if highlight_placeholders or autosize
     %}
       {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
@@ -47,7 +48,8 @@
     %}
     {{ field(
       class=field_class,
-      data_module='highlight-tags' if highlight_tags else '',
+      data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
+      data_highlight_placeholders='true' if highlight_placeholders else 'false',
       rows=rows|string,
       **kwargs
     ) }}

app/templates/views/edit-email-template.html

@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {% if current_user.platform_admin %}
              {{ radios(form.process_type) }}
           {% endif %}

app/templates/views/edit-letter-template.html

@@ -20,8 +20,8 @@
       <div class="grid-row">
         <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
-          {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
+          {{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
           {{ sticky_page_footer(
             'Save'
           ) }}

app/templates/views/edit-sms-template.html

@@ -22,7 +22,7 @@
           {{ textbox(form.name, width='1-1', hint='Your recipients will not see this') }}
         </div>
         <div class="column-two-thirds">
-          {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=5) }}
+          {{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
           {% if current_user.platform_admin %}
             {{ radios(form.process_type) }}
           {% endif %}

app/templates/views/organisations/organisation/settings/edit-go-live-notes.html

@@ -21,7 +21,7 @@
         belonging to this organisation requests to go live.
       </p>
       {% call form_wrapper() %}
-        {{ textbox(form.request_to_go_live_notes, width='1-1', rows=3) }}
+        {{ textbox(form.request_to_go_live_notes, width='1-1', rows=3, autosize=True) }}
         {{ page_footer('Save') }}
       {% endcall %}
     </div>

app/templates/views/platform-admin/returned-letters.html

@@ -13,7 +13,7 @@
   <div class="column-two-thirds">
     <h1 class="heading-large">Submit returned letters</h1>
     {% call form_wrapper() %}
-      {{ textbox(form.references, width='1-1', rows=8) }}
+      {{ textbox(form.references, width='1-1', rows=8, autosize=True) }}
       {{ page_footer("Submit") }}
     {% endcall %}
   </div>

app/templates/views/service-settings/branding/email-options.html

@@ -45,6 +45,7 @@
           form.something_else,
           hint='Include links to your brand guidelines or examples of how to use your branding',
           width='1-1',
+          autosize=True,
         ) }}
       {% endcall %}
     {% endif %}

app/templates/views/service-settings/letter-contact/add.html

@@ -24,7 +24,7 @@
             hint='10 lines maximum',
             width='1-2',
             rows=10,
-            highlight_tags=True
+            highlight_placeholders=True
           ) }}
         {% if not first_contact_block %}
           <div class="form-group">

app/templates/views/service-settings/letter-contact/edit.html

@@ -22,7 +22,7 @@
       hint='10 lines maximum',
       width='1-2',
       rows=10,
-      highlight_tags=True
+      highlight_placeholders=True
     ) }}
 
 

app/templates/views/service-settings/set-letter-contact-block.html

@@ -22,7 +22,7 @@
         hint='10 lines maximum',
         width='1-1',
         rows=10,
-        highlight_tags=True
+        highlight_placeholders=True
       ) }}
       {{ page_footer('Save') }}
     {% endcall %}

app/templates/views/styleguide.html

@@ -181,7 +181,7 @@
   <h2 class="heading-large">Textbox</h2>
   {{ textbox(form.username) }}
   {{ textbox(form.password) }}
-  {{ textbox(form.message, highlight_tags=True) }}
+  {{ textbox(form.message, highlight_placeholders=True) }}
   {{ textbox(form.code, width='1-8') }}
 
   <h2 class="heading-large">File upload</h2>

app/templates/views/support/ask-question-give-feedback.html

@@ -17,7 +17,7 @@
     <div class="grid-row">
       <div class="column-two-thirds">
         {% call form_wrapper() %}
-            {{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
+            {{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
             {% if not current_user.is_authenticated %}
               <h3 class="heading-medium">Do you want a reply?</h3>
               <p>Leave your details below if you’d like a response.</p>

app/templates/views/support/report-problem.html

@@ -24,7 +24,7 @@
           </p>
         </div>
         {% call form_wrapper() %}
-            {{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
+            {{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
             {% if not current_user.is_authenticated %}
               {{ textbox(form.name, width='1-1') }}
               {{ textbox(form.email_address, width='1-1') }}