Page MenuHomePhabricator

Replace some `position-offset` token values and `offset` SFC variables
Closed, ResolvedPublic

Description

Background

We've inherited some ways of building our components from OOUI. One of these is represented in position-offset token category, currently used in Radio.
The negative position offset is building the focus outline on selected Radios.

We've got a second token with negative value, which is used to construct border overlaps, @position-offset-border-width-base.
The biggest issue, aside of the SFC, is currently user text zooming limitations.

Before (very large user text zoom)After
image.png (614×1 px, 105 KB)
image.png (644×1 px, 104 KB)

Acceptance criteria

  • Replace Radio offset with relative size
  • Replace Message offset SFCs with size tokens

Event Timeline

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

[design/codex@main] tokens: Make `position-offset` token relative & replace offset SFC vars

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

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.
ldelench_wmf subscribed.

Adjusted priority based on the priority of its parent, T295711. Feel free to edit!

Change 871258 merged by jenkins-bot:

[design/codex@main] tokens: Make `position-offset` token relative & replace offset SFC vars

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

ldelench_wmf raised the priority of this task from Medium to High.Jan 27 2023, 4:22 PM

Change 869852 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

Change 885450 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

Change 885450 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

I'm checking the Radio component and the focus outline works well on both Chrome and Firefox but it's not visible on Safari:

Captura de Pantalla 2023-02-09 a las 13.53.45.png (814×1 px, 375 KB)
Captura de Pantalla 2023-02-09 a las 13.54.04.png (870×1 px, 415 KB)
Captura de Pantalla 2023-02-09 a las 13.53.13.png (806×1 px, 372 KB)
ChromeFirefoxSafari (15.5)

@Volker_E do you know why this is happening?

bmartinezcalvo added a subscriber: Sarai-WMDE.

Reviewed it again during the DS design sync and it works well on the new version of Safari. The task is ready to be moved to QTE after verifying that the border is displaying the right offset in all browsers.

We've also accorded in the design sync that this Safari misbehaviour would be untouched by this change and we'll observe Safari rendering independently.

I'd skip QA & product sign-off in this case: We've changed the px value to equiv em value and had at least three people (two devs and 1 designer) test this; additionally I tested it in a wide variety of browsers with different font size settings. And above stands true for other unrelated findings. cc: @Jrbranaa @CCiufo-WMF

Volker_E claimed this task.

Resolved as of Codex v0.5.0