=== Background
Through [[ https://phabricator.wikimedia.org/T283757#7292799 | 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.
[[https://jumpshare.com/v/CRTI5Kj8qF8V5EsShCd6| Video of button state behaviors ]]
These inconsistencies can mostly be attributed to the fact that Vector uses a mix of `mw-ui-icon-element`,two issues:
1. `mw-ui-button Vector uses a mix of `mw-ui-quiei-icon-element` and custom styles`mw-ui-button mw-ui-quiet` classes across Desktop Refresh buttons. While both classes provide very similar styles, `mw-ui-icon-element` doesn't’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’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 hover/active styles directly to anthe icon.
Unfortunately,2. `mw-ui-button mw-ui-quiet` [[ https://jmp.sh/0GanpQL | styles don’t match the styleguide to begin with ]]. this leads to button behavior in modern Vector that's inconsistent and not quite following the "quiet button" spec in the [[ https://design.wikimedia.org/style-guide/components/buttons.html | styleguide ]] and the [[ https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-button--all-combinations | WVUI docs ]].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 [[ https://design.wikimedia.org/style-guide/components/buttons.html | styleguide ]] and the [[ https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-button--all-combinations | WVUI docs ]].
=== Possible solutions:
==== 1. Replace instances of `mw-ui-icon-element` with `mw-ui-button mw-ui-quiet`.
This option is most involved because the core icon and button styles aren't meant to be used on the same elementUpdate 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 ([[ https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.styles/components/UserLinks.less#L70 | i.e. The [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-quiet-framed-false-icon-only | OOUI Button widget example ]] suggests the intended usage should look more like the following code,the user menu button ]])
Other options like trying to use both classes get really messy, as the classes have conflicting styles. but even then there are conflicting styles between the classes as well as the fact that the Menu template doesn't support additional classes on the span element.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>
```
Even worse, the `mw-ui-button mw-ui-quiet` styles aren't even updated or correct to begin with. [[ https://jmp.sh/0GanpQL | The focus styles override the active styles when they shouldn't, and the focus outline is too thin ]].
==== 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 what is normally default button behavior, but it's a much simpler path to achieving consistency inside Vector. This option alsinvolves updating the `mw-ui-button mw-ui-quiet` active state to match the hover, and also fixing the focus issues mentioned above in option 1.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.