ToggleSwitch: Clarify and update desktop versus mobile design
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Volker_E
	Jan 11 2023, 7:13 AM

Description

Background

Description: Clarify and update desktop versus mobile design
History: describe or link to prior discussions related to this component
Considerations: list any known challenges or blockers, or any other important information

User stories

Ensure ToggleSwitch is usable in regards to touch interaction size requirements.

Previous implementations

Codex demo: ToggleSwitch
Design style guide: add Design Style Guide link, if applicable
OOUI: add the relevant OOUI widget name here, if applicable. See OOUI demos.

Proposal

Toggle Switch will be updated with the following sizes:
- Grip: 20px
- Width: 48px
- Height: 32px
Desktop and mobile will use the same size
ToggleSwitch size will be updated in both Codex and OOUI libraries and demos (so it's visually the same in all OOUI and Codex projects).

Design spec

Component spec sheet

Open questions

List here open questions related with this task.

Acceptance criteria (or Done)

Design

Create Figma spec sheet with the new sizes proposal and link it in this task
Update the component and spec sheet in the Codex and OOUI libraries
Update the specs images with the new size in the Design Style Guide

Code

Update the component in Codex
Update the component in OOUI

Details

Subject	Repo	Branch	Lines +/-
WikimediaUI theme: Unify ToggleSwitch with latest Codex design spec	oojs/ui	master	+28 -24
Update OOUI to v0.47.0	mediawiki/core	master	+967 -272
Update Codex from v0.5.0 to v0.6.0	mediawiki/core	master	+1 K -1 K
ToggleSwitch, tokens: Amend size and replace SFC vars with tokens	design/codex	main	+35 -38

Customize query in gerrit

Related Objects

Mentioned Here: T325788: Component scaling and minimum sizes
T336208: docs: VitePress demo shows wrong token sizes due to fixed px value
T315621: Install VueTest extension in beta labs
T325553: [Design spike] Style "hide" and "move to sidebar" buttons as buttons (not links)
T327426: Document how to use group of buttons

Event Timeline

Volker_E created this task.Jan 11 2023, 7:13 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 11 2023, 7:13 AM

@Volker_E - can you please put an initial/proposed priority level on this task and move it to the Backlog column?
DST prioritization guidance

Volker_E triaged this task as Medium priority.Jan 23 2023, 7:05 AM

Volker_E added a project: Design.

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

Volker_E added a subscriber: bmartinezcalvo.

Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Jan 23 2023, 7:20 AM

Volker_E moved this task from Committed to Ready for Design on the Design-System-Team (Design-System-Sprint) board.Jan 23 2023, 7:22 AM

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

bmartinezcalvo claimed this task.Feb 3 2023, 1:38 PM

bmartinezcalvo moved this task from Ready for Design to In Design on the Design-System-Team (Design-System-Sprint) board.

bmartinezcalvo updated the task description. (Show Details)Feb 3 2023, 1:43 PM

bmartinezcalvo updated the task description. (Show Details)

@Volker_E I've updated the Figma spec sheet with the new sizes discussed yesterday during our DS design sync:

20px grip
48px width
32px height

These new sizes will be applied on both desktop and mobile toggle switch so there won't be a visual difference between both platforms. As commented yesterday, these changes will be applied in both Codex and OOUI demos so I will update both Figma libraries once the ToggleSwitch changes have been implemented.

Apart from this, we should update the DSG page with the new ToggleSwitch size.

bmartinezcalvo updated the task description. (Show Details)Feb 3 2023, 2:59 PM

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

[design/codex@main] ToggleSwitch, tokens: Amend size and replace SFC vars with tokens

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

gerritbot added a project: Patch-For-Review.Feb 5 2023, 7:34 PM

Volker_E moved this task from Ready for Development to Code Review on the Design-System-Team (Design-System-Sprint) board.Feb 5 2023, 9:13 PM

I wanted to double-check this because the focus-on state at 16px looks a bit uncomfortable IMO:

The overall dimensions of the switch match the part of the design spec at the top that shows the dimensions, but the part of the design spec that shows states has not been updated, so the switch in the focus-on state is actually 56px wide instead of 48.

Additionally, the travel distance of the grip is shorter now, so I feel that the action of the switch is less clear.

If the design team is ok with the implementation in the patch, I'm happy to +2—just wanted to check!

Another issue is that the travel distance decreases with font size, but the dimensions of the switch hit min dimensions so they do not correspond. You can kind of see this at 14px but especially at 12px:

14px:

12px:

Screen Shot 2023-02-06 at 12.39.23 PM.png (110×422 px, 12 KB)

In T326706#8590390, @AnneT wrote:

I wanted to double-check this because the focus-on state at 16px looks a bit uncomfortable IMO:

The overall dimensions of the switch match the part of the design spec at the top that shows the dimensions, but the part of the design spec that shows states has not been updated, so the switch in the focus-on state is actually 56px wide instead of 48.

@AnneT there was an error in the spec. Fixed with 48px wide for all ToggleSwitches in the spec.

Additionally, the travel distance of the grip is shorter now, so I feel that the action of the switch is less clear.

If the design team is ok with the implementation in the patch, I'm happy to +2—just wanted to check!

We commented about this change during our last DS design sync and we all agreed that this new size was ok. But pinging my peers here so they can have a last review on this @KieranMcCann @Sarai-WMDE @Volker_E @RHo

In T326706#8590390, @AnneT wrote:

The overall dimensions of the switch match the part of the design spec at the top that shows the dimensions, but the part of the design spec that shows states has not been updated, so the switch in the focus-on state is actually 56px wide instead of 48.

Additionally, the travel distance of the grip is shorter now, so I feel that the action of the switch is less clear.

I've made a similar comment in the design review, the smaller width is a bit counter-productive from experience. We had to make a compromise here as we didn't think inventing a 56px equiv size token would make sense and found 48 acceptable.

In T326706#8590409, @AnneT wrote:

Another issue is that the travel distance decreases with font size, but the dimensions of the switch hit min dimensions so they do not correspond. You can kind of see this at 14px but especially at 12px:

14px:

12px:

Latest patch is fixing this with a solid solution towards font-size flexibility.

Seems 48px seems OK to me for mobile, but it would be good to understand the reason for keeping that larger size for desktop, instead of having it scale down similar based on text-size to other elements like Buttons, etc. Wonder if @KieranMcCann has thoughts based on his work similarly around the icon sizes and similar debate about making accordion arrows related to component font-size.

For clarification, the ToggleSwitch is rendered 48x32px on mobile and desktop and with that is equivalent in height to buttons size on desktop.

In T326706#8591097, @Volker_E wrote:

For clarification, the ToggleSwitch is rendered 48x32px on mobile and desktop and with that is equivalent in height to buttons size on desktop.

My bad, I was confused thinking about proposals for button variants that are more relatively-sized and styled to inline text (mentioned in T327426#8549928 and proposed for some button on Vector-2022 in T325553)
One proposed I have to review is putting all the Codex form elements together in context in a sample UI on desktop (different sections of User Preferences for example) to see if that smaller 14px font-size on Desktop makes these components look awkwardly large. Or is the intention is that this will be moot as Desktop is expected to change to 16px base in some near-ish point in time?

In T326706#8591068, @RHo wrote:

Seems 48px seems OK to me for mobile, but it would be good to understand the reason for keeping that larger size for desktop, instead of having it scale down similar based on text-size to other elements like Buttons, etc. Wonder if @KieranMcCann has thoughts based on his work similarly around the icon sizes and similar debate about making accordion arrows related to component font-size.

In T326706#8591205, @RHo wrote:

One proposed I have to review is putting all the Codex form elements together in context in a sample UI on desktop (different sections of User Preferences for example) to see if that smaller 14px font-size on Desktop makes these components look awkwardly large. Or is the intention is that this will be moot as Desktop is expected to change to 16px base in some near-ish point in time?

We will have something kind of like that once T315621 is done. It will provide access to this demo page in a place that's easier to get to and is updated as the code changes over time.

It sounds to me like we can move forward with the patch, especially since the difference in grip travel distance per font size has been fixed. We can always go back and make changes if needed; I don't believe this component is in use anywhere other than the Codex docs site.

Change 869866 merged by jenkins-bot:

[design/codex@main] ToggleSwitch, tokens: Amend size and replace SFC vars with tokens

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

Maintenance_bot removed a project: Patch-For-Review.Feb 7 2023, 5:30 PM

Moving to Ready for dev for the OOUI part.

Volker_E moved this task from Code Review to Ready for Development on the Design-System-Team (Design-System-Sprint) board.Feb 7 2023, 5:46 PM

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

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

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

gerritbot added a project: Patch-For-Review.Feb 14 2023, 9:23 PM

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/66d018802f/w

Change 889230 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Feb 14 2023, 10:12 PM

egardner moved this task from Inbox to Planned Component Updates on the Codex board.Feb 21 2023, 11:38 PM

I've updated the ToggleSiwtch size component in our Figma libraries in these branches:

I've updated the following:

Updated ToggleSwitch size: 20px grip, 48px width and 32px height.
Desktop and mobile will use now the same size so merged both components in one only
Added keyboard navigation table in the spec sheet
Updated the component's description in the spec introduction and explained when to use and when not to use ToggleSwitch component

NOTE: I will merge these Figma branches once the component updates are fully implemented.

ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).Mar 9 2023, 7:51 PM

ldelench_wmf moved this task from Backlog to Up Next on the Design-System-Team board.

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

[oojs/ui@master] WikimediaUI theme: Unify ToggleSwitch with latest Codex design spec

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

gerritbot added a project: Patch-For-Review.Mar 16 2023, 3:45 PM

Volker_E moved this task from Up Next to Design-System-Sprint on the Design-System-Team board.Mar 16 2023, 3:46 PM

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

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

Change 900362 merged by jenkins-bot:

[oojs/ui@master] WikimediaUI theme: Unify ToggleSwitch with latest Codex design spec

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

Maintenance_bot removed a project: Patch-For-Review.May 8 2023, 8:10 PM

Volker_E reassigned this task from Volker_E to bmartinezcalvo.May 8 2023, 8:13 PM

Volker_E moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.

@Volker_E ToggleSwitch new size looks good.

But there is a problem with the demo text and radio sizes. Not sure if this is related to this patch or not, but they are too small now.

Captura de pantalla 2023-05-09 a las 11.02.05.png (914×1 px, 149 KB)

bmartinezcalvo updated the task description. (Show Details)May 9 2023, 10:21 AM

That's an unrelated issue that is caused by VitePress putting small font-size on the tabular data td.
I ran into it relatedly in T336208: docs: VitePress demo shows wrong token sizes due to fixed px value

Will work on it in T325788: Component scaling and minimum sizes.

Ok, then this task can be released.

Volker_E claimed this task.May 9 2023, 6:29 PM

Volker_E updated the task description. (Show Details)

Volker_E set the point value for this task to 3.

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/66d018802f/w/~~

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

[mediawiki/core@master] Update OOUI to v0.47.0

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

gerritbot added a project: Patch-For-Review.May 18 2023, 5:16 PM

Change 921070 merged by jenkins-bot: