Redesign the Codex demo to organize the CSS-only components in a separate section
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	bmartinezcalvo
	Dec 21 2022, 3:27 PM

Description

Background/Goal

CSS-only components were included in Codex (T321351). At the moment, both default and CSS-only demos are listed in the same page, so the demos are too long. We could redesign the Codex demo page in order to separate the CSS-only demos from the default ones.

User stories

As a user I need to understand that CSS-components are just a new implementation for our Codex components.
As a user I need to visualize in the Codex demo both normal and CSS-only components.

Design proposal

What if we separate the normal version from the CSS-only one with Tabs? (check prototype)

CSS-only components.png (1×2 px, 364 KB)

Acceptance criteria (or Done)

Redesign the Codex demo to show the CSS-only components

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T330468 [EPIC] Enable use of CSS-only Codex components in MediaWiki
Resolved	Jdlrobson	T326587 Replace core Message Box styles with Codex equivalents
Resolved	None	T321351 [EPIC] Add CSS-only components
Resolved	AnneT	T325105 [Epic] Add CSS-only versions of most Codex Vue components
Duplicate	None	T325751 Redesign the Codex demo to organize the CSS-only components in a separate section

Event Timeline

bmartinezcalvo created this task.Dec 21 2022, 3:27 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 21 2022, 3:27 PM

bmartinezcalvo mentioned this in T304062: docs: Codex doc site visual design/user experience improvements.Dec 21 2022, 3:28 PM

bmartinezcalvo added a parent task: T321351: [EPIC] Add CSS-only components.

Adjusted priority based on DST prioritization guidance

At the moment, CSS-only components are added as a section on each component's demo. Since the normal component and the CSS-only one have the same properties to be explained, the CSS-only section seems a bit redundant in some cases.

What if we separate the normal version from the CSS-only one with Tabs? (check prototype)

ldelench_wmf edited parent tasks, added: T325105: [Epic] Add CSS-only versions of most Codex Vue components; removed: T321351: [EPIC] Add CSS-only components.Feb 17 2023, 11:41 PM

AnneT moved this task from Backlog to Codex Adoption on the Codex board.Mar 1 2023, 4:37 PM

bmartinezcalvo updated the task description. (Show Details)Mar 13 2023, 4:30 PM

bmartinezcalvo renamed this task from Redesign the Codex demo to visualize the CSS-only components to Redesign the Codex demo to organize the CSS-only components in a separate section.Jan 9 2024, 2:43 PM

bmartinezcalvo updated the task description. (Show Details)

The work to rethink the information architecture of the component pages on the doc site is already being tackled in T355415.

CCiufo-WMF closed this task as a duplicate of T355415: Components Guidelines: Explore solutions to make its images easier to maintain.Feb 12 2024, 4:41 PM

Redesign the Codex demo to organize the CSS-only components in a separate sectionClosed, DuplicatePublicActions