Move the LTR/RTL selector
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	bmartinezcalvo
	May 31 2022, 8:57 AM

Description

Background

When we refactored the site architecture and updated VitePress, we temporarily hid the direction switcher in the header because we didn't have time to make it work on all viewport widths. We plan on moving it from the header to individual demos.

Implementation

Design

Desktop

Mobile

Considerations

The design covers configurable demos. For components that do not yet have a configurable demo, we can add the direction switcher to the first demo on the page.

Codex

Update LTR/RTL selection in Codex with the solution proposed in the Figma prototype

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.3.0 to v0.4.0	mediawiki/core	master	+664 -637
docs: Spell out directions and improve radio controls	design/codex	main	+17 -6
Update Codex from v0.2.2 to v0.3.0	mediawiki/core	master	+2 K -1 K
docs: Fix direction control for configurable Dialog demo	design/codex	main	+26 -2
docs: Add dir to controls, and apply to every component page	design/codex	main	+82 -64

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T304062 docs: Codex doc site visual design/user experience improvements
		Resolved		• DAbad	T309589 Move the LTR/RTL selector

Event Timeline

bmartinezcalvo created this task.May 31 2022, 8:57 AM

Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptMay 31 2022, 8:57 AM

bmartinezcalvo renamed this task from Update the LTR/RTL selector to Improve the LTR/RTL selector.May 31 2022, 8:58 AM

bmartinezcalvo mentioned this in T304062: docs: Codex doc site visual design/user experience improvements.

AnneT renamed this task from Improve the LTR/RTL selector to Move the LTR/RTL selector.Oct 26 2022, 4:32 PM

AnneT removed a project: Epic.

AnneT updated the task description. (Show Details)

ldelench_wmf triaged this task as Medium priority.Oct 26 2022, 5:18 PM

ldelench_wmf set the point value for this task to 1.

ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

bmartinezcalvo updated the task description. (Show Details)Nov 3 2022, 2:51 PM

AnneT changed the task status from Open to In Progress.Nov 9 2022, 4:03 PM

AnneT claimed this task.

AnneT moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.

Change 856689 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Add dir to controls, and apply to every component page

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

Change 856690 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Fix direction control for configurable Dialog demo

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

AnneT moved this task from In Development to Code Review on the Design-System-Team (Design-System-Sprint) board.Nov 16 2022, 6:45 PM

Change 856689 merged by jenkins-bot:

[design/codex@main] docs: Add dir to controls, and apply to every component page

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

Change 856690 merged by jenkins-bot:

[design/codex@main] docs: Fix direction control for configurable Dialog demo

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

@bmartinezcalvo I ended up adding a control to the configurable demo system for direction, so you can toggle between LTR and RTL there! For components that don't yet have a configurable demo, I added only the direction control to the first demo on the page. You can test this all on the live site. Let me know if you have any suggestions for improvements!

In T309589#8402042, @AnneT wrote:

@bmartinezcalvo I ended up adding a control to the configurable demo system for direction, so you can toggle between LTR and RTL there! For components that don't yet have a configurable demo, I added only the direction control to the first demo on the page. You can test this all on the live site. Let me know if you have any suggestions for improvements!

@AnneT thank you! This looks great to me.

Captura de Pantalla 2022-11-21 a las 15.25.50.png (1×1 px, 426 KB)

Regarding the property name, I'm wondering if we should name this section "bi-directionality" or "mirroring" instead since the RTL design is better known with these names. What do you think?

Apart from this all looks perfect so we could move this task to QTE sign-off.

Change 859597 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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

Change 859597 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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

Change 859644 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Spell out directions and improve radio controls

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

Based on a conversation between @bmartinezcalvo and I, the patch above makes the following changes:

Changes the label from "direction" to "reading direction"
Spells out the abbreviations (e.g. Left to right (LTR))

In T309589#8415735, @AnneT wrote:

Based on a conversation between @bmartinezcalvo and I, the patch above makes the following changes:

Changes the label from "direction" to "reading direction"

Spells out the abbreviations (e.g. Left to right (LTR))

Thank you @AnneT, it looks perfect to me so moving the task to QTE sign-off.

{F35815435}

Change 859644 merged by jenkins-bot:

[design/codex@main] docs: Spell out directions and improve radio controls

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

Thanks for this, @AnneT and @bmartinezcalvo .

I tested this out with Button and TextInput and it looks good to me on Chrome v106, Safari v16 and Firefox v107.

ldelench_wmf reassigned this task from • EUdoh-WMF to • DAbad.Dec 2 2022, 6:35 PM

ldelench_wmf added a subscriber: • EUdoh-WMF.

Change 865151 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.3.0 to v0.4.0

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

Change 865151 merged by jenkins-bot: