Refine animation tokens: Add `infinite` as option and decision
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	Volker_E
	Nov 9 2022, 1:49 AM

Description

Background

Currently, as of Codex v0.2.2., we have three cases of animation-iteration-count: infinite in our codebase.
ProgressBar, TransitionDemo and (non-official, but inherited) pending-state mixin.

Goal

We need infinite as option and decision token on our animation and transition tokens.

Design spec

Figma spec sheet here

Acceptance criteria (or Done)

Create Figma spec and link it in this task
Add the new token in the Figma library
Implement infinite option and decision tokens in Codex

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.3.0 to v0.4.0	mediawiki/core	master	+664 -637
	tokens, styles: Add `animation-iteration-count*` tokens and apply	design/codex	main	+12 -3

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Duplicate	• STH	T302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
Invalid	None	T302025 Upgrade Codex to Beta version
Resolved	Volker_E	T293127 [EPIC] Design System Foundation: Design and define design tokens
Resolved	Volker_E	T322705 Refine animation tokens: Add `infinite` as option and decision

Event Timeline

Volker_E created this task.Nov 9 2022, 1:49 AM

How likely is it for us or implementers to use different values for animation-iteration-count? I wonder if we'd be "over-tokenizing" here. I don't think we have such a rule (yet) but: are we fine with creating tokens that document the only possible decision we'll be making/allowing? In any case, this would be really easy to introduce.

Sarai-WMDE mentioned this in T322712: tokens: Add `background-position` option and decision token with value `center`.Nov 16 2022, 6:19 PM

In an animation for some progress indicator I could see a back and forth with value 2 as value as much as infinite. If we don't tokenize, themes can't change that animation! Therefor tokenization is premise.

Gotcha. I wonder how themers would control the impact of modifying the infinite option token, but that's a question for our design sync... Adding the token to Figma, here. Also pinging @bmartinezcalvo for review

In T322705#8401700, @Sarai-WMDE wrote:

Gotcha. I wonder how themers would control the impact of modifying the infinite option token, but that's a question for our design sync... Adding the token to Figma, here. Also pinging @bmartinezcalvo for review

@Sarai-WMDE added a couple of comments in Figma.

@Sarai-WMDE added a couple of comments in Figma.

Thanks so much, Bárbara! Both comments were addressed. Pending to be solved from the topics you brought up: whether we should shorten the root name of this token, which is currently animation-iteration-count-xxx (matching the CSS property it refers to). An alternative could be animation-iterations, but I wonder if that could be confusing/feel incorrect for users.

bmartinezcalvo updated the task description. (Show Details)Nov 28 2022, 4:13 PM

On the question from Figma for a shorter token name:
I'd not make an exception for animation-iteration-count, it'd be disorienting in developer experience, when majority of tokens follow CSS properties. Designers won't be confronted with it too often.
Btw, animation-timing-function is in the same category for suffering from the length issue. And it's part of Codex already.

In T322705#8425856, @Volker_E wrote:

On the question from Figma for a shorter token name:
I'd not make an exception for animation-iteration-count, it'd be disorienting in developer experience, when majority of tokens follow CSS properties. Designers won't be confronted with it too often.
Btw, animation-timing-function is in the same category for suffering from the length issue. And it's part of Codex already.

Since the question has been solved I think the Figma spec version is ready to be implemented with the following new tokens: