build: update design system to v2.7.0#1261
Merged
Merged
Conversation
- 2.0.0 uses vite and packages core, so that dep can removed. - Link to core style does however need to be added to the app, following the update guide for the design system. - TextEncoder/TextDecoder was not set up in jest and this was causing some design system component to fail tests.
- No buttons using href prop so no changes needed
maxelkins
temporarily deployed
to
previews/1261/merge
October 17, 2025 10:18 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
maxelkins
temporarily deployed
to
previews/1261/merge
October 17, 2025 15:45 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
maxelkins
changed the title
maxelkins
marked this pull request as ready for review
October 29, 2025 09:47
maxelkins
temporarily deployed
to
previews/1261/merge
October 29, 2025 09:52 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the design system packages from version 1.6.0 to 2.6.2, consolidating two separate packages (design-system-core and design-system-react) into a single design-system-react package that includes the core functionality.
Key changes:
- Upgraded
@raspberrypifoundation/design-system-reactfrom 1.6.0 to 2.6.2 and removed the separatedesign-system-coredependency - Updated styling imports to use the consolidated package structure
- Added Material Symbols font to the web component preview page
- Added TextEncoder/TextDecoder polyfills for Jest environment
- Fixed minor JavaScript style inconsistencies (missing semicolons)
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Removed separate design-system-core dependency and pinned design-system-react to version 2.6.2 |
| yarn.lock | Updated lockfile with new package versions and dependency changes for design system packages |
| src/assets/stylesheets/ExternalStyles.scss | Updated SCSS imports to use consolidated design-system-react package path |
| src/web-component.html | Added Material Symbols font link and fixed missing semicolons for consistency |
| src/utils/setupTests.js | Added TextEncoder/TextDecoder polyfills required by new design system version |
| CHANGELOG.md | Documented the design system upgrade and Material Symbols font addition |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ates of the Design System React Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
maxelkins
had a problem deploying
to
previews/1261/merge
October 30, 2025 09:26 — with
GitHub Actions
Failure
GitHub Actions
Failure
maxelkins
had a problem deploying
to
previews/1261/merge
October 30, 2025 09:27 — with
GitHub Actions
Failure
GitHub Actions
Failure
Also use `^` in package.json and update lock file accordingly
maxelkins
changed the title
|
LGTM |
Mohamed-RPF
approved these changes
Oct 30, 2025
Contributor
|
@Mohamed-RPF to check if this has been deployed to |
Contributor
|
This is not on |
Merged
patch0
added a commit
that referenced
this pull request
Nov 17, 2025
### Added - Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264) - Material symbols font to web component preview page since the Design System depends on this (#1261) - Ability for plugins to add buttons to the SidebarPanel header (#1270, #1271, #1274) - Prevent access to the session from within the editor (#1275) ### Changed - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257) - Updated Design System react to v2.6.2 (#1261) - Changed SidebarPanel to accept an array of buttons (#1270) - Changed SidebarPanel to use an array of buttons as elements (#1271) - Changed default-width and min-width on SidebarPanel (#1273) ### Fixed - Styling design system components used in the web component (#1263) - Sidebar panel overflow for plugins (#1266, #1269) - Extra border around code output in the instructions panel (#1253) - Line numbering alignment in code blocks in the instructions panel (#1259) - Extra lines added at the start of some code blocks (#1267)
cocomarine
added a commit
that referenced
this pull request
Apr 17, 2026
Closes [Intermittent ExternalError when running Turtle projects after saving #1261](RaspberryPiFoundation/digital-editor-issues#1261) ### Findings - The 'firstChild' error is not at all reproducible locally - In staging, sometimes it errors and sometimes not. Couldn't see any pattern 🤷♀️ - Upon inspecting `turtle.js` within the skupt module, it seemed that the type error could be coming from the `target` being null while checking `target.firstChild` for the while loop: ```js // turtle.js ... function getConfiguredTarget() { var selector, target; selector = (Sk.TurtleGraphics && Sk.TurtleGraphics.target) || "turtle", target = typeof selector === "string" ? document.getElementById(selector) : selector; // ensure that the canvas container is empty while (target.firstChild) { target.removeChild(target.firstChild); } return target; } ... ``` - `SkulptRunner` runs runCode() in a parent useEffect. `VisualOutputPane` sets `Sk.TurtleGraphics.target` in a child useEffect. React runs parent effects before child effects, so from turtle import * can run before the child has set `Sk.TurtleGraphics.target`. ### Potential fix - Ensured `Sk.TurtleGraphics.target` points at `#turtleOutput` before turtle runs by setting it within the SkulpRunner's runCode()
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/968
Summary
Update to the latest design system to take advantage of new components and features.
What's been done?
Screenshots
Issues to be solved in another PR
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: