Change Details

=== 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`, `mw-ui-button mw-ui-quiet` and custom styles across Desktop Refresh buttons. While both classes provide very 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 hover/active styles directly to an icon. Unfortunately, this leads to button behavior that is both subtly inconsistent and not 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 ]]. === 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 element. 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, 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. ``` <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. 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.

=== 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`, `mw-ui-button mw-ui-quiet` and custom styles across Desktop Refresh buttons. While both classes provide very 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 hover/active styles directly to an icon. Unfortunately, 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 ]]. === 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 element. 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, 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. ``` <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. 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.

=== 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`, `mw-ui-button mw-ui-quiet` and custom styles across Desktop Refresh buttons. While both classes provide very 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 hover/active styles directly to an icon. Unfortunately, this leads to button behavior that is both subtlyin modern Vector that's inconsistent and nott 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 ]]. === 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 element. 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, 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. ``` <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. 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.