Merge pull request #1059 from colinrotherham/form-group-classes

Allow extra form group classes on all form components

CHANGELOG.md

@@ -20,6 +20,12 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Allow form group classes on date, file upload, input, select and textarea
+
+  All remaining form groups should allow additional classes, like with radios and checkboxes
+
+  ([PR #1059](https://github.com/alphagov/govuk-frontend/pull/1059))
+
 🔧 Fixes:
 
 - Pull Request Title goes here

src/components/date-input/date-input.yaml

@@ -42,6 +42,15 @@ params:
   required: false
   description: Options for the error message.
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: fieldset
   type: object
   required: false
@@ -168,3 +177,15 @@ examples:
         text: What is your date of birth?
     hint:
       text: For example, 31 3 1980
+- name: with optional form-group classes
+  readme: false
+  data:
+    id: dob
+    namePrefix: dob
+    fieldset:
+      legend:
+        text: What is your date of birth?
+    hint:
+      text: For example, 31 3 1980
+    formGroup:
+      classes: extra-class

src/components/date-input/template.njk

@@ -73,7 +73,7 @@
   </div>
 {% endset %}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
 {#- We override the fieldset's role to 'group' because otherwise JAWS does not
     announce the description for a fieldset comprised of text inputs, but

src/components/date-input/template.test.js

@@ -271,6 +271,17 @@ describe('Date input', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.length).toBeTruthy()
     })
+
+    it('renders with a form group wrapper that has extra classes', () => {
+      const $ = render('date-input', {
+        formGroup: {
+          classes: 'extra-class'
+        }
+      })
+
+      const $formGroup = $('.govuk-form-group')
+      expect($formGroup.hasClass('extra-class')).toBeTruthy()
+    })
   })
 
   describe('when it includes a hint', () => {

src/components/file-upload/file-upload.yaml

@@ -26,6 +26,15 @@ params:
   required: false
   description: Options for the errorMessage component.
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: classes
   type: string
   required: false
@@ -76,3 +85,12 @@ examples:
     label:
       text: Upload a file
       isPageHeading: true
+- name: with optional form-group classes
+  readme: false
+  data:
+    id: file-upload-1
+    name: file-upload-1
+    label:
+      text: Upload a file
+    formGroup:
+      classes: extra-class

src/components/file-upload/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

src/components/file-upload/template.test.js

@@ -71,6 +71,17 @@ describe('File upload', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.length).toBeTruthy()
     })
+
+    it('renders with a form group wrapper that has extra classes', () => {
+      const $ = render('file-upload', {
+        formGroup: {
+          classes: 'extra-class'
+        }
+      })
+
+      const $formGroup = $('.govuk-form-group')
+      expect($formGroup.hasClass('extra-class')).toBeTruthy()
+    })
   })
 
   describe('when it includes a hint', () => {

src/components/input/input.yaml

@@ -25,6 +25,15 @@ params:
   required: false
   description: Options for the errorMessage component.
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: classes
   type: string
   required: false
@@ -129,3 +138,12 @@ examples:
         isPageHeading: true
       id: input-with-page-heading
       name: test-name
+  - name: with optional form-group classes
+    readme: false
+    data:
+      label:
+        text: National Insurance number
+      id: input-example
+      name: test-name
+      formGroup:
+        classes: extra-class

src/components/input/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

src/components/input/template.test.js

@@ -87,6 +87,17 @@ describe('Input', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.length).toBeTruthy()
     })
+
+    it('renders with a form group wrapper that has extra classes', () => {
+      const $ = render('input', {
+        formGroup: {
+          classes: 'extra-class'
+        }
+      })
+
+      const $formGroup = $('.govuk-form-group')
+      expect($formGroup.hasClass('extra-class')).toBeTruthy()
+    })
   })
 
   describe('when it includes a hint', () => {

src/components/select/select.yaml

@@ -43,6 +43,15 @@ params:
   required: false
   description: Options for the errorMessage component (e.g. text).
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: classes
   type: string
   required: false
@@ -129,3 +138,25 @@ examples:
         value: 3
         text: GOV.UK frontend option 3
         disabled: true
+- name: with optional form-group classes
+  readme: false
+  data:
+    id: select-1
+    name: select-1
+    classes: govuk-!-width-full
+    label:
+      text: Label text goes here
+    formGroup:
+      classes: extra-class
+    items:
+      -
+        value: 1
+        text: GOV.UK frontend option 1
+      -
+        value: 2
+        text: GOV.UK frontend option 2
+        selected: true
+      -
+        value: 3
+        text: GOV.UK frontend option 3
+        disabled: true

src/components/select/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

src/components/select/template.test.js

@@ -149,6 +149,17 @@ describe('Select', () => {
       const $formGroup = $('.govuk-form-group')
       expect($formGroup.length).toBeTruthy()
     })
+
+    it('renders with a form group wrapper that has extra classes', () => {
+      const $ = render('select', {
+        formGroup: {
+          classes: 'extra-class'
+        }
+      })
+
+      const $formGroup = $('.govuk-form-group')
+      expect($formGroup.hasClass('extra-class')).toBeTruthy()
+    })
   })
 
   describe('when they include option attributes', () => {

src/components/textarea/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

src/components/textarea/template.test.js

@@ -163,6 +163,17 @@ describe('Textarea', () => {
       expect($component.hasClass('govuk-textarea--error')).toBeTruthy()
     })
 
+    it('renders with a form group wrapper that has extra classes', () => {
+      const $ = render('textarea', {
+        formGroup: {
+          classes: 'extra-class'
+        }
+      })
+
+      const $formGroup = $('.govuk-form-group')
+      expect($formGroup.hasClass('extra-class')).toBeTruthy()
+    })
+
     it('renders with a form group wrapper that has an error state', () => {
       const $ = render('textarea', {
         errorMessage: {

src/components/textarea/textarea.yaml

@@ -34,6 +34,15 @@ params:
   required: false
   description: Options for the errorMessage component (e.g. text).
   isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Optional classes to add to the form group (e.g. to show error state for the whole group)
 - name: classes
   type: string
   required: false
@@ -89,3 +98,13 @@ examples:
       label:
         text: Full address
         isPageHeading: true
+
+  - name: with optional form-group classes
+    readme: false
+    data:
+      id: textarea-with-page-heading
+      name: address
+      label:
+        text: Full address
+      formGroup:
+        classes: extra-class