Merge "Fix styling of message boxes on create account page, adds stable API"

resources/src/mediawiki.special.createaccount/HtmlformChecker.js

@@ -1,3 +1,5 @@
+const util = require( 'mediawiki.util' );
+
 /**
  * A helper class to add validation to non-OOUI HTMLForm fields.
  *
@@ -17,9 +19,9 @@ function HtmlformChecker( $element, validator ) {
 	this.validator = validator;
 	this.$element = $element;
 
-	this.$errorBox = $element.next( '.mw-message-box-error' );
+	this.$errorBox = $element.next( '.html-form-error' );
 	if ( !this.$errorBox.length ) {
-		this.$errorBox = $( '<div>' );
+		this.$errorBox = $( '<div>' ).addClass( 'html-form-error' );
 		this.$errorBox.hide();
 		$element.after( this.$errorBox );
 	}
@@ -150,34 +152,35 @@ HtmlformChecker.prototype.setErrors = function ( valid, errors, forceReplacement
 			$oldErrorBox.after( this.$errorBox );
 		}
 
+		const oldErrorType = this.oldErrorType || 'notice';
+		const errorType = valid ? 'warning' : 'error';
+		this.oldErrorType = errorType;
 		showFunc = function () {
 			if ( $oldErrorBox !== $errorBox ) {
 				$oldErrorBox
 					.removeAttr( 'class' )
 					.detach();
 			}
-			$errorBox
-				.attr( 'class', 'mw-message-box' )
-				.addClass( valid ? 'mw-message-box-warning' : 'mw-message-box-error' )
-				.empty();
+			$errorBox.empty();
 			// Match behavior of HTMLFormField::formatErrors()
+			let errorHtml;
 			if ( errors.length === 1 ) {
-				$errorBox.append( errors[ 0 ] );
+				errorHtml = errors[ 0 ][ 0 ];
 			} else {
-				$errorBox.append(
-					$( '<ul>' ).append(
-						errors.map( ( e ) => $( '<li>' ).append( e ) )
-					)
-				);
+				errorHtml = $( '<ul>' ).append(
+					errors.map( ( e ) => $( '<li>' ).append( e ) )
+				)[ 0 ];
 			}
+			$errorBox.append(
+				util.messageBox( errorHtml, errorType )
+			);
 			// FIXME: Use CSS transition
 			// eslint-disable-next-line no-jquery/no-slide
 			$errorBox.slideDown();
 		};
 		if (
 			$oldErrorBox !== $errorBox &&
-			// eslint-disable-next-line no-jquery/no-class-state
-			( $oldErrorBox.hasClass( 'mw-message-box-error' ) || $oldErrorBox.hasClass( 'mw-message-box-warning' ) )
+			( oldErrorType === 'error' || oldErrorType === 'warning' )
 		) {
 			// eslint-disable-next-line no-jquery/no-slide
 			$oldErrorBox.slideUp( showFunc );

resources/src/mediawiki.util/util.js

@@ -498,6 +498,38 @@ const util = {
 		}
 	},
 
+	/**
+	 * Create a message box element. Callers are responsible for ensuring suitable Codex styles
+	 * have been added to the page e.g. mediawiki.codex.messagebox.styles.
+	 *
+	 * @since 1.43
+	 * @param {string|Element} textOrElement text or node.
+	 * @param {string} [type] defaults to notice.
+	 * @return {Element}
+	 */
+	messageBox: function ( textOrElement, type = 'notice' ) {
+		const msgBoxElement = document.createElement( 'div' );
+		if ( [ 'error', 'warning', 'success', 'notice' ].indexOf( type ) > -1 ) {
+			// The following CSS classes are used here:
+			// * cdx-message--notice
+			// * cdx-message--warning
+			// * cdx-message--error
+			msgBoxElement.classList.add( `cdx-message--${ type }` );
+		}
+		const iconElement = document.createElement( 'span' );
+		iconElement.classList.add( 'cdx-message__icon' );
+		const contentElement = document.createElement( 'div' );
+		contentElement.classList.add( 'cdx-message__content' );
+		if ( typeof textOrElement === 'string' ) {
+			contentElement.textContent = textOrElement;
+		} else {
+			contentElement.appendChild( textOrElement );
+		}
+		msgBoxElement.appendChild( iconElement );
+		msgBoxElement.appendChild( contentElement );
+		return msgBoxElement;
+	},
+
 	/**
 	 * Add content to the subtitle of the skin.
 	 *

tests/qunit/resources/mediawiki.util/util.test.js

@@ -270,6 +270,16 @@ QUnit.module( 'mediawiki.util', QUnit.newMwEnvironment( {
 			.map( ( el ) => el.tagName + ( el.className && '.' + el.className ) + ( el.id && '#' + el.id ) );
 	}
 
+	QUnit.test( 'messageBox', ( assert ) => {
+		const message = util.messageBox( 'test' );
+		const errSpan = document.createElement( 'span' );
+		errSpan.textContent = 'error';
+		const errorMessage = util.messageBox( errSpan, 'error' );
+		assert.strictEqual( message.querySelector( '.cdx-message__content' ).textContent, 'test' );
+		assert.strictEqual( errorMessage.querySelector( '.cdx-message__content span' ).textContent, 'error' );
+		assert.true( errorMessage.classList.contains( 'cdx-message--error' ) );
+	} );
+
 	QUnit.test( 'addPortlet does not append to DOM if no `before` is provided', ( assert ) => {
 		$( '#qunit-fixture' ).html(
 			'<div class="portlet" id="p-toolbox"></div>'