Page MenuHomePhabricator

docs: Codex doc site visual design/user experience improvements
Open, LowPublic

Description

NOTE: This task is a resource and not associated with a specific deliverable.

Background/Goal

This epic is for improvements to our Codex documentation pages, with the goal of making them clear and consistent for use by the community.

Visual design/user experience improvements:

  • All elements included in the content section of the Components demo page (e.g., control tables) should take over all the available space. This is in order to make all content properly aligned vertically.
  • The demo site's font stacks should match those of the system (documented in the design tokens):

    font family sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Lato', 'Helvetica', 'Arial', sans-serif (@font-family-sans)

    font family serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif (@font-family-serif)
  • The LTR/RTL selector is a perfect use case for a future ToggleButton group component and should be replaced by it whenever possible, until then it should use ToggleButton components instead of normal Button (T305278)

    Screenshot 2022-03-17 at 12.30.59.png (102×336 px, 6 KB)
  • The show code/hide code button should be a ToggleButton
  • Improve the structure of token documentation pages (T302037)
  • Improve the design of configurable component demos (T295505)
  • Add configurable demo for all Codex components T321891
  • Design a theme selector for the component demos (T305271)
  • Reorder left menu sections (T305353) – with new site architecture the main menu items got reordered
  • Improve the LTR/RTL selector (T309589)
  • Improve spacing token swatches (T310136)
  • Increase the padding in the Codex demo box (T323684)
  • Replace icon in "Features > Icons" (T323753)
  • Card with Thumbnail in the "Resources" section (T323761)
  • Improve the visual hierarchy between sections in Codex (T325055)
  • Use message component in TIP and WARNING notes in Codex (T325063)
  • Use a quiet toggle button for "Show code" button in Codex demos (T322459)
  • Redesign the Codex demo to visualize the CSS-only components (T325751)

Design specs

You can view some of the solutions proposed in this Figma file.

You can also view the improvements in these prototypes:

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
ResolvedAnneT
DeclinedNone
ResolvedDannyS712
ResolvedAnneT
ResolvedAnneT
ResolvedDAbad
OpenNone
ResolvedDannyS712
InvalidNone
DuplicateNone
Resolvedlwatson
ResolvedSgs
ResolvedAnneT
ResolvedDannyS712
ResolvedAnneT
ResolvedVolker_E
OpenNone
OpenNone
ResolvedDAbad
OpenNone
OpenNone
OpenNone
OpenNone
OpenSpikeNone
OpenNone
ResolvedVolker_E
OpenNone
ResolvedVolker_E
OpenBUG REPORTVolker_E

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
STH renamed this task from Codex Demo Improvements to Codex Demo Documentation Improvements.Apr 26 2022, 12:07 AM
STH triaged this task as Low priority.

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

[design/codex@main] docs: Restructure tokens overview documentation and inter-link

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

Change 799434 merged by jenkins-bot:

[design/codex@main] docs: Restructure tokens overview documentation and inter-link

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

Sarai-WMDE renamed this task from Codex Demo Documentation Improvements to Codex Demo site improvements.May 30 2022, 3:25 PM

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

[design/codex@main] docs: Expand “ADRs” menu label slightly

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

Change 802815 merged by jenkins-bot:

[design/codex@main] docs: Expand “ADRs” menu label slightly

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

Volker_E renamed this task from Codex Demo site improvements to Codex Demo site visual design/user experience improvements.Sep 21 2022, 7:47 PM
Volker_E added a project: Design.
Volker_E renamed this task from Codex Demo site visual design/user experience improvements to docs: Codex Demo site visual design/user experience improvements.Sep 21 2022, 10:41 PM
AnneT changed the status of subtask T309589: Move the LTR/RTL selector from Open to In Progress.Nov 9 2022, 4:03 PM
CCiufo-WMF renamed this task from docs: Codex Demo site visual design/user experience improvements to docs: Codex doc site visual design/user experience improvements.Jan 9 2024, 3:52 PM
CCiufo-WMF updated the task description. (Show Details)