Rename client preference menu to appearance menu

Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb

doc/configuration/configuration.md

@@ -169,7 +169,7 @@ The following are interface elements or settings that users can customize within
 
 4. Vector Table of Contents (TOC) Pinned (`vector-toc-pinned`): Determines if the user wants the table of contents on the left side to be pinned (visible) on desktop. It can be set to either 1 (pinned) or 0 (not pinned).
 
-5. Vector Client Preferences Pinned (`vector-client-prefs-pinned`): Indicates whether the user wants the client preferences menu to be pinned (visible) on desktop. It can be set to either 1 (pinned) or 0 (not pinned).
+5. Vector Appearance Pinned (`vector-appearance-pinned`): Indicates whether the user wants the appearance menu to be pinned (visible) on desktop. It can be set to either 1 (pinned) or 0 (not pinned).
 
 6. Vector Font Size (`vector-font-size`): Allows the user to select the preferred font size for the Vector. It can be set to 0 for regular, 1 for large, or 2 for x-large.
 

i18n/en.json

@@ -34,7 +34,7 @@
 	"vector-jumptosearch": "Jump to search",
 	"vector-jumptocontent": "Jump to content",
 	"vector-more-actions": "More",
-	"vector-client-prefs-label": "Appearance",
+	"vector-appearance-label": "Appearance",
 	"vector-feature-limited-width-name": "Width",
 	"vector-feature-custom-font-size-name": "Text",
 	"vector-feature-limited-width-0-label": "Wide",
@@ -84,7 +84,7 @@
 	"vector-toc-unpinned-popup": "The table of contents has moved here.",
 	"vector-page-tools-unpinned-popup": "The tools menu has moved here.",
 	"vector-main-menu-unpinned-popup": "The main menu has moved here.",
-	"vector-client-prefs-unpinned-popup": "The appearance menu has moved here.",
+	"vector-appearance-unpinned-popup": "The appearance menu has moved here.",
 	"vector-2022-beta-preview-label": "Accessibility for Reading (Vector 2022)",
 	"vector-2022-beta-preview-description": "Get early access to the new reading accessibility features, such as typography improvements and night mode."
 }

i18n/qqq.json

@@ -51,7 +51,7 @@
 	"vector-jumptosearch": "Accessibility link for jumping to the site search. Visually hidden by default.\n\nSee also\n* {{msg-mw|Search}}",
 	"vector-jumptocontent": "Accessibility link for jumping to the content and skipping the navigation. Visually hidden by default.",
 	"vector-more-actions": "Label in the Vector skin's menu for the less-important or rarer actions which are not shown as tabs (like moving the page, or for sysops deleting or protecting the page), as well as (for users with a narrow viewing window in their browser) the less-important tab actions which the user's browser is unable to fit in. {{Identical|More}}",
-	"vector-client-prefs-label": "Heading for client preferences",
+	"vector-appearance-label": "Heading for client preferences",
 	"vector-feature-limited-width-name": "Heading label for limited width",
 	"vector-feature-custom-font-size-name": "Heading label for font size",
 	"vector-feature-limited-width-0-label": "Label for option to disable limited width. An adjective that describes width ({{msg-mw|Vector-feature-limited-width-name}}).",
@@ -101,7 +101,7 @@
 	"vector-toc-unpinned-popup": "Text to show in popup body when Table of Contents ({{msg-mw|vector-toc-label}}) has been moved.",
 	"vector-page-tools-unpinned-popup": "Text to show in popup body when Page Tools ({{msg-mw|vector-page-tools-label}}) has been moved.",
 	"vector-main-menu-unpinned-popup": "Text to show in popup body when Main menu ({{msg-mw|vector-main-menu-label}}) has been moved.",
-	"vector-client-prefs-unpinned-popup": "Text to show in popup body when Appearance menu ({{msg-mw|vector-client-prefs-label}}) has been moved.",
+	"vector-appearance-unpinned-popup": "Text to show in popup body when Appearance menu ({{msg-mw|vector-appearance-label}}) has been moved.",
 	"vector-2022-beta-preview-label": "label for beta feature preview link in beta features under special preferences",
 	"vector-2022-beta-preview-description": "label for beta feature preview description in beta features under special preferences"
 }

includes/Components/VectorComponentAppearance.php

@@ -6,9 +6,9 @@ use MediaWiki\Skins\Vector\FeatureManagement\FeatureManager;
 use MessageLocalizer;
 
 /**
- * VectorComponentClientPrefs component
+ * VectorComponentAppearance component
  */
-class VectorComponentClientPrefs implements VectorComponent {
+class VectorComponentAppearance implements VectorComponent {
 
 	/** @var MessageLocalizer */
 	private $localizer;
@@ -17,7 +17,7 @@ class VectorComponentClientPrefs implements VectorComponent {
 	private $isPinned;
 
 	/** @var string */
-	public const ID = 'vector-client-prefs';
+	public const ID = 'vector-appearance';
 
 	/**
 	 * @param MessageLocalizer $localizer
@@ -29,7 +29,7 @@ class VectorComponentClientPrefs implements VectorComponent {
 	) {
 		$this->localizer = $localizer;
 		// FIXME: isPinned is no longer accurate because the appearance menu uses client preferences
-		$this->isPinned = $featureManager->isFeatureEnabled( Constants::FEATURE_CLIENT_PREFS_PINNED );
+		$this->isPinned = $featureManager->isFeatureEnabled( Constants::FEATURE_APPEARANCE_PINNED );
 	}
 
 	/**
@@ -44,7 +44,7 @@ class VectorComponentClientPrefs implements VectorComponent {
 			// Name
 			self::ID,
 			// Feature name
-			'client-prefs-pinned'
+			'appearance-pinned'
 		);
 
 		$data = $pinnableElement->getTemplateData() +

includes/Constants.php

@@ -241,32 +241,32 @@ final class Constants {
 	/**
 	 * @var string
 	 */
-	public const FEATURE_CLIENT_PREFS_PINNED = 'ClientPrefsPinned';
+	public const FEATURE_APPEARANCE_PINNED = 'AppearancePinned';
 
 	/**
 	 * @var string
 	 */
-	public const REQUIREMENT_CLIENT_PREFS_PINNED = 'ClientPrefsPinned';
+	public const REQUIREMENT_APPEARANCE_PINNED = 'AppearancePinned';
 
 	/**
 	 * @var string
 	 */
-	public const PREF_KEY_CLIENT_PREFS_PINNED = 'vector-client-prefs-pinned';
+	public const PREF_KEY_APPEARANCE_PINNED = 'vector-appearance-pinned';
 
 	/**
 	 * @var string
 	 */
-	public const CONFIG_KEY_CLIENT_PREFERENCES = 'VectorClientPreferences';
+	public const CONFIG_KEY_APPEARANCE = 'VectorAppearance';
 
 	/**
 	 * @var string
 	 */
-	public const FEATURE_CLIENT_PREFERENCES = 'ClientPreferences';
+	public const FEATURE_APPEARANCE = 'Appearance';
 
 	/**
 	 * @var string
 	 */
-	public const REQUIREMENT_CLIENT_PREFERENCES = 'ClientPreferences';
+	public const REQUIREMENT_APPEARANCE = 'Appearance';
 
 	/**
 	 * @var string
@@ -307,7 +307,7 @@ final class Constants {
 	 * @var array
 	 */
 	public const VECTOR_BETA_FEATURES = [
-		self::CONFIG_KEY_CLIENT_PREFERENCES,
+		self::CONFIG_KEY_APPEARANCE,
 	];
 
 	/**

includes/FeatureManagement/FeatureManager.php

@@ -197,7 +197,7 @@ class FeatureManager {
 					break;
 				case CONSTANTS::FEATURE_LIMITED_WIDTH:
 				case CONSTANTS::FEATURE_TOC_PINNED:
-				case CONSTANTS::FEATURE_CLIENT_PREFS_PINNED:
+				case CONSTANTS::FEATURE_APPEARANCE_PINNED:
 					$suffixEnabled = 'clientpref-1';
 					$suffixDisabled = 'clientpref-0';
 					break;

includes/FeatureManagement/FeatureManagerFactory.php

@@ -265,45 +265,45 @@ class FeatureManagerFactory {
 			]
 		);
 
-		// Feature: T345363: Client preferences menu
+		// Feature: T345363: Appearance menu
 		// ============================================
 		$featureManager->registerRequirement(
 			new OverridableConfigRequirement(
 				$config,
 				$user,
 				$request,
-				Constants::CONFIG_KEY_CLIENT_PREFERENCES,
-				Constants::REQUIREMENT_CLIENT_PREFERENCES
+				Constants::CONFIG_KEY_APPEARANCE,
+				Constants::REQUIREMENT_APPEARANCE
 			)
 		);
 
 		$featureManager->registerFeature(
-			Constants::FEATURE_CLIENT_PREFERENCES,
+			Constants::FEATURE_APPEARANCE,
 			[
 				Constants::REQUIREMENT_FULLY_INITIALISED,
-				Constants::REQUIREMENT_CLIENT_PREFERENCES
+				Constants::REQUIREMENT_APPEARANCE
 			]
 		);
 
-		// Feature: Client preference pinned
+		// Feature: Appearance menu pinned
 		// ================================
 		$featureManager->registerRequirement(
 			new UserPreferenceRequirement(
 				$user,
 				$this->userOptionsLookup,
-				Constants::PREF_KEY_CLIENT_PREFS_PINNED,
-				Constants::REQUIREMENT_CLIENT_PREFS_PINNED,
+				Constants::PREF_KEY_APPEARANCE_PINNED,
+				Constants::REQUIREMENT_APPEARANCE_PINNED,
 				$request,
 				$title
 			)
 		);
 
 		$featureManager->registerFeature(
-			Constants::FEATURE_CLIENT_PREFS_PINNED,
+			Constants::FEATURE_APPEARANCE_PINNED,
 			[
 				Constants::REQUIREMENT_FULLY_INITIALISED,
-				Constants::REQUIREMENT_CLIENT_PREFERENCES,
-				Constants::REQUIREMENT_CLIENT_PREFS_PINNED
+				Constants::REQUIREMENT_APPEARANCE,
+				Constants::REQUIREMENT_APPEARANCE_PINNED
 			]
 		);
 

includes/Hooks.php

@@ -561,7 +561,7 @@ class Hooks implements
 			Constants::PREF_KEY_TOC_PINNED => [
 				'type' => 'api'
 			],
-			Constants::PREF_KEY_CLIENT_PREFS_PINNED => [
+			Constants::PREF_KEY_APPEARANCE_PINNED => [
 				'type' => 'api'
 			],
 			Constants::PREF_KEY_LIMITED_WIDTH => [

includes/SkinVector22.php

@@ -4,8 +4,8 @@ namespace MediaWiki\Skins\Vector;
 
 use ExtensionRegistry;
 use MediaWiki\MediaWikiServices;
+use MediaWiki\Skins\Vector\Components\VectorComponentAppearance;
 use MediaWiki\Skins\Vector\Components\VectorComponentButton;
-use MediaWiki\Skins\Vector\Components\VectorComponentClientPrefs;
 use MediaWiki\Skins\Vector\Components\VectorComponentDropdown;
 use MediaWiki\Skins\Vector\Components\VectorComponentLanguageDropdown;
 use MediaWiki\Skins\Vector\Components\VectorComponentMainMenu;
@@ -396,8 +396,8 @@ class SkinVector22 extends SkinMustache {
 
 		$isRegistered = $user->isRegistered();
 		$userPage = $isRegistered ? $this->buildPersonalPageItem() : [];
-		$isClientPreferencesEnabled = $featureManager->isFeatureEnabled(
-			Constants::FEATURE_CLIENT_PREFERENCES,
+		$isAppearanceEnabled = $featureManager->isFeatureEnabled(
+			Constants::FEATURE_APPEARANCE,
 		);
 
 		$components = $tocComponents + [
@@ -469,11 +469,11 @@ class SkinVector22 extends SkinMustache {
 				$this->msg( 'toolbox' )->text(),
 				VectorComponentPageTools::ID . '-dropdown',
 			),
-			'data-client-prefs' => $isClientPreferencesEnabled ?
-				new VectorComponentClientPrefs( $localizer, $featureManager ) : null,
-			'data-client-prefs-dropdown' => $isClientPreferencesEnabled ? new VectorComponentDropdown(
-				'vector-client-prefs-dropdown',
-				$this->msg( 'vector-client-prefs-label' )->text(),
+			'data-appearance' => $isAppearanceEnabled ?
+				new VectorComponentAppearance( $localizer, $featureManager ) : null,
+			'data-appearance-dropdown' => $isAppearanceEnabled ? new VectorComponentDropdown(
+				'vector-appearance-dropdown',
+				$this->msg( 'vector-appearance-label' )->text(),
 				'',
 				// @todo: Use new theme icon (T351142)
 				'appearance'
@@ -509,7 +509,7 @@ class SkinVector22 extends SkinMustache {
 				$this->isVisualEditorTabPositionFirst( $portlets[ 'data-views' ] )
 			) : null,
 			'data-vector-settings-button' => $featureManager->isFeatureEnabled(
-				Constants::FEATURE_CLIENT_PREFERENCES,
+				Constants::FEATURE_APPEARANCE,
 			) ? null : new VectorComponentButton(
 				$this->msg( 'vector-limited-width-toggle' ),
 				$featureManager->isFeatureEnabled(

includes/templates/ColumnEnd.mustache

@@ -8,13 +8,13 @@
 			{{>PinnableContainer/Close}}
 			{{/data-page-tools}}
 		</nav>
-		<nav class="vector-client-prefs-landmark" aria-label="{{msg-vector-client-prefs-label}}">
-			{{#data-client-prefs}}
+		<nav class="vector-appearance-landmark" aria-label="{{msg-vector-appearance-label}}">
+			{{#data-appearance}}
 			{{>PinnableContainer/Pinned/Open}}
-				{{! Use `#vector-client-prefs-pinned-container .vector-client-prefs` to target styles at this element}}
-				{{#is-pinned}}{{>ClientPreferences}}{{/is-pinned}}
+				{{! Use `#vector-appearance-pinned-container .vector-appearance` to target styles at this element}}
+				{{#is-pinned}}{{>Appearance}}{{/is-pinned}}
 			{{>PinnableContainer/Close}}
-			{{/data-client-prefs}}
+			{{/data-appearance}}
 		</nav>
 	</div>
 </div>

includes/templates/UserLinks.mustache

@@ -2,15 +2,15 @@
 	<div class="vector-user-links-main">
 	{{#data-user-links-preferences}}{{>Menu}}{{/data-user-links-preferences}}
 	{{#data-user-links-user-page}}{{>Menu}}{{/data-user-links-user-page}}
-	<nav class="vector-client-prefs-landmark" aria-label="{{msg-vector-client-prefs-label}}">
-		{{#data-client-prefs-dropdown}}{{>Dropdown/Open}}{{/data-client-prefs-dropdown}}
-			{{#data-client-prefs}}
+	<nav class="vector-appearance-landmark" aria-label="{{msg-vector-appearance-label}}">
+		{{#data-appearance-dropdown}}{{>Dropdown/Open}}{{/data-appearance-dropdown}}
+			{{#data-appearance}}
 			{{>PinnableContainer/Unpinned/Open}}
-				{{! Use `#vector-client-prefs-unpinned-container .vector-client-prefs` to target styles at this element}}
-				{{^is-pinned}}{{>ClientPreferences}}{{/is-pinned}}
+				{{! Use `#vector-appearance-unpinned-container .vector-appearance` to target styles at this element}}
+				{{^is-pinned}}{{>Appearance}}{{/is-pinned}}
 			{{>PinnableContainer/Close}}
-			{{/data-client-prefs}}
-		{{#data-client-prefs-dropdown}}{{>Dropdown/Close}}{{/data-client-prefs-dropdown}}
+			{{/data-appearance}}
+		{{#data-appearance-dropdown}}{{>Dropdown/Close}}{{/data-appearance-dropdown}}
 	</nav>
 	{{#data-user-links-notifications}}{{>Menu}}{{/data-user-links-notifications}}
 	{{#data-user-links-overflow}}{{>Menu}}{{/data-user-links-overflow}}

resources/skins.vector.clientPreferences/clientPreferences.less

@@ -1,4 +1,4 @@
-#vector-client-prefs {
+#vector-appearance {
 	form {
 		font-size: 0.875rem;
 		padding: 6px 0;

resources/skins.vector.js/features.js

@@ -14,7 +14,7 @@ function save( feature, enabled ) {
 		switch ( feature ) {
 			case 'toc-pinned':
 			case 'limited-width':
-			case 'client-prefs-pinned':
+			case 'appearance-pinned':
 				// Save the setting under the new system
 				// @ts-ignore https://github.com/wikimedia/typescript-types/pull/44
 				mw.user.clientPrefs.set( `vector-feature-${ feature }`, enabled ? '1' : '0' );

resources/skins.vector.js/pinnableElement.js

@@ -242,7 +242,7 @@ function movePinnableElement( pinnableElementId, newContainerId ) {
 
 /**
  * Update the pinnable element location in the DOM based off of whether its pinned or not.
- * This is only necessary with pinnable elements that use client preferences (i.e. appearances menu)
+ * This is only necessary with pinnable elements that use client preferences (i.e. appearance menu)
  * as all other pinnable elements should be serverside rendered in the correct location
  *
  * @param {HTMLElement} header

resources/skins.vector.js/skin.js

@@ -71,9 +71,9 @@ function main( window ) {
 	teleportTarget.classList.add( 'vector-body' );
 
 	// Load client preferences
-	const clientPreferenceSelector = '#vector-client-prefs';
-	const clientPreferenceExists = document.querySelectorAll( clientPreferenceSelector ).length > 0;
-	if ( clientPreferenceExists ) {
+	const appearanceMenuSelector = '#vector-appearance';
+	const appearanceMenuExists = document.querySelectorAll( appearanceMenuSelector ).length > 0;
+	if ( appearanceMenuExists ) {
 		mw.loader.using( [
 			'skins.vector.clientPreferences',
 			'skins.vector.search.codex.styles',
@@ -86,7 +86,7 @@ function main( window ) {
 				// @ts-ignore issues relating to delete operator are not relevant here.
 				delete clientPreferenceConfig[ 'skin-theme' ];
 			}
-			clientPreferences.render( clientPreferenceSelector, clientPreferenceConfig );
+			clientPreferences.render( appearanceMenuSelector, clientPreferenceConfig );
 		} );
 	}
 

resources/skins.vector.styles/components/Appearance.less

@@ -1,13 +1,10 @@
 // Ensure there is only 1 client prefs landmark at anytime
-// TODO: Remove old classes after has been in prod
-.vector-feature-client-prefs-pinned-enabled .vector-user-links .vector-client-prefs-landmark,
-.vector-feature-client-prefs-pinned-disabled .vector-column-end .vector-client-prefs-landmark,
-.vector-feature-client-prefs-pinned-clientpref-1 .vector-user-links .vector-client-prefs-landmark,
-.vector-feature-client-prefs-pinned-clientpref-0 .vector-column-end .vector-client-prefs-landmark {
+.vector-feature-appearance-pinned-clientpref-1 .vector-user-links .vector-appearance-landmark,
+.vector-feature-appearance-pinned-clientpref-0 .vector-column-end .vector-appearance-landmark {
 	display: none;
 }
 
-#vector-client-prefs-dropdown {
+#vector-appearance-dropdown {
 	.vector-dropdown-content {
 		.mixin-vector-dropdown-content-flip();
 	}
@@ -18,7 +15,7 @@
 }
 
 /* If JS is disabled the menu should not render at all */
-.client-nojs .vector-client-prefs-landmark {
+.client-nojs .vector-appearance-landmark {
 	display: none;
 }
 

resources/skins.vector.styles/layouts/grid.less

@@ -31,10 +31,8 @@
 		grid-area: footer;
 	}
 
-	// Remove selector after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
 	.vector-feature-page-tools-pinned-enabled .vector-column-end,
-	.vector-feature-client-prefs-pinned-enabled .vector-column-end,
-	.vector-feature-client-prefs-pinned-clientpref-1 .vector-column-end {
+	.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
 		width: @width-column-desktop;
 	}
 
@@ -67,10 +65,8 @@
 		}
 	}
 
-	// TODO: Remove old classes after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
 	.vector-feature-page-tools-pinned-enabled .vector-column-end,
-	.vector-feature-client-prefs-pinned-enabled .vector-column-end,
-	.vector-feature-client-prefs-pinned-clientpref-1 .vector-column-end {
+	.vector-feature-appearance-pinned-clientpref-1 .vector-column-end {
 		width: @width-column-desktop-wide;
 	}
 }
@@ -126,10 +122,8 @@
 		}
 	}
 
-	// TODO: Remove old classes after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
 	.vector-feature-page-tools-pinned-enabled .mw-body,
-	.vector-feature-client-prefs-pinned-enabled .mw-body,
-	.vector-feature-client-prefs-pinned-clientpref-1 .mw-body {
+	.vector-feature-appearance-pinned-clientpref-1 .mw-body {
 		column-gap: @grid-column-gap;
 	}
 

resources/skins.vector.styles/skin.less

@@ -24,7 +24,7 @@
 	@import './components/StickyHeader.less';
 	@import './components/TableOfContents.less';
 	@import './components/Button.less';
-	@import './components/ClientPreferences.less';
+	@import './components/Appearance.less';
 	@import './components/LanguageDropdown.less';
 	@import './components/UserLinks.less';
 	@import './components/Header.less';

skin.json

@@ -101,7 +101,7 @@
 						"views",
 						"vector-page-tools-nav-label",
 						"empty-language-selector-body",
-						"vector-client-prefs-label"
+						"vector-appearance-label"
 					]
 				}
 			]
@@ -172,7 +172,7 @@
 		"vector-page-tools-pinned": 1,
 		"vector-main-menu-pinned": 1,
 		"vector-toc-pinned": 1,
-		"vector-client-prefs-pinned": 1,
+		"vector-appearance-pinned": 1,
 		"vector-font-size": 0,
 		"vector-theme": "os"
 	},
@@ -476,7 +476,7 @@
 				"vector-toc-unpinned-popup",
 				"vector-page-tools-unpinned-popup",
 				"vector-main-menu-unpinned-popup",
-				"vector-client-prefs-unpinned-popup"
+				"vector-appearance-unpinned-popup"
 			]
 		},
 		"skins.vector.legacy.js": {
@@ -584,7 +584,7 @@
 			},
 			"description": "@var array determines which pages are compatible with night mode"
 		},
-		"VectorClientPreferences": {
+		"VectorAppearance": {
 			"value": {
 				"logged_in": false,
 				"logged_out": false,

tests/jest/__snapshots__/userLinks.test.js.snap

@@ -21,7 +21,7 @@ exports[`UserLinks renders 1`] = `
 	
 </div>
 </div>
-	<nav class=\\"vector-client-prefs-landmark\\" aria-label=\\"\\">
+	<nav class=\\"vector-appearance-landmark\\" aria-label=\\"\\">
 	</nav>
 <div id=\\"p-personal-notifications\\" class=\\"vector-menu\\">
 <div class=\\"vector-menu-content\\">

tests/phpunit/unit/components/VectorComponentAppearanceTest.php

@@ -21,7 +21,7 @@
 
 namespace MediaWiki\Skins\Vector\Tests\Unit\Components;
 
-use MediaWiki\Skins\Vector\Components\VectorComponentClientPrefs;
+use MediaWiki\Skins\Vector\Components\VectorComponentAppearance;
 use MediaWiki\Skins\Vector\FeatureManagement\FeatureManager;
 use MediaWikiUnitTestCase;
 use MessageLocalizer;
@@ -29,9 +29,9 @@ use MessageLocalizer;
 /**
  * @group Vector
  * @group Components
- * @coversDefaultClass \MediaWiki\Skins\Vector\Components\VectorComponentClientPrefs
+ * @coversDefaultClass \MediaWiki\Skins\Vector\Components\VectorComponentAppearance
  */
-class VectorComponentClientPrefsTest extends MediaWikiUnitTestCase {
+class VectorComponentAppearanceTest extends MediaWikiUnitTestCase {
 
 	/**
 	 * @covers ::getTemplateData
@@ -44,15 +44,15 @@ class VectorComponentClientPrefsTest extends MediaWikiUnitTestCase {
 		$featureManager->method( 'isFeatureEnabled' )
 			->willReturn( true );
 
-		// Create a new VectorComponentClientPrefs object
-		$clientPrefs = new VectorComponentClientPrefs( $localizer, $featureManager );
+		// Create a new VectorComponentAppearance object
+		$appearanceMenu = new VectorComponentAppearance( $localizer, $featureManager );
 		// Call the getTemplateData method
-		$actualData = $clientPrefs->getTemplateData();
+		$actualData = $appearanceMenu->getTemplateData();
 
 		// The expected data
 		$expectedData = [
-			// The id is set to 'vector-client-prefs'
-			'id' => 'vector-client-prefs',
+			// The id is set to 'vector-appearance'
+			'id' => 'vector-appearance',
 			// The is-pinned value is true
 			'is-pinned' => true,
 			// The data-pinnable-header array
@@ -67,14 +67,14 @@ class VectorComponentClientPrefsTest extends MediaWikiUnitTestCase {
 				'pin-label' => null,
 				// The unpin-label is null
 				'unpin-label' => null,
-				// The data-pinnable-element-id is set to 'vector-client-prefs'
-				'data-pinnable-element-id' => 'vector-client-prefs',
-				// The data-feature-name is set to 'client-prefs-pinned'
-				'data-feature-name' => 'client-prefs-pinned',
-				// The data-unpinned-container-id is set to 'vector-client-prefs-unpinned-container'
-				'data-unpinned-container-id' => 'vector-client-prefs-unpinned-container',
-				// The data-pinned-container-id is set to 'vector-client-prefs-pinned-container'
-				'data-pinned-container-id' => 'vector-client-prefs-pinned-container',
+				// The data-pinnable-element-id is set to 'vector-appearance'
+				'data-pinnable-element-id' => 'vector-appearance',
+				// The data-feature-name is set to 'appearance-pinned'
+				'data-feature-name' => 'appearance-pinned',
+				// The data-unpinned-container-id is set to 'vector-appearance-unpinned-container'
+				'data-unpinned-container-id' => 'vector-appearance-unpinned-container',
+				// The data-pinned-container-id is set to 'vector-appearance-pinned-container'
+				'data-pinned-container-id' => 'vector-appearance-pinned-container',
 			]
 		];
 
@@ -95,15 +95,15 @@ class VectorComponentClientPrefsTest extends MediaWikiUnitTestCase {
 		$featureManager->method( 'isFeatureEnabled' )
 			->willReturn( false );
 
-		// Create a new VectorComponentClientPrefs object
-		$clientPrefs = new VectorComponentClientPrefs( $localizer, $featureManager );
+		// Create a new VectorComponentAppearance object
+		$clientPrefs = new VectorComponentAppearance( $localizer, $featureManager );
 		// Call the getTemplateData method
 		$actualData = $clientPrefs->getTemplateData();
 
 		// The expected data
 		$expectedData = [
-			// The id is set to 'vector-client-prefs'
-			'id' => 'vector-client-prefs',
+			// The id is set to 'vector-appearance'
+			'id' => 'vector-appearance',
 			// The is-pinned value is false
 			'is-pinned' => false,
 			// The data-pinnable-header array
@@ -118,14 +118,14 @@ class VectorComponentClientPrefsTest extends MediaWikiUnitTestCase {
 				'pin-label' => null,
 				// The unpin-label is null
 				'unpin-label' => null,
-				// The data-pinnable-element-id is set to 'vector-client-prefs'
-				'data-pinnable-element-id' => 'vector-client-prefs',
-				// The data-feature-name is set to 'client-prefs-pinned'
-				'data-feature-name' => 'client-prefs-pinned',
-				// The data-unpinned-container-id is set to 'vector-client-prefs-unpinned-container'
-				'data-unpinned-container-id' => 'vector-client-prefs-unpinned-container',
-				// The data-pinned-container-id is set to 'vector-client-prefs-pinned-container'
-				'data-pinned-container-id' => 'vector-client-prefs-pinned-container',
+				// The data-pinnable-element-id is set to 'vector-appearance'
+				'data-pinnable-element-id' => 'vector-appearance',
+				// The data-feature-name is set to 'appearance-pinned'
+				'data-feature-name' => 'appearance-pinned',
+				// The data-unpinned-container-id is set to 'vector-appearance-unpinned-container'
+				'data-unpinned-container-id' => 'vector-appearance-unpinned-container',
+				// The data-pinned-container-id is set to 'vector-appearance-pinned-container'
+				'data-pinned-container-id' => 'vector-appearance-pinned-container',
 			]
 		];