Migrate to Bootstrap 5.3 and resolve modal/popover/tooltip lifecycle bug

.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.0"
 	},
 	"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/components.md

@@ -22,6 +22,9 @@ the following components are available to be used inside the wiki text:
   want to hide and show large amount of content.
 * **[Jumbotron](components/jumbotron.md)**: A jumbotron indicates a big
   box for calling extra attention to some special content or information.
+  _Bootstrap 5 removed `.jumbotron`; the parser function is retained
+  (now emitting BS5 utility classes) but is deprecated and may be removed
+  in a future release._
 * **[Modal](components/modal.md)**: The Modal component is a dialog
   box/popup window that is displayed on top of the current page.
 * **[Popover](components/popover.md)**: The Popover component produces a

docs/components/accordion.md

@@ -40,6 +40,6 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
+* https://getbootstrap.com/docs/5.3/components/collapse/#accordion-example
 * https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp
 

docs/components/alert.md

@@ -54,6 +54,6 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/alerts/
+* https://getbootstrap.com/docs/5.3/components/alerts/
 * https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/

docs/components/badge.md

@@ -24,7 +24,7 @@ add multiple classes, separate them by a space.</dd>
 
 Allowed Values are
 <ul>
-<li>default</li>
+<li>default <i>(maps to <code>secondary</code> under Bootstrap 5)</i></li>
 <li>primary</li>
 <li>secondary</li>
 <li>success</li>
@@ -52,7 +52,7 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/badge/
+* https://getbootstrap.com/docs/5.3/components/badge/
 * https://www.w3schools.com/bootstrap4/bootstrap_badges.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 *

docs/components/button.md

@@ -26,7 +26,7 @@ add multiple classes, separate them by a space.</dd>
 
 Allowed Values are
 <ul>
-<li>default</li>
+<li>default <i>(maps to <code>secondary</code> under Bootstrap 5)</i></li>
 <li>primary</li>
 <li>secondary</li>
 <li>success</li>
@@ -78,7 +78,7 @@ background with button color.</dd>
 
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/buttons/
+* https://getbootstrap.com/docs/5.3/components/buttons/
 * https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 *

docs/components/card.md

@@ -109,6 +109,6 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/card/
+* https://getbootstrap.com/docs/5.3/components/card/
 * https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/

docs/components/carousel.md

@@ -38,5 +38,5 @@ attributes, otherwise the parser will drop all but one:
 ```
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/carousel/
+* https://getbootstrap.com/docs/5.3/components/carousel/
 * https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

docs/components/collapse.md

@@ -29,5 +29,5 @@ be used as the trigger element. In this case, all but the attributes
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/collapse/
+* https://getbootstrap.com/docs/5.3/components/collapse/
 * https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

docs/components/jumbotron.md

@@ -1,9 +1,19 @@
 ## Jumbotron
+
+> **⚠️ Deprecated.** Bootstrap 5 removed the `.jumbotron` component. The
+> `bootstrap_jumbotron` parser function is retained for backward compatibility
+> and now emits the equivalent Bootstrap 5 utility-class combination
+> (`p-5 mb-4 bg-body-tertiary rounded-3`) per the official migration guide.
+> New content should prefer composing utility classes directly. The parser
+> function may be removed in a future major release.
+
 A jumbotron indicates a big box for calling extra attention to some special
 content or information.
 
-A jumbotron is displayed as a grey box with rounded corners. It also enlarges
-the font sizes of the text inside it.
+A jumbotron is displayed as a light box with rounded corners. The Bootstrap 4
+version also enlarged the font sizes of the text inside it; the Bootstrap 5
+utility-class approximation does not — apply `display-*` utility classes to the
+contained headings if you want the BS4-era larger-font look.
 
 See also:
 * [Alert](alert.md)
@@ -33,5 +43,5 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/jumbotron/
+* https://getbootstrap.com/docs/5.3/migration/#jumbotron
 * https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp

docs/components/modal.md

@@ -31,7 +31,7 @@ add multiple classes, separate them by a space.</dd>
 
 Allowed Values are
 <ul>
-<li>default</li>
+<li>default <i>(maps to <code>secondary</code> under Bootstrap 5)</i></li>
 <li>primary</li>
 <li>secondary</li>
 <li>success</li>
@@ -76,8 +76,8 @@ be used as the trigger element.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/modal/
+* https://getbootstrap.com/docs/5.3/components/modal/
 * https://www.w3schools.com/bootstrap4/bootstrap_modal.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 
 Please, see also the [known issues](../known-issues.md) with this component.

docs/components/popover.md

@@ -26,7 +26,7 @@ add multiple classes, separate them by a space.</dd>
 
 Allowed Values are
 <ul>
-<li>default</li>
+<li>default <i>(maps to <code>secondary</code> under Bootstrap 5)</i></li>
 <li>primary</li>
 <li>secondary</li>
 <li>success</li>
@@ -94,6 +94,6 @@ behaviour with:
 
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/popovers/
+* https://getbootstrap.com/docs/5.3/components/popovers/
 * https://www.w3schools.com/bootstrap4/bootstrap_popover.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/utilities/colors/

docs/components/tooltip.md

@@ -51,5 +51,5 @@ following to your `Mediawiki:Common.css`:
 ```
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/tooltips/
+* https://getbootstrap.com/docs/5.3/components/tooltips/
 * https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp

docs/known-issues.md

@@ -2,6 +2,15 @@
 Some components cause problems with other components or "external"
 elements.
 
+> **Note for Bootstrap 5 (BootstrapComponents 6.0):**
+> A long-standing class of issues affecting Modal/Popover/Tooltip components
+> under MediaWiki 1.43+ (upstream issue [#68][issue-68] — "stop working after
+> a cache purge") was resolved in 6.0 by emitting modal markup inline next to
+> its trigger instead of relying on the `ParserOutput::setExtensionData` /
+> `OutputPageParserOutput` deferred-injection mechanism. If you saw any of the
+> earlier "modal does not open" / "popover does nothing" symptoms under MW
+> 1.43, those should now be fixed.
+
 ### Modals and popovers
 When you put popovers on a page with modals (or image modals),
 the modals break.
@@ -41,3 +50,5 @@ simply "push" the modal further down. For example:
     top: 60px;
 }
 ```
+
+[issue-68]: https://github.com/oetterer/BootstrapComponents/issues/68