Background
Through discussions in T283757, multiple button inconsistencies in modern Vector have been identified, specifically with the hover/focus/active states in the Sidebar, ULS, and User Links buttons.
Video of button state behaviors
These inconsistencies can mostly be attributed to two issues:
- Vector uses a mix of mw-ui-icon-element and mw-ui-button mw-ui-quiet classes across Desktop Refresh buttons. While both classes provide similar styles, mw-ui-icon-element doesn’t provide focus styles or distinguish between hover and active states. The mw-ui-icon-element class also seems unique to the WikimediaUI theme, as there aren’t any equivalent examples in either OOUI and WVUI. As far as I can tell, the more modern libraries recommend using an icon element inside of a quiet button, rather than applying styles directly to the icon.
- mw-ui-button mw-ui-quiet styles don’t match the styleguide to begin with. The focus styles override the active styles when they shouldn’t, and the focus outline is too thin. These 2 issues need to be fixed for the “Create account” and user page buttons.
Expected behavior
Buttons in Desktop Refresh have the same behavior and states, and they follow the “quiet button” spec in the styleguide and the WVUI docs.
Possible solutions:
1. Update buttons to align with style guide
Simplest way to achieve this is to override mw-ui-icon-element in modern Vector to apply the correct focus and active states
This option is likely the most involved for several reasons:
- mw-ui-button mw-ui-quiet needs to be fixed in core (issue #2 above)
- We can't easily add classes to the Echo icons, we need to add custom code to handle Echo.
- The checkbox hack means we need to add custom code to handle the menu button (i.e. the user menu button)
Other options like trying to use both classes get really messy, as the classes have conflicting styles. The "correct" way to use these classes is probably something like this, but this would require some markup changes we currently don't support.
<h3 id=“p-personal-label” class=“vector-menu-heading mw-ui-button mw-ui-quiet”>
<span class=“mw-ui-icon mw-ui-icon-wikimedia-userAvatar”>Personal tools</span>
</h3>2. Override mw-ui-button mw-ui-quiet to ensure all buttons consistently behave like mw-ui-icon-element
This option goes against the style guide and removes default button behavior, but it's a much simpler path to achieving consistency inside Vector. We would still have to fix mw-ui-button mw-ui-quiet in core. This would also make Vector's buttons consistent with MinervaNeue.
3. Do nothing and wait to redo the buttons with the new design system.
Considering mw-ui-icon-element and mw-ui-button mw-ui-quiet both don't match the style guide and that WikimediaUI will eventually be deprecated, we can choose to wait to redo these buttons at a later date when the design system and SSR is ready to use. This would mean we have to put up with some subtle button inconsistencies in Vector for the time being.