Looks good to me from design QA perspective

Here is the latest proposal for the grid with particular reference to how it behaves with Vector 2022. This proposal takes into account:

Proposed visual design of menus in Vector 2022:

In T326323#8802689, @ovasileva wrote:

This might be fixed in the future through a different solution. cc @KieranMcCann - let us know if you have concerns with this one.

In T332600#8791161, @bwang wrote:

Some small issues I noticed:

• The fade indicator needs to be updated, its not really visible currently F36955647
• The scrollbar on pinned elements is inside the padding (F36955648), ideally it covers the entire height of the element like so: F36955650
• The subsection toggle buttons in the TOC are smaller than original, they should be 22px but instead are 19.25. Looks like the font size was decreased F36955657

Questions for @KieranMcCann

• The prototype removes the borders that separate menus inside dropdowns and pinnable elements (Before: F36955664 After: F36955660). I feel like the border was helpful for separating groups of content, would it be worth considering adding back some sort of affordance, maybe spacing if not the border?
• I noticed the dropdown styles are updated in this patch, if we are changing them could we match the OOUI styles (i.e. F36955706)? They didnt match prior to Zebra either, but I think this is a good opportunity to make it consistent and up to spec

Thanks @bmartinezcalvo. Comments below:

@bwang Sorry just catching up after being on leave. I would be tempted to still include the close button.

@Jdlrobson @ovasileva Two potential solutions to this issue:

@Jdlrobson @ovasileva The only behaviour I found odd in the demo was after toggling to full width and getting the “You have switched your layout to full width. To go back to limited width, press this button” message, and then toggling back to limited width, the message still remains.

In T333589#8751149, @ovasileva wrote:

@KieranMcCann - similar to what you were pointing out - limiting the width of the ToC slighly could help with this potentially

Hi @RHo @JFernandez-WMF. Updated illustrations below. I’ve only made small adjustments to the original illustrations to indicate that the image is part way through an article and not in the lead. Just let me know if you need more work done on these.

In T333353#8742857, @ovasileva wrote:

@KieranMcCann - wonder what you think of this one? I feel like it could be unexpected and distracting to show the indicator when resizing, but at the same time it would be nice if we show it consistently every time we collapse the menus

Looks good to me.

In T298198#8728592, @bmartinezcalvo wrote:

Hey @KieranMcCann thank you for sharing this. I've updated the layout proposal applying your feedback related with the content full-width. We could use 4col for the tools panel and then expand the article content when the tools panel is hidden. With this new layout, we would solve the user's full-width request for the article content.

This layout proposal uses the same grid solution we proposed some time ago (24col grid on desktop) so there is no problem with implementing one or another layout using this grid. In any case, I think it's worth implementing a grid so we can unify the margins and visual structure in all our projects.

@Jdlrobson In terms of design review I can confirm all looks good to me.

Thanks @bmartinezcalvo. Following on from my comments in the Figma file I can confirm all looks good to me now.

@RHo @bmartinezcalvo I do agree with having a dynamic grid which allows for the article to expand to the right when the tools panel is hidden. There are, however, a couple things in the way of us moving forward with this at the moment. These being:

Hi @RHo. Sure no problem. In terms of timeframe is early next week okay?

In T311160#8711976, @bwang wrote:

@ovasileva @KieranMcCann Should this happen everytime a pinnable element is unpinned? Or just the first time?

Thanks @Jdlrobson, that makes sense.

Thanks @Jdlrobson for the added information. In that case I wonder if there may be other scripts in addition to Burmese that have a similar issue?

Thank @Jdlrobson. On comparison the Burmese spacing looks different. There us both a larger space between the H1 and the line below it, and above the article toolbar items. Is this expected behaviour due to the properties of different scripts?

Hi @Jdlrobson. Looks good to me but is there an easy way for me to check how it looks in other scripts? I’m thinking of something like Burmese where the type ascenders and descenders will be longer than Latin script.

Thanks for making those changes @Jdlrobson

Looks good to me

@ovasileva I agree that the content width does get very narrow when the two sidebars are visible, so hiding one of them sooner would make the article more readable within that zone of 1200–1000px.

@KieranMcCann I don't think we will have too many tooltips in the same form, so I hope it's not a strong problem to solve. If you know any real use case with too many tooltips please add it in the inventory so we can explore the solution.

Looks good to me @bmartinezcalvo

If we add the info icon at the end of the row (Op.2) we would have cases like this, where the form item is too long and the info icon is too separated from the label and it seems to be more connected to the next form item:

I recommend to use the Option1 instead, adding the info icon next to the label. @KieranMcCann what do you think?

@KieranMcCann let me know if this last iteration it's ok and move the task to Ready for Development accordingly.

Look good to me @bmartinezcalvo @AAlhazwani-WMF!

@bmartinezcalvo Some comments after reviewing the the visual aspects of the component.

I’ve reviewed the digram from a visual design perspective and think it looks good. I think removing the background colours has definitely made it simpler and clearer looking.

All good with me. Apologies if I confused things by suggesting it in the meeting the other day. I wasn’t advocating for doing it, it was more just general design feedback on ways we could simplify the diagram. Very happy just to go with the static option as it is.

Just to clarify that I was suggesting turning it into a Figma prototype which should be shareable without people needing Figma. But appreciate this is added work which is probably not a priority. Will proofread and check visual design shortly.

Looks good to me too

Looks good to me @bmartinezcalvo.

@bmartinezcalvo I added comments in Figma but just putting them here too for visibility.

Thanks @KieranMcCann, looks good to me. Could you also apply the same spacing treatment to the header when there is a subtitle as well for completion?

That’s done.

Here’s an updated version where I’ve increased spacing below the header and above the footer by 8px. I think this does enough to separate the elements without the need for dividers. Let me know your thoughts @RHo and @bmartinezcalvo.

I agree with avoiding the use of dividers as much as possible. But there are some specific cases where dividers are useful to visually separate the content blocks in the dialog, specially when the footer has text or permanent actions. In this case, the dialog without divider seems too crowded.

With dividers	Without dividers

Thanks @bmartinezcalvo. I lean towards only showing the dividers when the content is too long to be contained within the dialog and it requires scrolling. I’m not sure it’s visually necessary to divide header and footer from the content with a divider. Also, doing it this way would make the dividers a clearer affordance that scrolling is required.

@bmartinezcalvo That’s great. I think having those guidelines in the spec sheets will be useful. Are there plans to add this type of documentation onto the Codex site too at some point. I think it would be helpful here too.

Thanks @bmartinezcalvo. Just reviewed the video and comments from Design Review and have a few comments myself.

Agree with @RHo’s comments on both the placement of disclaimers and checkboxes. i.e. disclaimers always above actions, but having flexibility of placement for checkboxes, depending on how it makes sense structurally, would be advantageous.

Thanks for pinging me here @RHo. I agree that it makes sense for the larger icon sizes to be explored in units that are dividable by 4.

These look great to me @Etonkovidova and much more in line with the expected visuals.

In T322850#8513662, @Trizek-WMF wrote:

Ambassadors discussed about this dash during their weekly meeting. A dash would be understood for all cultures represented in the meeting. However, two questions arose:

• understanding would be easier if we have a descriptive term instead of a dash, like "0 days" or "n/a"
• what about screen readers? A dash has multiple meanings and might not be well understood.

@KStoller-WMF Ideally we would adjust the alignment of the ‘i’ icons. I think the issue is more obvious because they are in close vicinity to the other text + icon pairing where the alignment looks correct. If it is proving to be a major blocker then I guess it could be filed as a big to fix later?

@KStoller-WMF Yes looks good to me. Can confirm it passes design review.

@KStoller-WMF Here’s the SVG of the empty state illustration.

All looks good to me! Thanks @Etonkovidova

@RHo RTL versions...

@RHo Thanks for clarifying. Apologies for the confusion.

Thanks for creating this task @RHo. Just wanted to double check the image size specs as 360x128px seems very short and wide. Looking at the previous illustrations I estimate it to be more like 360x216px but just wanted to check in case I’m not understanding correctly.

(1) The zeroes (and the blank value for "Longest streak") are displayed to a newcomer. In the comments above (for the edge case #3 in https://phabricator.wikimedia.org/T310666#8275248) there was a suggestion (https://phabricator.wikimedia.org/T310666#8275325) to display the existing Impact module for newcomers with zero edits. Would it be done or we go with zeroes?

In this edge case I think it’s okay to show the new impact module with zeroes, rather than the existing impact module – but I think @RHo .should probably make the final call on this The only small detail that I think looks a bit odd is the lack of any value for the longest streak. Maybe we could simply add a dash ‘–’ when there is nothing to show here?

My understanding is that we're going to implement the old Impact module's unactiviated state for the new impact module, T321963: NewImpact module: Implement unactivated state code from Impact.php , and that work is in progress.

Looks good to me @Etonkovidova. In response to your questions:

@Volker_E +1 to @RHo’s comments.

+1 for option 3 from me too

These look good to me @Etonkovidova. The only thing I noticed is that we decided to change the icon used for the Thanks data point. Would it be possible to change this from the heart icon to the speech bubble with the smile? (Figma)

In T280847#8368100, @RHo wrote:

In T280847#8367907, @AAlhazwani-WMF wrote:

We might also want to add a dataviz-specific color palette to provide additional colors beside our base UI colors. This article for example shares great examples of color blindness-friendly palettes. There's also this website about color palettes for cartography.

+1 to this suggestion. Currently we pretty much only use the blue Accent colour, which is the same colour for buttons, links, etc which can be quite limiting for datavis (eg, pie , stacked bar charts, comparison charts), and potentially may get distracting if half a page is in this colour.

@kostajh Sorry I’ve been off for a few days so just catching up on this now. I’d agree with what has been said so far by @RHo:

@KStoller-WMF I noticed this last week and had considered updating the design to the new summary style but decided against it as it would likely involve the copy being truncated. I think the current design with the simple text styling works better as a summary view personally, so happy to go with the current design for this.

My only suggestion is that we might want to consider differentiating that text slightly in some way. Perhaps in a similar way to how we separate "Claim mentee" in Settings. But I'm in no way attached to that idea, it just seems like "Recent changes by your mentees" is logically a subsection of "Your mentees", but it's also somewhat separate from the main table view, so it might be nice to visually separate it in some way. But feel free to disagree!

Noting here that after discussion on T310666 it has been proposed that the ‘last edited’ and ‘best streak’ data points should be styled as scorecards and moved into the summary panel. Figma designs have been updated to reflect this.

@Sgs Thanks for sending those. My preference would be to use the ‘mentor dashboard dropdown style’ you mentioned.

Just noting here that after discussion on T310666 it has been proposed that the ‘last edited’ and ‘best streak’ data points should be styled as scorecards and moved into the summary panel. Figma designs have been updated to reflect this.

Update on my previous post. After discussion with @RHo we decided it would be a better solution to put the streak dates in the info dialog, as this informartion is secondary to the number of days in the streak and probably doesn’t need to be visible.

Thanks for the suggestion @kostajh. I mocked it up but it doesn’t feel right to me for a few of reasons:

• the items in that space feel like they should directly relate to or affect the table below
• I think it will be challenging to make the text in the button both clear and concise
• I don’t think it should be a button as it is technically a link rather than an action

@KStoller-WMF I think the simplest solution to this would be to add a line of copy at the bottom of the module with a link to the filtered recent changes page:

@KStoller-WMF Yes I agree that this change simplifies the number of styles on the page and feels like a visual improvement too.

Thanks for these edge cases @Sgs and apologies it seems like these indicate a bit of an oversight on how this would work exactly.

In T310660#8272275, @Sgs wrote:

Does the "trendchart" conceptually belong to the articles section, the recent activity or the it's a section on its own? cc @KieranMcCann @KStoller-WMF

@Sgs could you send me a screenshot of what you mean by ‘Mentor dashboard dropdown style component’ as I’m not entirely clear on what that is. Thanks

In T310666#8271565, @kostajh wrote:

@KieranMcCann @BKots-WMF @KStoller-WMF is the minimum unit for a streak 1 day? E.g. if a user creates their account and makes an edit on day one, we should show "Best streak: 1 day" ? or should that only show up once they've edited for more than one day in a row?

@KieranMcCann - how can we make it more clear in the current design which time scale is being viewed (given that we won't have the "Last x days" drop down in this first iteration)?

In terms of the icon I don’t think we should create an additional icon for ANY. As this works in the way you would expect normal filtering to work I would use the standard filter icon for it and then create the modified ‘+’ version for ANY, as this is non-standard filtering. Also ≠ would suggest to me that it meant filter all the terms that do not equal the ones I have selected (i.e. the opposite to what it does).