Page MenuHomePhabricator

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

Description

Background/Goal

This epic is for improvements to our Codex demo 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', 'Lato', 'Helvetica', 'Arial', sans-serif (@font-family-sans)

    font family serif: 'Linux Libertine', 'Georgia', 'Times', 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
OpenNone
DeclinedNone
ResolvedDannyS712
ResolvedAnneT
ResolvedAnneT
ResolvedDAbad
OpenNone
ResolvedDannyS712
InvalidNone
DuplicateNone
OpenNone
ResolvedAnneT
ResolvedDannyS712
OpenNone
In ProgressNone
OpenNone
OpenNone
ResolvedDAbad
OpenNone
OpenNone
OpenNone
OpenNone
OpenSpikeNone
OpenNone
OpenDAbad

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: visual improvements to Codex Demo Improvements.Mar 23 2022, 3:44 PM
STH updated the task description. (Show Details)

Change 780644 had a related patch set uploaded (by DannyS712; author: DannyS712):

[design/codex@main] docs, Wrapper: use ToggleButton for show/hide code

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

Change 780644 merged by jenkins-bot:

[design/codex@main] docs, Wrapper: use ToggleButton for show/hide code

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

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