From db78328b197d271374a81c1b3584fce4b33d9045 Mon Sep 17 00:00:00 2001 From: owenatgov Date: Thu, 31 Aug 2023 15:34:16 +0100 Subject: [PATCH] Dynamically position text within input prefixes and suffixes We use flex on the prefix and suffix elements themselves to vertically and horizontally centre the text inside these elements. This is opposed to using a custom line height to move text closer to the centre on small screens. --- CHANGELOG.md | 6 ++++++ .../src/govuk/components/input/_index.scss | 13 ++++--------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a411fd023e..b404a248cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ For advice on how to use these release notes see [our guidance on staying up to ## Unreleased +### Fixes + +We've made fixes to GOV.UK Frontend in the following pull requests: + +- [#4157: Dynamically position text within input prefixes and suffixes](https://github.com/alphagov/govuk-frontend/pull/4157) + ## 5.0.0 (Breaking release) You can find a summary of the main [changes to GOV.UK Frontend v5](https://frontend.design-system.service.gov.uk/changes-to-govuk-frontend-v5/) on the Frontend site. It's important to note [our old frameworks (such as GOV.UK Elements)](https://frontend.design-system.service.gov.uk/v4/migrating-from-legacy-products/) are no longer compatible with this release. It also stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10. diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss index 5a71d64ff0..42ea92a7ee 100644 --- a/packages/govuk-frontend/src/govuk/components/input/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/input/_index.scss @@ -118,26 +118,21 @@ .govuk-input__prefix, .govuk-input__suffix { @include govuk-font($size: 19); - box-sizing: border-box; - display: inline-block; + // Use flexbox to align text within the prefix and suffix + display: flex; + align-items: center; + justify-content: center; min-width: govuk-px-to-rem(40px); height: govuk-px-to-rem(40px); padding: govuk-spacing(1); border: $govuk-border-width-form-element solid $govuk-input-border-colour; background-color: govuk-colour("light-grey"); - text-align: center; - @include govuk-media-query($until: tablet) { - line-height: 1.6; - } white-space: nowrap; - // Emphasise non-editable status of prefixes and suffixes cursor: default; - flex: 0 0 auto; - // Split prefix/suffix onto separate lines on narrow screens @include govuk-media-query($until: mobile) { display: block;