Merge pull request #474 from alphagov/add-textarea

Add a textarea example to the form elements page

app/views/guide_form_elements.html

@@ -24,6 +24,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
         <li><a href="#form-optional-fields">Optional and mandatory fields</a></li>
         <li><a href="#form-labels">Labels</a></li>
         <li><a href="#form-fields">Form fields</a></li>
+        <li><a href="#form-textarea">Textarea</a></li>
         <li><a href="#form-focus-states">Form focus states</a></li>
         <li><a href="#form-hint-text">Hint text</a></li>
         <li><a href="#form-spacing">Spacing</a></li>
@@ -86,6 +87,25 @@ <h3 class="heading-medium" id="form-fields">Form fields</h3>
     </a>
   </p>
 
+  <h3 class="heading-medium" id="form-textarea">Textarea</h3>
+  <div class="text">
+    <p>
+      Make the height of a textarea proportional to the amount of text to be entered.
+    </p>
+  </div>
+
+  <div class="example">
+    {% include "snippets/form_textarea.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% filter escape %}
+    {% include "snippets/form_textarea.html" %}
+  {% endfilter %}
+</code>
+</pre>
+
   <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
   <div class="text">
     <p>

app/views/snippets/form_textarea.html

@@ -0,0 +1,4 @@
+<label class="form-label" for="textarea">
+  Why can't you provide a National Insurance number?
+</label>
+<textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>

assets/sass/elements/_forms.scss

@@ -163,11 +163,16 @@ textarea {
 // scss-lint:disable QualifyingElement
 input.form-control,
 textarea.form-control {
-  // Remove inner shadow
+  // Disable inner shadow and remove rounded corners
   -webkit-appearance: none;
-  // Remove rounded corners
   border-radius: 0;
 }
+
+textarea.form-control {
+  // Disable opacity and background image for Firefox
+  opacity: 1;
+  background-image: none;
+}
 // scss-lint:enable QualifyingElement