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:
parent
7de310e320
commit
a7786688dd
2 changed files with 23 additions and 21 deletions
|
|
@ -2353,16 +2353,7 @@ abstract class Skin extends ContextSource {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if ( isset( $options['link-class'] ) ) {
|
if ( isset( $options['link-class'] ) ) {
|
||||||
if ( isset( $attrs['class'] ) ) {
|
$attrs['class'] = $this->addClassToClassList( $attrs['class'] ?? [], $options['link-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'];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
$html = Html::rawElement( isset( $attrs['href'] )
|
$html = Html::rawElement( isset( $attrs['href'] )
|
||||||
? 'a'
|
? 'a'
|
||||||
|
|
@ -2445,18 +2436,11 @@ abstract class Skin extends ContextSource {
|
||||||
$attrs[$attr] = $item[$attr];
|
$attrs[$attr] = $item[$attr];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if ( isset( $item['active'] ) && $item['active'] ) {
|
$attrs['class'] = $this->addClassToClassList( $attrs['class'] ?? [], 'mw-list-item' );
|
||||||
if ( !isset( $attrs['class'] ) ) {
|
|
||||||
$attrs['class'] = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if ( isset( $item['active'] ) && $item['active'] ) {
|
||||||
// In the future, this should accept an array of classes, not a string
|
// In the future, this should accept an array of classes, not a string
|
||||||
if ( is_array( $attrs['class'] ) ) {
|
$attrs['class'] = $this->addClassToClassList( $attrs['class'], 'active' );
|
||||||
$attrs['class'][] = 'active';
|
|
||||||
} else {
|
|
||||||
$attrs['class'] .= ' active';
|
|
||||||
$attrs['class'] = trim( $attrs['class'] );
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if ( isset( $item['itemtitle'] ) ) {
|
if ( isset( $item['itemtitle'] ) ) {
|
||||||
$attrs['title'] = $item['itemtitle'];
|
$attrs['title'] = $item['itemtitle'];
|
||||||
|
|
@ -2464,6 +2448,24 @@ abstract class Skin extends ContextSource {
|
||||||
return Html::rawElement( $options['tag'] ?? 'li', $attrs, $html );
|
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
|
* @since 1.35
|
||||||
* @param array $attrs (optional) will be passed to tooltipAndAccesskeyAttribs
|
* @param array $attrs (optional) will be passed to tooltipAndAccesskeyAttribs
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ class SkinTemplateTest extends MediaWikiIntegrationTestCase {
|
||||||
public function makeListItemProvider() {
|
public function makeListItemProvider() {
|
||||||
return [
|
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',
|
'class' => 'class',
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue