Move Vector menu class logic into Menu mustache template

Replaced “vector-menu-heading” with ‘’(empty string) in “$portletData['heading-class'] = '';”
in includes/SkinVector.php and updated accordingly the includes/templates/Menu.mustache file.
Updated “vector-menu-heading” with ‘’(empty string) in stories/LanguageButton.stories.data.js,
stories/UserLinks.stories.data.js, and tests/phpunit/integration/SkinVectorTest.php respectively
SkinVector and Storybook are cleaned up.

Bug: T290281
Change-Id: I4ca16953799b3dc52e45674bb398c78f14cfc842

includes/SkinVector.php

@@ -353,7 +353,6 @@ abstract class SkinVector extends SkinMustache {
 			'class' => 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
 			'html-items' => $userMoreHtmlItems,
 			'label' => $this->msg( 'vector-personal-more-label' ),
-			'heading-class' => 'vector-menu-heading',
 			'is-dropdown' => false,
 		];
 
@@ -741,11 +740,8 @@ abstract class SkinVector extends SkinMustache {
 			// ext.uls.interface attaches click handler to this selector.
 			'checkbox-class' => ' mw-interlanguage-selector ',
 			'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language-progressive' ),
-			'heading-class' =>
-				' vector-menu-heading ' .
-				self::CLASS_QUIET_BUTTON . ' ' .
-				self::CLASS_PROGRESSIVE
-			];
+			'heading-class' => self::CLASS_QUIET_BUTTON . ' ' . self::CLASS_PROGRESSIVE
+		];
 
 		// Adds class to hide language button
 		// Temporary solution to T287206, can be removed when ULS dialog includes interwiki links
@@ -773,7 +769,7 @@ abstract class SkinVector extends SkinMustache {
 			self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
 			self::MENU_TYPE_DEFAULT => 'vector-menu',
 		];
-		$portletData['heading-class'] = 'vector-menu-heading';
+		$portletData['heading-class'] = '';
 		// Add target class to apply different icon to personal menu dropdown for logged in users.
 		if ( $portletData['id'] === 'p-personal' ) {
 			if ( $this->isLegacy() ) {

includes/templates/Menu.mustache

@@ -12,7 +12,7 @@
 		data-event-name="ui.dropdown-{{id}}"
 		class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<label id="{{id}}-label" aria-label="{{aria-label}}"{{#heading-class}} class="{{.}}"{{/heading-class}}{{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
+	<label id="{{id}}-label" aria-label="{{aria-label}}" class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"  {{^is-legacy}} aria-hidden="true"{{/is-legacy}}>
 		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
 	</label>
 	<div class="vector-menu-content">

stories/LanguageButton.stories.data.js

@@ -12,8 +12,7 @@ export const languageData = {
 	// icon classes and button classes
 	'checkbox-class': 'mw-interlanguage-selector',
 	'html-vector-heading-icon': makeIcon( 'wikimedia-language' ),
-	'heading-class': 'vector-menu-heading ' +
-		'mw-ui-button mw-ui-quiet',
+	'heading-class': 'mw-ui-button mw-ui-quiet',
 	'html-tooltip': 'A message tooltip-p-lang must exist for this to appear',
 	label: '10 languages',
 	'html-user-language-attributes': htmlUserLanguageAttributes,

stories/UserLinks.stories.data.js

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

tests/phpunit/integration/SkinVectorTest.php

@@ -261,7 +261,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 				'html-after-portal' => '',
 				'html-before-portal' => '',
 				'label' => $context->msg( 'views' )->text(),
-				'heading-class' => 'vector-menu-heading',
+				'heading-class' => '',
 				'is-dropdown' => false,
 			],
 			$views