Component scaling and minimum sizes
Open, MediumPublic
Actions

Assigned To

None

Authored By

	Volker_E
	Dec 22 2022, 2:13 AM

Description

Background

When working on removing SFC vars from ToggleSwitch, one question resurfaced:
How to deal with component scaling dependent on surrounding text and user text size browser preferences (important accessibility support setting)?

Currently, as of v0.4.2 we're mixing behaviour across components. Buttons receive a minimum size, binary inputs don't:

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

Screenshot showing Codex demos in Chrome at very small font size setting

Hypothesis

Even if you have eagle eye sight as human, the number of people who are also having eGamer motion abilities to hit sub-target size recommendation areas should be miniscule.
With that it's best to add minimum sizes to our interaction elements and only scale fonts within.

Proposal

Minimum size requirement is supported by Design Systems Team designers.

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.9.1 to v0.10.0	mediawiki/core	master	+710 -673
Update Codex from v0.10.0 to v0.11.0	mediawiki/core	master	+879 -779
tokens, binary-input: Replace SFC vars with tokens and add min size	design/codex	main	+74 -55
tokens, styles: Use min-size appropriately in Select and TextArea	design/codex	main	+7 -2

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T325788 Component scaling and minimum sizes
		Duplicate	BUG REPORT	None	T287770 [Bug] Codex TypeaheadSearch component does not scale well with small font size user preference

Event Timeline

Volker_E created this task.Dec 22 2022, 2:13 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 22 2022, 2:13 AM

Volker_E added a project: Design.Dec 22 2022, 2:13 AM

Volker_E added a subscriber: bmartinezcalvo.

My approach would feature a minimum sizing for all interaction components, to satisfy motor disabilities/touch interaction standards while providing text scalability for sight.

@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, 6:51 AM

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

In T325788#8542594, @Volker_E wrote:

My approach would feature a minimum sizing for all interaction components, to satisfy motor disabilities/touch interaction standards while providing text scalability for sight.

@bmartinezcalvo @Sarai-WMDE @KieranMcCann Support or thoughts?

In T325788#8626056, @Volker_E wrote:

In T325788#8542594, @Volker_E wrote:

My approach would feature a minimum sizing for all interaction components, to satisfy motor disabilities/touch interaction standards while providing text scalability for sight.

@bmartinezcalvo @Sarai-WMDE @KieranMcCann Support or thoughts?

@Volker_E if we decide to apply the minimum size in Codex, I would apply it to all components in the page (not just to some of them).

For clarification @bmartinezcalvo, the question for me is if we apply a minimum size at all consistently? My point of view is yes for basic usability and human motoric reasons, while visual abilities might go into one (smaller text) or the other direction (larger text).

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

bmartinezcalvo mentioned this in T330483: Define and document Accessibility guidelines for components.Feb 24 2023, 9:04 AM

In T325788#8633708, @Volker_E wrote:

For clarification @bmartinezcalvo, the question for me is if we apply a minimum size at all consistently? My point of view is yes for basic usability and human motoric reasons, while visual abilities might go into one (smaller text) or the other direction (larger text).

As discussed yesterday during our DS design sync, we will settle on minimum size requirement for all components.

Volker_E renamed this task from Decide on how to approach component scaling to Decide on how to approach component scaling and minimum sizes.May 9 2023, 2:49 PM

Volker_E mentioned this in T326706: ToggleSwitch: Clarify and update desktop versus mobile design.May 9 2023, 2:52 PM

Volker_E updated the task description. (Show Details)May 9 2023, 2:55 PM

Volker_E added a subtask: T287770: [Bug] Codex TypeaheadSearch component does not scale well with small font size user preference.May 10 2023, 4:33 AM

Volker_E mentioned this in T287770: [Bug] Codex TypeaheadSearch component does not scale well with small font size user preference.May 10 2023, 4:36 AM

Volker_E updated the task description. (Show Details)May 10 2023, 4:40 AM

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

[design/codex@main] tokens, binary-input: Replace SFC vars with tokens and add min size

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

gerritbot added a project: Patch-For-Review.May 10 2023, 5:58 AM

Volker_E renamed this task from Decide on how to approach component scaling and minimum sizes to Component scaling and minimum sizes.May 10 2023, 6:52 AM

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

[design/codex@main] tokens, styles: Use min-size appropriately in Select and TextArea

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

Change 918349 merged by jenkins-bot:

[design/codex@main] tokens, styles: Use min-size appropriately in Select and TextArea

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

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

[mediawiki/core@master] Update Codex from v0.9.1 to v0.10.0

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

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