CheckMatrixWidget: Re-instate HTMLForm CheckMatrix styling

Adding `tbody` with extra class and add additional `thead`.

Bug: T209667
Change-Id: I3f707f667df11e9bfd5ce1fcc51ccde0cd12e9be

diff --git a/includes/widget/CheckMatrixWidget.php b/includes/widget/CheckMatrixWidget.php
index 8038c54..017e616 100644 (file)
--- a/includes/widget/CheckMatrixWidget.php
+++ b/includes/widget/CheckMatrixWidget.php
@@ -58,7 +58,11 @@ class CheckMatrixWidget extends \OOUI\Widget {
 
                // Build the table
                $table = new \OOUI\Tag( 'table' );
+               $table->addClasses( [ 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' ] );
+               $thead = new \OOUI\Tag( 'thead' );
+               $table->appendContent( $thead );
                $tr = new \OOUI\Tag( 'tr' );
+
                // Build the header
                $tr->appendContent( $this->getCellTag( "\u{00A0}" ) );
                foreach ( $this->columns as $columnLabel => $columnTag ) {
@@ -66,11 +70,13 @@ class CheckMatrixWidget extends \OOUI\Widget {
                                $this->getCellTag( new \OOUI\HtmlSnippet( $columnLabel ) )
                        );
                }
-               $table->appendContent( $tr );
+               $thead->appendContent( $tr );
 
                // Build the options matrix
+               $tbody = new \OOUI\Tag( 'tbody' );
+               $table->appendContent( $tbody );
                foreach ( $this->rows as $rowLabel => $rowTag ) {
-                       $table->appendContent(
+                       $tbody->appendContent(
                                $this->getTableRow( $rowLabel, $rowTag )
                        );
                }

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
index 01165ca..73ee840 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.CheckMatrixWidget.js
@@ -21,6 +21,8 @@
        mw.widgets.CheckMatrixWidget = function MWWCheckMatrixWidget( config ) {
                var $headRow = $( '<tr>' ),
                        $table = $( '<table>' ),
+                       $thead = $( '<thead>' ),
+                       $tbody = $( '<tbody>' ),
                        widget = this;
                config = config || {};
 
@@ -44,7 +46,7 @@
                $.each( this.columns, function ( columnLabel ) {
                        $headRow.append( $( '<td>' ).html( columnLabel ) );
                } );
-               $table.append( $headRow );
+               $thead.append( $headRow );
 
                // Build table
                // eslint-disable-next-line no-restricted-properties
@@ -78,8 +80,11 @@
                                $row.append( $( '<td>' ).append( checkbox.$element ) );
                        } );
 
-                       $table.append( $row );
+                       $tbody.append( $row );
                } );
+               $table
+                       .addClass( 'mw-htmlform-matrix mw-widget-checkMatrixWidget-matrix' )
+                       .append( $thead, $tbody );
 
                this.$element
                        .addClass( 'mw-widget-checkMatrixWidget' )