Page MenuHomePhabricator
Create Task
Maniphest T348608

Use multi-column layout on various component's interaction states list
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

Background/Goal

We've agreed on adding “Interaction states” section to MVP guidelines, but we're dealing with long lists in a number of components, that should be split up in multi-column CSS layouts in order to be simpler readable.

CurrentExpected
image.png (774×1 px, 65 KB)
image.png (594×1 px, 58 KB)

Reference

Acceptance criteria

  • Add multi-column layout to VitePress custom CSS and use it on Checkbox, ChipInput, Field, Radio, Select, ToggleSwitch, TextInput, TextArea components

Details

SubjectRepoBranchLines +/-
Update Codex from v1.0.0-rc.1 to v1.0.0mediawiki/coreREL1_41+9 K -14
Update Codex from v1.0.0-rc.1 to v1.0.0mediawiki/coremaster+9 K -13
docs: Use CSS multi-column layout to display interaction statesdesign/codexmain+47 -5
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Oct 11 2023, 7:47 AM
Volker_E edited projects, added Design-System-Team (Design-Systems-Sprint-10); removed Design-System-Team.Oct 11 2023, 8:20 AM
lwatson updated the task description. (Show Details)Oct 11 2023, 2:47 PM
lwatson updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Oct 11 2023, 5:29 PM
Volker_E updated the task description. (Show Details)Oct 11 2023, 6:13 PM
Volker_E set the point value for this task to 2.Oct 11 2023, 6:47 PM
gerritbot added a comment.Oct 11 2023, 9:21 PM

Change 965251 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] docs: Use CSS multi-column layout to display interaction states

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

gerritbot added a project: Patch-For-Review.Oct 11 2023, 9:21 PM
lwatson moved this task from Committed to In Progress on the Design-System-Team (Design-Systems-Sprint-10) board.Oct 11 2023, 9:22 PM
Volker_E moved this task from Inbox to Contributor Experience on the Codex board.Oct 13 2023, 5:21 AM
bmartinezcalvo mentioned this in T347313: Component's guidelines (post-MVP): pending fixes and improvements.Oct 13 2023, 10:36 AM
lwatson changed the task status from Open to In Progress.Oct 13 2023, 6:43 PM
lwatson updated the task description. (Show Details)
lwatson moved this task from In Progress to Code Review on the Design-System-Team (Design-Systems-Sprint-10) board.Oct 16 2023, 4:41 PM
gerritbot added a comment.Oct 20 2023, 8:48 PM

Change 965251 merged by jenkins-bot:

[design/codex@main] docs: Use CSS multi-column layout to display interaction states

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

Catrope moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-Systems-Sprint-10) board.Oct 20 2023, 8:53 PM
Maintenance_bot removed a project: Patch-For-Review.Oct 20 2023, 9:10 PM
bmartinezcalvo moved this task from Design Sign-Off to Pending Release on the Design-System-Team (Design-Systems-Sprint-10) board.Oct 23 2023, 11:07 AM

I've reviewed the components listed in the task and their Interaction States lists look good.

Reviewing the demos I've found some improvements for next iterations:

  1. In order to view both image and states' list in the same scroll, the columns could be included always there are more then 5 states in the list. So the following components could also include 2 columns: Accordion, ButtonGroup, Combobox, Link, Lookup, MenuItem, Tab, ToggleButton, ToggleButtonGroup, TypeaheadSearch.
  1. Reviewing the columns in the demo, I've realized that the states' list would be more readable if we read the states from left-right and top-bottom:
12
34
56

Since these are new improvements for the future, let's solve this task and if you agree with these new changes, I can create a new task for them.

gerritbot added a comment.Oct 24 2023, 7:27 PM

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

[mediawiki/core@master] Update Codex from v1.0.0-rc.1 to v1.0.0

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

gerritbot added a project: Patch-For-Review.Oct 24 2023, 7:27 PM
PatchDemoBot added a comment.Oct 24 2023, 7:30 PM

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

gerritbot added a comment.Oct 24 2023, 8:02 PM

Change 968345 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.0.0-rc.1 to v1.0.0

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

Maintenance_bot removed a project: Patch-For-Review.Oct 24 2023, 8:11 PM
gerritbot added a comment.Oct 24 2023, 10:46 PM

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

[mediawiki/core@REL1_41] Update Codex from v1.0.0-rc.1 to v1.0.0

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

gerritbot added a project: Patch-For-Review.Oct 24 2023, 10:46 PM
gerritbot added a comment.Oct 24 2023, 11:08 PM

Change 968370 merged by jenkins-bot:

[mediawiki/core@REL1_41] Update Codex from v1.0.0-rc.1 to v1.0.0

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

Maintenance_bot removed a project: Patch-For-Review.Oct 24 2023, 11:11 PM
AnneT closed this task as Resolved.Oct 25 2023, 3:29 PM
lwatson mentioned this in T350196: docs: refactor CSS multi-column layout.Nov 8 2023, 10:18 AM
PatchDemoBot added a comment.Tue, Apr 23, 3:51 PM

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

https://patchdemo.wmflabs.org/wikis/b8a4f83606/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