Page MenuHomePhabricator

Define the system's cursors
Closed, ResolvedPublic

Description

Background/Goal

All available cursors need to be documented as part of the system's user-interface foundations.

User stories

As a designer, I need to have access to the system's cursors, so I can reuse them creating system compliant designs.

Implementation note

Why tokenize cursors?
While it seems obvious to rely on browser default cursor values, there are a few decisions that include custom cursor values, like for example on specific custom DOM disabled elements (with disabled property a rare exception) or pointer carrying buttons and other inputs. Those are an opinionated choice and should for example be theme-able.
Compare https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Which cursor theme values are necessary?

  • default
  • grab
  • grabbing
  • help
  • move
  • not-allowed
  • pointer (also known as “hand”)
  • text

All of above are currently in use by OOUI widgets and will be needed in Codex components over time too.

Design resource

"Cursors" assets in the Figma Documentation Assets library

Acceptance criteria to resolve

  • Cursors are added to the design library (see above)
  • The system's cursors are defined and documented in Codex

Event Timeline

From my perspective we need at least the three

  • default
  • pointer (aka hand)
  • not-allowed

to start with.
I'll also add none and auto into the theme options values as they are useful anchors for the numeral system.

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

[design/codex@main] tokens: Add `cursor` property tokens

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

From my perspective we need at least the three

  • default
  • pointer (aka hand)
  • not-allowed

to start with.
I'll also add none and auto into the theme options values as they are useful anchors for the numeral system.

Hey @Volker_E I send proposals for the cursors you mentioned (default, pointer and non-allowed). I attach them in SVG and PNG, if you need them in any specific size or format tell me.

Cursors.png (730×1 px, 24 KB)

Also, I've added them as "Cursors" assets in the Documentation Assets library so all designers can use them in their designs.

Captura de pantalla 2022-03-02 a las 11.18.24.png (364×1 px, 117 KB)

Change 763959 merged by jenkins-bot:

[design/codex@main] tokens: Add `cursor` property tokens

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

@bmartinezcalvo This is great. If we're adding the other identified ones from OOUI today forward-facing for future components this task can be finished.

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

[design/codex@main] styles, tokens: Replace SFC `cursor` tokens with Codex design tokens

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

Change 768211 merged by jenkins-bot:

[design/codex@main] styles, tokens: Replace SFC `cursor` tokens with Codex design tokens

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

@bmartinezcalvo This is great. If we're adding the other identified ones from OOUI today forward-facing for future components this task can be finished.

@Volker_E I've added the rest of cursors in our Figma file so we could close this task.

Cursors.png (1×1 px, 58 KB)

Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E moved this task from Open Tasks to Done on the Codex board.

Change 773968 had a related patch set uploaded (by DannyS712; author: DannyS712):

[design/codex@main] docs, TokensTable: import missing CursorDemo component

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

Change 773968 merged by jenkins-bot:

[design/codex@main] docs, TokensTable: import missing CdxDocsCursorDemo component

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