From 772afd4649b1bb58946e486df0ad5daf0b758006 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Wed, 16 Jul 2025 11:28:51 +0100 Subject: [PATCH 1/5] upgrading to design system react v2.4.0 --- package.json | 3 +- yarn.lock | 106 ++++++++++++++++++++++++++------------------------- 2 files changed, 55 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 8eba613a0..fe0fdd626 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,7 @@ "@hello-pangea/dnd": "^16.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/highlight": "^1.0.0", - "@raspberrypifoundation/design-system-core": "^1.6.0", - "@raspberrypifoundation/design-system-react": "^1.6.0", + "@raspberrypifoundation/design-system-react": "^2.4.0", "@react-three/drei": "9.114.3", "@react-three/fiber": "^8.0.13", "@reduxjs/toolkit": "^1.6.2", diff --git a/yarn.lock b/yarn.lock index f800fb29e..f8ca5fa7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2715,28 +2715,27 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-core@npm:^1.6.0": - version: 1.6.0 - resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0" +"@raspberrypifoundation/design-system-core@npm:^2.3.0": + version: 2.3.0 + resolution: "@raspberrypifoundation/design-system-core@npm:2.3.0" dependencies: classnames: ^2.3.2 - checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26 + checksum: 107aad6b62f7a2dc5226bef7f1f5c647a285432139636d6378a57912d64a226ef3c1e7b7e8dade02a8dd797fbd85fd68f96bf4a4d509f428715565257ca8321d languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:^1.6.0": - version: 1.6.0 - resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0" +"@raspberrypifoundation/design-system-react@npm:2.4.0": + version: 2.4.0 + resolution: "@raspberrypifoundation/design-system-react@npm:2.4.0" dependencies: - classnames: ^2.3.2 - material-symbols: ^0.14.5 - prop-types: ^15.8.1 - react: ^18.2.0 - react-dom: ^18.2.0 - react-router-dom: ^6.24.0 + "@raspberrypifoundation/design-system-core": ^2.3.0 + classnames: ^2.5.1 + react: ^18.3.1 + react-dom: ^18.3.1 + react-router-dom: ^7.0.2 peerDependencies: react-router-dom: ^6.24.0 - checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5 + checksum: af10fc655fd9663cc8002600e87c7ac7b7eb34671dd7bd6d6407257f079cca44f29be87d0ad547ed3838adf4336bbb7cf9cd2d97c37ae87565717298ba7bb9bc languageName: node linkType: hard @@ -2758,8 +2757,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-core": ^1.6.0 - "@raspberrypifoundation/design-system-react": ^1.6.0 + "@raspberrypifoundation/design-system-react": 2.4.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 @@ -3096,13 +3094,6 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.21.0": - version: 1.21.0 - resolution: "@remix-run/router@npm:1.21.0" - checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc - languageName: node - linkType: hard - "@replit/codemirror-indentation-markers@npm:^6.1.0": version: 6.5.3 resolution: "@replit/codemirror-indentation-markers@npm:6.5.3" @@ -6135,7 +6126,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2": +"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1": version: 2.5.1 resolution: "classnames@npm:2.5.1" checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5 @@ -6521,6 +6512,13 @@ __metadata: languageName: node linkType: hard +"cookie@npm:^1.0.1": + version: 1.0.2 + resolution: "cookie@npm:1.0.2" + checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55 + languageName: node + linkType: hard + "copy-descriptor@npm:^0.1.0": version: 0.1.1 resolution: "copy-descriptor@npm:0.1.1" @@ -12539,13 +12537,6 @@ __metadata: languageName: node linkType: hard -"material-symbols@npm:^0.14.5": - version: 0.14.7 - resolution: "material-symbols@npm:0.14.7" - checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6 - languageName: node - linkType: hard - "material-symbols@npm:^0.27.0": version: 0.27.0 resolution: "material-symbols@npm:0.27.0" @@ -15210,7 +15201,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0": +"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -15409,19 +15400,6 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^6.24.0": - version: 6.28.0 - resolution: "react-router-dom@npm:6.28.0" - dependencies: - "@remix-run/router": 1.21.0 - react-router: 6.28.0 - peerDependencies: - react: ">=16.8" - react-dom: ">=16.8" - checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21 - languageName: node - linkType: hard - "react-router-dom@npm:^6.7.0": version: 6.27.0 resolution: "react-router-dom@npm:6.27.0" @@ -15435,6 +15413,18 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^7.0.2": + version: 7.6.3 + resolution: "react-router-dom@npm:7.6.3" + dependencies: + react-router: 7.6.3 + peerDependencies: + react: ">=18" + react-dom: ">=18" + checksum: 3fc1d18ac17d1152069129b5c670b21286bc461c13da0af538508132585a7d5174cd93f7f4bef7d155c60fe0fcf004e1b3a12b98c37b1ee70b0ab45ab5e629b2 + languageName: node + linkType: hard + "react-router@npm:6.27.0": version: 6.27.0 resolution: "react-router@npm:6.27.0" @@ -15446,14 +15436,19 @@ __metadata: languageName: node linkType: hard -"react-router@npm:6.28.0": - version: 6.28.0 - resolution: "react-router@npm:6.28.0" +"react-router@npm:7.6.3": + version: 7.6.3 + resolution: "react-router@npm:7.6.3" dependencies: - "@remix-run/router": 1.21.0 + cookie: ^1.0.1 + set-cookie-parser: ^2.6.0 peerDependencies: - react: ">=16.8" - checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea + react: ">=18" + react-dom: ">=18" + peerDependenciesMeta: + react-dom: + optional: true + checksum: 76930e79cb261bc48ea67851fdd625e165366a6c50b6b0799e147f8964b6a81a9fba447dd5002357a4356741240669afa9bbaee33625a356e89c39421c147b3f languageName: node linkType: hard @@ -15539,7 +15534,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.1.0, react@npm:^18.2.0": +"react@npm:^18.1.0, react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -16582,6 +16577,13 @@ __metadata: languageName: node linkType: hard +"set-cookie-parser@npm:^2.6.0": + version: 2.7.1 + resolution: "set-cookie-parser@npm:2.7.1" + checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587 + languageName: node + linkType: hard + "set-function-length@npm:^1.2.1": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" From 67b26161c313fb218b1e5585796d2e84e591b453 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Wed, 16 Jul 2025 11:30:21 +0100 Subject: [PATCH 2/5] updating yarn lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index f8ca5fa7d..13905cd8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2724,7 +2724,7 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/design-system-react@npm:2.4.0": +"@raspberrypifoundation/design-system-react@npm:^2.4.0": version: 2.4.0 resolution: "@raspberrypifoundation/design-system-react@npm:2.4.0" dependencies: @@ -2757,7 +2757,7 @@ __metadata: "@juggle/resize-observer": ^3.3.1 "@lezer/highlight": ^1.0.0 "@pmmmwh/react-refresh-webpack-plugin": 0.4.3 - "@raspberrypifoundation/design-system-react": 2.4.0 + "@raspberrypifoundation/design-system-react": ^2.4.0 "@react-three/drei": 9.114.3 "@react-three/fiber": ^8.0.13 "@react-three/test-renderer": 8.2.1 From 3a06aa21e23b7a2b381f9385317e6f3257cb7df0 Mon Sep 17 00:00:00 2001 From: Daniel Brierton Date: Mon, 28 Jul 2025 10:44:14 +0100 Subject: [PATCH 3/5] Add Material Symbols to component and inject to host app --- src/assets/stylesheets/ExternalStyles.scss | 3 ++- src/web-component.js | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss index 83acc15eb..50f084e6d 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -3,4 +3,5 @@ @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"; @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"; @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss"; -@use "../../../node_modules/material-symbols/sharp.scss"; + +@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"); diff --git a/src/web-component.js b/src/web-component.js index e75350097..d0099891f 100644 --- a/src/web-component.js +++ b/src/web-component.js @@ -172,6 +172,13 @@ class WebComponent extends HTMLElement { this.root = ReactDOMClient.createRoot(this.mountPoint); } + // Inject Material Symbols to host app as the font needs to be in both the shadow DOM and the host app to work correctly + if (!document.head.querySelector('link[href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"]')) { + document.head.innerHTML += ''; + document.head.innerHTML += ''; + document.head.innerHTML += ''; + } + this.root.render( From 33c38fb799682828e979ffd9e1e0baa9d44176af Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Mon, 28 Jul 2025 12:23:04 +0100 Subject: [PATCH 4/5] tidying --- src/web-component.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/web-component.js b/src/web-component.js index d0099891f..55605b884 100644 --- a/src/web-component.js +++ b/src/web-component.js @@ -173,10 +173,17 @@ class WebComponent extends HTMLElement { } // Inject Material Symbols to host app as the font needs to be in both the shadow DOM and the host app to work correctly - if (!document.head.querySelector('link[href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"]')) { - document.head.innerHTML += ''; - document.head.innerHTML += ''; - document.head.innerHTML += ''; + if ( + !document.head.querySelector( + 'link[href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"]', + ) + ) { + document.head.innerHTML += + ''; + document.head.innerHTML += + ''; + document.head.innerHTML += + ''; } this.root.render( From 4c1cb0f2ad02c55cd94f2853eb92f68e68540c64 Mon Sep 17 00:00:00 2001 From: Lois Wells Date: Mon, 28 Jul 2025 12:31:07 +0100 Subject: [PATCH 5/5] updating changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd286d85d..b88903d61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unreleased + +### Fixed + +- Fixed loading of Material Symbols font (#1229) + ## [0.30.2] - 2025-07-22 ### Fixed