Page MenuHomePhabricator

[EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022)
Open, LowPublic

Description

Description

Our icon buttons & links are not currently consistent with each other, and are not following the design style guide spec. We need to update the color of the icons, the total size (i.e. hover area), and the hover color.

We're working on updates as part of a new feature:
https://en.wikipedia.beta.wmflabs.org/wiki/User:JDrewniak?vectorvisualenhancementnext=1

To update:

image.png (2×3 px, 418 KB)

Design spec

image.png (776×992 px, 54 KB)

Prototype

https://di-collapsible-menus.web.app/Moss

Sequencing

Without feature flag

Behind feature flag

QA

Sign off step

  • Make a task for deploying vectorvisualenhancementnext feature.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@bmartinezcalvo aaaand another question for you: how many pixels of spacing should we use between the icon buttons? if there is 0px of space they seem quite close together. below I show examples with 0px, 2px, and 4px:

@alexhollender_WMF the padding between icon buttons documented in our Figma component spec is 8px

Captura de Pantalla 2022-08-11 a las 12.16.48.png (468×1 px, 147 KB)

And depending on what decision we take about the badge and the button size I think the padding shouldn't be less than 8px since if we use 4px or 2px the badge could be too close to the next button.

thanks again so much @bmartinezcalvo.

  • I've updated the design spec to include the 8px of spacing between the buttons
  • Regarding the badge: all of that makes sense. I'm not sure if we will have time to adjust the position of the badge right now (also because our team doesn't "own" that component, it makes it more difficult for us to make changes).

@alexhollender_WMF note changing these icons will also change the icon sizes in the mobile Minerva skin. I want to confirm that badges are out of scope for this team. If we want to include Echo, we should look to prioritize and work on T257143 first.

@Jdlrobson confirming that we don't need to change the badges as part of this task.

@Volker_E @bmartinezcalvo what is the size for icon buttons on mobile?

@Volker_E @bmartinezcalvo what is the size for icon buttons on mobile?

@alexhollender_WMF at the moment, our mobile buttons height in mobile is 34px since the text is 16/22 and the addition with the 6px padding makes the button 34px height. And about the width, both OOUI and Codex quiet icon-only buttons are square so 34x34px. This is what we have in our Figma specs and also in the OOUI demo. But there are some inconsistencies between Figma and Codex in some of the components and the buttons in Codex are 32px in both desktop and mobile. This is because the components in the Codex demo are not responsive yet (they display the desktop version but with a different base font size). We need to decide if we want 32px or 34px buttons for mobile since 32px could be a bit small for mobile devices (although 34px for mobile is small too and it should have a clickable area of at least 40px).

In short, I think our current size for icon-only quiet buttons is 34x34px (although in the Codex demo is not this size yet).

thanks for that info @bmartinezcalvo. @Jdlrobson short term it should be fine for this change to affect mobile...long term it seems like we'll need a separate task that allows us to style icon buttons slightly differently on mobile.

@alexhollender_WMF after a quick conversation about buttons with @Volker_E he commented me that the mobile buttons should be at least 44px size for accessibility requirements. The 34px size comes from OOUI but we should update our mobile buttons to 44px in some moment (although at the moment the current sizes in our mobile buttons are the ones I described above).

@alexhollender_WMF after a quick conversation about buttons with @Volker_E he commented me that the mobile buttons should be at least 44px size for accessibility requirements. The 34px size comes from OOUI but we should update our mobile buttons to 44px in some moment (although at the moment the current sizes in our mobile buttons are the ones I described above).

ok sounds good. so maybe as a requirement of this task we should say that the mobile ones can't change size? currently they are 46x46px on mobile.

Screen Shot 2022-08-17 at 2.39.05 PM.png (239×447 px, 37 KB)

Change 824302 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] MediaWiki UI: Set correct icon font size, padding and hover color

https://gerrit.wikimedia.org/r/824302

Change 824303 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] [WIP] Visual enhancements: Icons

https://gerrit.wikimedia.org/r/824303

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/120dbeccb7/w

Some notes from my analysis. I think this task is the fruition of us delaying the addressing of several bits of technical debt. A few questions aimed at @alexhollender_WMF but some for @ovasileva regarding scheduling:

  • The reason the icons are 25x25 is due to the fact that Vector uses a base font size of 14px rather than 16px. It's well documented that Vector's font-sizes are in need of cleanup and standardization (T313828, T254055) . This can easily be corrected on the short term but we'll likely going to have to tweak this again in the future. Please note that if we want a permanent solution here we are not going to get one until T254055 is done.
  • The Popups setting cog is not part of desktop improvements so a bit of a context switch. it looks like it's intentionally been set to 16x16. Changing the size is not trivial since it's tied to the footer. I suggest breaking this out into a separate task.
  • The watch star is its own special thing. It feels like the same amount of effort as T234990 to fix this so I would recommend either doing T234990 or leaving them inconsistent.
  • Can you clarify which button spacing you are referring to? It's unclear to me from the mock which you consider buttons and which you don't (in Vector all icons are also buttons).
  • Given the talk above about touch areas I may have misinterpreted the new spec. Please check the patchdemo for my intepretation. You might want to update the mocks if I've interpreted them incorrectly.

Screen Shot 2022-08-17 at 10.37.31 PM.png (586×730 px, 55 KB)

  • I can confirm Echo will need its own task. Please see patchdemo for what inconsistencies will remain

Talked to Alex and we have decided:

  • We'll add the icon touch area conversation to the agenda on Monday. We're getting mixed messages / are confused about waht to do here. It seems Codex added a icon only button (https://doc.wikimedia.org/codex/main/components/button.html#demos) but it is not complete yet as it doesn't have a mobile version. The padding there is also not consistent with what's being asked for here.
  • We should work on T234990 to get the watchstar consistent with the other icons
  • We will defer the Popups icon update to later
  • Button spacing has been clarified. Should apply to anything that is mw-ui-icon.mw-ui-button or next to one of those.

We talked about this with the DST team and it sounds like we have no disagreements with what we're doing, but it's unclear how and when we make these changes, particularly while changes are in flux. It also doesn't really make sense for web team to maintain https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.ui.button/button.less (buttons) and https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.ui.icon/icons-2.less (icon) given we don't have the insight into the work the design systems team is doing and the goal of these stylesheets is to always be in sync with Codex!

Roan pointed out that using the token system in Vector might be worth focusing on first to reduce technical debt.

The suggestion on the table is to defer this change until later and not make it a blocker for deploy, but we want to check that with Alex. We'll then update design systems with what we decide.

Change 824302 abandoned by Jdlrobson:

[mediawiki/core@master] MediaWiki UI: Set correct icon font size, padding and hover color

Reason:

Pending further conversation, I don't think it's a good time to make these changes right now.

https://gerrit.wikimedia.org/r/824302

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/dcb2317c72/w

The above patchdemo doesn't address the issues in this ticket yet, so please don't design review against the acceptance criteria in this ticket just yet.

Discussed with Alex and confirming that this is not considered a deployment blocker

Tagging design systems backlog as this is a potentially collaborative web/design systems task. From the web side, it is not a blocker for further desktop improvements deployment, so moving back to the backlog
@DAbad

In T314323#8142432, @bmartinezcalvo wrote:@Volker_E @DAbad should we create a task to define the badge component in our system?

There's already T280708: Define and add a badge component to the DSG filed.

One added usability complexity: While it might make sense to have the article links and tools have the margin on the encompassing list element, for something like the watchstar we should expand the clickable area

image.png (208×778 px, 22 KB)

Change 831993 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Storybook: Update Legacy/codex comparison table

https://gerrit.wikimedia.org/r/831993

Change 832002 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] MediaWiki UI: Bring styles in line with latest Codex

https://gerrit.wikimedia.org/r/832002

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/94e79f6a53/w

Change 832003 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Visual enhancements next: Fix watchstar alignment

https://gerrit.wikimedia.org/r/832003

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/94e79f6a53/w/

Change 831993 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Storybook: Update Legacy/codex comparison table

https://gerrit.wikimedia.org/r/831993

Hey @alexhollender_WMF I talked to Volker about this today, and we've come up with a plan for updating the icons/buttons that side steps breaking touch areas on mobile.

The icons will adapt based on breakpoint (so on mobile and tablet they will increase in touch area size). We'll work with design systems team on this one, and then switch to web team to finish the rest of the work here.

To give you a sense of what this will look like here's a patch demo with proposed changes for phase 1:
https://patchdemo.wmflabs.org/wikis/26f259e6be/wiki/Main_Page?useskin=vector-2022

Note, for now this only addresses Update mw-ui-icon spec (blocked on talking to design systems team) and Change small icons padding from 9px to 6px TODO items. Other items can be done without DST assistance.

Please signal if you think this is an improvement in the right direction (and are happy for it to be an intermediate state in resolving the issue once and for all.

Let me know if this looks good and move to either needs more work (and assign to me) or blocked (if happy with changes) and assigned to Volker so he knows it's okay to merge.
https://patchdemo.wmflabs.org/wikis/26f259e6be/wiki/Main_Page?useskin=vector-2022

To give you a sense of what this will look like here's a patch demo with proposed changes for phase 1:
https://patchdemo.wmflabs.org/wikis/26f259e6be/wiki/Main_Page?useskin=vector-2022
Please signal if you think this is an improvement in the right direction (and are happy for it to be an intermediate state in resolving the issue once and for all.

@Jdlrobson this is looking great. some notes/questions (many of these things might be already known/expected):

  • need to add the 8px spacing between the icon buttons
  • need to standardize the icon colors to #202122 (see the hamburger icon for example)
  • need to standardize the icon hover background color to #F8F9FA
  • the collapsed TOC icon that appears next to the page title (not the one in the sticky header) doesn't seem to have been updated
  • the collapsed TOC icon that appears floating in the corner doesn't seem to have been updated
  • what is the plan for the alerts (bell) and notices (inbox) icons? I don't think we would want to deploy this change without updating those two as well

based on the above not sure where to move the task to

@Jdlrobson this is looking great. some notes/questions (many of these things might be already known/expected):

Yes those would be handled by web team (see the two sets of TODO in description)

what is the plan for the alerts (bell) and notices (inbox) icons? I don't think we would want to deploy this change without updating those two as well

The plan is T257143 but the Growth team has no bandwidth to work on that. I think that's likely a blocker for this work continuing. I'll talk to Volker and see if he's comfortable with helping me make that change. Is that the only blocker your side from using this intermediate state or is it essentially all these changes go out together (for example if there's a week space between changes would that be a problem)?

@Jdlrobson and I just chatted about this. The plan is to break this into two parts:

Part 1:

  • Hover background colors
  • Icon glyph colors

Part 2 (visualenhancementsnext=1):

  • Update touch areas/padding
    • Including the Watch and Heart icons
  • Updating spacing/margins between the icons
  • Fix Echo icons to be consistent
Jdlrobson renamed this task from [Visual refinements] Standardize icon buttons & links (Vector 2022) to [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022).Wed, Sep 14, 6:43 PM
Jdlrobson added a project: Epic.
Jdlrobson updated the task description. (Show Details)

Change 832328 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] MediaWiki UI: Bring styles in line with latest Codex

https://gerrit.wikimedia.org/r/832328

ovasileva lowered the priority of this task from Medium to Low.Thu, Sep 15, 5:02 PM

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/df7bc7be01/w

I've listed the epics in the task description under "sequencing".

Once the task is unblocked, the remaining changes the web team needs to do should be small and I'll open separate tickets.

@alexhollender_WMF @Volker_E here's the latest and greatest version that we're working towards:

https://patchdemo.wmflabs.org/wikis/df7bc7be01/w/index.php?title=Spain&vectorvisualenhancementnext=1&useskin=vector-2022

Let me know if anything jumps out here as being overlooked.

@Jdlrobson the patchdemo is looking great 👍. Not sure what exactly is in scope here but the two things I'm seeing are:

  • the table of contents icon button has a touch area that's too large
  • the 8px spacing between the icon buttons is still missing

Change 836947 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Technical: Generalize icon flushing

https://gerrit.wikimedia.org/r/836947

Change 836967 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Prepare for icon touch area change

https://gerrit.wikimedia.org/r/836967

Change 836947 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Technical: Generalize icon flushing

https://gerrit.wikimedia.org/r/836947

Change 836967 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Prepare for icon touch area change

https://gerrit.wikimedia.org/r/836967