Fix password input button unexpectedly stretching

[querkmachine]

Fixes issue where the Password input toggle button unexpectedly stretched to fill any space not used by the text input, such as if the input has a restricted maximum width.

I think the flex-grow property may have been a leftover from earlier in the component's development, as it doesn't appear to serve any function in the current version of the component.

Fixes #4934.

Changes

• Removed the flex-grow property from the Password input toggle button.
• Added a review app example of a restricted width password input to help keep this in check in future.
• Tweaked wording of a few comments/documentation pieces.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.24 KiB
dist/govuk-frontend-development.min.js	42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	81.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.23 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	77.67 KiB	40.19 KiB
accordion.mjs	22.71 KiB	12.85 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 456394f

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 2c37191c5..75a932582 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -4666,7 +4666,6 @@ only screen and (min-resolution:2dppx) {
 @media (min-width:20em) {
     .govuk-password-input__toggle {
         width: auto;
-        flex-grow: 1;
         flex-shrink: 0;
         flex-basis: 5em;
         margin-top: 0;

---

Action run for 456394f

[github-actions]

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-input-width-class.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-input-width-class.html
new file mode 100644
index 000000000..50b62f217
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-input-width-class.html
@@ -0,0 +1,11 @@
+<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
+  <label class="govuk-label" for="password-input-width">
+    Password
+  </label>
+  <div class="govuk-input__wrapper govuk-password-input__wrapper">
+    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--width-10" id="password-input-width" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
+    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-width" aria-label="Show password" hidden>
+      Show
+    </button>
+  </div>
+</div>

---

Action run for 456394f

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
index 0fa68d8b4..a1dc27047 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/_index.scss
@@ -20,7 +20,7 @@
     // IE 11 and Microsoft Edge comes with its own password reveal function. We want to hide it,
     // so that there aren't two controls presented to the user that do the same thing but aren't in
     // sync with one another. This doesn't affect the function that allows Edge users to toggle
-    // password visibility by pressing Alt+F8, which cannot be programatically disabled.
+    // password visibility by pressing Alt+F8, which cannot be programmatically disabled.
     &::-ms-reveal {
       display: none;
     }
@@ -41,7 +41,6 @@
     @include govuk-media-query($from: mobile) {
       // Buttons are normally 100% width on this breakpoint, but we don't want that in this case
       width: auto;
-      flex-grow: 1;
       flex-shrink: 0;
       flex-basis: 5em;
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
index 5c14c2ad4..f4e99d0e1 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
@@ -68,6 +68,21 @@
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"password-input-with-page-heading\">\n      Password\n    </label>\n  </h1>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input-with-page-heading\" name=\"test-name\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-with-page-heading\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
         },
+        {
+            "name": "with input width class",
+            "options": {
+                "label": {
+                    "text": "Password"
+                },
+                "id": "password-input-width",
+                "name": "password",
+                "classes": "govuk-input--width-10"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-width\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--width-10\" id=\"password-input-width\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-width\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
+        },
         {
             "name": "with new-password autocomplete",
             "options": {
@@ -79,7 +94,7 @@
                 "name": "password"
             },
             "hidden": false,
-            "description": "Browsers and password managers should prompt to generate a password.",
+            "description": "Supporting browsers and password managers should prompt to generate a password.",
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n  <label class=\"govuk-label\" for=\"password-input-new-password\">\n    Password\n  </label>\n  <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n    <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input-new-password\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"new-password\" autocapitalize=\"none\">\n    <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input-new-password\" aria-label=\"Show password\" hidden>\n      Show\n    </button>\n  </div>\n</div>"
         },

---

Action run for 456394f

[owenatgov]

Easy peasy