Change 444389 had a related patch set uploaded (by Hagar Shilo; owner: Hagar Shilo):
[oojs/ui@master] Create initial tutorial page

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

OOUI theme issue

The original tutorial app uses light blue highlights that seem to no longer be a part of oojs-ui-core-wikimediaui.css, the theme that the users are instructed to use in the tutorial.

However, these style rules do exist in the Core Apex theme (oojs-ui-core-apex.css). I found and copied them into tutorial.css for now. The problem is, users will be using oojs-ui-core-wikimediaui.css, not the tutorial theme and not the Apex theme.

Is there any way to style the SelectWidgets and OptionWidgets with such highlights when selected and hovered, using only oojs-ui-core-wikimediaui.css?

This is what the live demo apps in the new tutorial look like with the blue highlights (Demo #3):

@Hagarshilo There's this related task T166560: Design (Menu) Option component – we could pick it up again and implement it in course of the tutorial. In any case we should stay with the library's default styles as much as possible in order to lower implementation and maintenance cost of the tutorial and also make it reflect the library defaults as good as we can.

I do understand the gain through the creative approach of current tutorial styling and think that it's done well if seen only on its own.
Nevertheless we should make a few necessary changes in order to embed this more into a framing of OOUI branding (let's not doubt its existence for a moment) and best UX practices.
It's also clear that when you currently approach OOUI demos and compare to the docs, it's hard to think of a clear design framing. But we're currently working on T185396 which brings a change in looks of JS docs.

To the main points for now (trying to keep it low-volume as the work accomplished by @Hagarshilo so far is already very good IMHO):

1. 1. I'd pledge against using custom web font, it's a performance issue, we're loading from Google servers for little reason. Better use device-independent font-stack like on Design Style Guide T188799
2. We're sometimes, but not consistently using colors from our Style Guide palette
3. I'd orientate myself on the inline code styles on mediawiki.org code styling, not using blue as foreground color
4. We should limit block level elements to a more user-friendly line-length with 45-75 chars per line

I really like the font-size in current patch set.

There's an issue with the indicator in the dropdown widget that I want to get some insight on, I'm either missing something, or we might have an OOUI issue (?)

OO.ui.DropdownWidget already has indicator: 'down' by default:

OO.ui.DropdownWidget = function OoUiDropdownWidget( config ) {
	// Configuration initialization
	config = $.extend( { indicator: 'down' }, config );
...

But the indicator isn't showing in the tutorials. I thought it might be that the icon isn't loaded, so I searched for any mention of indicator or 'down' in the less and css files, and all I found was src/themes/apex/widgets.less that redefines 'visibility:visible' and a margin.

I was searching for some css to add to the index.html page in Tutorials but I can only find icon-xxx stuff and the svg/png files in the dist/themes/wikimediaui/images/indicators

Is there a CSS file to add to the tutorials that we're missing that loads the indicators? It seems like that's what we are missing, and I can't find which css file to attach. @Volker_E @matmarex any ideas?

Just submitted a new patch with some design changes. Tried to follow the style guide better. Let me know your thoughts.
Dropdown indicator still missing, as Moriel just said.
I don't get 404 when selecting the index page. I will need more details about this bug, if it still occurs.

Change 444389 merged by jenkins-bot:
[oojs/ui@master] Create 2 OOUI tutorials and an index page

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

In T198845#4469329, @Mooeypoo wrote:

There's an issue with the indicator in the dropdown widget that I want to get some insight on, I'm either missing something, or we might have an OOUI issue (?)

(…)

But the indicator isn't showing in the tutorials. I thought it might be that the icon isn't loaded, so I searched for any mention of indicator or 'down' in the less and css files, and all I found was src/themes/apex/widgets.less that redefines 'visibility:visible' and a margin.

In T198845#4469383, @Hagarshilo wrote:

(…)
Dropdown indicator still missing, as Moriel just said.
I don't get 404 when selecting the index page. I will need more details about this bug, if it still occurs.

I'm sorry about missing these comment, I get a lot of bugmail and sometimes something slips through the cracks :( Feel free to ping me again or email directly if I'm not responding.

In this case, you were not loading the file oojs-ui-images-wikimediaui.css. Looks like you solved this problem in PS50 by loading oojs-ui-core-wikimediaui.css (which contains -core, -widgets, -toolbars, -windows, -images merged together): https://gerrit.wikimedia.org/r/c/oojs/ui/+/444389/49..50/demos/tutorials/index.html. Note that you can now stop loading oojs-ui-core-wikimediaui.css from the tutorial pages (these styles are already included in the other file).

Change 452701 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[oojs/ui@master] Tutorials: Fix CSS links

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

Change 452701 merged by jenkins-bot:
[oojs/ui@master] Tutorials: Fix CSS links

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

Change 452872 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.28.0

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

Change 452872 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.28.0

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

The OOUI release landed in MediaWiki 1.32.0-wmf.18.

Brilliant!

@Hagarshilo wonderful work.

We all hope you stick around after the Google Summer of Code internship, as a valued member of the development community. Well done, and thank you for a super valuable contribution to the OOUI library.

Thank you! Almost there...

I spotted a couple of problems with the tutorials toolbar (and I've explored them a bit with Moriel and Roan).

1. The Docs link is broken. It comes from

demos/tutorials/widgets/toolbar.js

I think it can be fixed by replacing "oojs-ui/master/js" with "js/" on line 29.

2. Toolbar menu icons load locally, but not on doc.wikimedia.org. The submenu links are loaded from

dist/oojs-ui-wikimediaui-icons-content.css

and can be seen both locally and in production. We think the missing links come from

dist/oojs-ui-wikimediaui-icons-editing-citation.css

so a link to this file should be added to all 3 HTML files:

tutorials/index.html

tutorials/collection/basics1/contents.html

tutorials/collection/basics2/contents.html

However, we're not sure why the missing links do load locally, while a link to this CSS file is missing.

@Hagarshilo I'd recommend opening one or several follow-up tasks for above to keep task scope smaller. You've done a sufficiently good job for this task to be set to “resolved”! As with most software projects it's a journey of continuous improvements.