diff --git a/composer.json b/composer.json index 7513d55..e610206 100644 --- a/composer.json +++ b/composer.json @@ -27,7 +27,7 @@ "require": { "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", @@ -58,5 +58,10 @@ "composer phpunit", "composer cs" ] + }, + "extra": { + "branch-alias": { + "dev-master": "6.x-dev" + } } } diff --git a/docs/components.md b/docs/components.md index d02f2b0..53cd3c8 100644 --- a/docs/components.md +++ b/docs/components.md @@ -22,6 +22,8 @@ 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 Bootstrap 5 utility classes for an equivalent look._ * **[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 diff --git a/docs/components/accordion.md b/docs/components/accordion.md index ca1ffdd..78d1c21 100644 --- a/docs/components/accordion.md +++ b/docs/components/accordion.md @@ -40,6 +40,5 @@ add multiple css styles, separate them by a semicolon. ### Links -* https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example -* https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp +* https://getbootstrap.com/docs/5.3/components/accordion/ diff --git a/docs/components/alert.md b/docs/components/alert.md index 0a0907a..55df8c2 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -54,6 +54,5 @@ add multiple css styles, separate them by a semicolon. ### Links -* https://getbootstrap.com/docs/4.1/components/alerts/ -* https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/alerts/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ diff --git a/docs/components/badge.md b/docs/components/badge.md index 31eb228..6c054c1 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -52,7 +52,6 @@ add multiple css styles, separate them by a semicolon. ### Links -* https://getbootstrap.com/docs/4.1/components/badge/ -* https://www.w3schools.com/bootstrap4/bootstrap_badges.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/badge/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ * diff --git a/docs/components/button.md b/docs/components/button.md index c228f21..852ab9f 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -78,7 +78,6 @@ background with button color. ### Links -* https://getbootstrap.com/docs/4.1/components/buttons/ -* https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/buttons/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ * diff --git a/docs/components/card.md b/docs/components/card.md index a059ffe..cf473c1 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -109,6 +109,5 @@ add multiple css styles, separate them by a semicolon. ### Links -* https://getbootstrap.com/docs/4.1/components/card/ -* https://www.w3schools.com/bootstrap4/bootstrap_cards.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/card/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 1a8f7fd..44d1858 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -38,5 +38,4 @@ attributes, otherwise the parser will drop all but one: ``` ### Links -* https://getbootstrap.com/docs/4.1/components/carousel/ -* https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp +* https://getbootstrap.com/docs/5.3/components/carousel/ diff --git a/docs/components/collapse.md b/docs/components/collapse.md index 8b6abd7..1bf65e0 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -29,5 +29,4 @@ be used as the trigger element. In this case, all but the attributes ### Links -* https://getbootstrap.com/docs/4.1/components/collapse/ -* https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp +* https://getbootstrap.com/docs/5.3/components/collapse/ diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md index 86a34bd..0e4b5cf 100644 --- a/docs/components/jumbotron.md +++ b/docs/components/jumbotron.md @@ -1,9 +1,14 @@ ## Jumbotron + +> **Note.** 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 per the official migration guide linked below. + 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 grey box with rounded corners. See also: * [Alert](alert.md) @@ -33,5 +38,5 @@ add multiple css styles, separate them by a semicolon. ### Links -* https://getbootstrap.com/docs/4.1/components/jumbotron/ -* https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp +* https://getbootstrap.com/docs/5.3/migration/#jumbotron +* https://getbootstrap.com/docs/5.3/examples/jumbotron/ diff --git a/docs/components/modal.md b/docs/components/modal.md index 2bfe7a4..8978e87 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -76,8 +76,7 @@ be used as the trigger element. ### Links -* https://getbootstrap.com/docs/4.1/components/modal/ -* https://www.w3schools.com/bootstrap4/bootstrap_modal.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/modal/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ Please, see also the [known issues](../known-issues.md) with this component. diff --git a/docs/components/popover.md b/docs/components/popover.md index 5b75e1f..2acb18d 100644 --- a/docs/components/popover.md +++ b/docs/components/popover.md @@ -94,6 +94,5 @@ behaviour with: ### Links -* https://getbootstrap.com/docs/4.1/components/popovers/ -* https://www.w3schools.com/bootstrap4/bootstrap_popover.asp -* https://getbootstrap.com/docs/4.1/utilities/colors/ +* https://getbootstrap.com/docs/5.3/components/popovers/ +* https://getbootstrap.com/docs/5.3/utilities/colors/ diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index 726af56..fcf2af7 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -51,5 +51,4 @@ following to your `Mediawiki:Common.css`: ``` ### Links -* https://getbootstrap.com/docs/4.1/components/tooltips/ -* https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp +* https://getbootstrap.com/docs/5.3/components/tooltips/ diff --git a/docs/release-notes.md b/docs/release-notes.md index c25a1c6..1fa2750 100644 --- a/docs/release-notes.md +++ b/docs/release-notes.md @@ -7,6 +7,7 @@ Released on TBD Breaking changes: * requires MediaWiki 1.43 or later * requires PHP 8.1 or later +* requires Bootstrap extension 6.x, which bundles Bootstrap library 5.3 ### BootstrapComponents 5.2.4 diff --git a/extension.json b/extension.json index 80eb3e8..7958374 100644 --- a/extension.json +++ b/extension.json @@ -109,7 +109,9 @@ "scripts": "ext.bootstrapComponents.carousel.js" }, "ext.bootstrapComponents.modal.fix": { - "styles": "ext.bootstrapComponents.modal.fix.css" + "dependencies": "ext.bootstrap.scripts", + "styles": "ext.bootstrapComponents.modal.fix.css", + "scripts": "ext.bootstrapComponents.modal.js" }, "ext.bootstrapComponents.modal.vector-fix": { "styles": "ext.bootstrapComponents.modal.vector-fix.css" diff --git a/modules/ext.bootstrapComponents.carousel.fix.css b/modules/ext.bootstrapComponents.carousel.fix.css index 496ac3e..1607d57 100644 --- a/modules/ext.bootstrapComponents.carousel.fix.css +++ b/modules/ext.bootstrapComponents.carousel.fix.css @@ -30,6 +30,6 @@ margin: auto; } -.carousel ol.carousel-indicators { +.carousel .carousel-indicators { margin: 0 0 10px -30%; } diff --git a/modules/ext.bootstrapComponents.carousel.js b/modules/ext.bootstrapComponents.carousel.js index 941f604..8d64a04 100644 --- a/modules/ext.bootstrapComponents.carousel.js +++ b/modules/ext.bootstrapComponents.carousel.js @@ -1,5 +1,5 @@ /** - * Contains javascript code executed when tooltips are used. + * Contains javascript code executed when carousels are used. * * @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 +23,25 @@ * @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() { + if ( typeof bootstrap === 'undefined' || !bootstrap.Carousel ) { + // eslint-disable-next-line no-console + console.warn( 'BootstrapComponents: bootstrap.Carousel is not available; carousels will not cycle.' ); + return; + } + const carouselElements = document.querySelectorAll( '.carousel' ); + carouselElements.forEach( function ( element ) { + new bootstrap.Carousel( element ); + } ); + } +}() ); diff --git a/modules/ext.bootstrapComponents.modal.js b/modules/ext.bootstrapComponents.modal.js new file mode 100644 index 0000000..fd5c42d --- /dev/null +++ b/modules/ext.bootstrapComponents.modal.js @@ -0,0 +1,28 @@ +/** + * Contains javascript code executed when modals are used. + */ + +( function () { + 'use strict'; + + // Wait for DOM to be ready + if ( document.readyState === 'loading' ) { + document.addEventListener( 'DOMContentLoaded', initModals ); + } else { + initModals(); + } + + function initModals() { + if ( typeof bootstrap === 'undefined' || !bootstrap.Modal ) { + // eslint-disable-next-line no-console + console.warn( 'BootstrapComponents: bootstrap.Modal is not available; modal triggers will not work.' ); + return; + } + // Instantiate every .modal element so trigger clicks (or programmatic + // bootstrap.Modal.getOrCreateInstance(el).show()) work as expected. + const modalList = document.querySelectorAll( '.modal' ); + modalList.forEach( function ( modalEl ) { + bootstrap.Modal.getOrCreateInstance( modalEl ); + } ); + } +}() ); diff --git a/modules/ext.bootstrapComponents.popover.js b/modules/ext.bootstrapComponents.popover.js index 82a03ea..f0de8ed 100644 --- a/modules/ext.bootstrapComponents.popover.js +++ b/modules/ext.bootstrapComponents.popover.js @@ -22,11 +22,28 @@ * @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() { + if ( typeof bootstrap === 'undefined' || !bootstrap.Popover ) { + // eslint-disable-next-line no-console + console.warn( 'BootstrapComponents: bootstrap.Popover is not available; popover triggers will not work.' ); + return; + } + const popoverTriggerList = document.querySelectorAll( '[data-bs-toggle="popover"]' ); + popoverTriggerList.forEach( function ( popoverTriggerEl ) { + new bootstrap.Popover( popoverTriggerEl, { + html: true + } ); + } ); + } +}() ); diff --git a/modules/ext.bootstrapComponents.tooltip.js b/modules/ext.bootstrapComponents.tooltip.js index 575e021..a9dabd7 100644 --- a/modules/ext.bootstrapComponents.tooltip.js +++ b/modules/ext.bootstrapComponents.tooltip.js @@ -23,9 +23,25 @@ * @author Tobias Oetterer */ -$( function() { - $(document).ready(function(){ - $('[data-toggle="tooltip"]').tooltip(); - }); - } -); \ No newline at end of file +( function () { + 'use strict'; + + // Wait for DOM to be ready + if ( document.readyState === 'loading' ) { + document.addEventListener( 'DOMContentLoaded', initTooltips ); + } else { + initTooltips(); + } + + function initTooltips() { + if ( typeof bootstrap === 'undefined' || !bootstrap.Tooltip ) { + // eslint-disable-next-line no-console + console.warn( 'BootstrapComponents: bootstrap.Tooltip is not available; tooltip triggers will not work.' ); + return; + } + const tooltipTriggerList = document.querySelectorAll( '[data-bs-toggle="tooltip"]' ); + tooltipTriggerList.forEach( function ( tooltipTriggerEl ) { + new bootstrap.Tooltip( tooltipTriggerEl ); + } ); + } +}() ); diff --git a/src/Components/Alert.php b/src/Components/Alert.php index 92a62d0..77dffea 100644 --- a/src/Components/Alert.php +++ b/src/Components/Alert.php @@ -109,18 +109,11 @@ private function renderDismissButton() { return Html::rawElement( 'button', [ - 'type' => 'button', - 'class' => 'close', - 'data-dismiss' => 'alert', - 'aria-label' => wfMessage( 'bootstrap-components-close-element' )->inContentLanguage()->text(), - ], - Html::rawElement( - 'span', - [ - 'aria-hidden' => 'true', - ], - '×' - ) + 'type' => 'button', + 'class' => 'btn-close', + 'data-bs-dismiss' => 'alert', + 'aria-label' => wfMessage( 'bootstrap-components-close-element' )->inContentLanguage()->text(), + ] ); } } diff --git a/src/Components/Badge.php b/src/Components/Badge.php index 6dc1cd3..6f068a2 100644 --- a/src/Components/Badge.php +++ b/src/Components/Badge.php @@ -72,10 +72,10 @@ private function calculateClassAttribute() { $class = [ 'badge' ]; if ( (bool)$this->getValueFor( 'pill' ) ) { - $class[] = 'badge-pill'; + $class[] = 'rounded-pill'; } - $class[] = 'badge-' . $this->getValueFor( 'color', 'primary' ); + $class[] = 'text-bg-' . $this->getValueFor( 'color', 'primary' ); return $class; } } diff --git a/src/Components/Card.php b/src/Components/Card.php index 27008aa..216f2d2 100644 --- a/src/Components/Card.php +++ b/src/Components/Card.php @@ -83,7 +83,7 @@ protected function placeMe( $input ) { 'class' => $this->arrayToString( $innerClass, ' ' ), ]; if ( $this->isCollapsible() ) { - $innerAttributes['data-parent'] = $this->getDataParent(); + $innerAttributes['data-bs-parent'] = $this->getDataParent(); $innerAttributes['aria-labelledby'] = $this->getId() . '_header'; } @@ -240,8 +240,8 @@ private function processAdditionToCard( string $type ): string { if ( $type == 'header' ) { if ( $this->isCollapsible() ) { $newAttributes += [ - 'data-toggle' => 'collapse', - 'data-target' => '#' . $this->getId(), + 'data-bs-toggle' => 'collapse', + 'data-bs-target' => '#' . $this->getId(), 'aria-controls' => $this->getId(), 'aria-expanded' => $this->getValueFor( 'active' ) ? 'true' : 'false', 'id' => $this->getId() . '_header' diff --git a/src/Components/Carousel.php b/src/Components/Carousel.php index 63485cf..035dc92 100644 --- a/src/Components/Carousel.php +++ b/src/Components/Carousel.php @@ -63,7 +63,7 @@ protected function placeMe( $input ) { 'class' => $this->arrayToString( $class, ' ' ), 'style' => $this->arrayToString( $style, ';' ), 'id' => $this->getId(), - 'data-ride' => 'carousel', + 'data-bs-ride' => 'carousel', ], $this->generateIndicators( count( $images ) ) . Html::rawElement( @@ -90,7 +90,7 @@ private function buildControls() { 'class' => 'carousel-control-prev', 'href' => '#' . $this->getId(), 'role' => 'button', - 'data-slide' => 'prev', + 'data-bs-slide' => 'prev', ], Html::rawElement( 'span', [ 'class' => 'carousel-control-prev-icon', 'aria-hidden' => 'true' ] ) ) . Html::rawElement( @@ -99,7 +99,7 @@ private function buildControls() { 'class' => 'carousel-control-next', 'href' => '#' . $this->getId(), 'role' => 'button', - 'data-slide' => 'next', + 'data-bs-slide' => 'next', ], Html::rawElement( 'span', [ 'class' => 'carousel-control-next-icon', 'aria-hidden' => 'true' ] ) ); @@ -186,17 +186,20 @@ private function generateIndicators( $num ) { $class = 'active'; for ( $i = 0; $i < $num; $i++ ) { $inner .= "\t" . Html::rawElement( - 'li', + 'button', [ - 'data-target' => '#' . $this->getId(), - 'data-slide-to' => $i, - 'class' => $class, + 'type' => 'button', + 'data-bs-target' => '#' . $this->getId(), + 'data-bs-slide-to' => $i, + 'class' => $class ?: false, + 'aria-current' => $class ? 'true' : false, + 'aria-label' => 'Slide ' . ( $i + 1 ), ] ) . PHP_EOL; $class = false; } return PHP_EOL . Html::rawElement( - 'ol', + 'div', [ 'class' => 'carousel-indicators' ], $inner ) . PHP_EOL; diff --git a/src/Components/Collapse.php b/src/Components/Collapse.php index 2321f6d..b69ad58 100644 --- a/src/Components/Collapse.php +++ b/src/Components/Collapse.php @@ -74,7 +74,7 @@ protected function placeMe( $input ) { */ private function generateButton( ParserRequest $parserRequest ) { $button = new Button( $this->getComponentLibrary(), $this->getParserOutputHelper(), $this->getNestingController() ); - $button->injectRawAttributes( [ 'data-toggle' => 'collapse' ] ); + $button->injectRawAttributes( [ 'data-bs-toggle' => 'collapse' ] ); $buttonAttributes = $parserRequest->getAttributes(); unset( $buttonAttributes['id'] ); diff --git a/src/Components/Jumbotron.php b/src/Components/Jumbotron.php index 89d4739..2f52e8a 100644 --- a/src/Components/Jumbotron.php +++ b/src/Components/Jumbotron.php @@ -44,7 +44,9 @@ class Jumbotron extends AbstractComponent { * @param string $input */ protected function placeMe( $input ) { - list ( $class, $style ) = $this->processCss( 'jumbotron', [] ); + // Bootstrap 5 dropped `.jumbotron` in favour of composing the same look + // from utility classes. See https://getbootstrap.com/docs/5.3/examples/jumbotron/. + list ( $class, $style ) = $this->processCss( [ 'p-5', 'mb-4', 'bg-body-tertiary', 'rounded-3' ], [] ); # @hack: the outer container is a workaround, to get all the necessary css if not inside a grid container # @fixme: used inside mw content, the width calculation for smaller screens is broken (as of Bootstrap 1.2.3) return Html::rawElement( diff --git a/src/Components/Modal.php b/src/Components/Modal.php index cd93556..2e6f89b 100644 --- a/src/Components/Modal.php +++ b/src/Components/Modal.php @@ -104,10 +104,10 @@ private function generateButton( $text ) { return Html::rawElement( 'button', [ - 'type' => 'button', - 'class' => 'modal-trigger btn btn-' . $this->getValueFor( 'color', 'default' ), - 'data-toggle' => 'modal', - 'data-target' => '#' . $this->getId(), + 'type' => 'button', + 'class' => 'modal-trigger btn btn-' . $this->getValueFor( 'color', 'default' ), + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#' . $this->getId(), ], $text ); diff --git a/src/Components/Popover.php b/src/Components/Popover.php index 1a5dc1d..cec5415 100644 --- a/src/Components/Popover.php +++ b/src/Components/Popover.php @@ -87,11 +87,11 @@ private function buildHtmlElements( $input, $text, $heading ) { $attributes = array_merge( $attributes, [ - 'data-toggle' => 'popover', + 'data-bs-toggle' => 'popover', 'title' => $heading, - 'data-content' => str_replace( "\n", " ", trim( $input ) ), - 'data-placement' => $this->getValueFor( 'placement' ), - 'data-trigger' => $this->getValueFor( 'trigger' ), + 'data-bs-content' => str_replace( "\n", " ", trim( $input ) ), + 'data-bs-placement' => $this->getValueFor( 'placement' ), + 'data-bs-trigger' => $this->getValueFor( 'trigger' ), ] ); $tag = "button"; diff --git a/src/Components/Tooltip.php b/src/Components/Tooltip.php index a981fe4..e166804 100644 --- a/src/Components/Tooltip.php +++ b/src/Components/Tooltip.php @@ -85,8 +85,8 @@ private function buildHtmlElements( $input, $tooltip ) { $attributes = array_merge( $attributes, [ - 'data-placement' => $this->getValueFor( 'placement' ), - 'data-toggle' => 'tooltip', + 'data-bs-placement' => $this->getValueFor( 'placement' ), + 'data-bs-toggle' => 'tooltip', 'title' => $tooltip, ] ); diff --git a/src/ModalBuilder.php b/src/ModalBuilder.php index c9ed806..792a8c8 100644 --- a/src/ModalBuilder.php +++ b/src/ModalBuilder.php @@ -103,8 +103,8 @@ public static function wrapTriggerElement( $element, $id ) { 'span', [ 'class' => 'modal-trigger', - 'data-toggle' => 'modal', - 'data-target' => '#' . $id, + 'data-bs-toggle' => 'modal', + 'data-bs-target' => '#' . $id, ], $element ); @@ -139,7 +139,7 @@ public function __construct( * Parses the modal. * * Emits the trigger followed by the modal container inline. The container is - * `position: fixed` and is addressed via `data-target="#id"`, so its DOM + * `position: fixed` and is addressed via `data-bs-target="#id"`, so its DOM * placement is not significant. * * @return string @@ -306,8 +306,8 @@ protected function buildModal() { */ protected function buildTrigger() { $trigger = $this->getTrigger(); - if ( preg_match( '/data-toggle[^"]+"modal/', $trigger ) - && preg_match( '/data-target[^"]+"#' . $this->getId() . '"/', $trigger ) + if ( preg_match( '/data-bs-toggle[^"]+"modal/', $trigger ) + && preg_match( '/data-bs-target[^"]+"#' . $this->getId() . '"/', $trigger ) && preg_match( '/class[^"]+"[^"]*modal-trigger' . '/', $trigger ) ) { return $trigger; @@ -447,10 +447,10 @@ private function generateFooter( $footer = '' ) { $footer . Html::rawElement( 'button', [ - 'type' => 'button', - 'class' => 'btn btn-default', - 'data-dismiss' => 'modal', - 'aria-label' => $close, + 'type' => 'button', + 'class' => 'btn btn-default', + 'data-bs-dismiss' => 'modal', + 'aria-label' => $close, ], $close ) @@ -477,16 +477,11 @@ private function generateHeader( $header = '' ) { $button = Html::rawElement( 'button', [ - 'type' => 'button', - 'class' => 'close', - 'data-dismiss' => 'modal', - 'aria-label' => wfMessage( 'bootstrap-components-close-element' )->inContentLanguage()->text(), - ], - Html::rawElement( - 'span', - [ 'aria-hidden' => 'true' ], - '×' - ) + 'type' => 'button', + 'class' => 'btn-close', + 'data-bs-dismiss' => 'modal', + 'aria-label' => wfMessage( 'bootstrap-components-close-element' )->inContentLanguage()->text(), + ] ); return Html::rawElement( 'div', diff --git a/tests/phpunit/Unit/CarouselGalleryTest.php b/tests/phpunit/Unit/CarouselGalleryTest.php index c6b134d..9cdf1f9 100644 --- a/tests/phpunit/Unit/CarouselGalleryTest.php +++ b/tests/phpunit/Unit/CarouselGalleryTest.php @@ -82,17 +82,17 @@ public function galleryDataProvider() { 'fade' => '', ], [ - 0 => '', 'isHTML' => true, 'noparse' => true, ], @@ -104,15 +104,15 @@ public function galleryDataProvider() { ], [], [ - 0 => '', 'isHTML' => true, 'noparse' => true, ], diff --git a/tests/phpunit/Unit/Components/AlertTest.php b/tests/phpunit/Unit/Components/AlertTest.php index 1046fa2..98cc997 100644 --- a/tests/phpunit/Unit/Components/AlertTest.php +++ b/tests/phpunit/Unit/Components/AlertTest.php @@ -83,17 +83,17 @@ public function placeMeArgumentsProvider() { 'dismiss_arbitrary' => [ $this->input, [ 'dismissible' => 'bla' ], - '', + '', ], 'dismiss' => [ $this->input, [ 'dismissible' => true ], - '', + '', ], 'fading' => [ $this->input, [ 'dismissible' => 'fade', 'color' => 'warning' ], - '', + '', ], 'manual id, no dismiss' => [ $this->input, diff --git a/tests/phpunit/Unit/Components/BadgeTest.php b/tests/phpunit/Unit/Components/BadgeTest.php index 3c772b0..6b27199 100644 --- a/tests/phpunit/Unit/Components/BadgeTest.php +++ b/tests/phpunit/Unit/Components/BadgeTest.php @@ -69,7 +69,7 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [], - '' . $this->input . '', + '' . $this->input . '', ], 'empty' => [ '', @@ -79,22 +79,22 @@ public function placeMeArgumentsProvider() { 'manual id' => [ $this->input, [ 'id' => 'book' ], - '' . $this->input . '', + '' . $this->input . '', ], 'style and class' => [ $this->input, [ 'class' => 'dummy nice', 'style' => 'float:right;background-color:#80266e' ], - '' . $this->input . '', + '' . $this->input . '', ], 'pill' => [ $this->input, [ 'pill' => 'true' ], - '' . $this->input . '', + '' . $this->input . '', ], 'no pill' => [ $this->input, [ 'pill' => 0 ], - '' . $this->input . '', + '' . $this->input . '', ], ]; } diff --git a/tests/phpunit/Unit/Components/ButtonTest.php b/tests/phpunit/Unit/Components/ButtonTest.php index d7897da..7ffc080 100644 --- a/tests/phpunit/Unit/Components/ButtonTest.php +++ b/tests/phpunit/Unit/Components/ButtonTest.php @@ -80,7 +80,7 @@ public function testCanInjectRawAttributes() { ); $instance->injectRawAttributes( - [ 'data-toggle' => 'foo', 'data-target' => '#bar' ] + [ 'data-bs-toggle' => 'foo', 'data-bs-target' => '#bar' ] ); $generatedOutput = $instance->parseComponent( $parserRequest ); @@ -91,7 +91,7 @@ public function testCanInjectRawAttributes() { $this->assertMatchesRegularExpression( '~^' . $this->input . '$~', + . '" data-bs-toggle="foo" data-bs-target="#bar">' . $this->input . '$~', $generatedOutput ); } diff --git a/tests/phpunit/Unit/Components/CardTest.php b/tests/phpunit/Unit/Components/CardTest.php index 5792c45..ff785d6 100644 --- a/tests/phpunit/Unit/Components/CardTest.php +++ b/tests/phpunit/Unit/Components/CardTest.php @@ -148,7 +148,7 @@ public function placeMeArgumentsProvider() { 'footer-style'=> 'padding:5px', ], '
' - . '
' + . '
' . '

HEADING TEXT

[[File:Serenity.png]]' . '
' . $this->input . '
[[File:Serenity.png|class=card-img-bottom]]
FOOTER TEXT
', @@ -179,12 +179,12 @@ public function placeMeInsideAccordionArgumentsProvider() { 'simple' => [ $this->input, [], - '
' . $this->input . '
', + '
' . $this->input . '
', ], 'text missing' => [ '', [ 'header' => 'watch this', 'footer' => 'watch what?', 'collapsible' => 'false', ], - '
watch what?
', + '
watch what?
', ], 'all attributes' => [ $this->input, @@ -198,12 +198,12 @@ public function placeMeInsideAccordionArgumentsProvider() { 'heading' => 'HEADING TEXT', 'footer' => 'FOOTER TEXT', ], - '

HEADING TEXT

' . $this->input . '
FOOTER TEXT
', + '

HEADING TEXT

' . $this->input . '
FOOTER TEXT
', ], 'collapsible false' => [ $this->input, [ 'collapsible' => 'false', ], - '
' . $this->input . '
', + '
' . $this->input . '
', ], ]; } diff --git a/tests/phpunit/Unit/Components/CarouselTest.php b/tests/phpunit/Unit/Components/CarouselTest.php index ea34e21..6433abe 100644 --- a/tests/phpunit/Unit/Components/CarouselTest.php +++ b/tests/phpunit/Unit/Components/CarouselTest.php @@ -79,17 +79,17 @@ public function placeMeArgumentsProvider() { 'simple' => [ '[[File:Mal.jpg|Malcolm Reynolds_0]]', [ '[[File:Mal.jpg|Malcolm Reynolds]]' => true, '[[File:Wash.jpg|link' => '|Hoban Washburne]]' ], - '
', ], 'images missing' => [ $this->input, @@ -105,15 +105,15 @@ public function placeMeArgumentsProvider() { 'fade' => true, 'style' => 'float:none;background-color:black', ], - '', ], ]; } diff --git a/tests/phpunit/Unit/Components/CollapseTest.php b/tests/phpunit/Unit/Components/CollapseTest.php index 79dc909..4f9fad0 100644 --- a/tests/phpunit/Unit/Components/CollapseTest.php +++ b/tests/phpunit/Unit/Components/CollapseTest.php @@ -69,27 +69,27 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [], - '#bsc_collapse_NULL
' . $this->input . '
', + '#bsc_collapse_NULL
' . $this->input . '
', ], 'color_unknown' => [ $this->input, [ 'color' => 'unknown' ], - '#bsc_collapse_NULL
' . $this->input . '
', + '#bsc_collapse_NULL
' . $this->input . '
', ], 'button text' => [ $this->input, [ 'text' => 'BUTTON' ], - 'BUTTON
' . $this->input . '
', + 'BUTTON
' . $this->input . '
', ], 'manual id' => [ $this->input, [ 'color' => 'success', 'id' => 'alliance' ], - '#alliance
' . $this->input . '
', + '#alliance
' . $this->input . '
', ], 'style and class' => [ $this->input, [ 'class' => 'dummy nice', 'style' => 'float:right;background-color:green' ], - '#bsc_collapse_NULL
' . $this->input . '
', + '#bsc_collapse_NULL
' . $this->input . '
', ], ]; } diff --git a/tests/phpunit/Unit/Components/JumbotronTest.php b/tests/phpunit/Unit/Components/JumbotronTest.php index 9d73690..86ad7d5 100644 --- a/tests/phpunit/Unit/Components/JumbotronTest.php +++ b/tests/phpunit/Unit/Components/JumbotronTest.php @@ -69,17 +69,17 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [], - '
' . $this->input . '
', + '
' . $this->input . '
', ], 'manual id' => [ $this->input, [ 'id' => 'hms_dortmunder' ], - '
' . $this->input . '
', + '
' . $this->input . '
', ], 'style and class' => [ $this->input, [ 'class' => 'dummy nice', 'style' => 'float:right;background-color:green' ], - '
' . $this->input . '
', + '
' . $this->input . '
', ], ]; } diff --git a/tests/phpunit/Unit/Components/ModalTest.php b/tests/phpunit/Unit/Components/ModalTest.php index 3bb715a..6365df1 100644 --- a/tests/phpunit/Unit/Components/ModalTest.php +++ b/tests/phpunit/Unit/Components/ModalTest.php @@ -79,9 +79,9 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [ 'text' => 'BUTTON' ], - '', - '' . "\n", + '', + '' . "\n", ], 'text missing' => [ $this->input, @@ -95,9 +95,9 @@ public function placeMeArgumentsProvider() { 'text' => 'beforeSerenityafter', 'size' => 'none', ], - 'beforeSerenityafter', - '' . "\n", + 'beforeSerenityafter', + '' . "\n", ], 'all attributes' => [ $this->input, @@ -106,9 +106,9 @@ public function placeMeArgumentsProvider() { 'id' => 'firefly0', 'size' => 'lg', 'class' => 'shiny', 'style' => 'float:right;background-color:black', 'heading' => 'You can\'t take the sky from me!', ], - 'Serenity', - '' . "\n", + 'Serenity', + '' . "\n", ], ]; } diff --git a/tests/phpunit/Unit/Components/PopoverTest.php b/tests/phpunit/Unit/Components/PopoverTest.php index 4bc20e9..b99a9d6 100644 --- a/tests/phpunit/Unit/Components/PopoverTest.php +++ b/tests/phpunit/Unit/Components/PopoverTest.php @@ -69,7 +69,7 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [ 'heading' => 'heading', 'text' => 'BUTTON' ], - '', + '', ], 'heading empty' => [ $this->input, @@ -87,7 +87,7 @@ public function placeMeArgumentsProvider() { 'heading' => 'heading', 'text' => 'BUTTON', 'class' => 'dummy nice', 'style' => 'float:right;background-color:green', 'placement' => 'right', 'trigger' => 'hover', 'id' => 'cudgel', 'size' => 'sm' ], - '', + '', ], ]; } diff --git a/tests/phpunit/Unit/Components/TooltipTest.php b/tests/phpunit/Unit/Components/TooltipTest.php index 810b0a3..8cfcc85 100644 --- a/tests/phpunit/Unit/Components/TooltipTest.php +++ b/tests/phpunit/Unit/Components/TooltipTest.php @@ -74,7 +74,7 @@ public function placeMeArgumentsProvider() { 'simple' => [ $this->input, [ 'text' => 'simple' ], - '' . $this->input . '', + '' . $this->input . '', ], 'empty' => [ '', @@ -89,7 +89,7 @@ public function placeMeArgumentsProvider() { 'id, style and class' => [ $this->input, [ 'text' => 'simple', 'class' => 'dummy nice', 'style' => 'float:right;background-color:#80266e', 'id' => 'vera' ], - '' . $this->input . '', + '' . $this->input . '', ], ]; } diff --git a/tests/phpunit/Unit/ImageModalTest.php b/tests/phpunit/Unit/ImageModalTest.php index 4baf897..d1a1ce2 100644 --- a/tests/phpunit/Unit/ImageModalTest.php +++ b/tests/phpunit/Unit/ImageModalTest.php @@ -295,9 +295,9 @@ public function canParseDataProvider(): array 'no params' => [ [], [], - '~~', - '' . "\n", + '~~', + '' . "\n", ], 'frame params w/o thumbnail' => [ [ @@ -309,9 +309,9 @@ public function canParseDataProvider(): array 'valign' => 'text-top', ], [], - '~
test_alt
~', - '' . "\n", + '~
test_alt
~', + '' . "\n", ], 'manual width, frameless' => [ [ @@ -322,9 +322,9 @@ public function canParseDataProvider(): array 'width' => 200, 'page' => 7, ], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], 'thumbnail, manual width' => [ [ @@ -335,9 +335,9 @@ public function canParseDataProvider(): array 'width' => 200, 'page' => 7, ], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], 'manual thumbnail, NOT centered' => [ [ @@ -346,9 +346,9 @@ public function canParseDataProvider(): array 'framed' => false, ], [], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], 'framed' => [ [ @@ -356,9 +356,9 @@ public function canParseDataProvider(): array 'framed' => false, ], [], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], 'centered' => [ [ @@ -367,9 +367,9 @@ public function canParseDataProvider(): array [ 'width' => 200, ], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], 'manual thumbnail, upright' => [ [ @@ -378,9 +378,9 @@ public function canParseDataProvider(): array 'manualthumb' => 'Shuttle.png', ], [], - '~
~', - '' . "\n", + '~
~', + '' . "\n", ], ]; } diff --git a/tests/phpunit/Unit/ImageModalTriggerTest.php b/tests/phpunit/Unit/ImageModalTriggerTest.php index 1ac28bb..19121c8 100644 --- a/tests/phpunit/Unit/ImageModalTriggerTest.php +++ b/tests/phpunit/Unit/ImageModalTriggerTest.php @@ -164,7 +164,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~~', + '~~', ] ], 'frame params w/o thumbnail' => [ @@ -184,7 +184,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~
~', + '~
~', '~test_alt~', ] ], @@ -206,7 +206,7 @@ public function canParseProvider() { 'page' => 7, ], [ - '~
~', + '~
~', '~~', ] ], @@ -228,7 +228,7 @@ public function canParseProvider() { 'page' => 7, ], [ - '~
~', + '~
~', '~
~', '~
~', ] @@ -252,7 +252,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~
~', + '~
~', '~
~', '~~', ] @@ -274,7 +274,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~
~', + '~
~', '~
~', ] ], @@ -296,7 +296,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~
~', + '~
~', ] ], 'manual thumbnail, upright' => [ @@ -318,7 +318,7 @@ public function canParseProvider() { 'page' => false, ], [ - '~
~', + '~
~', '~~', '~
~', ] diff --git a/tests/phpunit/Unit/ModalBuilderTest.php b/tests/phpunit/Unit/ModalBuilderTest.php index 0a0cf80..9565403 100644 --- a/tests/phpunit/Unit/ModalBuilderTest.php +++ b/tests/phpunit/Unit/ModalBuilderTest.php @@ -79,9 +79,9 @@ public function parseDataProvider() { 'outerClass0', 'outerStyle0', 'innerClass0', - 'trigger0', + 'trigger0', '' . "\n", + . '
content0
footer0
' . "\n", ], 'scarce' => [ 'id1', @@ -92,9 +92,9 @@ public function parseDataProvider() { '', '', '', - 'trigger1', - '' . "\n", + 'trigger1', + '' . "\n", ], ]; } diff --git a/tests/phpunit/Unit/mw.bootstrap.parse.tests.lua b/tests/phpunit/Unit/mw.bootstrap.parse.tests.lua index a62be76..cdd035f 100644 --- a/tests/phpunit/Unit/mw.bootstrap.parse.tests.lua +++ b/tests/phpunit/Unit/mw.bootstrap.parse.tests.lua @@ -55,7 +55,7 @@ local tests = { return removeId ( mw.bootstrap.parse( component, input, args ) ) end, args = { 'alert', 'Alert content', { color = 'success', dismissible = 'fade', noStrip = true } }, - expect = { '' } + expect = { '' } }, }