Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow attributes option on form groups #4565

Merged
merged 2 commits into from
Jan 10, 2024
Merged

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Dec 14, 2023

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

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

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

Copy link

github-actions bot commented Dec 14, 2023

📋 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

Copy link

github-actions bot commented Dec 14, 2023

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

Copy link
Member

@romaricpascal romaricpascal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@owenatgov owenatgov added this to the v5.1 milestone Jan 10, 2024
Copy link
Contributor

@owenatgov owenatgov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💪🏻

@colinrotherham
Copy link
Contributor Author

Thanks @owenatgov

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

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4565 January 10, 2024 11:55 Inactive
@colinrotherham colinrotherham merged commit c6dd08c into main Jan 10, 2024
45 checks passed
@colinrotherham colinrotherham deleted the form-group-attributes branch January 10, 2024 14:20
@querkmachine querkmachine mentioned this pull request Feb 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants