Allow `attributes` option on form groups #4565

colinrotherham · 2023-12-14T15:31:00Z

This PR adds support for formGroup: { attributes: {} }

It's part of a fix suggested by @querkmachine in #2893 (comment) and follows the thinking in:

Allow form group classes on radios and checkboxes #1043 (comment)

Are there other things that we can foresee users wanting to add form-groups in the future, like attributes? Just wondering if we should opt for formGroup: { classes: '' } instead.

This is a supporting change to enable #4566

github-actions · 2023-12-14T15:32:56Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.45 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

Action run for f3a69e2

github-actions · 2023-12-14T15:33:22Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
index b6e105fd5..a740bfcee 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
@@ -73,6 +73,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/macro-options.json b/packages/govuk-frontend/dist/govuk/components/checkboxes/macro-options.json
index 4c284113a..8da436cb0 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/macro-options.json
@@ -37,6 +37,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template.njk b/packages/govuk-frontend/dist/govuk/components/checkboxes/template.njk
index 49ebb9bd2..2daefaf04 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template.njk
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template.njk
@@ -103,7 +103,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
index a67c7355e..8b6545b9a 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
@@ -92,6 +92,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template.njk b/packages/govuk-frontend/dist/govuk/components/date-input/template.njk
index bd5943577..42aa0d4c3 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template.njk
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template.njk
@@ -76,7 +76,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% 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
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
index ab831978e..6e51af747 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
@@ -61,6 +61,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template.njk b/packages/govuk-frontend/dist/govuk/components/file-upload/template.njk
index e830e816f..ee5cd01db 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template.njk
+++ b/packages/govuk-frontend/dist/govuk/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 = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
diff --git a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
index a42e49157..018f8d1dc 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
@@ -137,6 +137,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template.njk b/packages/govuk-frontend/dist/govuk/components/input/template.njk
index 12c96f734..9fea708e4 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/dist/govuk/components/input/template.njk
@@ -6,7 +6,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/macro-options.json b/packages/govuk-frontend/dist/govuk/components/radios/macro-options.json
index 7bc6dfa26..8af83b280 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/radios/macro-options.json
@@ -31,6 +31,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template.njk b/packages/govuk-frontend/dist/govuk/components/radios/template.njk
index 7fe0ab4fd..57fbc7941 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template.njk
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template.njk
@@ -93,7 +93,7 @@
   </div>
 {% endset -%}
 
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,
diff --git a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
index 9f7ba0223..838f05e26 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
@@ -99,6 +99,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template.njk b/packages/govuk-frontend/dist/govuk/components/select/template.njk
index e3fd5ceca..9f04c83b7 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template.njk
+++ b/packages/govuk-frontend/dist/govuk/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 = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
index f75119d16..16249f7bb 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
@@ -73,6 +73,12 @@
                 "type": "string",
                 "required": false,
                 "description": "Classes to add to the form group (for example to show error state for the whole group)."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the form group."
             }
         ]
     },
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template.njk b/packages/govuk-frontend/dist/govuk/components/textarea/template.njk
index 1042b4ad7..660e86363 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template.njk
+++ b/packages/govuk-frontend/dist/govuk/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 = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,

Action run for f3a69e2

romaricpascal

Looks neat to me. 🙌🏻 Thinking it's worth adding a CHANGELOG entry before we merge, do you mind adding one, please? 😊

owenatgov

💪🏻

colinrotherham · 2024-01-10T11:54:09Z

Thanks @owenatgov

Just going to rebase to pick up the new Percy diff changes

colinrotherham added the nunjucks label Dec 14, 2023

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 December 14, 2023 15:31 Inactive

colinrotherham force-pushed the form-group-attributes branch from 7715258 to bdce332 Compare December 14, 2023 15:39

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 December 14, 2023 15:39 Inactive

colinrotherham force-pushed the form-group-attributes branch from bdce332 to 1aaea98 Compare December 14, 2023 18:53

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 December 14, 2023 18:53 Inactive

colinrotherham force-pushed the form-group-attributes branch from 1aaea98 to 3043764 Compare January 8, 2024 16:31

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 January 8, 2024 16:31 Inactive

romaricpascal reviewed Jan 9, 2024

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 January 10, 2024 11:44 Inactive

owenatgov added this to the v5.1 milestone Jan 10, 2024

owenatgov approved these changes Jan 10, 2024

View reviewed changes

colinrotherham added 2 commits January 10, 2024 11:55

Allow attributes option on form groups

67342a8

Add CHANGELOG entry

f3a69e2

colinrotherham force-pushed the form-group-attributes branch from ce5d4bb to f3a69e2 Compare January 10, 2024 11:55

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 January 10, 2024 11:55 Inactive

colinrotherham merged commit c6dd08c into main Jan 10, 2024
45 checks passed

colinrotherham deleted the form-group-attributes branch January 10, 2024 14:20

querkmachine mentioned this pull request Feb 5, 2024

Release v5.1.0 #4734

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow `attributes` option on form groups #4565

Allow `attributes` option on form groups #4565

colinrotherham commented Dec 14, 2023 •

edited

github-actions bot commented Dec 14, 2023 •

edited

github-actions bot commented Dec 14, 2023 •

edited

romaricpascal left a comment

owenatgov left a comment

colinrotherham commented Jan 10, 2024

Allow attributes option on form groups #4565

Allow attributes option on form groups #4565

Conversation

colinrotherham commented Dec 14, 2023 • edited

github-actions bot commented Dec 14, 2023 • edited

📋 Stats

File sizes

Modules

github-actions bot commented Dec 14, 2023 • edited

Other changes to npm package

romaricpascal left a comment

Choose a reason for hiding this comment

owenatgov left a comment

Choose a reason for hiding this comment

colinrotherham commented Jan 10, 2024

Allow `attributes` option on form groups #4565

Allow `attributes` option on form groups #4565

colinrotherham commented Dec 14, 2023 •

edited

github-actions bot commented Dec 14, 2023 •

edited

github-actions bot commented Dec 14, 2023 •

edited