diff --git a/CHANGELOG.md b/CHANGELOG.md index 687e5730fd..4091015a59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,14 @@ The [Button](https://design-system.service.gov.uk/components/button/) Nunjucks m This was added in [pull request #3344: Adding optional id attribute to button component](https://github.com/alphagov/govuk-frontend/pull/3344). Thanks to [Tom Billington](https://github.com/TomBillingtonUK) for this contribution. +### Added a modifier for text input styles that accept sequences of digits + +We've added a new `.govuk-input--extra-letter-spacing` class for [Text Input](https://design-system.service.gov.uk/components/text-input/). This increases readability of text inputs that receive sequences of digits (like security codes, references or phone numbers). + +You can add it through the `classes` option when using Nunjucks, or directly in the `class` attribute of the `` when using HTML. + +This was added in [pull request #2230: Add extra letter spacing modifier for inputs](https://github.com/alphagov/govuk-frontend/pull/2230) + ### Deprecated features #### Stop using the `govuk-button--disabled` class on buttons diff --git a/src/govuk/components/input/_index.scss b/src/govuk/components/input/_index.scss index 516d3cd6c8..6791c98bd3 100644 --- a/src/govuk/components/input/_index.scss +++ b/src/govuk/components/input/_index.scss @@ -66,6 +66,11 @@ } } + .govuk-input--extra-letter-spacing { + @include govuk-font(false, $tabular: true); + letter-spacing: .05em; + } + // em measurements are based on the point size of the typeface // Extra space is added on the right hand side to allow for the Safari prefill icon diff --git a/src/govuk/components/input/input.yaml b/src/govuk/components/input/input.yaml index 2926df24d8..a468e0743d 100644 --- a/src/govuk/components/input/input.yaml +++ b/src/govuk/components/input/input.yaml @@ -311,6 +311,13 @@ examples: text: £ suffix: text: per item + - name: with extra letter spacing + data: + id: input-with-extra-letter-spacing + label: + text: National insurance number + classes: govuk-input--width-30 govuk-input--extra-letter-spacing + value: QQ 12 34 56 C # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: classes