Skip to content

Replace react-toggle with DS Switch#1503

Open
cocomarine wants to merge 5 commits into
mainfrom
1499-replace-react-toggle-with-DS-switch
Open

Replace react-toggle with DS Switch#1503
cocomarine wants to merge 5 commits into
mainfrom
1499-replace-react-toggle-with-DS-switch

Conversation

@cocomarine

@cocomarine cocomarine commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1499

Changes

  • Bumped Design System React to 2.9.1 so that we can use Switch component
  • Replaced react-toggle Toggle with Switch and removed react-toggle dependency
  • Increased height of colour and timer controls to match the minimum height applied to .rpf-switch for a WCAG AAA touch-target requirement

Screen recordings

@cocomarine cocomarine temporarily deployed to previews/1503/merge June 18, 2026 12:46 — with GitHub Actions Inactive
@cocomarine cocomarine temporarily deployed to previews/1503/merge June 18, 2026 14:28 — with GitHub Actions Inactive
@cocomarine cocomarine temporarily deployed to previews/1503/merge June 18, 2026 14:30 — with GitHub Actions Inactive
@cocomarine cocomarine marked this pull request as ready for review June 18, 2026 14:47
Copilot AI review requested due to automatic review settings June 18, 2026 14:47

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the AstroPi motion toggle UI to use the Raspberry Pi Foundation Design System Switch component, removing the third-party react-toggle dependency and aligning related control styling with design-system touch target sizing.

Changes:

  • Bump @raspberrypifoundation/design-system-react to ^2.9.1 (and core to 2.4.5 via lockfile) to access the DS Switch.
  • Replace react-toggle usage in the AstroPi motion control with the DS Switch and remove react-toggle styles/imports.
  • Adjust AstroPi control panel SCSS to accommodate DS switch sizing/appearance and remove old react-toggle-specific styling.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
yarn.lock Updates locked versions for design-system packages and removes react-toggle from the lockfile.
package.json Bumps design-system-react to ^2.9.1 and removes the react-toggle dependency.
src/components/AstroPiModel/AstroPiControls/MotionInput.jsx Replaces react-toggle Toggle with design-system Switch for the motion control.
src/assets/stylesheets/ExternalStyles.scss Removes inclusion of react-toggle stylesheet.
src/assets/stylesheets/AstroPiModel.scss Updates styling for the motion toggle area and removes react-toggle-specific styling rules.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/assets/stylesheets/AstroPiModel.scss
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

@DNR500 DNR500 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing this  🙂

We have seen some cypress query's in learner-experience-integration-tests sometimes fail when we have updated the design system version before so it might be worth keeping an eye on what happens with those.

Might be worth just asking for a design check in before merging this too, I wonder if the grey thumb and track outline might risk looking like a disabled state but I would trust Max's opinion over mine on that

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants