Uplift GOV.UK Frontend text input component

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/components/input/_index.scss

@@ -1,41 +1,51 @@
 @use "../../core/settings" as *;
 @use "../../core/tools" as *;
 @use "../../core/helpers" as *;
+@forward "../error-message";
+@forward "../hint";
+@forward "../label";
 
 ////
 /// Input component
 ///
-/// 1. Disable inner shadow and remove rounded corners
-/// 2. setting any background-color makes text invisible when changing colours to dark
-///    backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
-///    as background-color and color need to always be set together, color should
-///    not be set either.
-///
 /// @group components/input
 ////
 
 @include nhsuk-exports("nhsuk/components/input") {
   .nhsuk-input {
-    appearance: none; // [1]
-    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour; // [2]
-    border-radius: 0;
     box-sizing: border-box;
-    min-height: 40px;
+    width: 100%;
+    height: nhsuk-px-to-rem(40px);
     margin-top: 0;
     padding: nhsuk-spacing(1);
-    width: 100%;
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+    border-radius: 0;
 
-    @include nhsuk-font(19);
+    // Disable inner shadow and remove rounded corners
+    appearance: none;
+
+    @include nhsuk-font($size: 19);
 
     &:focus {
       @include nhsuk-focused-input;
     }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
   }
 
   .nhsuk-input::-webkit-outer-spin-button,
   .nhsuk-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
     margin: 0;
+    -webkit-appearance: none;
   }
 
   .nhsuk-input[type="number"] {
@@ -46,6 +56,10 @@
     border-color: $nhsuk-error-colour;
   }
 
+  .nhsuk-input--extra-letter-spacing {
+    letter-spacing: 0.05em;
+  }
+
   // The ex measurements are based on the number of W's that can fit inside the input
   // Extra space is left on the right hand side to allow for the Safari prefill icon
   // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
@@ -78,8 +92,6 @@
     max-width: 5.4ex;
   }
 
-  // Suffix and prefix
-
   .nhsuk-input__wrapper {
     display: flex;
 
@@ -92,6 +104,7 @@
       z-index: 1;
     }
 
+    // Split prefix/suffix onto separate lines on narrow screens
     @include nhsuk-media-query($until: mobile) {
       display: block;
 
@@ -104,30 +117,30 @@
 
   .nhsuk-input__prefix,
   .nhsuk-input__suffix {
-    background-color: nhsuk-colour("grey-4");
-    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
     box-sizing: border-box;
-    cursor: default; // emphasises non-editable status of prefixes and suffixes
-    display: inline-block;
-    flex: 0 0 auto;
-    min-height: 40px;
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    align-items: center;
+    justify-content: center;
     min-width: nhsuk-px-to-rem(40px);
+    height: nhsuk-px-to-rem(40px);
     padding: nhsuk-spacing(1);
+    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
+    background-color: nhsuk-colour("grey-4");
     text-align: center;
     white-space: nowrap;
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+    flex: 0 0 auto;
 
     @include nhsuk-font($size: 19);
 
+    // Split prefix/suffix onto separate lines on narrow screens
     @include nhsuk-media-query($until: mobile) {
       display: block;
       height: 100%;
       white-space: normal;
     }
-
-    @include nhsuk-media-query($until: tablet) {
-      line-height: 1.6;
-      font-size: 1.1875rem;
-    }
   }
 
   .nhsuk-input__prefix {
@@ -139,6 +152,7 @@
     }
   }
 
+  // Split prefix/suffix onto separate lines on narrow screens
   .nhsuk-input__suffix {
     @include nhsuk-media-query($until: mobile) {
       border-top: 0;

packages/nhsuk-frontend/src/nhsuk/components/input/macro-options.mjs

@@ -26,13 +26,19 @@ export const params = {
   inputmode: {
     type: 'string',
     required: false,
-    description: 'Optional value for inputmode.'
+    description:
+      'Optional value for [the inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).'
   },
   value: {
     type: 'string',
     required: false,
     description: 'Optional initial value of the input.'
   },
+  disabled: {
+    type: 'boolean',
+    required: false,
+    description: 'If `true`, input will be disabled.'
+  },
   describedBy: {
     type: 'string',
     required: false,
@@ -59,14 +65,64 @@ export const params = {
     isComponent: true
   },
   prefix: {
-    type: 'string',
+    type: 'object',
     required: false,
-    description: 'Optional prefix text to be displayed before the input.'
+    description: 'Can be used to add a prefix to the text input component.',
+    params: {
+      text: {
+        type: 'string',
+        required: true,
+        description:
+          'If `html` is set, this is not required. Text to use within the prefix. If `html` is provided, the `text` option will be ignored.'
+      },
+      html: {
+        type: 'string',
+        required: true,
+        description:
+          'If `text` is set, this is not required. HTML to use within the prefix. If `html` is provided, the `text` option will be ignored.'
+      },
+      classes: {
+        type: 'string',
+        required: false,
+        description: 'Classes to add to the prefix.'
+      },
+      attributes: {
+        type: 'object',
+        required: false,
+        description:
+          'HTML attributes (for example data attributes) to add to the prefix element.'
+      }
+    }
   },
   suffix: {
-    type: 'string',
+    type: 'object',
     required: false,
-    description: 'Optional suffix text to be displayed after the input.'
+    description: 'Can be used to add a suffix to the text input component.',
+    params: {
+      text: {
+        type: 'string',
+        required: true,
+        description:
+          'If `html` is set, this is not required. Text to use within the suffix. If `html` is provided, the `text` option will be ignored.'
+      },
+      html: {
+        type: 'string',
+        required: true,
+        description:
+          'If `text` is set, this is not required. HTML to use within the suffix. If `html` is provided, the `text` option will be ignored.'
+      },
+      classes: {
+        type: 'string',
+        required: false,
+        description: 'Classes to add to the suffix.'
+      },
+      attributes: {
+        type: 'object',
+        required: false,
+        description:
+          'HTML attributes (for example data attributes) to add to the suffix element.'
+      }
+    }
   },
   formGroup: {
     type: 'object',
@@ -151,6 +207,31 @@ export const params = {
     description:
       'Optional field to enable or disable the spellcheck attribute on the input.'
   },
+  autocapitalize: {
+    type: 'string',
+    required: false,
+    description:
+      'Optional field to enable or disable autocapitalisation of user input. [See the Autocapitalization section in the HTML spec](https://html.spec.whatwg.org/multipage/interaction.html#autocapitalization) for a full list of values that can be used.'
+  },
+  inputWrapper: {
+    type: 'object',
+    required: false,
+    description:
+      'If any of `prefix`, `suffix`, `formGroup.beforeInput` or `formGroup.afterInput` have a value, a wrapping element is added around the input and inserted content. This object allows you to customise that wrapping element.',
+    params: {
+      classes: {
+        type: 'string',
+        required: false,
+        description: 'Classes to add to the wrapping element.'
+      },
+      attributes: {
+        type: 'object',
+        required: false,
+        description:
+          'HTML attributes (for example data attributes) to add to the wrapping element.'
+      }
+    }
+  },
   attributes: {
     type: 'object',
     required: false,
@@ -218,6 +299,20 @@ export const examples = {
       selector: '#with-hint-error'
     }
   },
+  'with extra letter spacing': {
+    context: {
+      label: {
+        text: 'NHS number'
+      },
+      hint: {
+        text: "It's a 10-digit number that's on any letter the NHS has sent you, for example, 485 777 3456"
+      },
+      id: 'with-extra-letter-spacing',
+      name: 'example',
+      value: '485 777 3456',
+      classes: 'nhsuk-input--width-30 nhsuk-input--extra-letter-spacing'
+    }
+  },
   'with width-2 class': {
     context: {
       label: {