Skip to content

Commit 49de527

Browse files
colinrotherhamcolinrotherham
committed
Uplift GOV.UK Frontend text input component
1 parent 9c74ed4 commit 49de527

File tree

4 files changed

+179
-66
lines changed

4 files changed

+179
-66
lines changed

‎packages/nhsuk-frontend/src/nhsuk/components/header/_index.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use "../../core/settings" as *;
44
@use "../../core/tools" as *;
55
@use "../../core/helpers" as *;
6+
@forward "../input";
67

78
////
89
/// Header component
@@ -312,7 +313,8 @@ $nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;
312313
&:focus {
313314
z-index: 10;
314315
padding-right: $_header-item-padding - $_header-border-width-form-element;
315-
padding-left: $_header-item-padding - $_header-border-width-form-element;
316+
padding-left: $_header-item-padding - ($_header-border-width-form-element * 2);
317+
border: $nhsuk-border-width-form-element solid $nhsuk-focus-text-colour;
316318
}
317319

318320
&::placeholder {

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

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
@use "../../core/settings" as *;
22
@use "../../core/tools" as *;
33
@use "../../core/helpers" as *;
4+
@forward "../error-message";
5+
@forward "../hint";
6+
@forward "../label";
47

58
////
69
/// Input component
710
///
8-
/// 1. Disable inner shadow and remove rounded corners
9-
/// 2. setting any background-color makes text invisible when changing colours to dark
10-
/// backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
11-
/// as background-color and color need to always be set together, color should
12-
/// not be set either.
13-
///
1411
/// @group components/input
1512
////
1613

@@ -19,20 +16,31 @@
1916
box-sizing: border-box;
2017

2118
width: 100%;
22-
min-height: 40px;
19+
height: nhsuk-px-to-rem(40px);
2320
margin-top: 0;
2421
padding: nhsuk-spacing(1);
25-
26-
border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour; // [2]
22+
// Setting any background-color makes text invisible when changing colours
23+
// to dark backgrounds in Firefox (https://bugzil.la/1335476). As
24+
// background-color and color need to always be set together, color should
25+
// not be set either
26+
border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
2727
border-radius: 0;
2828

29-
appearance: none; // [1]
29+
// Disable inner shadow and remove rounded corners
30+
appearance: none;
3031

31-
@include nhsuk-font(19);
32+
@include nhsuk-font($size: 19);
3233

3334
&:focus {
3435
@include nhsuk-focused-input;
3536
}
37+
38+
&:disabled {
39+
opacity: 0.5;
40+
color: inherit;
41+
background-color: transparent;
42+
cursor: not-allowed;
43+
}
3644
}
3745

3846
.nhsuk-input::-webkit-outer-spin-button,
@@ -81,8 +89,6 @@
8189
max-width: 5.4ex;
8290
}
8391

84-
// Suffix and prefix
85-
8692
.nhsuk-input__wrapper {
8793
display: flex;
8894

@@ -95,6 +101,7 @@
95101
z-index: 1;
96102
}
97103

104+
// Split prefix/suffix onto separate lines on narrow screens
98105
@include nhsuk-media-query($until: mobile) {
99106
display: block;
100107

@@ -108,13 +115,15 @@
108115
.nhsuk-input__prefix,
109116
.nhsuk-input__suffix {
110117
box-sizing: border-box;
111-
112-
display: inline-block;
118+
// Use flexbox to align text within the prefix and suffix
119+
display: flex;
113120

114121
flex: 0 0 auto;
122+
align-items: center;
123+
justify-content: center;
115124

116125
min-width: nhsuk-px-to-rem(40px);
117-
min-height: 40px;
126+
height: nhsuk-px-to-rem(40px);
118127
padding: nhsuk-spacing(1);
119128

120129
border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;
@@ -123,21 +132,17 @@
123132

124133
text-align: center;
125134
white-space: nowrap;
126-
127-
cursor: default; // emphasises non-editable status of prefixes and suffixes
135+
// Emphasise non-editable status of prefixes and suffixes
136+
cursor: default;
128137

129138
@include nhsuk-font($size: 19);
130139

140+
// Split prefix/suffix onto separate lines on narrow screens
131141
@include nhsuk-media-query($until: mobile) {
132142
display: block;
133143
height: 100%;
134144
white-space: normal;
135145
}
136-
137-
@include nhsuk-media-query($until: tablet) {
138-
font-size: 1.1875rem;
139-
line-height: 1.6;
140-
}
141146
}
142147

143148
.nhsuk-input__prefix {
@@ -149,6 +154,7 @@
149154
}
150155
}
151156

157+
// Split prefix/suffix onto separate lines on narrow screens
152158
.nhsuk-input__suffix {
153159
@include nhsuk-media-query($until: mobile) {
154160
border-top: 0;

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,19 @@ export const params = {
2626
inputmode: {
2727
type: 'string',
2828
required: false,
29-
description: 'Optional value for inputmode.'
29+
description:
30+
'Optional value for [the inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).'
3031
},
3132
value: {
3233
type: 'string',
3334
required: false,
3435
description: 'Optional initial value of the input.'
3536
},
37+
disabled: {
38+
type: 'boolean',
39+
required: false,
40+
description: 'If `true`, input will be disabled.'
41+
},
3642
describedBy: {
3743
type: 'string',
3844
required: false,
@@ -74,6 +80,17 @@ export const params = {
7480
required: true,
7581
description:
7682
'If `text` is set, this is not required. HTML to use within the prefix. If `html` is provided, the `text` option will be ignored.'
83+
},
84+
classes: {
85+
type: 'string',
86+
required: false,
87+
description: 'Classes to add to the prefix.'
88+
},
89+
attributes: {
90+
type: 'object',
91+
required: false,
92+
description:
93+
'HTML attributes (for example data attributes) to add to the prefix element.'
7794
}
7895
}
7996
},
@@ -93,6 +110,17 @@ export const params = {
93110
required: true,
94111
description:
95112
'If `text` is set, this is not required. HTML to use within the suffix. If `html` is provided, the `text` option will be ignored.'
113+
},
114+
classes: {
115+
type: 'string',
116+
required: false,
117+
description: 'Classes to add to the suffix.'
118+
},
119+
attributes: {
120+
type: 'object',
121+
required: false,
122+
description:
123+
'HTML attributes (for example data attributes) to add to the suffix element.'
96124
}
97125
}
98126
},
@@ -179,6 +207,31 @@ export const params = {
179207
description:
180208
'Optional field to enable or disable the spellcheck attribute on the input.'
181209
},
210+
autocapitalize: {
211+
type: 'string',
212+
required: false,
213+
description:
214+
'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.'
215+
},
216+
inputWrapper: {
217+
type: 'object',
218+
required: false,
219+
description:
220+
'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.',
221+
params: {
222+
classes: {
223+
type: 'string',
224+
required: false,
225+
description: 'Classes to add to the wrapping element.'
226+
},
227+
attributes: {
228+
type: 'object',
229+
required: false,
230+
description:
231+
'HTML attributes (for example data attributes) to add to the wrapping element.'
232+
}
233+
}
234+
},
182235
attributes: {
183236
type: 'object',
184237
required: false,

0 commit comments

Comments
 (0)