Merge "Reduce distribution of legacy classes"

includes/VectorTemplate.php

@@ -399,6 +399,12 @@ class VectorTemplate extends BaseTemplate {
 			self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
 			self::MENU_TYPE_DEFAULT => 'vector-menu',
 		];
+		// A list of classes to apply the list element and override the default behavior.
+		$listClasses = [
+			// `.menu` is on the portal for historic reasons.
+			// It should not be applied elsewhere per T253329.
+			self::MENU_TYPE_DROPDOWN => 'menu vector-menu-content-list',
+		];
 		$isPortal = self::MENU_TYPE_PORTAL === $type;
 
 		// For some menu items, there is no language key corresponding with its menu key.
@@ -410,6 +416,7 @@ class VectorTemplate extends BaseTemplate {
 			// If no message exists fallback to plain text (T252727)
 			'label' => $msgObj->exists() ? $msgObj->text() : $label,
 			'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
+			'list-classes' => $listClasses[$type] ?? 'vector-menu-content-list',
 			'html-items' => '',
 			'is-dropdown' => self::MENU_TYPE_DROPDOWN === $type,
 			'html-tooltip' => Linker::tooltip( 'p-' . $label ),

includes/templates/Menu.mustache

@@ -4,7 +4,7 @@
 <div id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{label-id}}" {{{html-tooltip}}}
 	 {{{html-userlangattributes}}}>
 	{{#is-dropdown}}
-	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
+	<input type="checkbox" class="vectorMenuCheckbox vector-menu-checkbox" aria-labelledby="{{label-id}}" />
 	{{/is-dropdown}}
 	<h3 id="{{label-id}}">
 		<span>{{label}}</span>
@@ -14,7 +14,7 @@
 	<!-- Please do not use the .body class, it is deprecated. -->
 	<div class="body vector-menu-content">
 		<!-- Please do not use the .menu class, it is deprecated. -->
-		<ul class="menu vector-menu-content-list">{{{html-items}}}</ul>
+		<ul class="{{list-classes}}">{{{html-items}}}</ul>
 		{{{html-after-portal}}}
 	</div>
 </div>

resources/skins.vector.styles.responsive.less

@@ -108,7 +108,9 @@
 		padding: 0;
 	}
 
-	.vectorMenu .menu {
+	// FIXME: Drop .menu class after cache has cleared.
+	.vectorMenu .menu,
+	.vectorMenu .vector-menu-content-list {
 		left: inherit;
 		right: -1px;
 	}

resources/skins.vector.styles/MenuDropdown.less

@@ -67,14 +67,18 @@
 		z-index: @z-index-menu;
 	}
 
-	&:hover .menu {
+	// FIXME: Drop .menu class after cache has cleared.
+	&:hover .menu,
+	&:hover .vector-menu-content-list {
 		opacity: 1;
 		visibility: visible;
 	}
 
 	// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
 	// Support: IE8
-	.vectorMenuCheckbox:checked ~ .menu {
+	// FIXME: drop .menu selector when cache has cleared
+	.vectorMenuCheckbox:checked ~ .menu,
+	.vector-menu-checkbox:checked ~ .vector-menu-content-list {
 		opacity: 1;
 		visibility: visible;
 	}

stories/Menu.stories.data.js

@@ -7,6 +7,7 @@ import { htmluserlangattributes } from './utils';
 const loggedOut = {
 	id: 'p-personal',
 	class: 'vector-menu',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -19,6 +20,7 @@ const loggedOut = {
 const loggedInWithEcho = {
 	id: 'p-personal',
 	class: 'vector-menu',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,
@@ -33,6 +35,7 @@ const ULS_LANGUAGE_SELECTOR = '<li class="uls-trigger active"><a href="#">Englis
 const defaultMenu = {
 	id: 'p-generic',
 	class: 'vector-menu',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-generic-label',
 	label: 'Menu label',
 	'html-userlangattributes': htmluserlangattributes,
@@ -47,6 +50,7 @@ const defaultMenu = {
 const loggedInWithULS = {
 	id: 'p-personal',
 	class: 'vector-menu',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-personal-label',
 	label: 'Personal tools',
 	'html-userlangattributes': htmluserlangattributes,

stories/MenuDropdown.stories.data.js

@@ -9,6 +9,7 @@ export { vectorMenuTemplate };
 export const moreData = {
 	'is-dropdown': true,
 	class: 'vector-menu-dropdown',
+	'list-classes': 'vector-menu-content-list',
 	label: 'More',
 	id: 'p-cactions',
 	'label-id': 'p-cactions-label',
@@ -33,6 +34,7 @@ export const moreData = {
 export const variantsData = {
 	'is-dropdown': true,
 	class: 'vector-menu-dropdown',
+	'list-classes': 'vector-menu-content-list',
 	label: '新加坡简体',
 	id: 'p-variants',
 	'label-id': 'p-variants-label',

stories/MenuPortal.stories.data.js

@@ -30,6 +30,7 @@ export const PORTALS = {
 	example: {
 		id: 'p-example',
 		class: 'vector-menu-portal portal',
+		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'Message tooltip-p-example acts as tooltip',
 		label: 'Portal title',
 		'label-id': 'p-example-label',
@@ -46,6 +47,7 @@ export const PORTALS = {
 	navigation: {
 		id: 'p-navigation',
 		class: 'portal portal-first',
+		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-navigation must exist for this to appear',
 		label: 'Navigation',
 		'label-id': 'p-navigation-label',
@@ -58,6 +60,7 @@ export const PORTALS = {
 	toolbox: {
 		id: 'p-tb',
 		class: 'vector-menu-portal portal',
+		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-tb must exist for this to appear',
 		label: 'Tools',
 		'label-id': 'p-tb-label',
@@ -70,6 +73,7 @@ export const PORTALS = {
 	langlinks: {
 		id: 'p-lang',
 		class: 'vector-menu-portal portal',
+		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
 		label: 'In other languages',
 		'label-id': 'p-lang-label',
@@ -88,6 +92,7 @@ ${placeholder( `<p>Further hook output possible (lang)</p>`, 60 )}`
 	otherProjects: {
 		id: 'p-wikibase-otherprojects',
 		class: 'vector-menu-portal portal',
+		'list-classes': 'vector-menu-content-list',
 		'html-tooltip': 'A message tooltip-p-wikibase-otherprojects must exist for this to appear',
 		label: 'In other projects',
 		'label-id': 'p-wikibase-otherprojects-label',

stories/MenuTabs.stories.data.js

@@ -6,6 +6,7 @@ import { htmluserlangattributes } from './utils';
 export const pageActionsData = {
 	id: 'p-views',
 	class: 'vector-menu-tabs vectorTabs',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-views-label',
 	label: 'Views',
 	'html-userlangattributes': htmluserlangattributes,
@@ -28,6 +29,7 @@ You can view its source [⌃⌥e]" accesskey="e">View source</a></li>
 export const namespaceTabsData = {
 	id: 'p-namespaces',
 	class: 'vector-menu-tabs vectorTabs',
+	'list-classes': 'vector-menu-content-list',
 	'label-id': 'p-namespaces-label',
 	label: 'Namespaces',
 	'html-userlangattributes': htmluserlangattributes,

stories/types.js

@@ -30,6 +30,7 @@
  * @prop {string} html-items
  * @prop {string} [html-tooltip]
  * @prop {string} [class] of menu
+ * @prop {string} list-classes of the unordered list element inside the menu
  * @prop {string} [html-userlangattributes]
  * @prop {boolean} [is-dropdown]
  * @prop {string} [html-hook-vector-after-toolbox] Deprecated and used by the toolbox portal menu.

tests/phpunit/integration/VectorTemplateTest.php

@@ -117,6 +117,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 			'label-id' => 'p-views-label',
 			'label' => 'Views',
 			'html-userlangattributes' => $langAttrs,
+			'list-classes' => 'vector-menu-content-list',
 			'html-items' => '',
 			'is-dropdown' => false,
 			'html-tooltip' => '',