Refactor: VectorMenu merged in to Menu

Bug: T249372
Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a

includes/VectorTemplate.php

@@ -461,7 +461,7 @@ class VectorTemplate extends BaseTemplate {
 	) : array {
 		$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
 		$extraClasses = [
-			self::MENU_TYPE_DROPDOWN => 'vectorMenu',
+			self::MENU_TYPE_DROPDOWN => 'vectorMenu-dropdown vectorMenu',
 			self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
 			self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
 		];
@@ -475,6 +475,7 @@ class VectorTemplate extends BaseTemplate {
 			'label' => $this->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label )->text(),
 			'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
 			'html-items' => '',
+			'is-dropdown' => self::MENU_TYPE_DROPDOWN === $type,
 		];
 
 		foreach ( $urls as $key => $item ) {

includes/templates/Menu.mustache

@@ -1,10 +1,17 @@
 {{!
-	@see MenuDefinition
+	See @typedef MenuDefinition
 }}
-
 <div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
+	{{#is-dropdown}}
+	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
+	<h3 id="{{label-id}}">
+		<span>{{label}}</span>
+	</h3>
+	{{/is-dropdown}}
+	{{^is-dropdown}}
 	<h3 id="{{label-id}}">{{label}}</h3>
-	<ul {{{html-userlangattributes}}}>
+	{{/is-dropdown}}
+	<ul class="menu" {{{html-userlangattributes}}}>
 		{{{html-items}}}
 	</ul>
 </div>

includes/templates/VectorMenu.mustache

@@ -1,12 +0,0 @@
-{{!
-	See @typedef MenuDefinition
-}}
-<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
-	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
-	<h3 id="{{label-id}}">
-		<span>{{label}}</span>
-	</h3>
-	<ul class="menu" {{{html-userlangattributes}}}>
-		{{{html-items}}}
-	</ul>
-</div>

includes/templates/index.mustache

@@ -25,9 +25,9 @@
 	LogoOptions data-logos
 	MenuDefinition data-personal-menu
 	MenuDefinition data-namespace-tabs
-	object data-variants. See VectorMenu.mustache for documentation.
+	MenuDefinition data-variants
 	MenuDefinition data-page-actions
-	object data-page-actions-more. See VectorMenu.mustache for documentation.
+	MenuDefinition data-page-actions-more
 	object data-search-box. See SearchBox.mustache for documentation.
 	object data-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
@@ -80,11 +80,11 @@
 		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
-			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
+			{{#data-variants}}{{>Menu}}{{/data-variants}}
 		</div>
 		<div id="right-navigation">
 			{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
-			{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
+			{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
 			{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 		</div>
 	</div>

includes/templates/legacy.mustache

@@ -24,9 +24,9 @@
 		usually hidden to screen readers
 	MenuDefinition data-personal-menu
 	MenuDefinition data-namespace-tabs
-	object data-variants. See VectorMenu.mustache for documentation.
+	MenuDefinition data-variants
 	MenuDefinition data-page-actions
-	object data-page-actions-more. See VectorMenu.mustache for documentation.
+	MenuDefinition data-page-actions-more
 	object data-search-box. See SearchBox.mustache for documentation.
 	object data-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
@@ -73,11 +73,11 @@
 		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
-			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
+			{{#data-variants}}{{>Menu}}{{/data-variants}}
 		</div>
 		<div id="right-navigation">
 			{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
-			{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
+			{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
 			{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 		</div>
 	</div>

resources/skins.vector.styles/MenuDropdown.less

@@ -2,7 +2,9 @@
 @import 'mediawiki.mixins.less';
 
 /* Variants and Actions */
-.vectorMenu {
+// FIXME: For cached HTML
+.vectorMenu,
+.vectorMenu-dropdown {
 	direction: ltr;
 	float: left;
 	cursor: pointer;

resources/skins.vector.styles/index.less

@@ -10,7 +10,7 @@
 	@import 'SearchBox.less';
 	@import 'MenuTabs.less';
 	@import 'watchstar.less';
-	@import 'VectorMenu.less';
+	@import 'MenuDropdown.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';

resources/skins.vector.styles/legacy.less

@@ -8,7 +8,7 @@
 	@import 'SearchBox.less';
 	@import 'MenuTabs.less';
 	@import 'watchstar.less';
-	@import 'VectorMenu.less';
+	@import 'MenuDropdown.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';

stories/MenuDropdown.stories.data.js

@@ -1,4 +1,4 @@
-import vectorMenuTemplate from '!!raw-loader!../includes/templates/VectorMenu.mustache';
+import vectorMenuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
 import { htmluserlangattributes } from './utils';
 
 export { vectorMenuTemplate };
@@ -7,7 +7,8 @@ export { vectorMenuTemplate };
  * @type {MenuDefinition}
  */
 export const moreData = {
-	class: 'vectorMenu',
+	'is-dropdown': true,
+	class: 'vectorMenu-dropdown vectorMenu',
 	label: 'More',
 	id: 'p-cactions',
 	'label-id': 'p-cactions-label',
@@ -30,7 +31,8 @@ export const moreData = {
  * @type {MenuDefinition}
  */
 export const variantsData = {
-	class: 'vectorMenu',
+	'is-dropdown': true,
+	class: 'vectorMenu-dropdown vectorMenu',
 	label: '新加坡简体',
 	id: 'p-variants',
 	'label-id': 'p-variants-label',

stories/MenuDropdown.stories.js

@@ -1,7 +1,7 @@
 import mustache from 'mustache';
-import '../resources/skins.vector.styles/VectorMenu.less';
+import '../resources/skins.vector.styles/MenuDropdown.less';
 import '../.storybook/common.less';
-import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
+import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
 
 export default {
 	title: 'MenuDropdown'

stories/skin.stories.data.js

@@ -3,7 +3,7 @@ import { placeholder } from './utils';
 
 import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
-import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
+import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
 import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
 import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
 import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';

tests/phpunit/integration/VectorTemplateTest.php

@@ -160,6 +160,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 			'html-userlangattributes' => $langAttrs,
 			'html-items' => '',
 			'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
+			'is-dropdown' => false,
 		] );
 
 		$variants = $props['data-variants'];
@@ -167,9 +168,9 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 		$this->assertSame( $namespaces['class'],
 			'emptyPortlet vectorMenu-tabs vectorTabs' );
 		$this->assertSame( $variants['class'],
-			'emptyPortlet vectorMenu' );
+			'emptyPortlet vectorMenu-dropdown vectorMenu' );
 		$this->assertSame( $actions['class'],
-			'emptyPortlet vectorMenu' );
+			'emptyPortlet vectorMenu-dropdown vectorMenu' );
 		$this->assertSame( $props['data-personal-menu']['class'],
 			'emptyPortlet vectorMenu-default' );
 	}