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 int $type = self::MENU_TYPE_DEFAULT
) { ) {
$extraClasses = [ $extraClasses = [
self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown', self::MENU_TYPE_DROPDOWN => 'vector-menu-dropdown',
self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs', self::MENU_TYPE_TABS => 'vector-menu-tabs',
self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal', self::MENU_TYPE_PORTAL => 'vector-menu-portal portal',
self::MENU_TYPE_DEFAULT => 'vector-menu', self::MENU_TYPE_DEFAULT => '',
]; ];
if ( $this->isLegacy() ) { if ( $this->isLegacy() ) {
$extraClasses[self::MENU_TYPE_TABS] .= ' vector-menu-tabs-legacy'; $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. }} {{! `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}} {{#is-dropdown}}
<input type="checkbox" <input type="checkbox"
id="{{id}}-checkbox" id="{{id}}-checkbox"
role="button" role="button"
aria-haspopup="true" aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}" 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" aria-labelledby="{{id}}-label"
/> />
<label <label

4
includes/templates/Menu.mustache
View File

@ -2,7 +2,7 @@
See @typedef MenuDefinition 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. Dropdown menus use the checkbox hack and require `input` and `label` elements.
`aria-label` is applied to the `input` which is semantically a button. `aria-label` is applied to the `input` which is semantically a button.
@ -14,7 +14,7 @@
role="button" role="button"
aria-haspopup="true" aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}" 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}} {{#aria-label}}aria-label="{{.}}"{{/aria-label}}
/> />
<label <label

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

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

2
stories/utils.js
View File

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

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

@ -3,7 +3,7 @@
exports[`UserLinks renders 1`] = ` exports[`UserLinks renders 1`] = `
"<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\"> "<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\\"> <div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\"> <ul class=\\"vector-menu-content-list\\">
@ -16,7 +16,7 @@ exports[`UserLinks renders 1`] = `
</div> </div>
</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\\"> <div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\"> <ul class=\\"vector-menu-content-list\\">

4
tests/jest/userLinksData.js
View File

@ -7,7 +7,7 @@ const templateData = {
'is-wide': false, 'is-wide': false,
'data-user-more': { 'data-user-more': {
id: 'p-personal-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', label: 'Toggle sidebar',
'html-items': ` '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> <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': { 'data-user-menu': {
id: 'p-personal', 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', label: 'Personal tools',
'html-items': ` '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> <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 // Provided by core
'id' => 'p-views', 'id' => 'p-views',
'class' => 'mw-portlet mw-portlet-views emptyPortlet ' . '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-tooltip' => '',
'html-items' => '', 'html-items' => '',
'html-after-portal' => '', 'html-after-portal' => '',
@ -271,19 +271,19 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
$variants = $props['data-variants']; $variants = $props['data-variants'];
$actions = $props['data-actions']; $actions = $props['data-actions'];
$this->assertSame( $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'] $namespaces['class']
); );
$this->assertSame( $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'] $variants['class']
); );
$this->assertSame( $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'] $actions['class']
); );
$this->assertSame( $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'] $props['data-personal']['class']
); );
} }