Skip to content

Commit fe482be

Browse files
colinrotherhamcolinrotherham
committed
[WIP] Document breaking changes
1 parent 7a62b42 commit fe482be

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎docs/upgrade-to-6.0.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
# Upgrading to 6.0
2+
3+
There are some breaking changes you'll need to be aware of when upgrading to v6.
4+
5+
[NHS.UK frontend v10.0.0](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v10.0.0) introduces some breaking changes to file paths, full width buttons on mobile, the header component and others. It also stops Internet Explorer 11 and other older browsers from running NHS.UK frontend JavaScript.
6+
7+
You must read and apply these updates carefully to make sure your service does not break.
8+
9+
## Breaking changes
10+
11+
### Update the JavaScript supported script snippet
12+
13+
You must now use the NHS.UK frontend v10.x feature detection snippet to check for `<script type="module">`. This change enables styling for JavaScript only features in [supported browsers]() only:
14+
15+
```patch
16+
- <body class="js-enabled">
17+
+ <body>
18+
+ <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');</script>
19+
```
20+
21+
### Restore visually hidden text for accessibility
22+
23+
For accessibility reasons, it's no longer possible to pass `visuallyHiddenText: false` or override other hidden text for the following:
24+
25+
- [**Breadcrumbs** back link prefix](https://service-manual.nhs.uk/design-system/components/breadcrumbs)
26+
- [**Care card** urgency level](https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care)
27+
- [**Contents list** links heading](https://service-manual.nhs.uk/design-system/components/contents-list)
28+
- [**Inset text** prefix](https://service-manual.nhs.uk/design-system/components/inset-text)
29+
- [**Warning callout** prefix](https://service-manual.nhs.uk/design-system/components/warning-callout)
30+
31+
Read about other [changes to meet WCAG 2.2](https://service-manual.nhs.uk/design-system/changes-to-design-system-wcag-2-2) on the design system in the NHS digital service manual.
32+
33+
### Check components that conditionally reveal content still work
34+
35+
Previously, conditionally revealing content ([radios](https://service-manual.nhs.uk/design-system/components/radios#conditionally-revealing-content), [checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes#conditionally-revealing-content)) would not be rendered until their related input was checked.
36+
37+
To align with NHS.UK frontend, conditionally revealing content is now always rendered but remains hidden until revealed. Accessibility issues with missing `aria-controls`, `aria-describedby` or `aria-expanded` are now fixed.
38+
39+
You must check all form components, form validation and error handling that may not expect hidden conditionally revealing content in the HTML.
40+
41+
### Remove unsupported icons
42+
43+
To align with NHS.UK frontend, icons unused by components have been removed:
44+
45+
- `ChevronLeftIcon`
46+
- `ChevronRightIcon`
47+
- `ChevronDownIcon`
48+
- `CloseIcon`
49+
- `EmdashIcon` and `SmallEmdashIcon`
50+
- `MinusIcon`
51+
- `PlusIcon`
52+
53+
### Back link
54+
55+
To align with NHS.UK frontend, we've added an underline to the [back link component](https://service-manual.nhs.uk/design-system/components/back-link). We've also changed the default text from "Go back" to "Back" in all examples.
56+
57+
### Button
58+
59+
To align with NHS.UK frontend, we've updated the [button component](https://service-manual.nhs.uk/design-system/components/buttons) to remove any references to the `nhsuk-button--disabled` class.
60+
61+
Use the [`disabled` HTML boolean attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled) to mark `<button>` elements as being disabled instead.
62+
63+
You must also make the following changes:
64+
65+
- replace `<DefaultButton>` with `<Button>` to render HTML `<button>` elements
66+
- replace `<LinkButton>` with `<Button href="/example">` to render HTML `<a>` elements
67+
- remove the `debounceTimeout` prop when preventing double clicks
68+
69+
### Character count
70+
71+
To align with NHS.UK frontend, we have removed `enum CharacterCountType` and you must make the following changes:
72+
73+
- use the `maxLength` prop for maximum characters only
74+
- use the `maxWords` prop for maximum words only
75+
- rename the `thresholdPercent` prop to `threshold`
76+
- remove the `countType` prop
77+
78+
To count maximum characters:
79+
80+
```patch
81+
- <CharacterCountComponent maxLength={350} countType={CharacterCountType.Characters} textAreaId="example">
82+
+ <CharacterCountComponent maxLength={350} textAreaId="example">
83+
```
84+
85+
To count maximum words:
86+
87+
```patch
88+
- <CharacterCountComponent maxLength={20} countType={CharacterCountType.Words} textAreaId="example">
89+
+ <CharacterCountComponent maxWords={20} textAreaId="example">
90+
```
91+
92+
### New header component with account section
93+
94+
The updated header component from NHS.UK frontend v10.x has been added. You will need to make the following changes:
95+
96+
- remove the wrapping `Header.Container` component
97+
- remove the wrapping `Header.Content` component
98+
- remove the automatically created `HeaderComponent.ServiceName` component
99+
- remove the automatically created `Header.NavDropdownMenu` component
100+
- rename the `Header.Nav` component to `Header.Navigation`
101+
- rename the `Header.NavItem` component to `Header.NavigationItem`
102+
103+
```patch
104+
<Header>
105+
- <Header.Container>
106+
- <Header.Logo href="/" />
107+
- <Header.Content>
108+
- <Header.Search />
109+
- </Header.Content>
110+
- </Header.Container>
111+
+ <Header.Logo href="/" />
112+
+ <Header.Search />
113+
- <Header.Nav>
114+
- <Header.NavItem href="#">Example 1</Header.NavItem>
115+
- <Header.NavItem href="#">Example 2</Header.NavItem>
116+
- <Header.NavItem href="#">Example 3</Header.NavItem>
117+
- <Header.NavItem href="#">Example 4</Header.NavItem>
118+
- <Header.NavDropdownMenu />
119+
- </Header.Nav>
120+
+ <Header.Navigation>
121+
+ <Header.NavigationItem href="#">Example 1</Header.NavigationItem>
122+
+ <Header.NavigationItem href="#">Example 2</Header.NavigationItem>
123+
+ <Header.NavigationItem href="#">Example 3</Header.NavigationItem>
124+
+ <Header.NavigationItem href="#">Example 4</Header.NavigationItem>
125+
+ </Header.Navigation>
126+
</Header>
127+
```
128+
129+
### Footer
130+
131+
The updated footer component from NHS.UK frontend v10.x has been added. You will need to make the following changes:
132+
133+
- replace `<Footer.List className="nhsuk-footer__meta">` with `<Header.Meta>`
134+
- nest the `Footer.Copyright` component into `Header.Meta` component
135+
136+
```patch
137+
<Footer>
138+
<Footer.List>
139+
<Footer.ListItem href="#">Item 1</Footer.ListItem>
140+
<Footer.ListItem href="#">Item 2</Footer.ListItem>
141+
<Footer.ListItem href="#">Item 3</Footer.ListItem>
142+
</Footer.List>
143+
144+
- <Footer.List className="nhsuk-footer__meta">
145+
+ <Footer.Meta>
146+
<Footer.ListItem href="#">Meta 1</Footer.ListItem>
147+
<Footer.ListItem href="#">Meta 2</Footer.ListItem>
148+
<Footer.ListItem href="#">Meta 3</Footer.ListItem>
149+
+
150+
+ <Footer.Copyright />
151+
- </Footer.List>
152+
+ </Footer.Meta>
153+
- <Footer.Copyright />
154+
</Footer>
155+
```
156+
157+
### Radios
158+
159+
To align with NHS.UK frontend, the radios `Radios.Radio` component has been renamed to `Radios.Item` as shown:
160+
161+
```patch
162+
<Radios>
163+
- <Radios.Radio value="yes">Yes</Radios.Radio>
164+
- <Radios.Radio value="no">No</Radios.Radio>
165+
+ <Radios.Item value="yes">Yes</Radios.Item>
166+
+ <Radios.Item value="no">No</Radios.Item>
167+
</Radios>
168+
```
169+
170+
### Checkboxes
171+
172+
To align with NHS.UK frontend, the checkboxes `Checkboxes.Box` component has been renamed to `Checkboxes.Item` as shown:
173+
174+
```patch
175+
<Checkboxes>
176+
- <Checkboxes.Box value="british">British</Checkboxes.Box>
177+
- <Checkboxes.Box value="irish">Irish</Checkboxes.Box>
178+
- <Checkboxes.Box value="other">Citizen of another country</Checkboxes.Box>
179+
+ <Checkboxes.Item value="british">British</Checkboxes.Item>
180+
+ <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
181+
+ <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
182+
</Checkboxes>
183+
```
184+
185+
### Skip link
186+
187+
To align with NHS.UK frontend, the skip link component focuses the main content rather than the first heading on the page:
188+
189+
```html
190+
<main class="nhsuk-main-wrapper id="maincontent">
191+
<!-- // ... -->
192+
```
193+
194+
For accessibility reasons, you must make the following changes:
195+
196+
- remove the `disableDefaultBehaviour` prop
197+
- remove the `disableHeadingFocus` prop
198+
- remove custom `onClick` handlers
199+
200+
### Warning callout
201+
202+
To align with NHS.UK frontend, the warning callout `WarningCallout.Label` component has been renamed to `WarningCallout.Heading` as shown:
203+
204+
```patch
205+
<WarningCallout>
206+
- <WarningCallout.Label>School, nursery or work</WarningCallout.Label>
207+
+ <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
208+
<p>
209+
Stay away from school, nursery or work until all the spots have crusted over. This is
210+
usually 5 days after the spots first appeared.
211+
</p>
212+
</WarningCallout>
213+
```

0 commit comments

Comments
 (0)