Add mw-list-item class to all menu list items created by makeListItem

When working on multiple skins its been confusing to know how the lists
are created from the HTML. In Vector we've also resorted to some overly
complex styling rules to style `li` elements. It's proposed a mw-list-item
class is added to simplify Vector styling and make it easier to understand
how the HTML is generated.

Change-Id: I67731fe59743620d339ffcca3ffc3b1f127ce3e7
This commit is contained in:
jdlrobson 2021-08-26 08:32:51 -07:00 committed by Jdlrobson
parent 7de310e320
commit a7786688dd
2 changed files with 23 additions and 21 deletions

View file

@ -2353,16 +2353,7 @@ abstract class Skin extends ContextSource {
}
}
if ( isset( $options['link-class'] ) ) {
if ( isset( $attrs['class'] ) ) {
// In the future, this should accept an array of classes, not a string
if ( is_array( $attrs['class'] ) ) {
$attrs['class'][] = $options['link-class'];
} else {
$attrs['class'] .= " {$options['link-class']}";
}
} else {
$attrs['class'] = $options['link-class'];
}
$attrs['class'] = $this->addClassToClassList( $attrs['class'] ?? [], $options['link-class'] );
}
$html = Html::rawElement( isset( $attrs['href'] )
? 'a'
@ -2445,18 +2436,11 @@ abstract class Skin extends ContextSource {
$attrs[$attr] = $item[$attr];
}
}
if ( isset( $item['active'] ) && $item['active'] ) {
if ( !isset( $attrs['class'] ) ) {
$attrs['class'] = '';
}
$attrs['class'] = $this->addClassToClassList( $attrs['class'] ?? [], 'mw-list-item' );
if ( isset( $item['active'] ) && $item['active'] ) {
// In the future, this should accept an array of classes, not a string
if ( is_array( $attrs['class'] ) ) {
$attrs['class'][] = 'active';
} else {
$attrs['class'] .= ' active';
$attrs['class'] = trim( $attrs['class'] );
}
$attrs['class'] = $this->addClassToClassList( $attrs['class'], 'active' );
}
if ( isset( $item['itemtitle'] ) ) {
$attrs['title'] = $item['itemtitle'];
@ -2464,6 +2448,24 @@ abstract class Skin extends ContextSource {
return Html::rawElement( $options['tag'] ?? 'li', $attrs, $html );
}
/**
* Adds a class to the existing class value, supporting it as a string
* or array.
*
* @param string|array $class to update.
* @param string $newClass to add.
* @return string|array classes.
*/
private function addClassToClassList( $class, string $newClass ) {
if ( is_array( $class ) ) {
$class[] = $newClass;
} else {
$class .= ' ' . $newClass;
$class = trim( $class );
}
return $class;
}
/**
* @since 1.35
* @param array $attrs (optional) will be passed to tooltipAndAccesskeyAttribs

View file

@ -30,7 +30,7 @@ class SkinTemplateTest extends MediaWikiIntegrationTestCase {
public function makeListItemProvider() {
return [
[
'<li class="class" title="itemtitle"><a href="url" title="title">text</a></li>',
'<li class="class mw-list-item" title="itemtitle"><a href="url" title="title">text</a></li>',
'',
[
'class' => 'class',