From 0d8dcb2f4e729e054d75cd24f105b20e73614145 Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Sat, 9 Mar 2024 10:43:32 -0800 Subject: [PATCH] InputBox uses Codex instead of mediawiki ui Bug: T353371 Change-Id: Iedfe34accc0c3469c9391208a1898cb544e896cb --- extension.json | 7 ++++ includes/InputBox.php | 50 +++++++++++++++------- resources/ext.inputBox.styles.less | 62 ++++++++++++++++++++++++---- tests/parser/inputBoxParserTests.txt | 46 ++++++++++----------- 4 files changed, 119 insertions(+), 46 deletions(-) diff --git a/extension.json b/extension.json index 6ca5b3c7..d2f9af3f 100644 --- a/extension.json +++ b/extension.json @@ -25,6 +25,13 @@ }, "ResourceModules": { "ext.inputBox.styles": { + "class": "MediaWiki\\ResourceLoader\\CodexModule", + "codexStyleOnly": true, + "codexComponents": [ + "CdxButton", + "CdxCheckbox", + "CdxTextInput" + ], "styles": { "ext.inputBox.styles.less": { "media": "screen" diff --git a/includes/InputBox.php b/includes/InputBox.php index 586f05cd..f9b2b6e3 100644 --- a/includes/InputBox.php +++ b/includes/InputBox.php @@ -103,9 +103,6 @@ class InputBox { $this->mParser->getOptions()->getUserLangObj(); $this->mParser->getOutput()->addModuleStyles( [ 'ext.inputBox.styles', - 'mediawiki.ui.input', - 'mediawiki.ui.checkbox', - 'mediawiki.ui.button', ] ); } @@ -159,6 +156,16 @@ class InputBox { return $args; } + /** + * Get common classes, that could be added and depend on, if + * a line break between a button and an input field is added or not. + * + * @return string + */ + private function getFormLinebreakClasses() { + return strtolower( $this->mBR ) === '
' ? ' mw-inputbox-form' : ' mw-inputbox-form-inline'; + } + /** * Get common classes, that could be added and depend on, if * a line break between a button and an input field is added or not. @@ -201,7 +208,7 @@ class InputBox { $htmlOut .= Html::openElement( 'form', [ 'name' => 'searchbox', - 'class' => 'searchbox', + 'class' => 'searchbox' . $this->getFormLinebreakClasses(), 'action' => SpecialPage::getTitleFor( 'Search' )->getLocalUrl(), ] + $idArray ); @@ -352,7 +359,9 @@ class InputBox { $id = Sanitizer::escapeIdForAttribute( $unescapedID ); $htmlLabel = ''; if ( strlen( trim( $this->mLabelText ) ) ) { - $htmlLabel = Html::openElement( 'label', [ 'for' => 'bodySearchInput' . $id ] ); + $htmlLabel = Html::openElement( 'label', [ 'for' => 'bodySearchInput' . $id, + 'class' => 'mw-inputbox-label' + ] ); $htmlLabel .= $this->mParser->recursiveTagParse( $this->mLabelText ); $htmlLabel .= Html::closeElement( 'label' ); } @@ -360,7 +369,8 @@ class InputBox { [ 'name' => 'bodySearch' . $id, 'id' => 'bodySearch' . $id, - 'class' => 'bodySearch' . ( $this->mInline ? ' mw-inputbox-inline' : '' ), + 'class' => 'bodySearch' . + ( $this->mInline ? ' mw-inputbox-inline' : '' ) . $this->getFormLinebreakClasses(), 'action' => SpecialPage::getTitleFor( 'Search' )->getLocalUrl(), ] ); @@ -432,7 +442,7 @@ class InputBox { ); $createBoxParams = [ 'name' => 'createbox', - 'class' => 'createbox', + 'class' => 'createbox' . $this->getFormLinebreakClasses(), 'action' => $this->config->get( MainConfigNames::Script ), 'method' => 'get' ]; @@ -520,7 +530,7 @@ class InputBox { ); $moveBoxParams = [ 'name' => 'movebox', - 'class' => 'mw-movebox', + 'class' => 'mw-movebox' . $this->getFormLinebreakClasses(), 'action' => $this->config->get( MainConfigNames::Script ), 'method' => 'get' ]; @@ -575,7 +585,7 @@ class InputBox { ); $commentFormParams = [ 'name' => 'commentbox', - 'class' => 'commentbox', + 'class' => 'commentbox' . $this->getFormLinebreakClasses(), 'action' => $this->config->get( MainConfigNames::Script ), 'method' => 'get' ]; @@ -753,9 +763,13 @@ REGEX; } $class = $defaultAttr[ 'class' ] ?? ''; - $class .= ' mw-ui-input mw-ui-input-inline'; + $class .= ' cdx-text-input__input'; $defaultAttr[ 'class' ] = $class; - return Html::element( 'input', $defaultAttr ); + return Html::openElement( 'div', [ + 'class' => 'cdx-text-input', + ] ) + . Html::element( 'input', $defaultAttr ) + . Html::closeElement( 'div' ); } /** @@ -769,18 +783,22 @@ REGEX; * @return string */ private function buildCheckboxInput( $label, $name, $id, $value, $defaultAttr = [] ) { - $htmlOut = '
'; + $htmlOut = ' '; $htmlOut .= Html::element( 'input', [ 'type' => 'checkbox', 'name' => $name, 'value' => $value, 'id' => $id, + 'class' => 'cdx-checkbox__input', ] + $defaultAttr ); + $htmlOut .= ''; // Label - $htmlOut .= Html::label( $label, $id ); - $htmlOut .= '
'; + $htmlOut .= Html::label( $label, $id, [ + 'class' => 'cdx-checkbox__label', + ] ); + $htmlOut .= ' '; return $htmlOut; } @@ -793,9 +811,9 @@ REGEX; */ private function buildSubmitInput( $defaultAttr, $isProgressive = false ) { $defaultAttr[ 'class' ] ??= ''; - $defaultAttr[ 'class' ] .= ' mw-ui-button'; + $defaultAttr[ 'class' ] .= ' cdx-button'; if ( $isProgressive ) { - $defaultAttr[ 'class' ] .= ' mw-ui-progressive'; + $defaultAttr[ 'class' ] .= ' cdx-button--action-progressive cdx-button--weight-primary'; } $defaultAttr[ 'class' ] = trim( $defaultAttr[ 'class' ] ); return Html::element( 'input', $defaultAttr ); diff --git a/resources/ext.inputBox.styles.less b/resources/ext.inputBox.styles.less index 74aff9dc..b602370a 100644 --- a/resources/ext.inputBox.styles.less +++ b/resources/ext.inputBox.styles.less @@ -4,10 +4,19 @@ margin-left: auto; margin-right: auto; text-align: center; + + .cdx-checkbox__icon { + text-align: initial; + } +} + +.bodySearchWrap { + display: flex; } .mw-inputbox-inline { - display: inline; + display: inline-flex; + min-width: auto; } .mw-inputbox-element.mw-inputbox-element { @@ -19,10 +28,49 @@ margin-bottom: 0.5em; } -.mw-inputbox-createbox:required:invalid ~ .mw-ui-button { - // appear like .mw-ui-input:disabled - background-color: @background-color-disabled; - color: @color-inverted; - border-color: @border-color-disabled; - cursor: @cursor-base--disabled; +/* Allow support for the size attribute if it was set */ +.mw-inputbox-input[ size ], +.mw-inputbox-createbox[ size ] { + width: auto !important; +} + +form.mw-inputbox-form-inline { + display: flex; + justify-content: center; + column-gap: 4px; + + .cdx-text-input { + min-width: auto !important; + } +} + +form.mw-inputbox-form { + line-height: 0.6; + + .cdx-text-input { + display: flex; + justify-content: center; + } + + .mw-inputbox-label { + display: flex; + align-items: center; + } + + .mw-inputbox-inline { + .cdx-text-input { + display: inline-flex; + min-width: auto; + } + } +} + +form.createbox { + &:invalid .cdx-button { + // appear like .mw-ui-input:disabled + background-color: @background-color-disabled !important; + color: @color-inverted !important; + border-color: @border-color-disabled !important; + cursor: @cursor-base--disabled !important; + } } diff --git a/tests/parser/inputBoxParserTests.txt b/tests/parser/inputBoxParserTests.txt index 2b794a8d..7fc72944 100644 --- a/tests/parser/inputBoxParserTests.txt +++ b/tests/parser/inputBoxParserTests.txt @@ -11,7 +11,7 @@ InputBox type=search type=search !! html -

 
+

 
!! end !! test @@ -21,7 +21,7 @@ InputBox type=create type=create !! html -

+

!! end !! test @@ -32,7 +32,7 @@ type=create minor=1 !! html -

+

!! end !! test @@ -43,7 +43,7 @@ type=create minor=0 !! html -

+

!! end !! test @@ -55,7 +55,7 @@ preloadparams[]=param1 preloadparams[]=param2 !! html -

+

!! end !! test @@ -67,7 +67,7 @@ preloadparams[]= preloadparams[]= !! html -

+

!! end !! test @@ -78,7 +78,7 @@ type=create editintro=MediaWiki:Test !! html -

+

!! end !! test @@ -89,7 +89,7 @@ type=create editintro= !! html -

+

!! end !! test @@ -100,7 +100,7 @@ type=create summary=Summary test !! html -

+

!! end !! test @@ -111,7 +111,7 @@ type=create summary= !! html -

+

!! end !! test @@ -122,7 +122,7 @@ type=create nosummary=true !! html -

+

!! end !! test @@ -133,7 +133,7 @@ type=create nosummary= !! html -

+

!! end !! test @@ -144,7 +144,7 @@ type=create prefix=Test/ !! html -

+

!! end !! test @@ -155,7 +155,7 @@ type=create prefix= !! html -

+

!! end !! test @@ -166,7 +166,7 @@ type=create preload=test !! html -

+

!! end !! test @@ -177,7 +177,7 @@ type=create preload= !! html -

+

!! end !! test @@ -187,7 +187,7 @@ InputBox type=comment type=comment !! html -

+

!! end !! test @@ -197,7 +197,7 @@ InputBox type=commenttitle type=commenttitle !! html -

+

!! end !! test @@ -207,7 +207,7 @@ InputBox type=fulltext type=fulltext !! html -

+

!! end !! test @@ -217,7 +217,7 @@ InputBox type=move type=move !! html -

+

!! end !! test @@ -228,7 +228,7 @@ type=search tour=test !! html -

 
+

 
!! end !! test @@ -242,7 +242,7 @@ default=-{sr-Latn: Some latin; sr-Cyrl: Not latin }- placeholder=-{sr-Latn: Latn; sr-Cyrl: Cyrl}- !! html -

+

!! end !! test @@ -253,5 +253,5 @@ type=search arialabel=Search this wiki !! html -

 
+

 
!! end