You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/upgrade-to-6.0.md
+60Lines changed: 60 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,10 +18,70 @@ The updated [header](https://service-manual.nhs.uk/design-system/components/head
18
18
- update NHS logo in the header to have higher contrast when focused
19
19
- refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element
20
20
21
+
#### Use the password input component to help users accessibly enter passwords
22
+
23
+
The [password input](https://service-manual.nhs.uk/design-system/components/password-input) component from NHS.UK frontend v10.2 allows users to choose:
24
+
25
+
- whether their passwords are visible or not
26
+
- to enter their passwords in plain text
27
+
28
+
This helps users use longer and more complex passwords without needing to remember what they've already typed.
29
+
21
30
#### Smaller versions of radio buttons and checkboxes
22
31
23
32
You can now use smaller versions of the [radios](https://service-manual.nhs.uk/design-system/components/radios) and [checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes) components by adding the `small` prop.
24
33
34
+
#### Smaller versions of buttons
35
+
36
+
You can now use smaller versions of [buttons](https://service-manual.nhs.uk/design-system/components/buttons) by adding the `small` prop.
37
+
38
+
#### Add inline buttons to text inputs and select menus
39
+
40
+
You can now add inline buttons to text inputs and select menus using the `formGroupProps.afterInput` prop.
41
+
42
+
```jsx
43
+
<TextInput
44
+
formGroupProps={{
45
+
afterInput: () => (
46
+
<Button secondary small>
47
+
Search
48
+
</Button>
49
+
),
50
+
}},
51
+
/>
52
+
```
53
+
54
+
#### Add a 'code' prop for text inputs that accept codes and sequences
55
+
56
+
We've added a new `code` prop for the [text input](https://service-manual.nhs.uk/design-system/components/text-input) component. This improves readability of text inputs that receive codes and sequences (like NHS numbers, security codes or booking references).
57
+
58
+
```patch
59
+
<TextInput
60
+
label="What is your NHS number?"
61
+
labelProps={{ isPageHeading: true, size: 'l' }}
62
+
inputMode="numeric"
63
+
spellCheck="false"
64
+
width="10"
65
+
+ code
66
+
/>
67
+
```
68
+
69
+
#### Add a 'divider' between select options
70
+
71
+
Newer browsers support [using `<hr>` (horizontal rule) elements inside a `<select>` element](https://developer.chrome.com/blog/hr-in-select/) to help visually break up options for better readability.
72
+
73
+
We've added a new `<Select.Divider />` child component for select menus to support this feature. For example:
74
+
75
+
```patch
76
+
<Select>
77
+
<Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
78
+
<Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
79
+
+ <Select.Divider />
80
+
<Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
81
+
<Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
82
+
</Select>
83
+
```
84
+
25
85
### Numbered pagination component
26
86
27
87
The [pagination](https://service-manual.nhs.uk/design-system/components/pagination) component from NHS.UK frontend v10.1 has been updated to support numbered pagination:
0 commit comments