Wikifunctions specific icons for the mode selector
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	AAlhazwani-WMF
	Feb 10 2023, 6:07 PM

Description

Background & Goal

Description: wikifunctions is a text-heavy project, with multiple input fields displayed at once. our goal with these (4) icons is to provide small visual cues that can improve the experience while scanning content-heavy pages.
History: we chatted about these icons during design review (doc), and during AW & DS Catch up (doc).
Known use case(s): wikifunction mode selector, and wikifunctions function calls
Considerations: not for the time being

User stories

as a wikifunctions editor, i want to recognize the type of an object at a glance, so that i can quickly scan a page in a compact manner

Proposal

Design spec

https://www.figma.com/file/x8sZ7Z4ywQ0o1cQzaIJo8N/Wikifunctions-icons?node-id=0%3A1&t=pVH2JWlweZMPMtwa-1

SVG icons

wf-argument-rtl.svg337 BDownload

wf-argument.svg333 BDownload

wf-literal-rtl.svg453 BDownload

wf-literal.svg450 BDownload

wf-reference-rtl.svg597 BDownload

wf-reference.svg608 BDownload

wf-function.svg587 BDownload

Naming icons

To make them generally usable we've agreed on following naming proposal:

'literal'
'function'
'reference' becomes 'instance'
'argument' becomes 'function-argument'?

Acceptance criteria for Done

Design

The design of the new icon is ready, and it follows our icon system guidelines
The new icon has been reviewed with help from the DST
An RTL icon has been created (if needed)
The icon is recognizable on low DPI resolutions
The icon has been exported as an optimized SVG and added to this task’s description
The new icon has been included in our Icon System Figma file, and the library has been published

Code

Add icon in Codex
Add icon in OOUI

Documentation

Update T141801: WikimediaUI (Codex/OOUI) icon inventory (tracking)

Details

Subject	Repo	Branch	Lines +/-
Update OOUI to v0.47.0	mediawiki/core	master	+967 -272
Update Codex from v0.9.0 to v0.9.1	mediawiki/core	master	+2 K -1 K
icons: Fix 'function', 'functionArgument', 'instance' and 'literal' fill	design/codex	main	+20 -4
icons: Add 'editing-functions' pack and four icons	oojs/ui	master	+133 -0
Update Codex from v0.6.0 to v0.6.2	mediawiki/core	master	+198 -204
icons: Add 'function', 'functionArgument', 'instance' and 'literal'	design/codex	main	+34 -0

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Volker_E	T329383 Wikifunctions specific icons for the mode selector
		Resolved		AAlhazwani-WMF	T324248 DefaultView: Decide and add codex icons for the different type selection options in the dropdown field

Event Timeline

AAlhazwani-WMF created this task.Feb 10 2023, 6:07 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 10 2023, 6:07 PM

AAlhazwani-WMF added a subtask: T324248: DefaultView: Decide and add codex icons for the different type selection options in the dropdown field.Feb 10 2023, 6:12 PM

Volker_E subscribed.Feb 11 2023, 1:23 PM

I've reviewed the design proposal and the icons look good. The only difference I can find with our system icons is that they should be solid if possible. But in these icons you are providing in this task the line version seems more accurate for literal and reference. So they LGTM. cc: @KieranMcCann for feedback.

@AAlhazwani-WMF once the design proposal is validated you should:

Export the SVG icons and add them in the task description
Create a branch in the Icons library to add these icons (once they are implemented) and ask us to review and merge with the main library

bmartinezcalvo added a subscriber: • KieranMcCann.Feb 14 2023, 11:36 AM

Thank you @bmartinezcalvo! Looking forward to hearing Kieran's feedback!

Look good to me @bmartinezcalvo @AAlhazwani-WMF!

AAlhazwani-WMF updated the task description. (Show Details)Feb 14 2023, 5:32 PM

Volker_E awarded a token.Feb 14 2023, 6:27 PM

bmartinezcalvo moved this task from Inbox to Needs Refinement on the Design-System-Team board.Feb 15 2023, 10:46 AM

Regarding the RTL version of these icons here's a possible proposal, what do you all think? We could opt for an RTL version for all, except the function icon. While looking at math school books in Arabic, I noticed that math symbols are presented, and used in LTR.

bmartinezcalvo mentioned this in T300053: Bidirectionality guidelines.Feb 17 2023, 8:38 AM

In T329383#8621562, @AAlhazwani-WMF wrote:

Regarding the RTL version of these icons here's a possible proposal, what do you all think? We could opt for an RTL version for all, except the function icon. While looking at math school books in Arabic, I noticed that math symbols are presented, and used in LTR.

@AAlhazwani-WMF we should make sure this maths symbol match the requirements for Arabic and Hebrew users. In some cases, Arabic and Hebrew use different symbols (e.g. question marks are not mirrored in Hebrew while they are mirrored in Arabic). We should test this maths icons with our real Arabic and Hebrew users to make sure we represent the right RTL maths icon.

Also, our superscript and subscript icons mirror the small symbol. Should we do the same with the x in the Function icon?

Captura de Pantalla 2023-02-17 a las 9.41.16.png (336×1 px, 102 KB)

@bmartinezcalvo The mathematical function symbol consisting of LTR order is independent of the language. It is the same in Hebrew and English.

thank you both! i exported the icons (in both ltr and rtl) with the wikimediaui preset, and added the svgs to the task description!

In T329383#8628987, @AAlhazwani-WMF wrote:

thank you both! i exported the icons (in both ltr and rtl) with the wikimediaui preset, and added the svgs to the task description!

Thank you @AAlhazwani-WMF. Once the icons have been implemented in Codex we can add them to the Assets library.

Thanks from me too: One clarification left, we don't feature projects in the icon names, aside of the logos, in order for the icons to be used outside wikifunctions without confusing reference:

literal,
function,
reference,
arguments

Pro: Similar to majority of other icons.
Con: Possible ideation collision on 'reference' ('references' already exists) and 'arguments' label with other icons to be added.
Do we have any better ideas for neutral, but distinct names for those two icons?

Volker_E added a comment.Feb 20 2023, 8:27 PM

This comment was removed by Volker_E.

Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Feb 20 2023, 10:58 PM

Restricted Application triaged this task as High priority. · View Herald TranscriptFeb 20 2023, 10:58 PM

Volker_E moved this task from Committed to Ready for Development on the Design-System-Team (Design-System-Sprint) board.Feb 20 2023, 10:59 PM

thanks @Volker_E. absolutely, i did not know any better, so when exporting the icons i left the temporary names, apologies!

thinking aloud, for the reference icon i took inspiration from the transclusion concept from Ted Nelson/Project Xanadu, so maybe:

cdxIconTransclusion
cdxIconSyncedBlock
cdxIconInstance
cdxIconSyncedContent
cdxIconTranspoint

for argument, it's basically a function input, so maybe:

cdxIconInput
cdxIconFxInput
cdxIconFunctionInput

what do you think? does it spark any new idea? thank you!!

In T329383#8631909, @AAlhazwani-WMF wrote:

thinking aloud, for the reference icon i took inspiration from the transclusion concept from Ted Nelson/Project Xanadu, so maybe:

cdxIconTransclusion

cdxIconSyncedBlock

cdxIconInstance

cdxIconSyncedContent

cdxIconTranspoint

I lean towards cdxIconInstance since we need the most simple names for our icons and "instance" it's easier to remember.

for argument, it's basically a function input, so maybe:

cdxIconInput

cdxIconFxInput

cdxIconFunctionInput

Same, we need the easiest and most memorable name so I think cdxIconInput is the best option.

Ok, thanks for both inputs. Are we okay with

'function'
'instance'
'input' (or function-input)
'function-argument'

?
On last I would not call it just argument, the icon works as special function icon not in a general sense for all argument ideas in my opinion.

aren't 'input' (or function-input) and 'function-argument' the same thing?

for clarity:

literal, stays 'literal'
function, stays 'function'
reference, becomes 'instance'
argument, becomes 'input' (or function-input) or 'function-argument'?

Sorry, quick lookup mistake. function-argument I'd go with then. Everything else looks good to me!

The reason for my preference of 'function-argument' is that 'literal' seems like a text cursor on input and I'd expect that icon to be 'input'.

Makes sense, thanks Volker!

Volker_E updated the task description. (Show Details)Feb 22 2023, 11:29 AM

Change 891270 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'function', 'functionArgument', 'instance' and 'literal'

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

gerritbot added a project: Patch-For-Review.Feb 22 2023, 1:28 PM

Volker_E claimed this task.Feb 22 2023, 1:31 PM

Volker_E moved this task from Ready for Development to Code Review on the Design-System-Team (Design-System-Sprint) board.

Change 891270 merged by jenkins-bot:

[design/codex@main] icons: Add 'function', 'functionArgument', 'instance' and 'literal'

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

Maintenance_bot removed a project: Patch-For-Review.Feb 22 2023, 5:10 PM

Volker_E updated the task description. (Show Details)Feb 27 2023, 5:25 PM

Change 893051 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

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

gerritbot added a project: Patch-For-Review.Feb 28 2023, 8:01 PM

Change 893051 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.6.0 to v0.6.2

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

Maintenance_bot removed a project: Patch-For-Review.Feb 28 2023, 9:11 PM

I've created this Figma branch to include the Wikifunctions new icons in the Assets library. I've add them as part of "Editing / Advanced" section and I've included a description in each icon so designers know where they are being used and they can also find them when typing "Wikifunctions" in the assets panel.