fix: button debt #1262

maxelkins · 2025-10-17T23:38:31Z

Warning

WIP - Relys on #1261 for initial design system update

Still to be done:

Summary of Button changes

✨ Summary partially generated with Copilot but manually corrected and checked

A major refactoring effort focused on migrating from legacy custom buttons to Design System (DS) buttons throughout the codebase. Here are the key changes:

🔄 Button Migration & Refactoring (Major Theme)

The most significant change is the replacement of custom button components with standardised Design System buttons:

Sidebar components - Custom button styles updated since this does not used DS button.
NewFileModal - Uses DS Button
ErrorModal - Uses DS Button
NewComponentButton - Uses DS Button
ProjectName - Uses DS Button (edit/save functionality)
Notifications - Uses DS Button
StopButton - Uses DS Button
RunButton - Uses DS Button
SaveButton - Uses DS Button
RunnerControls - Uses DS Button
ToastCloseButton - Uses DS Button
ProgressBar - Uses DS Buttons (navigation)
GeneralModal - Uses DS Button
RenameFileModal - Uses DS Button
InstructionsPanel - Uses DS Button
NewInputPanelButton - Uses DS Button
ImageUploadButton - Uses DS Button
DownloadButton - Uses DS Button
EditorInput Tab Buttons - Uses DS Button

🗂️ File Structure Changes

Removed legacy button files from InternalStyles.scss
Legacy button styles completely removed (Button.scss, DesignSystemButton.scss)

🎨 Styling Updates

Sidebar styling fixes after legacy button removal
FilePanel styling improvements - Better layout with flexbox, improved hover states
Context menu styling cleanup
Tab styling updates (some commented out for future work)

📦 Dependencies & Build

Updated design system React from multiple versions (1.7.0 → 2.6.2)
Updated import statements throughout codebase to use @raspberrypifoundation/design-system-react
Web component preview improvements adding material symbols font support

🏗️ Component Architecture Improvements

Prop standardisation: Changed from buttonText/onClickHandler to text/onClick
Icon handling: Moved from custom icon components to standardised icon font props
- Note this could be reverted in cases we rely on specific SVGs, however this does make it more tricky the theme and maintain.
Layout props: Changed fill to fullWidth for consistency

🧹 Code Quality

Consistent formatting and indentation fixes - using repo rules.
Removed unused imports and dependencies
Cleaner component interfaces with standardised props
Better accessibility with proper ARIA labels

🎯 Key Benefits of This Refactoring

Consistency: All buttons now follow the same design system patterns
Maintainability: Single source of truth for button styling
Accessibility: Better/consistent ARIA support and keyboard navigation
Performance: Reduced CSS bundle size by removing duplicate styles
Developer Experience: Consistent API across all button interactions

🔧 Technical Details

Key Prop Changes:

// Old Pattern
<Button 
  buttonText="Save"
  onClickHandler={handleSave}
  ButtonIcon={SaveIcon}
  className="btn--primary"
/>

// New Pattern  
<Button
  text="Save"
  onClick={handleSave}
  icon="save"
  type="primary"
/>

Import Changes:

// Old
import Button from "../Button/Button";
import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";

// New
import { Button } from "@raspberrypifoundation/design-system-react";

This migration ensures the entire UI follows consistent design patterns while improving code maintainability and user experience.

- 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

Closes RaspberryPiFoundation/digital-editor-issues#968 ## Summary Update to the latest design system to take advantage of new components and features. ## What's been done? - Incrementally updated - see commits - Ran all tests at each commit - Followed design system [updating guide for v2+](https://github.com/RaspberryPiFoundation/design-system-react/blob/main/UPDATING.md) - Fixed any breaking changes - only 1 (see commits details) - Added material icon font to host (web component preview page) since the design system depends on this for some components. ## Screenshots <img width="1422" height="965" alt="Screenshot 2025-10-29 at 09 33 16" src="https://github.com/user-attachments/assets/919b6bb0-ba72-49ef-a260-48605227755d" /> <img width="501" height="754" alt="Screenshot 2025-10-29 at 09 33 26" src="https://github.com/user-attachments/assets/52310fec-2c66-4602-9301-182c3a114f88" /> <img width="1200" height="889" alt="Screenshot 2025-10-29 at 09 33 53" src="https://github.com/user-attachments/assets/bc3c294c-f830-4dcc-98ce-764165f473c5" /> ## Issues to be solved in another PR - Some styles appear to be broken/missing - **Note this is only when "use_editor_styles" isn't true** - This is an existing [issue](#1195). - There are also some issues with Design System components not looking correct. This is because editor-ui is overriding design-system-core styles via classes or global selectors (e.g. `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:** - [ ] Ensure all editor CSS custom properties have a fallback, so that a theme isn't required ([Issue](#1195)) - [ ] Migrate to using design system buttons - [See PR](#1262). - [ ] Migrate to theming using Design System component via the CSS custom properties <img width="1263" height="923" alt="Screenshot 2025-10-29 at 09 39 38" src="https://github.com/user-attachments/assets/39c88da0-fad4-4648-8431-22a09366211a" />

Copilot

Pull Request Overview

This PR upgrades the design system packages from version 1.6.0 to 2.6.2, replacing the old custom Button components with the new standardized Button component from @raspberrypifoundation/design-system-react. The upgrade includes API changes, removes deprecated wrapper components, and adds necessary polyfills for the test environment.

Upgraded @raspberrypifoundation/design-system-react from ^1.6.0 to 2.6.2
Replaced all custom Button and DesignSystemButton components with the design system Button component
Updated button prop names to align with the new API (e.g., onClickHandler → onClick, buttonText → text)

Reviewed Changes

Copilot reviewed 36 out of 37 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
package.json, yarn.lock	Upgraded design system packages and updated dependencies
src/web-component.html	Added Material Symbols font stylesheet and fixed JavaScript syntax issues
src/utils/setupTests.js	Added TextEncoder/TextDecoder polyfills for Jest environment
src/utils/ToastCloseButton.jsx, src/utils/Notifications.js	Migrated to design system Button component
src/components/SaveButton/SaveButton.jsx	Updated to use design system Button with new prop names
src/components/RunButton/*.jsx	Replaced custom Button with design system Button
src/components/ProjectName/ProjectName.jsx	Updated icon names to use Material Symbols naming
src/components/ProjectBar/ProjectBar.jsx	Removed Icon prop and updated button props
src/components/Modals/*.jsx	Migrated all modal buttons to design system Button
src/components/Menus/Sidebar/*/.jsx	Updated sidebar buttons and replaced custom buttons with native button elements
src/components/Editor/*/.jsx	Updated editor buttons to use design system Button
src/components/DownloadButton/DownloadButton.jsx	Simplified props and migrated to design system Button
src/components/DesignSystemButton/DesignSystemButton.jsx	Removed deprecated wrapper component
src/assets/stylesheets/*.scss	Removed custom button styles and updated design system imports

Comments suppressed due to low confidence (1)

src/components/RunButton/RunnerControls.jsx:1

Commented-out code should be removed. If these properties need to be preserved for reference, document why in a comment or remove them entirely to keep the codebase clean.

import React from "react";

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

Copilot · 2025-11-03T17:27:37Z

src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx

-        onClickHandler={goToPreviousStep}
-        ButtonIcon={ChevronLeft}
+        onClick={goToPreviousStep}
+        icon="chevron_right"


The previous step button uses 'chevron_right' icon but should use 'chevron_left' to indicate backward navigation. Both buttons currently have the same icon.

Suggested change

icon="chevron_right"

icon="chevron_left"

Copilot · 2025-11-03T17:27:38Z

src/components/Editor/NewComponentButton/NewComponentButton.jsx

-      icon={<PlusIcon />}
+    <Button
+      icon="add"
+      linkComponent={null}


The linkComponent={null} prop appears unusual and may not be a documented prop for the Button component. If this is meant to prevent default link behavior, verify this prop is supported in version 2.6.2 of the design system, or remove it if unnecessary.

Suggested change

linkComponent={null}

Copilot · 2025-11-03T17:27:38Z

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

        textAlways
        small


The props textAlways and small don't follow the design system API conventions. Based on other usages in the codebase, small should likely be size=\"small\". The textAlways prop may not be supported in the new design system version and needs verification or removal.

Copilot · 2025-11-03T17:27:38Z

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

        textAlways
        small


The props textAlways and small don't follow the design system API conventions. Based on other usages in the codebase, small should likely be size=\"small\". The textAlways prop may not be supported in the new design system version and needs verification or removal.

Copilot · 2025-11-03T17:27:39Z

src/components/RunButton/RunnerControls.jsx

+          // buttonOuter={skinny}
+          // className={`btn--stop btn--primary${skinny ? " btn--small" : ""}`}


Commented-out code should be removed. If these properties need to be preserved for reference, document why in a comment or remove them entirely to keep the codebase clean.

maxelkins added 30 commits October 17, 2025 10:17

build: update design system react to 1.7.0

4b9672a

build: update design system react to 2.1.0

b7d593a

build: update design system react to 2.2.0

e4a59b9

- No buttons using href prop so no changes needed

build: update design system react to 2.3.0

652d022

build: update design system react to 2.4.2

8817520

build: update design system react to 2.5.0

96507ef

build: update design system react to 2.6.2

0da9ed7

fix: add material symbols font to web component page

6c8987c

refactor: remove all legacy button styles and components

7b5f876

fix: sidebar styles after legacy buttons removed

3e0f22a

refactor: remove importing old button files from InternalStyles

ecc3452

refactor: DownloadButton to use DS Button

05922fb

refactor: EdiorInput Tab Buttons

07fbf45

refactor: ImageUploadButton

e9da2dd

refactor: NewInputPanelButton to use DS Button

34f199b

refactor: InstructionsPanel to use DS Button

86e9d3f

refactor: RenameFileModal to use DS Button

47b654c

refactor: GeneralModal to use DS Button

f72f9b6

refactor: ProgressBar to use DS Buttons

18276a4

refactor: ToastCloseButton to use DS Button

71fdc61

refactor: RunnerControls to use DS Button

1b022b9

refactor: SaveButton to use DS Button

690b32b

refactor: RunButton to use DS Button

f667b80

refactor: StopButton to use DS Button

89dbb26

refactor: Notifications to use DS Button

b68ef6e

refactor: ProjectName to use DS Button

fb5f988

refactor: NewComponentButton to use DS Button

352207e

refactor: ErrorModal to use DS Button

492b277

refactor: NewFileModal to use DS Button

9eb81a7

refactor: Sidebar to use custom button styles

1282149

maxelkins had a problem deploying to previews/1262/merge October 17, 2025 23:38 — with GitHub Actions Failure

maxelkins changed the title ~~Fix button debt~~ fix: button debt Oct 17, 2025

maxelkins mentioned this pull request Oct 20, 2025

build: update design system to v2.7.0 #1261

Merged

3 tasks

style: linting

3d308a2

maxelkins had a problem deploying to previews/1262/merge October 20, 2025 09:11 — with GitHub Actions Failure

adrian-rpf requested a review from Copilot November 3, 2025 17:24

Copilot AI reviewed Nov 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: button debt #1262

fix: button debt #1262

Uh oh!

maxelkins commented Oct 17, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		// buttonOuter={skinny}
		// className={`btn--stop btn--primary${skinny ? " btn--small" : ""}`}

fix: button debt #1262

Are you sure you want to change the base?

fix: button debt #1262

Uh oh!

Conversation

maxelkins commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Button changes

🔄 Button Migration & Refactoring (Major Theme)

🗂️ File Structure Changes

🎨 Styling Updates

📦 Dependencies & Build

🏗️ Component Architecture Improvements

🧹 Code Quality

🎯 Key Benefits of This Refactoring

🔧 Technical Details

Key Prop Changes:

Import Changes:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

maxelkins commented Oct 17, 2025 •

edited

Loading