[Design] specifically Alerts · Messages in Echo flyout, and button groups/tabs standardization

[S Page]

The Echo flyout has "Alerts (*NN*) · Messages (*NN*)" to switch between its
two "panes". Somehow there has been a regression:
a) They're both blue (T71929) so it's not clear which one you're viewing.
b) If the flyout shows only "Alerts" (because you're not involved with any
Flow boards) it's blue even though unclickable (T73733).

The Collaboration team needs to fix this soon.

The issue is whether Echo's flyout should move to the mediawiki.ui standard
for tabs, and what that is. The Trello card for this is
https://trello.com/c/F3SdIvRg/45-tabs-panes-panels . Mobile's Watchlist >
Modified uses both a button group and a set of tabs (see the Trello card's
attachment), there are pros and cons to each. Jared suggested using a
button group for [Alerts (*NN*) | Messages (*NN*)] , but the current CSS
for mediawiki.ui button group implementation doesn't seem to have the
notion of the active/selected button. If we add mw-ui-progressive to mark
the active button the way Mobile watchlist does, then the current
unclickable state looks like a button, so it's back-to-front.

I assigned Pau to https://phabricator.wikimedia.org/T71929 , but there's
seems a general UX standardization issue(s). I hope some guidelines come
out of this.

Thanks!
--
=S Page Collaboration team engineer