Replace react-toggle with DS Switch#1503
Conversation
There was a problem hiding this comment.
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-reactto^2.9.1(and core to2.4.5via lockfile) to access the DSSwitch. - Replace
react-toggleusage in the AstroPi motion control with the DSSwitchand removereact-togglestyles/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.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
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
Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1499
Changes
.rpf-switchfor a WCAG AAA touch-target requirementScreen recordings
Before
https://github.com/user-attachments/assets/4a280a36-b5d9-4a12-b461-30af7b64e854
After
https://github.com/user-attachments/assets/35745f4e-701e-4eaf-a8a3-2fe2eb7187fa