Background

This task is a blocker for adopting Codex icons T363920.

Codex CSS only icons require an additional cdx-button__icon class on the icon when it is inside a button, as well as the usage of the @param-is-button-icon param inside the icon mixin. This means that if you have 2 instances of the same icon, you will need 2 separate icon classes if 1 is used inside a button.

For example, the watchlist icon is used inside the personal tools menu & the personal tools dropdown. We cannot use the same icon class for both cases.

This is also true when we have the same icon but with different sizes, we also need a separate icon class.

This means that when providing template data for icons, we need to include additional data on whether or not the icon is being used inside a button, and its size. This is a problem for Vector due to our menu architecture, which treats icons generically regardless of how they are used.

In order to handle this extra data inside our menu architecture and templating, we need to migrate all of our menus to the component system, and properly build out an Icon component. Currently many menus with icons still being modified in Hooks.php, and the menu code inside the component system is mostly hardcoded.

User story

As a user I want expected icon styles and colors in both night and dark mode

Requirements

• Menu code is removed from Hooks.php, all menus are using the component system.
• Menus that currently are not using the new menu system are: sticky header, user menu dropdown, and the actions bar (watchlist / wikilove etc..)
• VectorComponentLink is used
• VectorComponentIcon is introduced, with the is-button-icon param and size accounted for
• Icon.mustache is updated to support outputting new codex icon classes
• The function Vector2022::runOnSkinTemplateNavigationHooks is removed.

Design

no design changes

Communication criteria - does this need an announcement or discussion?

none