Use Character count formGroup as module wrapper
#4566
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 46d2127 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
index 99c29c976..361afc3c0 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
@@ -14,7 +14,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with custom textarea description",
@@ -30,7 +30,7 @@
"hidden": false,
"description": "with textarea description translated into Welsh.",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"custom-textarea-description\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n\n <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n Gallwch ddefnyddio hyd at 10 nod\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"custom-textarea-description\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n Gallwch ddefnyddio hyd at 10 nod\n </div>\n</div>"
},
{
"name": "with hint",
@@ -48,7 +48,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint\">\n Can you provide more detail?\n </label>\n <div id=\"with-hint-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-hint\">\n Can you provide more detail?\n </label>\n <div id=\"with-hint-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with default value",
@@ -64,7 +64,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-default-value\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 100 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n <label class=\"govuk-label\" for=\"with-default-value\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 100 characters\n </div>\n</div>"
},
{
"name": "with default value exceeding limit",
@@ -83,7 +83,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with custom rows",
@@ -99,7 +99,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"custom-rows\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"custom-rows\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with label as page heading",
@@ -116,7 +116,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with word count",
@@ -131,7 +131,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"word-count\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 words\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n <label class=\"govuk-label\" for=\"word-count\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 words\n </div>\n</div>"
},
{
"name": "with threshold",
@@ -147,7 +147,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-threshold\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n <label class=\"govuk-label\" for=\"with-threshold\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with translations",
@@ -180,7 +180,7 @@
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-translations\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n\n <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n <label class=\"govuk-label\" for=\"with-translations\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "classes",
@@ -196,7 +196,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "attributes",
@@ -214,7 +214,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "formGroup with classes",
@@ -232,7 +232,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group app-character-count--custom-modifier\">\n <label class=\"govuk-label\" for=\"with-formgroup\">\n With formgroup\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count app-character-count--custom-modifier\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-formgroup\">\n With formgroup\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "custom classes on countMessage",
@@ -250,7 +250,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n With custom countMessage class\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n With custom countMessage class\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "spellcheck enabled",
@@ -266,7 +266,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-spellcheck\">\n With spellcheck\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-spellcheck\">\n With spellcheck\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "spellcheck disabled",
@@ -282,7 +282,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"without-spellcheck\">\n Without spellcheck\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"without-spellcheck\">\n Without spellcheck\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "custom classes with error message",
@@ -301,7 +301,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with id starting with number",
@@ -316,7 +316,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"1_more-detail\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"1_more-detail\">\n Can you provide more detail?\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with id with special characters",
@@ -331,7 +331,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"user1.profile[address]\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n\n <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"user1.profile[address]\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "with textarea maxlength attribute",
@@ -349,7 +349,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n</div>\n\n <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
{
"name": "to configure in JavaScript",
@@ -363,7 +363,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n</div>\n\n <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
},
{
"name": "when neither maxlength nor maxwords are set",
@@ -378,7 +378,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"no-maximum\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n <label class=\"govuk-label\" for=\"no-maximum\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
},
{
"name": "when neither maxlength/maxwords nor textarea description are set",
@@ -392,7 +392,7 @@
"hidden": true,
"description": "",
"previewLayoutModifiers": [],
- "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"no-maximum\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\">\n <label class=\"govuk-label\" for=\"no-maximum\">\n Full address\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n \n </div>\n</div>"
}
]
}
Action run for 46d2127 |
colinrotherham
commented
Dec 14, 2023
packages/govuk-frontend/src/govuk/components/character-count/template.njk
Outdated
Show resolved
Hide resolved
colinrotherham
force-pushed
the
character-count-form-group
branch
from
1def005
to
fff0385
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
force-pushed
the
character-count-form-group
branch
from
fff0385
to
3f41d4c
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
changed the base branch from
form-group-attributes
to
form-group-html
colinrotherham
force-pushed
the
form-group-html
branch
from
6fe8308
to
fb96852
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
3f41d4c
to
8827cc8
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
force-pushed
the
form-group-html
branch
2 times, most recently
from
413c8d4
to
77b9c13
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
8827cc8
to
3292e8d
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
force-pushed
the
form-group-html
branch
from
77b9c13
to
71933c7
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
3292e8d
to
1c2d663
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
force-pushed
the
form-group-html
branch
from
a6d8ceb
to
e56ea8f
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
1c2d663
to
9aea0fd
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
index 7aa5d0683..cce9f4a09 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-info"></textarea>
-</div>
-
<div id="more-detail-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
index df97c98ec..ff6ded703 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<label class="govuk-label" for="custom-rows">
Full address
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
-</div>
-
<div id="custom-rows-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
index ac80215f9..192aeae3c 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<label class="govuk-label" for="custom-textarea-description">
Can you provide more detail?
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="custom-textarea-description" name="custom-textarea-description" rows="5" aria-describedby="custom-textarea-description-info"></textarea>
-</div>
-
<div id="custom-textarea-description-info" class="govuk-hint govuk-character-count__message">
Gallwch ddefnyddio hyd at 10 nod
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
index 849b7830b..20d412559 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
@@ -1,5 +1,4 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group govuk-form-group--error">
+<div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<label class="govuk-label" for="exceeding-characters">
Full address
</label>
@@ -10,8 +9,6 @@
London
NW1 6XE
</textarea>
-</div>
-
<div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
index c16e0a87e..db188e623 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
@@ -1,5 +1,4 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
<label class="govuk-label" for="with-default-value">
Full address
</label>
@@ -7,8 +6,6 @@
London
NW1 6XE
</textarea>
-</div>
-
<div id="with-default-value-info" class="govuk-hint govuk-character-count__message">
You can enter up to 100 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
index 7ca3138c7..00aa1ed90 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
@@ -1,5 +1,4 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<label class="govuk-label" for="with-hint">
Can you provide more detail?
</label>
@@ -7,8 +6,6 @@
Don't include personal or financial information, eg your National Insurance number or credit card details.
</div>
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
-</div>
-
<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
index d09d370bf..c28b7f863 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
@@ -1,13 +1,10 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
Full address
</label>
</h1>
<textarea class="govuk-textarea govuk-js-character-count" id="textarea-with-page-heading" name="address" rows="5" aria-describedby="textarea-with-page-heading-info"></textarea>
-</div>
-
<div id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
index 12d156d66..9b10f566f 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
<label class="govuk-label" for="with-threshold">
Full address
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
-</div>
-
<div id="with-threshold-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
index 912a59e17..e2ac6321b 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-i18n.characters-under-limit.other="%{count} characters to go" data-i18n.characters-under-limit.one="One character to go" data-i18n.characters-at-limit="Zero characters left" data-i18n.characters-over-limit.other="%{count} characters too many" data-i18n.characters-over-limit.one="One character too many" data-i18n.words-under-limit.other="%{count} words to go" data-i18n.words-under-limit.one="One word to go" data-i18n.words-at-limit="Zero words left" data-i18n.words-over-limit.other="%{count} words too many" data-i18n.words-over-limit.one="One word too many">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-i18n.characters-under-limit.other="%{count} characters to go" data-i18n.characters-under-limit.one="One character to go" data-i18n.characters-at-limit="Zero characters left" data-i18n.characters-over-limit.other="%{count} characters too many" data-i18n.characters-over-limit.one="One character too many" data-i18n.words-under-limit.other="%{count} words to go" data-i18n.words-under-limit.one="One word to go" data-i18n.words-at-limit="Zero words left" data-i18n.words-over-limit.other="%{count} words too many" data-i18n.words-over-limit.one="One word too many">
<label class="govuk-label" for="with-translations">
Full address
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="with-translations" name="with-translations" rows="5" aria-describedby="with-translations-info"></textarea>
-</div>
-
<div id="with-translations-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 characters
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
index 95fd9bb92..ec95cc660 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
@@ -1,11 +1,8 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="10">
- <div class="govuk-form-group">
+<div class="govuk-form-group govuk-character-count" data-module="govuk-character-count" data-maxwords="10">
<label class="govuk-label" for="word-count">
Full address
</label>
<textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
-</div>
-
<div id="word-count-info" class="govuk-hint govuk-character-count__message">
You can enter up to 10 words
</div>
Action run for 46d2127 |
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
colinrotherham
added a commit
that referenced
this pull request
Feb 27, 2024
This change uses attributes as a string as suggested in #4566 (comment) Made possible in PR #4742 Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
colinrotherham
force-pushed
the
character-count-form-group
branch
from
3c0b968
to
4c5e37b
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4566
querkmachine
approved these changes
Feb 29, 2024
There was a problem hiding this comment.
This change makes sense to me. (Probably helps that having random wrapping elements outside of govuk-form-groups was a minor bugbear of mine.)
I vaguely ponder if this is a breaking change, but I don't think it necessarily is. Regardless, it probably needs a "Suggested change" changelog entry to avoid any surprises if a team has written anything that anticipates a specific HTML structure.
This change uses attributes as a string as suggested in #4566 (comment) Made possible in PR #4742 Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
This removes the wrapping data-module `<div>` and puts all attributes on the Textarea `formGroup` instead
colinrotherham
force-pushed
the
character-count-form-group
branch
from
4c5e37b
to
e096f92
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
e096f92
to
3a7f373
Compare
domoscargin
reviewed
Mar 6, 2024
colinrotherham
force-pushed
the
character-count-form-group
branch
from
3a7f373
to
3e436c9
Compare
claireashworth
approved these changes
Mar 6, 2024
colinrotherham
force-pushed
the
character-count-form-group
branch
from
3e436c9
to
68c7c41
Compare
colinrotherham
force-pushed
the
character-count-form-group
branch
from
68c7c41
to
46d2127
Compare
Merged
owenatgov
pushed a commit
that referenced
this pull request
Apr 4, 2024
This change uses attributes as a string as suggested in #4566 (comment) Made possible in PR #4742 Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
This was referenced Jun 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a non-breaking change to remove an unnecessary Character count wrapper
It uses the same
afterInputapproach adopted by Password input in #4442Closes #1602, closes #1649 and closes #2893
Before
The Character count component includes both a
data-modulewrapper and Textarea form groupAfter
The Character count component adds
data-moduledirectly onto the Textarea form group