WIP Update to Bootstrap 5

.github/workflows/ci.yml

@@ -13,34 +13,27 @@ jobs:
     strategy:
       matrix:
         include:
-          - mw: 'REL1_39'
-            php: 8.0
-            type: coverage
-            experimental: false
-          - mw: 'REL1_39'
-            php: 8.1
-            type: normal
-            experimental: false
-          - mw: 'REL1_40'
-            php: 8.1
-            type: normal
-            experimental: false
-          - mw: 'REL1_41'
+          - mw: 'REL1_43'
             php: 8.1
+            # TODO: Scrutinzer Ocular overage disabled due to https://github.com/scrutinizer-ci/ocular/issues/51
             type: normal
-            experimental: false
-          - mw: 'REL1_42'
+            experimental: true
+          - mw: 'REL1_44'
             php: 8.2
             type: normal
             experimental: false
-          - mw: 'REL1_43'
+          - mw: 'REL1_45'
             php: 8.3
             type: normal
-            experimental: true
+            experimental: false
           - mw: 'master'
             php: 8.4
             type: normal
             experimental: true
+          - mw: 'master'
+            php: 8.5
+            type: normal
+            experimental: true
 
     runs-on: ubuntu-latest
     continue-on-error: ${{ matrix.experimental }}

.scrutinizer.yml

@@ -14,8 +14,9 @@ tools:
     php_loc: true
     php_analyzer: true
     sensiolabs_security_checker: true
-    external_code_coverage:
-        timeout: '1200' # timeout in seconds
+    # TODO: Scrutinzer Ocular overage disabled due to https://github.com/scrutinizer-ci/ocular/issues/51
+    # external_code_coverage:
+    #    timeout: '1200' # timeout in seconds
 
 checks:
     php:

README.md

@@ -7,7 +7,7 @@
 
 Bootstrap Components is a [MediaWiki] extension that aims to provide
 editors with easy access to certain components introduced by
-[Twitter Bootstrap 4][Bootstrap].
+[Twitter Bootstrap 5][Bootstrap].
 
 Depending on your configuration, editors can utilize several
 _tag extensions_ and _parser functions_ inside wiki code to place certain
@@ -16,8 +16,8 @@ configuration it can add a new [gallery][Gallery] mode, and replace normal
 [image rendering][Image] with an image modal.
 
 ## Requirements
-* PHP 8.0 or later
-* MediaWiki 1.39 or later
+* PHP 8.1 or later
+* MediaWiki 1.43 or later
 
 ## Documentation
 - [Installation and configuration](docs/installation-configuration.md)
@@ -31,8 +31,9 @@ configuration it can add a new [gallery][Gallery] mode, and replace normal
 
 Please also see the [known issues][known-issues] section.
 
-There is also a [migration guide](docs/migration-guide.md) for users switching
-from bootstrap3 (BootstrapComponents ~1.2) to bootstrap4 (BootstrapComponents ~4.0).
+There is also a [migration guide](docs/migration-guide.md) for users switching between versions:
+- Bootstrap 3 → Bootstrap 4: BootstrapComponents ~1.2 → ~4.0
+- Bootstrap 4 → Bootstrap 5: BootstrapComponents ~5.x → ~6.0
 
 ## Contact
 For bug reports and feature requests, please see if it is already reported on

composer.json

@@ -25,15 +25,15 @@
 		"source": "https://github.com/oetterer/BootstrapComponents"
 	},
 	"require": {
-		"php": ">=8.0",
+		"php": ">=8.1",
 		"composer/installers": "^2|^1.0.1",
-		"mediawiki/bootstrap": "^5.0"
+		"mediawiki/bootstrap": "6.x-dev"
 	},
 	"require-dev": {
 		"mediawiki/mediawiki-codesniffer": "46.0.0",
-    "mediawiki/mediawiki-phan-config": "0.15.1",
+		"mediawiki/mediawiki-phan-config": "0.15.1",
 		"phpmd/phpmd": "~2.1",
-		"php": ">=8.0"
+		"php": ">=8.1"
 	},
 	"suggest": {
 		"mediawiki/scribunto": "Framework for embedding scripting languages into MediaWiki pages"
@@ -58,5 +58,10 @@
 			"composer phpunit",
 			"composer cs"
 		]
+	},
+	"extra": {
+		"branch-alias": {
+			"dev-master": "6.x-dev"
+		}
 	}
 }

docs/migration-guide.md

@@ -1,7 +1,97 @@
 ## Migration Guide
 
+### Migrating from Bootstrap 4 (BootstrapComponents 5.x) to Bootstrap 5 (BootstrapComponents 6.0)
+
+BootstrapComponents 6.0 upgrades the underlying Bootstrap framework from version 4 to version 5.3. This guide helps you understand the changes and migrate your wiki.
+
+#### System Requirements
+- **MediaWiki:** 1.43 or later (upgraded from 1.39)
+- **PHP:** 8.1 or later (upgraded from 8.0)
+- **Bootstrap Extension:** mediawiki/bootstrap 6.x-dev from [ProfessionalWiki/Bootstrap](https://github.com/ProfessionalWiki/Bootstrap)
+
+#### User Impact
+**Good News:** Most existing wiki markup using BootstrapComponents should continue to work without any changes! The extension handles most Bootstrap 5 migrations internally.
+
+#### Component Changes
+
+##### Jumbotron
+The Jumbotron component still works but now uses Bootstrap 5 utility classes instead of the removed `.jumbotron` class. The visual appearance should be similar but may have minor differences. Consider:
+- Using utility classes directly: `<div class="p-5 mb-4 bg-body-tertiary rounded-3">`
+- Or continue using `<bootstrap_jumbotron>` tag which is now implemented using these utilities
+- Reference: https://getbootstrap.com/docs/5.3/examples/jumbotron/
+
+##### Button Colors
+The `color="default"` attribute is automatically mapped to `color="secondary"` in Bootstrap 5. If you prefer different colors:
+- Use `color="light"` for light gray buttons
+- Use `color="secondary"` explicitly for the standard secondary color
+
+##### Badge Pill
+If you're using custom CSS targeting `.badge-pill`, update to `.rounded-pill`:
+```css
+/* Old */
+.badge-pill { ... }
+
+/* New */
+.rounded-pill { ... }
+```
+
+##### Alert and Modal Close Buttons
+Close buttons now use Bootstrap 5's `.btn-close` class. If you have custom CSS targeting `.close`:
+```css
+/* Old */
+.close { ... }
+
+/* New */
+.btn-close { ... }
+```
+
+#### JavaScript Changes
+Bootstrap 5 removed jQuery dependency. If you have custom JavaScript interacting with Bootstrap components:
+
+**Old (Bootstrap 4 + jQuery):**
+```javascript
+$('.carousel').carousel();
+$('[data-toggle="tooltip"]').tooltip();
+```
+
+**New (Bootstrap 5 vanilla JS):**
+```javascript
+document.querySelectorAll('.carousel').forEach(el => {
+    new bootstrap.Carousel(el);
+});
+document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+    new bootstrap.Tooltip(el);
+});
+```
+
+#### Data Attributes
+If you're using custom HTML with Bootstrap data attributes, update to the `data-bs-*` prefix:
+- `data-toggle` → `data-bs-toggle`
+- `data-target` → `data-bs-target`
+- `data-dismiss` → `data-bs-dismiss`
+- `data-slide` → `data-bs-slide`
+- `data-parent` → `data-bs-parent`
+- `data-content` → `data-bs-content`
+- `data-placement` → `data-bs-placement`
+- `data-trigger` → `data-bs-trigger`
+
+#### Testing Your Upgrade
+After upgrading:
+1. Test all pages using BootstrapComponents
+2. Verify modals, tooltips, popovers, and carousels work correctly
+3. Check custom CSS for compatibility
+4. Test any custom JavaScript interacting with Bootstrap
+5. Verify with different MediaWiki skins (Vector, Vector-2022)
+
+#### Rollback
+If you encounter issues, you can rollback to BootstrapComponents 5.x which uses Bootstrap 4.
+
+---
+
+### Migrating from Bootstrap 3 (BootstrapComponents 1.x) to Bootstrap 4 (BootstrapComponents 4.x-5.x)
+
 There have been some changes between versions ~1.0 and ~4.0. Foremost is that
-the new BootstrapComponents utilizes Twitter Bootstrap4. Therefore, it mirrors
+the new BootstrapComponents utilizes Twitter Bootstrap 4. Therefore, it mirrors
 changes made by Bootstrap.
 
 Also, extension loading must now be done manually in your LocalSettings, no

docs/release-notes.md

@@ -1,5 +1,39 @@
 ## Release Notes
 
+### BootstrapComponents 6.0.0
+
+Released on _TBD_
+
+**BREAKING CHANGES:**
+* Requires MediaWiki 1.43 or later (upgraded from 1.39)
+* Requires PHP 8.1 or later (upgraded from 8.0)
+* Upgraded from Bootstrap 4 to Bootstrap 5.3
+* Changed Bootstrap dependency from `mediawiki/bootstrap ^5.0` to `mediawiki/bootstrap 6.x-dev` (ProfessionalWiki)
+
+**Bootstrap 5 Migration Changes:**
+* All data attributes updated to Bootstrap 5 format with `data-bs-*` prefix:
+  - `data-toggle` → `data-bs-toggle`
+  - `data-target` → `data-bs-target`
+  - `data-dismiss` → `data-bs-dismiss`
+  - `data-slide` → `data-bs-slide`
+  - `data-parent` → `data-bs-parent`
+  - `data-content` → `data-bs-content`
+  - `data-placement` → `data-bs-placement`
+  - `data-trigger` → `data-bs-trigger`
+* JavaScript modules migrated from jQuery to vanilla JavaScript (Bootstrap 5 requirement)
+* Badge component: `badge-pill` class changed to `rounded-pill`
+* Button component: `btn-default` automatically mapped to `btn-secondary`
+* Alert and Modal close buttons: Migrated from `.close` class with `×` character to `.btn-close` class
+* Jumbotron component: Recreated using Bootstrap 5 utility classes (`p-5 mb-4 bg-body-tertiary rounded-3`)
+* All CSS fixes reviewed and updated for Bootstrap 5 compatibility
+
+**User Impact:**
+* Most existing wiki markup using BootstrapComponents should continue to work without changes
+* JavaScript initialization now uses Bootstrap 5 native API
+* Custom CSS may need review if it targets Bootstrap 4-specific classes
+
+See [migration guide](migration-guide.md) for detailed upgrade instructions.
+
 ### BootstrapComponents 5.3.0
 
 Released on _not yet_

extension.json

@@ -1,13 +1,13 @@
 {
 	"name": "BootstrapComponents",
-	"version": "5.2.1",
+	"version": "6.0.0-dev",
 	"author": [ "Tobias Oetterer" ],
 	"url": "https://www.mediawiki.org/wiki/Extension:BootstrapComponents",
 	"descriptionmsg": "bootstrap-components-desc",
 	"license-name": "GPL-3.0-or-later",
 	"type": "parserhook",
 	"requires": {
-		"MediaWiki": ">= 1.39.0"
+		"MediaWiki": ">= 1.43.0"
 	},
 	"ConfigRegistry": {
 		"BootstrapComponents": "GlobalVarConfig::newInstance"

modules/ext.bootstrapComponents.button.fix.css

@@ -25,12 +25,8 @@
 
 /*
  * a href prioritizes the mw link color. overwrite this here to a more suitable one
+ * Bootstrap 5: btn-default removed
  */
-a.btn-default,
-a.btn-default:link,
-a.btn-default:visited,
-a.btn-default:active,
-a.btn-default:hover,
 a.btn-light,
 a.btn-light:link,
 a.btn-light:visited,
@@ -79,19 +75,15 @@ a.btn-dark:hover {
 
 /**
  * outline link colors have to be defined separately
+ * Bootstrap 5: btn-outline-default removed
  */
 
-a.btn-outline-default,
-a.btn-outline-default:link,
-a.btn-outline-default:visited,
-a.btn-outline-default:active,
 a.btn-outline-light,
 a.btn-outline-light:link,
 a.btn-outline-light:visited,
 a.btn-outline-light:active {
 	color: var(--white);
 }
-a.btn-outline-default:hover,
 a.btn-outline-light:hover {
 	color: #212529;
 }

modules/ext.bootstrapComponents.carousel.js

@@ -1,5 +1,7 @@
 /**
- * Contains javascript code executed when tooltips are used.
+ * Contains javascript code executed when carousels are used.
+ *
+ * Bootstrap 5 migration: Converted from jQuery to vanilla JavaScript.
  *
  * @copyright (C) 2018, Tobias Oetterer, Paderborn University
  * @license       https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License, version 3 (or later)
@@ -23,6 +25,24 @@
  * @author        Tobias Oetterer
  */
 
-$(function () {
-	$('.carousel').carousel();
-});
+( function () {
+	'use strict';
+
+	// Wait for DOM to be ready
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', initCarousels );
+	} else {
+		initCarousels();
+	}
+
+	function initCarousels() {
+		// Bootstrap 5 automatically initializes carousels with data-bs-ride="carousel"
+		// Manual initialization for additional control
+		var carouselElements = document.querySelectorAll( '.carousel' );
+		carouselElements.forEach( function ( element ) {
+			if ( typeof bootstrap !== 'undefined' && bootstrap.Carousel ) {
+				new bootstrap.Carousel( element );
+			}
+		} );
+	}
+}() );

modules/ext.bootstrapComponents.popover.js

@@ -1,6 +1,8 @@
 /**
  * Contains javascript code executed when popovers are used.
  *
+ * Bootstrap 5 migration: Converted from jQuery to vanilla JavaScript.
+ *
  * @copyright (C) 2018, Tobias Oetterer, Paderborn University
  * @license       https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License, version 3 (or later)
  *
@@ -22,11 +24,26 @@
  * @ingroup       BootstrapComponents
  * @author        Tobias Oetterer
  */
-$( function() {
-    $(document).ready(function(){
-            $('[data-toggle="popover"]').popover({
-                html: true
-            });
-        });
-    }
-);
+
+( function () {
+	'use strict';
+
+	// Wait for DOM to be ready
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', initPopovers );
+	} else {
+		initPopovers();
+	}
+
+	function initPopovers() {
+		// Initialize all popovers with HTML enabled (Bootstrap 5 vanilla JS API)
+		var popoverTriggerList = document.querySelectorAll( '[data-bs-toggle="popover"]' );
+		popoverTriggerList.forEach( function ( popoverTriggerEl ) {
+			if ( typeof bootstrap !== 'undefined' && bootstrap.Popover ) {
+				new bootstrap.Popover( popoverTriggerEl, {
+					html: true
+				} );
+			}
+		} );
+	}
+}() );