[PR #6039] refactor: Replace all Stack component usages with SpaceBetween #6283

Closed
opened 2026-02-28 21:26:10 -06:00 by GiteaMirror · 0 comments
Owner

Original Pull Request: https://github.com/actualbudget/actual/pull/6039

State: closed
Merged: Yes


This PR completes the migration from the deprecated Stack component to the SpaceBetween component across the entire desktop-client codebase.

Changes

Files Modified: 42 files
Files Deleted: 1 file (Stack.tsx)

Component Migration

Replaced all Stack component usages with SpaceBetween:

  • Account headers and components
  • Bank sync components (desktop & mobile)
  • Import transaction modals
  • Schedule components
  • Rule editor and management
  • Report components
  • Filter components
  • Budget automation & goals
  • Tag management
  • User administration
  • Notifications and error handling
  • Modal components

Prop Conversions

  • direction='row'direction='horizontal'
  • direction='column'direction='vertical'
  • spacing={n}gap={n*5} (Stack multiplied spacing by 5)
  • align prop → moved to style={{ alignItems: '...' }}
  • justify prop → moved to style={{ justifyContent: '...' }}

Verification

Type Checking: All 1258 strict files pass
Visual Testing: UI unchanged (verified via browser inspection)
DOM Structure: Identical CSS properties maintained

Testing

Tested in browser on account transaction page:

  • Header toolbar renders correctly with proper spacing
  • All interactive elements functioning normally
  • No visual regressions detected

Closes #6027

**Original Pull Request:** https://github.com/actualbudget/actual/pull/6039 **State:** closed **Merged:** Yes --- This PR completes the migration from the deprecated `Stack` component to the `SpaceBetween` component across the entire desktop-client codebase. ## Changes **Files Modified:** 42 files **Files Deleted:** 1 file (`Stack.tsx`) ### Component Migration Replaced all `Stack` component usages with `SpaceBetween`: - ✅ Account headers and components - ✅ Bank sync components (desktop & mobile) - ✅ Import transaction modals - ✅ Schedule components - ✅ Rule editor and management - ✅ Report components - ✅ Filter components - ✅ Budget automation & goals - ✅ Tag management - ✅ User administration - ✅ Notifications and error handling - ✅ Modal components ### Prop Conversions - `direction='row'` → `direction='horizontal'` - `direction='column'` → `direction='vertical'` - `spacing={n}` → `gap={n*5}` (Stack multiplied spacing by 5) - `align` prop → moved to `style={{ alignItems: '...' }}` - `justify` prop → moved to `style={{ justifyContent: '...' }}` ## Verification ✅ **Type Checking:** All 1258 strict files pass ✅ **Visual Testing:** UI unchanged (verified via browser inspection) ✅ **DOM Structure:** Identical CSS properties maintained ## Testing Tested in browser on account transaction page: - Header toolbar renders correctly with proper spacing - All interactive elements functioning normally - No visual regressions detected Closes #6027
GiteaMirror added the pull-request label 2026-02-28 21:26:10 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#6283