Migrate to Bootstrap 5.3#93
Draft
malberts wants to merge 7 commits into
Draft
Conversation
malberts
force-pushed
the
bs5-migration
branch
16 times, most recently
from
72241a6 to
ebf582a
Compare
malberts
force-pushed
the
bs5-migration
branch
7 times, most recently
from
32a0cb7 to
05eb6b4
Compare
This was referenced May 29, 2026
malberts
force-pushed
the
bs5-migration
branch
5 times, most recently
from
b08197e to
557a2b1
Compare
`mediawiki/bootstrap` ^6.0 ships Bootstrap framework 5.3.x; the prior ^5.0 ships Bootstrap 4. Adds a `dev-master` branch alias to 6.x-dev so the v6 development line is explicit. Wires the new `ext.bootstrapComponents.modal.js` init script onto the `modal.fix` module. The init script (added in a follow-up commit) calls `bootstrap.Modal.getOrCreateInstance` on every `.modal`, replacing the implicit jQuery `[data-toggle="modal"]` lifecycle that Bootstrap 4 ran automatically and Bootstrap 5 no longer does. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
BootstrapComponents' JS modules wired Popover and Tooltip via jQuery's top-level `$( '...' ).popover()` / `.tooltip()` calls. Bootstrap 5 dropped its jQuery dependency entirely, so the per-component init that BootstrapComponents owns has to switch to vanilla DOM + `bootstrap.X.getOrCreateInstance` calls. Switch all four init modules accordingly: * targets the Bootstrap 5 `data-bs-toggle` attribute set by the PHP emitters, * calls the relevant `bootstrap.Modal|Popover|Tooltip|Carousel` constructor on every matching element after DOMContentLoaded. Popover and Tooltip are opt-in in Bootstrap 5 (no framework-side delegation) so their init scripts are required. Modal and Carousel aren't strictly required — Bootstrap 5 still auto-binds modal trigger clicks and carousel `data-bs-ride` via its data-api — but the explicit loops mirror Popover/Tooltip's shape and ensure programmatic `bootstrap.Modal.getOrCreateInstance(el).show()` works without first racing the data-api init. `ext.bootstrapComponents.modal.js` is new and wired onto `modal.fix` in the previous commit. The other three replace the jQuery `$(...).popover()` / `$(...).tooltip()` / `$(...).carousel()` top-level calls. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Bootstrap 5 namespaced all its data-attribute hooks with a `bs-` prefix (`data-bs-toggle`, `data-bs-target`, etc.) to stop conflicting with authoring code. Update every BootstrapComponents component that emits these attributes plus `ModalBuilder` and its trigger-matching regexes: * `Components/Modal.php` — `data-toggle`/`data-target` on the trigger button. * `Components/Popover.php` — `data-toggle`, `data-content`, `data-placement`, `data-trigger`. * `Components/Tooltip.php` — `data-toggle`, `data-placement`. * `Components/Carousel.php` — `data-ride`, `data-slide`, `data-slide-to`, `data-target` on indicators. * `Components/Card.php` — `data-toggle`/`data-target` on collapsible card heads, `data-parent` on accordion children. * `Components/Collapse.php` — `data-toggle` on the toggle button. * `Components/Alert.php` — `data-dismiss` on the close button. * `ModalBuilder.php` — `data-toggle`/`data-target`/`data-dismiss` in the emitted markup, plus the `preg_match` regexes that test for a user-supplied trigger pointing at the modal. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Bootstrap 5 dropped several Bootstrap 3 / Bootstrap 4 class names that the BootstrapComponents PHP emitters were hard-coding. Update the affected sites to Bootstrap 5 equivalents: * `Components/Badge.php` — `badge-pill` -> `rounded-pill`, and the `badge-<color>` family -> the Bootstrap 5 `text-bg-<color>` utilities that set background AND a contrasting foreground. * `Components/Alert.php` — close button switches from Bootstrap 4's `class="close"` + `<span aria-hidden>×</span>` shape to Bootstrap 5's self-styled `class="btn-close"` (no inner span; the X is drawn by the class via a background SVG). * `Components/Jumbotron.php` — `.jumbotron` was removed in Bootstrap 5; recreate the same look with utility classes per the Bootstrap 5 example. * `ModalBuilder.php` — close-button shape change matching Alert. * `Components/Modal.php` — whitespace-only realign of the array literal to keep keys consistent with the renamed `data-bs-*` entries. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
… <ol>/<li> Bootstrap 5's carousel indicator example uses `<div class="carousel-indicators">` holding `<button>` elements rather than the Bootstrap 3-era `<ol>/<li>` shape. The button form is what Bootstrap's JS wires keyboard focus and `aria-current` on. The old markup still renders visually under Bootstrap 5 CSS but doesn't pick up the accessibility behaviour. Switch the wrapper to `<div>`, the indicator elements to `<button>`, and add `aria-current="true"` on the initially-active indicator + `aria-label` on each. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The PHP emitters now produce `data-bs-*` attributes, Bootstrap 5 class names (`rounded-pill`, `text-bg-<color>`, `btn-close`, the utility- class jumbotron set), and Bootstrap 5 `<button>` carousel indicators. Update the expected strings in: * `Components/*Test.php` — data-attribute renames, badge class renames, close-button shape, jumbotron utility classes, carousel `<ol>/<li>` -> `<div>/<button>` markup. * `ImageModalTest.php`, `ImageModalTriggerTest.php`, `ModalBuilderTest.php` — same renames inside the modal markup these tests exercise via `ModalBuilder`. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
* `docs/release-notes.md` — write a focused 6.0.0 entry covering the actual Bootstrap 5 lift changes (Bootstrap-extension bump, attribute renames, JS modules, class-name updates, carousel indicator markup). The MediaWiki (1.43) and PHP (8.1) requirements are unchanged from 5.x and not listed under "Breaking changes". The bug-fix entries that already shipped in 5.2.3 / 5.2.4 are not re-listed under 6.0 since 6.0 inherits them from the 5.x line. * `docs/components.md` — note the jumbotron now emits utility classes instead of the removed `.jumbotron` class. * `docs/components/*.md` — update Bootstrap-version text references (`4.1` -> `5.3` doc URLs). * `docs/components/jumbotron.md` — drop the long-standing inaccurate "It also enlarges the font sizes of the text inside it" claim (Bootstrap 4's `.jumbotron` had no rule for contained-heading sizes either; verified empirically, headlines inside vs outside are identical font-size on both framework versions). Add a "Note" callout placing the Bootstrap 5 context. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.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.
Scope discipline
This PR is the BS4→BS5 framework lift only.
Not in scope:
popover.vector-fixBS3 selector,.alert-defaultcleanup,.carousel-inner > .itemcleanup — tracked at Revisit per-skin module loading mechanism #90.Verification
Tested with MW 1.43.8,
mediawiki/bootstrap ^6.0(Bootstrap framework 5.3.x), Chameleon at master HEAD (128fe31) and Medik at master HEAD (f7ca0ac). Two candidate wikis stood up side-by-side: Chameleon-default and Medik-default. Skin:Chameleon and Skin:Medik are only installed on their respective stack (useskin=<other-BS-skin>falls back to the wiki's default), so each was exercised on the stack that actually loads it. MW-core skins (vector-2022,vector,monobook,timeless) were exercised via?useskin=.A single wikitext test page,
BCTestMatrix, exercises every BC component across every documented attribute / colour / size / placement value (modals in five colours and three sizes, popovers in four placements and three trigger modes, eight alert colours plus dismissible variants, three-pane accordion, three-image carousel, the full button / badge / card / jumbotron matrix). Each interactive component was driven via Playwright with real user-input events (realmouseenterfor tooltips, click toggles for collapse / modal / popover), and assertions cover both the visible state (.modal.show,.popover.showwith BS5-shaped.popover-header/.popover-body,.btn-close-style dismissals) and the framework-level z-indices (modal 1055 / backdrop 1050 / popover 1070).Per-skin matrix of JS-driven components
Badge, Button, and Jumbotron have no JS and aren't listed; their rendering is covered by the screenshots below.
The ⚠ on the Medik / Card cell is the collapsible variant only; static cards render correctly. See Known issues below.
Rendered output per skin
The same
BCTestMatrixwikitext rendered under each skin (full-page screenshots):Test page wikitext: BCTestMatrix.txt
Side-by-side baseline comparison against the BS4 5.x release showed only expected BS4→BS5 stylistic evolution: BS5's
.btn-closeSVG icon vs BS4's×character; softer pastel BS5 alert palette; jumbotron utility-class composition (p-5 mb-4 bg-body-tertiary rounded-3) replacing the dropped.jumbotron. No functional or layout regressions outside the Skin:Medik card-collapsible defect noted below.Known issues
Skin:Medik: BS5 collapsible components don't re-toggle. On Skin:Medik, clicking the same
[data-bs-toggle="collapse"]trigger a second time doesn't re-hide the panel. Affects standalone collapsible cards and accordion same-pane re-clicks. Caused by BS5 being loaded twice on the page — Skin:Medik bundles its own copy alongside BC'sext.bootstrap.scripts, which produces duplicate event-handler registrations on the same trigger. Fix tracked at #70.