fix: button debt

[maxelkins]

Warning

WIP - Relys on #1261 for initial design system update

Still to be done:

• Still some failing tests to fix - mainly mobile styling related
• Check all mobile styles
• Check various states
  • AstroPi
  • HTML/CSS + Python
  • All sidebar panels
  • Projects site intergration
  • Logged in state
  • CEFE
• Button in projectbar/Split view button
• Fix project file dropdown - ideally migrate to floating-ui / css anchor-positioning
• Document the requirement for material-symbols on host

---

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

1. Consistency: All buttons now follow the same design system patterns
2. Maintainability: Single source of truth for button styling
3. Accessibility: Better/consistent ARIA support and keyboard navigation
4. Performance: Reduced CSS bundle size by removing duplicate styles
5. 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.