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)
- 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)
- Improve List of Icons (T301038)
- 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: