Skip to content

Upgrading to design system react v2.4.0 #1229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Upgrading to design system react v2.4.0 #1229

wants to merge 7 commits into from

Conversation

@loiswells97
Copy link
Contributor

@loiswells97 loiswells97 commented Jul 16, 2025 •
edited
Loading

What's Changed

  • design-system-react has been upgraded to version 2.4 - this removes the problematic code that was being injected into the head. This caused a build failure because it was attempting to load the font from the wrong path when the design system was used in a web component.
  • Removed import of design-system-core as this is now packaged with design-system-react
  • Material Symbols is now imported into the ExternalStyles and injected into the host page, as there seems not to be a way to get the symbols to load up from within the web component. Although this is unideal, we are looking to move away from Material Symbols in the future.

closes #https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/744

@loiswells97 loiswells97 temporarily deployed to previews/1229/merge July 16, 2025 10:30 — with GitHub Actions Inactive
@maxelkins
Copy link
Contributor

maxelkins commented Jul 16, 2025 •
edited
Loading

General styling issue fixes:

  • The PR removed Core as a dep which is great but we still need to pull in the styles globally, which is why we add the @forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
  • See here for more details as this may also effect text styles if you have previously used the mixins.

In ExternalStyles.scss

// Remove only import alert styles
// @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";

// Imports all design system styles as per https://github.com/RaspberryPiFoundation/design-system-react/blob/main/UPDATING.md
@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";

Google Icon font:

From what I can find online via various support post/blog posts. It does not look like Web Component easily support loading up externally hosted fonts.

I'm struggling to find good documentation/guidance on this.

The two solutions tend to be:

  • load the font on the host page
  • inject it into the host page from the Web Component.

How I've got it working so far:

We need 2 thing:

  • The font to be available
  • The material symbols classes to be defined within the web component shadow dom e.g. .material-symbols-sharp.

Do do this we can:

  1. Load the font on the host page
    web-component.html
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- Google Material Symbols fonts for design system -->
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"
      rel="stylesheet"
    />
    <title>Editor Web component</title>
  </head>
  1. Also @import the font in the ExternalStyles as I believe this is fetched and inlined at build by webpack. This we try to load the font (which won't work due to the Web Component limitation previously mentioned) but it will also define the material-symbols classes we need.

ExternalStyle.scss

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp");

More specifically the part we actually need is shown below, but I think fetching it via the url at build time feels cleaner?:

// Class for sharp icons
.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
}

Other notes:

  • @import in <style> tags (which is where ExternalStyles is injected to) is not supported by browsers.
  • I tired injecting the <link> tag for the font but couldnt get this to work. But could be user error.

@maxelkins maxelkins changed the title uUpgrading to design system react v2.4.0 Upgrading to design system react v2.4.0 Jul 16, 2025
@DanielBrierton DanielBrierton temporarily deployed to previews/1229/merge July 28, 2025 09:44 — with GitHub Actions Inactive
@DanielBrierton
Copy link
Member

Thanks @maxelkins, that was really useful. Have it working now. I was able to just use @import in ExternalStyles.scss though. Got a link to something that says that shouldn't work, or am I misunderstanding your comment? 😅

I only added Material Symbols Sharp, since that's all we actually use, and I think we probably don't want to expand our usage of Material Symbols at this point. 😶

@loiswells97 loiswells97 temporarily deployed to previews/1229/merge July 28, 2025 11:23 — with GitHub Actions Inactive
@loiswells97 loiswells97 temporarily deployed to previews/1229/merge July 28, 2025 11:27 — with GitHub Actions Inactive
@loiswells97 loiswells97 temporarily deployed to previews/1229/merge July 28, 2025 11:31 — with GitHub Actions Inactive
@maxelkins
Copy link
Contributor

maxelkins commented Jul 28, 2025 •
edited
Loading

@DanielBrierton

Have it working now. I was able to just use @import in ExternalStyles.scss though.

Without injecting/adding the font into the host too?

From my testing both were required, the @import in ExternalStyles.scss adds the .material-symbols-sharp which is needed, it also trying to import the font which doesnt work, hence the need to inject the font.

Either way, glad we've got some some resolution 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@loiswells97 @maxelkins @DanielBrierton