Upgrade Bootstrap from 4.6.2 to 5.3.8 (comprehensive migration)#3532
Open
Rolling2405 wants to merge 6 commits into
Open
Upgrade Bootstrap from 4.6.2 to 5.3.8 (comprehensive migration)#3532Rolling2405 wants to merge 6 commits into
Rolling2405 wants to merge 6 commits into
Conversation
Comprehensive migration from Bootstrap 4 to Bootstrap 5 across 33 files. Dependencies: - package.json: bootstrap 4.6.2 -> 5.3.8, remove popper.js (BS5 uses @popperjs/core already present) - Gemfile: bootstrap_form 4.5.0 -> 5.6.0 (BS5-compatible form builder) Data attributes (BS5 requires data-bs-* prefix): - data-toggle -> data-bs-toggle (dropdowns, tabs, collapse, popovers) - data-dismiss -> data-bs-dismiss (modals, alerts) - data-target -> data-bs-target (collapse, tabs) - data-placement/content/html -> data-bs-* (popovers, tooltips) CSS utility class renames: - ml-* -> ms-* and mr-* -> me-* (logical properties) - float-left/right -> float-start/end - text-right -> text-end - sr-only -> visually-hidden - font-weight-bold -> fw-bold - pull-left -> float-start - btn-default -> btn-secondary - navbar-inverse -> navbar-dark Component changes: - .close button -> .btn-close (no more × entity needed) JavaScript (tooltips.js): - Rewritten from jQuery plugin to Bootstrap 5 native API - Uses new bootstrap.Tooltip() constructor instead of .tooltip() - Updated modal event listener for BS5 Tests updated: - Tooltip.test.js: data-bs-* attribute assertions - Input.test.js/Select.test.js: visually-hidden class assertions Note: jQuery is intentionally kept for now (jquery-ujs, modal-steps plugin). jQuery removal is a separate PR. Supersedes DARIAEngineering#3439 (Dependabot bootstrap bump) Supersedes DARIAEngineering#3435 (colinxfleming bootstrap rewrite, 5mo stale) Supersedes DARIAEngineering#2580 (xmunoz bootstrap PR, years old) Supersedes DARIAEngineering#3484 (Dependabot bootstrap_form bump) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This was referenced Apr 8, 2026
Bundle install to update lockfile with correct dependency resolution for the Bootstrap 4→5 migration (bootstrap gem 5.3.3→5.3.8). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Issue 1 - Popover: Replace jQuery .popover() init with BS5
bootstrap.Popover constructor in _overview.html.erb.
Issue 2 - Multi-step modal: Rewrite vendor jquery-bootstrap-modal-steps
plugin replacing .modal('hide') with bootstrap.Modal.getInstance().hide().
Unminified for maintainability. Updated BS4 label class to BS5 badge.
Additional BS4 patterns migrated (found during step 6 verification):
- All .modal('toggle'/'hide') calls in js.erb files converted to
bootstrap.Modal.getOrCreateInstance()/getInstance() API
- .tooltip('update') in update.js.erb converted to dispose/recreate pattern
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The BS5 import is module-scoped but .js.erb files execute in global scope, causing ReferenceError when calling bootstrap.Modal.getInstance(). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- 31 tests across 3 files covering BS4→BS5 API changes - Tests Bootstrap.Tooltip constructor and getInstance() guard - Tests React Tooltip component with data-bs-* attributes - Tests Input/Select visually-hidden class migration from sr-only - Mocks bootstrap module Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add tests for nil expenditures, nil pledges, missing hash keys - Add tests for negative values, float values, zero ceiling - Add tests for budget_bar_remaining with nil input - 21 new test cases covering 9 identified coverage gaps Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I rule and have completed some work on Case Manager that's ready for review!
This upgrades Bootstrap from 4.6.2 to 5.3.8, migrating all views, helpers, and JavaScript across the app. This is a foundational change that several other PRs depend on.
This pull request makes the following changes:
data-toggletodata-bs-toggle, etc.)mr-*tome-*,ml-*toms-*, etc.)badge-*tobg-*)Notes:
#3532→ then Redesign budget bar with card layout, gradients, and legend #3533, Add notification center with bell dropdown and real-time delivery #3538, Add note templates with fund-level and personal templates #3540, etc.docker compose run --rm web bundle install.(If there are changes to the views, please include a screenshot so we know what to look for!)
For reviewer:
featureif it contains a feature, fix, or similar. This is anything that contains a user-facing fix in some way, such as frontend changes, alterations to backend behavior, or bug fixes.dependenciesif it contains library upgrades or similar. This is anything that upgrades any dependency, such as a Gemfile update or npm package upgrade.