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

Closed
opened 2026-05-01 02:38:13 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6039
Author: @MatissJanis
Created: 10/30/2025
Status: Merged
Merged: 11/5/2025
Merged by: @MatissJanis

Base: masterHead: matiss/refactor-stack-to-spacebetween


📝 Commits (10+)

  • 6aa1233 refactor: Replace all Stack component usages with SpaceBetween
  • 0d73dfe refactor: Remove unused SpaceBetween import from SaveReportChoose component
  • 9f93ae3 feat: Add wrap prop to SpaceBetween component for flexible layout control
  • dd5b2a4 refactor: Update SpaceBetween component usage for improved layout consistency
  • b30bd84 refactor: Simplify AccountHeader layout and improve alignment
  • 66ffa5a refactor: Enhance SpaceBetween component and update styles for better alignment
  • b9d7eab refactor: Update margin in FiltersMenu for improved layout consistency
  • 8c91fd6 Update VRT screenshots
  • 97a7600 Merge branch 'master' into matiss/refactor-stack-to-spacebetween
  • 3881e79 refactor: Update SpaceBetween component usage for improved layout consistency

📊 Changes

48 files changed (+602 additions, -709 deletions)

View changed files

📝 packages/component-library/package.json (+0 -1)
📝 packages/component-library/src/SpaceBetween.tsx (+5 -1)
packages/component-library/src/Stack.tsx (+0 -105)
📝 packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-1-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png (+0 -0)
📝 packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png (+0 -0)
📝 packages/desktop-client/src/components/FatalError.tsx (+7 -5)
📝 packages/desktop-client/src/components/ManageRules.tsx (+3 -3)
📝 packages/desktop-client/src/components/Notifications.tsx (+10 -10)
📝 packages/desktop-client/src/components/accounts/Header.tsx (+174 -182)
📝 packages/desktop-client/src/components/admin/UserDirectory/UserDirectory.tsx (+6 -3)
📝 packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx (+12 -15)
📝 packages/desktop-client/src/components/banksync/EditSyncAccount.tsx (+4 -4)
📝 packages/desktop-client/src/components/budget/goals/BudgetAutomation.tsx (+5 -5)
📝 packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx (+7 -7)
📝 packages/desktop-client/src/components/budget/goals/BudgetAutomationReadOnly.tsx (+3 -3)
📝 packages/desktop-client/src/components/budget/goals/editor/HistoricalAutomation.tsx (+3 -8)
📝 packages/desktop-client/src/components/budget/goals/editor/PercentageAutomation.tsx (+5 -15)
📝 packages/desktop-client/src/components/budget/goals/editor/ScheduleAutomation.tsx (+3 -8)
📝 packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx (+6 -4)

...and 28 more files

📄 Description

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


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/6039 **Author:** [@MatissJanis](https://github.com/MatissJanis) **Created:** 10/30/2025 **Status:** ✅ Merged **Merged:** 11/5/2025 **Merged by:** [@MatissJanis](https://github.com/MatissJanis) **Base:** `master` ← **Head:** `matiss/refactor-stack-to-spacebetween` --- ### 📝 Commits (10+) - [`6aa1233`](https://github.com/actualbudget/actual/commit/6aa1233b4020fb3a1e761ea779cbb2b7cd7def0b) refactor: Replace all Stack component usages with SpaceBetween - [`0d73dfe`](https://github.com/actualbudget/actual/commit/0d73dfe901fea5d6cc9cb9624721c820704bc75f) refactor: Remove unused SpaceBetween import from SaveReportChoose component - [`9f93ae3`](https://github.com/actualbudget/actual/commit/9f93ae3ee93368faa7c16cd9a96ac9c91f633422) feat: Add wrap prop to SpaceBetween component for flexible layout control - [`dd5b2a4`](https://github.com/actualbudget/actual/commit/dd5b2a4d2db00698974a4f57d2d938014ed2a2b1) refactor: Update SpaceBetween component usage for improved layout consistency - [`b30bd84`](https://github.com/actualbudget/actual/commit/b30bd84e1a2fde44d4424a20c0921861a66a8920) refactor: Simplify AccountHeader layout and improve alignment - [`66ffa5a`](https://github.com/actualbudget/actual/commit/66ffa5aa4e64585505b0c12767a9eacc2d31a08a) refactor: Enhance SpaceBetween component and update styles for better alignment - [`b9d7eab`](https://github.com/actualbudget/actual/commit/b9d7eab75a8a1bb5e265629af4057973dbc55e8e) refactor: Update margin in FiltersMenu for improved layout consistency - [`8c91fd6`](https://github.com/actualbudget/actual/commit/8c91fd669e3da0952138a5733a11f7b7d8b484ec) Update VRT screenshots - [`97a7600`](https://github.com/actualbudget/actual/commit/97a76008d082a34b7468dbe73e2d34df008a73f8) Merge branch 'master' into matiss/refactor-stack-to-spacebetween - [`3881e79`](https://github.com/actualbudget/actual/commit/3881e79b2692befd47a81024c52971cd48cee2bb) refactor: Update SpaceBetween component usage for improved layout consistency ### 📊 Changes **48 files changed** (+602 additions, -709 deletions) <details> <summary>View changed files</summary> 📝 `packages/component-library/package.json` (+0 -1) 📝 `packages/component-library/src/SpaceBetween.tsx` (+5 -1) ➖ `packages/component-library/src/Stack.tsx` (+0 -105) 📝 `packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-1-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-2-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/e2e/transactions.test.ts-snapshots/Transactions-filters-transactions-by-category-3-chromium-linux.png` (+0 -0) 📝 `packages/desktop-client/src/components/FatalError.tsx` (+7 -5) 📝 `packages/desktop-client/src/components/ManageRules.tsx` (+3 -3) 📝 `packages/desktop-client/src/components/Notifications.tsx` (+10 -10) 📝 `packages/desktop-client/src/components/accounts/Header.tsx` (+174 -182) 📝 `packages/desktop-client/src/components/admin/UserDirectory/UserDirectory.tsx` (+6 -3) 📝 `packages/desktop-client/src/components/banksync/BankSyncCheckboxOptions.tsx` (+12 -15) 📝 `packages/desktop-client/src/components/banksync/EditSyncAccount.tsx` (+4 -4) 📝 `packages/desktop-client/src/components/budget/goals/BudgetAutomation.tsx` (+5 -5) 📝 `packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx` (+7 -7) 📝 `packages/desktop-client/src/components/budget/goals/BudgetAutomationReadOnly.tsx` (+3 -3) 📝 `packages/desktop-client/src/components/budget/goals/editor/HistoricalAutomation.tsx` (+3 -8) 📝 `packages/desktop-client/src/components/budget/goals/editor/PercentageAutomation.tsx` (+5 -15) 📝 `packages/desktop-client/src/components/budget/goals/editor/ScheduleAutomation.tsx` (+3 -8) 📝 `packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx` (+6 -4) _...and 28 more files_ </details> ### 📄 Description 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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-01 02:38:13 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#55587