Skip to content

Commit f6f6727

Browse files
maxelkinsmaxelkins
authored
build: update design system to v2.7.0 (#1261)
Closes RaspberryPiFoundation/digital-editor-issues#968 ## Summary Update to the latest design system to take advantage of new components and features. ## What's been done? - Incrementally updated - see commits - Ran all tests at each commit - Followed design system [updating guide for v2+](https://github.com/RaspberryPiFoundation/design-system-react/blob/main/UPDATING.md) - Fixed any breaking changes - only 1 (see commits details) - Added material icon font to host (web component preview page) since the design system depends on this for some components. ## Screenshots <img width="1422" height="965" alt="Screenshot 2025-10-29 at 09 33 16" src="https://github.com/user-attachments/assets/919b6bb0-ba72-49ef-a260-48605227755d" /> <img width="501" height="754" alt="Screenshot 2025-10-29 at 09 33 26" src="https://github.com/user-attachments/assets/52310fec-2c66-4602-9301-182c3a114f88" /> <img width="1200" height="889" alt="Screenshot 2025-10-29 at 09 33 53" src="https://github.com/user-attachments/assets/bc3c294c-f830-4dcc-98ce-764165f473c5" /> ## Issues to be solved in another PR - Some styles appear to be broken/missing - **Note this is only when "use_editor_styles" isn't true** - This is an existing [issue](#1195). - There are also some issues with Design System components not looking correct. This is because editor-ui is overriding design-system-core styles via classes or global selectors (e.g. `button`) rather than overriding custom properties - which would normally avoid most breaking changes. Largely "core breaking component changes" only affect upstream packages (react/rails). **Suggested tasks:** - [ ] Ensure all editor CSS custom properties have a fallback, so that a theme isn't required ([Issue](#1195)) - [ ] Migrate to using design system buttons - [See PR](#1262). - [ ] Migrate to theming using Design System component via the CSS custom properties <img width="1263" height="923" alt="Screenshot 2025-10-29 at 09 39 38" src="https://github.com/user-attachments/assets/39c88da0-fad4-4648-8431-22a09366211a" />
1 parent 618aea3 commit f6f6727

File tree

6 files changed

+39
-63
lines changed

6 files changed

+39
-63
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
99
### Changed
1010

1111
- Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
12+
- Updated Design System react to v2.6.2 (#1261)
13+
14+
### Added
15+
16+
- Material symbols font to web component preview page since the Design System depends on this (#1261)
1217

1318
### Fixed
1419

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
"@hello-pangea/dnd": "^16.2.0",
1616
"@juggle/resize-observer": "^3.3.1",
1717
"@lezer/highlight": "^1.0.0",
18-
"@raspberrypifoundation/design-system-core": "^1.6.0",
19-
"@raspberrypifoundation/design-system-react": "^1.6.0",
18+
"@raspberrypifoundation/design-system-react": "^2.7.0",
2019
"@react-three/drei": "9.114.3",
2120
"@react-three/fiber": "^8.0.13",
2221
"@reduxjs/toolkit": "^1.6.2",

‎src/assets/stylesheets/ExternalStyles.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
12
@use "../../../node_modules/react-tabs/style/react-tabs.css";
23
@use "../../../node_modules/react-toggle/style.css";
34
@use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
45
@use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
5-
@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
6-
@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/design-system-core.scss";
76
@use "../../../node_modules/material-symbols/sharp.scss";
87
@use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;

‎src/utils/setupTests.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import "@testing-library/jest-dom";
66
import "jest-canvas-mock";
77
import PyodideWorker from "../components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js";
88

9+
// Polyfill TextEncoder/TextDecoder for Jest environment
10+
// Required by @raspberrypifoundation/design-system-react components
11+
import { TextEncoder, TextDecoder } from "util";
12+
Object.assign(global, { TextDecoder, TextEncoder });
13+
914
/* global globalThis */
1015
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
1116

‎src/web-component.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
<meta charset="UTF-8" />
3030
<meta name="viewport" content="width=device-width" />
3131
<title>Editor Web component</title>
32+
<link
33+
rel="stylesheet"
34+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
35+
/>
3236
</head>
3337
<body>
3438
<p id="results"></p>
@@ -52,7 +56,7 @@
5256
"download",
5357
"settings",
5458
"info",
55-
]),
59+
])
5660
);
5761

5862
// Pre-set the code attribute with an empty string.
@@ -89,7 +93,7 @@
8993
runButton.appendChild(runButtonText);
9094
runButton.onclick = (event) => {
9195
webComp.rerunCode();
92-
}
96+
};
9397
body.append(runButton);
9498
});
9599
</script>

‎yarn.lock‎

Lines changed: 21 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2916,28 +2916,31 @@ __metadata:
29162916
languageName: node
29172917
linkType: hard
29182918

2919-
"@raspberrypifoundation/design-system-core@npm:^1.6.0":
2920-
version: 1.6.0
2921-
resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0"
2919+
"@raspberrypifoundation/design-system-core@npm:^2.4.0":
2920+
version: 2.4.0
2921+
resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
29222922
dependencies:
29232923
classnames: ^2.3.2
2924-
checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26
2924+
checksum: 8db6b71f0675849617ad18e70a35b8faa99a3cb3d4b7dbde15a250de1ca971f09ffeb0d7e4fe6d6cf1645890d6ffe0ca795967e0371e665775de9ff27e5bc4c6
29252925
languageName: node
29262926
linkType: hard
29272927

2928-
"@raspberrypifoundation/design-system-react@npm:^1.6.0":
2929-
version: 1.6.0
2930-
resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0"
2928+
"@raspberrypifoundation/design-system-react@npm:^2.7.0":
2929+
version: 2.7.0
2930+
resolution: "@raspberrypifoundation/design-system-react@npm:2.7.0"
29312931
dependencies:
2932-
classnames: ^2.3.2
2933-
material-symbols: ^0.14.5
2934-
prop-types: ^15.8.1
2935-
react: ^18.2.0
2936-
react-dom: ^18.2.0
2937-
react-router-dom: ^6.24.0
2932+
"@raspberrypifoundation/design-system-core": ^2.4.0
2933+
classnames: ^2.5.1
29382934
peerDependencies:
2935+
react: ">=18.0.0 <20.0.0"
2936+
react-dom: ">=18.0.0 <20.0.0"
29392937
react-router-dom: ^6.24.0
2940-
checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5
2938+
peerDependenciesMeta:
2939+
react:
2940+
optional: false
2941+
react-dom:
2942+
optional: false
2943+
checksum: 992974bfd88e8d470488e62bb67690e3740a85d1c2249b07302f17063791a06f6185048a5fc8f7a07043128d6698015bdc2f27060e581c60872b68816ac2da02
29412944
languageName: node
29422945
linkType: hard
29432946

@@ -2959,8 +2962,7 @@ __metadata:
29592962
"@juggle/resize-observer": ^3.3.1
29602963
"@lezer/highlight": ^1.0.0
29612964
"@pmmmwh/react-refresh-webpack-plugin": 0.4.3
2962-
"@raspberrypifoundation/design-system-core": ^1.6.0
2963-
"@raspberrypifoundation/design-system-react": ^1.6.0
2965+
"@raspberrypifoundation/design-system-react": ^2.7.0
29642966
"@react-three/drei": 9.114.3
29652967
"@react-three/fiber": ^8.0.13
29662968
"@react-three/test-renderer": 8.2.1
@@ -3301,13 +3303,6 @@ __metadata:
33013303
languageName: node
33023304
linkType: hard
33033305

3304-
"@remix-run/router@npm:1.21.0":
3305-
version: 1.21.0
3306-
resolution: "@remix-run/router@npm:1.21.0"
3307-
checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
3308-
languageName: node
3309-
linkType: hard
3310-
33113306
"@replit/codemirror-indentation-markers@npm:^6.1.0":
33123307
version: 6.5.3
33133308
resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
@@ -6598,7 +6593,7 @@ __metadata:
65986593
languageName: node
65996594
linkType: hard
66006595

6601-
"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2":
6596+
"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
66026597
version: 2.5.1
66036598
resolution: "classnames@npm:2.5.1"
66046599
checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -14033,13 +14028,6 @@ __metadata:
1403314028
languageName: node
1403414029
linkType: hard
1403514030

14036-
"material-symbols@npm:^0.14.5":
14037-
version: 0.14.7
14038-
resolution: "material-symbols@npm:0.14.7"
14039-
checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6
14040-
languageName: node
14041-
linkType: hard
14042-
1404314031
"material-symbols@npm:^0.27.0":
1404414032
version: 0.27.0
1404514033
resolution: "material-symbols@npm:0.27.0"
@@ -16987,7 +16975,7 @@ __metadata:
1698716975
languageName: node
1698816976
linkType: hard
1698916977

16990-
"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
16978+
"react-dom@npm:^18.1.0":
1699116979
version: 18.3.1
1699216980
resolution: "react-dom@npm:18.3.1"
1699316981
dependencies:
@@ -17186,19 +17174,6 @@ __metadata:
1718617174
languageName: node
1718717175
linkType: hard
1718817176

17189-
"react-router-dom@npm:^6.24.0":
17190-
version: 6.28.0
17191-
resolution: "react-router-dom@npm:6.28.0"
17192-
dependencies:
17193-
"@remix-run/router": 1.21.0
17194-
react-router: 6.28.0
17195-
peerDependencies:
17196-
react: ">=16.8"
17197-
react-dom: ">=16.8"
17198-
checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21
17199-
languageName: node
17200-
linkType: hard
17201-
1720217177
"react-router-dom@npm:^6.7.0":
1720317178
version: 6.27.0
1720417179
resolution: "react-router-dom@npm:6.27.0"
@@ -17223,17 +17198,6 @@ __metadata:
1722317198
languageName: node
1722417199
linkType: hard
1722517200

17226-
"react-router@npm:6.28.0":
17227-
version: 6.28.0
17228-
resolution: "react-router@npm:6.28.0"
17229-
dependencies:
17230-
"@remix-run/router": 1.21.0
17231-
peerDependencies:
17232-
react: ">=16.8"
17233-
checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea
17234-
languageName: node
17235-
linkType: hard
17236-
1723717201
"react-shallow-renderer@npm:^16.13.1":
1723817202
version: 16.15.0
1723917203
resolution: "react-shallow-renderer@npm:16.15.0"
@@ -17316,7 +17280,7 @@ __metadata:
1731617280
languageName: node
1731717281
linkType: hard
1731817282

17319-
"react@npm:^18.1.0, react@npm:^18.2.0":
17283+
"react@npm:^18.1.0":
1732017284
version: 18.3.1
1732117285
resolution: "react@npm:18.3.1"
1732217286
dependencies:

0 commit comments

Comments
 (0)