jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move Vector menu class logic into Menu mustache template 

Cleaned 'vector-menu' in SkinVector file, updated
includes/templates/Menu.mustache and includes/templates/legacy/Menu.mustache.

Bug: T290281
Change-Id: I7286fa82abfd437a228b9ac07ac781210d7cd98f
This commit is contained in:
Jon Robson 2022-05-04 15:20:23 -07:00 committed by bwang
parent f9676bda10
commit 2a4ac3152b
8 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
includes/SkinVector.php
View File

@ -753,10 +753,10 @@ abstract class SkinVector extends SkinMustache {
int $type = self::MENU_TYPE_DEFAULT
) {
$extraClasses = [
self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs',
self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
self::MENU_TYPE_DEFAULT => 'vector-menu',
self::MENU_TYPE_DROPDOWN => 'vector-menu-dropdown',
self::MENU_TYPE_TABS => 'vector-menu-tabs',
self::MENU_TYPE_PORTAL => 'vector-menu-portal portal',
self::MENU_TYPE_DEFAULT => '',
];
if ( $this->isLegacy() ) {
$extraClasses[self::MENU_TYPE_TABS] .= ' vector-menu-tabs-legacy';

4
includes/templates/LegacyMenu.mustache
View File

@ -3,14 +3,14 @@
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
<nav id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"
role="button"
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
aria-labelledby="{{id}}-label"
/>
<label

4
includes/templates/Menu.mustache
View File

@ -2,7 +2,7 @@
See @typedef MenuDefinition
}}
<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
<div id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{!
Dropdown menus use the checkbox hack and require `input` and `label` elements.
`aria-label` is applied to the `input` which is semantically a button.
@ -14,7 +14,7 @@
role="button"
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
/>
<label

2
stories/UserLinks.stories.data.js
View File

@ -72,7 +72,7 @@ const LOGGED_OUT_ITEMS = `
`;
const additionalUserMoreData = {
class: 'vector-menu vector-user-menu-more',
class: 'vector-user-menu-more',
'heading-class': '',
'is-dropdown': false
};

2
stories/utils.js
View File

@ -60,7 +60,7 @@ function helperMakeMenuData( name, htmlItems, additionalData = {} ) {
return Object.assign( {
id: `p-${name}`,
class: `mw-portlet mw-portlet-${name} vector-menu ${additionalClassString}`,
class: `mw-portlet mw-portlet-${name} ${additionalClassString}`,
label,
'html-user-language-attributes': htmlUserLanguageAttributes,
'html-items': htmlItems

4
tests/jest/__snapshots__/userLinks.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`UserLinks renders 1`] = `
"<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\">
<div id=\\"p-personal-more\\" class=\\"mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more\\">
<div id=\\"p-personal-more\\" class=\\"vector-menu mw-portlet mw-portlet-personal-more vector-user-menu-more\\">
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
@ -16,7 +16,7 @@ exports[`UserLinks renders 1`] = `
</div>
</div>
<div id=\\"p-personal\\" class=\\"mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown\\">
<div id=\\"p-personal\\" class=\\"vector-menu mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown\\">
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">

4
tests/jest/userLinksData.js
View File

@ -7,7 +7,7 @@ const templateData = {
'is-wide': false,
'data-user-more': {
id: 'p-personal-more',
class: 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
class: 'mw-portlet mw-portlet-personal-more vector-user-menu-more',
label: 'Toggle sidebar',
'html-items': `
<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
@ -18,7 +18,7 @@ const templateData = {
},
'data-user-menu': {
id: 'p-personal',
class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown',
class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown',
label: 'Personal tools',
'html-items': `
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar" href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span>Admin</span></a></li>

10
tests/phpunit/integration/SkinVectorTest.php
View File

@ -256,7 +256,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
// Provided by core
'id' => 'p-views',
'class' => 'mw-portlet mw-portlet-views emptyPortlet ' .
'vector-menu vector-menu-tabs vector-menu-tabs-legacy',
'vector-menu-tabs vector-menu-tabs-legacy',
'html-tooltip' => '',
'html-items' => '',
'html-after-portal' => '',
@ -271,19 +271,19 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
$variants = $props['data-variants'];
$actions = $props['data-actions'];
$this->assertSame(
'mw-portlet mw-portlet-namespaces vector-menu vector-menu-tabs vector-menu-tabs-legacy',
'mw-portlet mw-portlet-namespaces vector-menu-tabs vector-menu-tabs-legacy',
$namespaces['class']
);
$this->assertSame(
'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu-dropdown',
$variants['class']
);
$this->assertSame(
'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu-dropdown',
$actions['class']
);
$this->assertSame(
'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
'mw-portlet mw-portlet-personal vector-user-menu-legacy',
$props['data-personal']['class']
);
}