Page MenuHomePhabricator
Create Task
Maniphest T340261

CSS-only ToggleSwitch should respond to clicks on the ToggleSwitch, not just on the label
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Description

Steps to replicate the issue (include links if applicable):

What happens?:

  • Clicking on the labels causes the switches to toggle, but clicking on the toggles themselves does nothing
  • Clicking on the label for the second ("initially on") switch toggles the first switch

What should have happened instead?:
The CSS-only and Vue versions should behave the same: clicking either the labels or the switches should toggle. Clicking the label for a given switch should toggle that switch, not a different one.

Details

SubjectRepoBranchLines +/-
Update Codex from v0.13.0 to v0.14.0mediawiki/coremaster+526 -522
ToggleSwitch: Fix layout of CSS-only versiondesign/codexmain+58 -38
docs, ToggleSwitch: Use unique IDs in CSS-only ToggleSwitch examplesdesign/codexmain+12 -12
Customize query in gerrit

Related Objects

Event Timeline

Catrope created this task.Jun 23 2023, 9:02 PM
Restricted Application added a project: Design-System-Team. · View Herald TranscriptJun 23 2023, 9:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
gerritbot added a comment.Jun 23 2023, 10:42 PM

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

[design/codex@main] docs, ToggleSwitch: Use unique IDs in CSS-only ToggleSwitch examples

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

gerritbot added a project: Patch-For-Review.Jun 23 2023, 10:42 PM
Catrope added a comment.Jun 23 2023, 10:42 PM

The above patch fixes the second part of the bug (the wrong switch toggling), but not the first part (clicking on the toggles does nothing).

gerritbot added a comment.Jun 24 2023, 10:21 AM

Change 932525 merged by jenkins-bot:

[design/codex@main] docs, ToggleSwitch: Use unique IDs in CSS-only ToggleSwitch examples

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

Maintenance_bot removed a project: Patch-For-Review.Jun 24 2023, 10:30 AM
CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.Jun 26 2023, 2:45 PM
AnneT subscribed.Jun 26 2023, 9:03 PM

@Catrope after taking a closer look I see what happened here, and have some recommendations.

First: I'd prefer not to wrap the entire thing in a <label> element because that will prevent us from using the Label component internally (see T339013).

This used to work before this patch, which changed the default display of the ToggleSwitch to be flex instead of inline-flex, which means the width of the root element is now 100% the width of its container, not the width of its content. Because of this, the invisible checkbox ends up at the end of the container, not under the switch. Previously, the end of the container was the switch, so it all worked.

To prevent this exact issue from occurring in the Vue component, I wrapped the invisible input and the visible switch in a span and set position: relative on it, so that the right: 0 rule on the input would set it directly on top of the switch. I just failed to do this for the CSS-only version. Lesson learned: we should make sure we're testing the CSS-only versions of components during development and code review!

AnneT added a comment.Jun 26 2023, 9:04 PM

Given the simplicity of this change (just updating the CSS-only markup examples with this additional span), I'd estimate it at a 1.

Catrope set the point value for this task to 1.Jun 28 2023, 3:12 PM
Catrope moved this task from Needs Refinement to Up Next on the Design-System-Team board.
CCiufo-WMF triaged this task as High priority.Jun 28 2023, 3:34 PM
CCiufo-WMF added a project: Codex 1.0.
AnneT changed the task status from Open to In Progress.Jun 29 2023, 3:01 PM
AnneT claimed this task.
AnneT moved this task from Up Next to Design-Systems-Sprint-2 on the Design-System-Team board.
AnneT edited projects, added Design-System-Team (Design-Systems-Sprint-2); removed Design-System-Team.
AnneT moved this task from Committed to In Progress on the Design-System-Team (Design-Systems-Sprint-2) board.
gerritbot added a comment.Jun 29 2023, 3:12 PM

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

[design/codex@main] ToggleSwitch: Fix layout of CSS-only version

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

gerritbot added a project: Patch-For-Review.Jun 29 2023, 3:12 PM
AnneT moved this task from In Progress to Code Review on the Design-System-Team (Design-Systems-Sprint-2) board.Jun 29 2023, 3:12 PM
gerritbot added a comment.Jun 29 2023, 5:34 PM

Change 934367 merged by jenkins-bot:

[design/codex@main] ToggleSwitch: Fix layout of CSS-only version

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

Maintenance_bot removed a project: Patch-For-Review.Jun 29 2023, 6:10 PM
Catrope moved this task from Code Review to Pending Release on the Design-System-Team (Design-Systems-Sprint-2) board.Jun 29 2023, 6:28 PM
gerritbot added a comment.Jul 5 2023, 6:37 PM

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

[mediawiki/core@master] Update Codex from v0.13.0 to v0.14.0

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

gerritbot added a project: Patch-For-Review.Jul 5 2023, 6:37 PM
PatchDemoBot added a comment.Jul 5 2023, 7:11 PM

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

gerritbot added a comment.Jul 5 2023, 7:32 PM

Change 935794 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.13.0 to v0.14.0

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

Maintenance_bot removed a project: Patch-For-Review.Jul 5 2023, 8:11 PM
Catrope closed this task as Resolved.Jul 6 2023, 7:36 PM
PatchDemoBot added a comment.Aug 16 2023, 6:45 PM

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

https://patchdemo.wmflabs.org/wikis/64dc3126c0/w/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL